/* senal.css — el rediseño de 08/2026.
 *
 * Va DESPUÉS de styles.css y premium.css, y solo agrega: las secciones nuevas del sitio
 * reestructurado (la pregunta, el Pulso, el criterio, los rubros, la mantención) más el
 * fondo vivo del hero. Lo que ya estaba resuelto —oferta, letra chica, testimonios, FAQ,
 * portafolio, chat— se reusa tal cual y no se toca desde acá.
 *
 * La dirección visual del rediseño: el sitio ya no vende verse bien, vende SABER. Por eso
 * la firma tipográfica nueva es el mono (Geist Mono) en las etiquetas y en los números —
 * lenguaje de instrumento, no de folleto — y el fondo del hero respira en vez de estar
 * quieto. El lima sigue siendo el único acento; todo lo demás calla.
 */

:root{
  --ff-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ink-2:#0a0b09;          /* negro con sesgo verde, no gris puro */
  --panel-2:#101310;
  --linea-2:rgba(200,255,51,.14);
}

/* ============ FONDO VIVO (js/senal.js) ============
   El degradado de abajo NO es decorativo: es el respaldo. Si WebGL no arranca, el hero se
   ve igual de bien y nadie se entera. Ninguna animación puede ser la única razón por la
   que algo se ve. */
[data-senal]{ position:relative; isolation:isolate; background:var(--ink-2); }
[data-senal]::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 12% 18%, rgba(200,255,51,.20), transparent 58%),
    radial-gradient(100% 80% at 88% 82%, rgba(143,196,0,.16), transparent 62%),
    radial-gradient(90% 70% at 60% 0%,  rgba(200,255,51,.08), transparent 60%),
    var(--ink-2);
}
.senal__lienzo{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  display:block; opacity:0; transition:opacity .9s ease;
}
[data-senal].is-viva .senal__lienzo{ opacity:1; }
/* Velo: el ruido es lindo pero el texto manda. Va MÁS OSCURO del lado del texto y casi
   transparente del lado del mockup — un velo parejo apagaba el fondo entero y dejaba el
   hero en un negro plano, que es justo lo que este rediseño no quiere. */
[data-senal]::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,11,9,.88) 0%, rgba(10,11,9,.66) 38%, rgba(10,11,9,.12) 72%, rgba(10,11,9,.30) 100%),
    linear-gradient(180deg, rgba(10,11,9,.35) 0%, rgba(10,11,9,0) 30%, rgba(10,11,9,.55) 100%);
}
@media (max-width:900px){
  /* En el teléfono el texto ocupa el ancho completo: el velo vuelve a ser parejo o el
     titular queda sobre la parte clara del ruido y se pierde. */
  [data-senal]::after{
    background:linear-gradient(180deg, rgba(10,11,9,.80) 0%, rgba(10,11,9,.62) 40%, rgba(10,11,9,.55) 70%, rgba(10,11,9,.86) 100%);
  }
}
[data-senal] > .container{ position:relative; z-index:3; }

/* premium.js inyecta su propia luz ambiental en .hero; con el shader encima sobra.
   Se apaga desde acá y también desde premium.js (cinturón y tirantes). */
.hero--senal #sw-ambient{ display:none !important; }
.hero--senal .hero__grid{ display:none; }

/* ============ HERO ============ */
.hero--senal{ padding-block:clamp(5rem,10vh,7.5rem) clamp(4rem,8vh,6rem); overflow:hidden; }
.hero--senal .hero__inner{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); }
/* El titular es largo (dos frases) y con la escala vieja se comía cinco líneas y toda la
   pantalla. Se baja el techo y se le da su propio ancho. */
.hero--senal .hero__title{
  letter-spacing:-.035em; font-size:clamp(2.1rem,3.9vw,3.5rem);
  line-height:1.06; max-width:15ch; margin-bottom:.55em;
}
.hero--senal .hero__title em{
  /* premium.css pone el par serif itálico en cualquier <em> de titular. Acá no: el
     contraste que buscamos es de COLOR, no de familia — un Georgia gigante al lado del
     Geist se lee como un error de carga de fuente, no como una decisión. */
  font-family:inherit; font-style:normal; color:var(--lime); display:block;
}
.hero--senal .hero__lead{ max-width:44ch; }
/* Red de seguridad: la tarjeta del Pulso se ve aunque una animación se pierda. */
.hero--senal .hero__visual{ visibility:visible !important; }
.hero--senal .hero__pill{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
}
.hero__firma{
  display:block; margin-top:1.6rem; padding-top:1.2rem;
  border-top:1px solid var(--linea-2);
  color:rgba(255,255,255,.62); font-size:.95rem; line-height:1.6;
}
.hero__firma strong{ color:#fff; }
.hero__firma svg{ display:none; }   /* el check del layout viejo no aplica a la firma */

/* ============ LA PREGUNTA ============ */
.pregunta__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.pregunta__texto{ margin:1.8rem 0 1rem; color:rgba(255,255,255,.72); }
.pregunta__lista{ list-style:none; counter-reset:pq; margin:0 0 1.8rem; padding:0; }
.pregunta__lista li{
  counter-increment:pq; position:relative; padding:.85rem 0 .85rem 2.6rem;
  border-top:1px solid var(--linea-2); color:rgba(255,255,255,.66); line-height:1.6;
}
.pregunta__lista li:last-child{ border-bottom:1px solid var(--linea-2); }
.pregunta__lista li::before{
  content:counter(pq,decimal-leading-zero); position:absolute; left:0; top:.95rem;
  font-family:var(--ff-mono); font-size:.72rem; color:var(--lime); letter-spacing:.04em;
}
.pregunta__lista b{ color:#fff; font-weight:600; }
.pregunta__cierre{
  padding:1.1rem 1.2rem; border-radius:12px; margin:0;
  background:rgba(200,255,51,.06); border-left:3px solid var(--lime);
  color:rgba(255,255,255,.78); line-height:1.65;
}
.pregunta__cierre strong{ color:#fff; }
.pregunta__foto{ position:sticky; top:6rem; }
.pregunta__foto img{
  width:100%; height:auto; display:block; border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}

/* ============ EL PULSO ============ */
.pulso__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; margin-bottom:2.4rem;
}
.pulso__item{
  padding:1.6rem 1.3rem; border-radius:16px;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  transition:border-color .25s ease, transform .25s ease;
}
.pulso__item:hover{ border-color:var(--linea-2); transform:translateY(-3px); }
.pulso__n{
  display:block; font-family:var(--ff-mono); font-size:.74rem; color:var(--lime);
  letter-spacing:.1em; margin-bottom:.9rem;
}
.pulso__item h3{ font-size:1.08rem; margin:0 0 .55rem; color:#fff; letter-spacing:-.01em; }
.pulso__item p{ margin:0; font-size:.93rem; line-height:1.6; color:rgba(255,255,255,.6); }

.pulso__nota{
  padding:clamp(1.6rem,3vw,2.4rem); border-radius:18px;
  background:linear-gradient(135deg, rgba(200,255,51,.09), rgba(200,255,51,.02));
  border:1px solid var(--linea-2);
}
.pulso__nota h3{ margin:0 0 .7rem; font-size:1.3rem; color:#fff; letter-spacing:-.02em; }
.pulso__nota p{ margin:0 0 .7rem; color:rgba(255,255,255,.74); line-height:1.7; max-width:74ch; }
.pulso__nota-fine{ font-size:.88rem; color:rgba(255,255,255,.5) !important; margin-bottom:0 !important; }

/* ============ RUBROS ============ */
.rubros__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; }
.rubro{ margin:0; border-radius:16px; overflow:hidden; background:var(--panel-2);
  border:1px solid rgba(255,255,255,.07); }
.rubro img{
  width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  filter:saturate(.82) contrast(1.03); transition:transform .5s var(--ease-premium,ease), filter .35s ease;
}
.rubro:hover img{ transform:scale(1.04); filter:saturate(1) contrast(1.05); }
.rubro figcaption{ padding:1.1rem 1.15rem 1.3rem; display:block; }
.rubro figcaption b{ display:block; color:#fff; font-size:1rem; margin-bottom:.4rem; letter-spacing:-.01em; }
.rubro figcaption span{ display:block; font-size:.88rem; line-height:1.55; color:rgba(255,255,255,.55); }

/* ============ MANTENCIÓN ============ */
/* align-items:start para que cada tarjeta mida lo que dice. Estiradas a la altura de la
   fila, las dos cortas quedaban con media tarjeta vacía debajo del texto. */
.mant__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; align-items:start; }
.mant{
  padding:1.9rem 1.7rem; border-radius:16px;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
}
.mant h3{
  margin:0 0 1rem; font-size:1.15rem; color:#fff; letter-spacing:-.015em;
  padding-bottom:.8rem; border-bottom:1px solid var(--linea-2);
}
.mant ul{ list-style:none; margin:0; padding:0; }
.mant li{
  position:relative; padding:.5rem 0 .5rem 1.4rem; font-size:.93rem; line-height:1.6;
  color:rgba(255,255,255,.66);
}
.mant li::before{
  content:""; position:absolute; left:0; top:1.05rem; width:6px; height:6px; border-radius:50%;
  background:var(--lime); opacity:.75;
}
.mant p{ margin:0 0 .8rem; color:rgba(255,255,255,.7); line-height:1.7; }
.mant__frase{
  font-family:var(--ff-title); font-weight:600; font-size:1.12rem; color:var(--lime) !important;
  line-height:1.45 !important; margin:1rem 0 !important;
}
.mant__fine{ font-size:.86rem; color:rgba(255,255,255,.46) !important; margin-bottom:0 !important; }
.mant__plazos li{ padding-left:0; }
.mant__plazos li::before{ display:none; }
.mant__plazos b{
  display:inline-block; min-width:9.5em; font-family:var(--ff-mono); font-size:.8rem;
  color:var(--lime); font-weight:500;
}

/* ============ CTA FINAL SOBRE EL FONDO VIVO ============ */
.cta-final--senal{ overflow:hidden; }
.cta-final--senal .cta-final__box{ background:transparent; border:0; box-shadow:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .pulso__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rubros__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .pregunta__grid{ grid-template-columns:1fr; }
  .pregunta__foto{ position:static; order:-1; }
  .pregunta__foto img{ max-height:280px; object-fit:cover; }
  .crit__grid{ grid-template-columns:1fr; }
  .mant__grid{ grid-template-columns:1fr; }
  .hero--senal{ padding-block:5rem 3.5rem; }
  /* En el teléfono la tarjeta va DEBAJO del texto: el titular es lo que tiene que
     aparecer primero, y una tarjeta de 400px arriba lo empuja fuera de pantalla. */
  .hero--senal .hero__visual{ margin-top:2.4rem; }
}
@media (max-width:640px){
  .pulso__grid{ grid-template-columns:1fr; }
  .rubros__grid{ grid-template-columns:1fr; }
  .pulsocard{ padding:1.15rem 1.15rem .95rem; }
  .pulsocard__row{ grid-template-columns:1fr 1fr; gap:.7rem; }
  .pulsocard__row b{ font-size:1.25rem; }
  .mant{ padding:1.5rem 1.25rem; }
  .crit{ padding:1.5rem 1.25rem; }
  .mant__plazos b{ min-width:0; display:block; margin-bottom:.15rem; }
}

@media (prefers-reduced-motion: reduce){
  .pulsocard__marca i{ animation:none; }
  .rubro img{ transition:none; }
  .pulsocard{ transition:none; }
}

/* ==========================================================================
   ITERACIÓN 2 (12/08/2026, noche) — el sitio se acerca al Pulso
   ==========================================================================
   Patrick: "que el sitio tenga parecido y estructura similar al pulso que fabricamos,
   títulos grandes, etc". Lo que se toma prestado de la presentación del Pulso:
   titulares enormes con tracking cerrado, etiquetas en mono con su raya lima delante,
   cifras fantasma gigantes de fondo, y divisiones finas en vez de cajas.
   ========================================================================== */

/* Titular grande — el gesto que más se nota del Pulso */
.titulon{
  font-family:var(--ff-title); font-weight:800;
  font-size:clamp(2.1rem,4.6vw,3.9rem); line-height:1.02; letter-spacing:-.038em;
  color:#fff; margin:0 0 1rem; max-width:19ch;
}
.titulon--c{ max-width:22ch; margin-inline:auto; text-align:center; }

/* Etiqueta con raya, igual que los rótulos de cada escena del informe */
.eyebrow--linea{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow--linea::before{
  content:""; width:26px; height:1px; background:var(--lime); flex:none;
}
.section__head .section__sub{ margin-inline:auto; }

/* ============ HERO MINIMALISTA ============ */
.hero--min{ min-height:min(92svh,900px); display:flex; align-items:center; }
.hero--min .hero__inner{ grid-template-columns:1fr; }
.hero--min .hero__title{ max-width:16ch; font-size:clamp(2.3rem,5.4vw,4.4rem); }
.hero--min .hero__lead{ max-width:46ch; }
.hero--min .hero__firma{ max-width:34ch; }

/* Marcas de herramienta de diseño: guías, esquinas y una cota. Es la única decoración
   del hero y por eso puede ser fina — si se nota mucho deja de ser un detalle. */
.guias{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.guias__v{
  position:absolute; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(200,255,51,.16) 22%, rgba(200,255,51,.16) 78%, transparent);
}
.guias__v--i{ left:max(2.2rem, calc((100% - 1180px) / 2 - 1.6rem)); }
.guias__v--d{ right:max(2.2rem, calc((100% - 1180px) / 2 - 1.6rem)); }
.guias__esq{ position:absolute; width:14px; height:14px; border:1px solid rgba(200,255,51,.42); }
.guias__esq--ti{ top:2.2rem; left:2.2rem; border-right:0; border-bottom:0; }
.guias__esq--td{ top:2.2rem; right:2.2rem; border-left:0; border-bottom:0; }
.guias__esq--bi{ bottom:2.2rem; left:2.2rem; border-right:0; border-top:0; }
.guias__esq--bd{ bottom:2.2rem; right:2.2rem; border-left:0; border-top:0; }
.guias__cota{
  position:absolute; bottom:2.1rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.26);
}
.guias__cota i{ display:block; width:34px; height:1px; background:rgba(255,255,255,.16); }

.hero__baja{
  position:absolute; bottom:5.2rem; left:50%; transform:translateX(-50%); z-index:4;
  width:22px; height:34px; border:1px solid rgba(255,255,255,.22); border-radius:12px;
  display:grid; place-items:start center; padding-top:6px;
}
.hero__baja span{ width:2px; height:6px; border-radius:2px; background:var(--lime); animation:bajita 1.9s ease-in-out infinite; }
@keyframes bajita{ 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(9px);opacity:.35} }

/* ============ SECCIÓN DEL PULSO ============ */
.pulsosec__cab{ text-align:center; margin-bottom:2.6rem; }
/* La marca: la palabra "Puls" más un disco lima donde va la o. No hay símbolo aparte
   (dirección elegida por Patrick, 12/08). El latido empieza y termina en scale(1) a
   propósito: si el reloj de animaciones se arrastra, la marca igual queda entera. */
.pulsomarca{
  display:inline-flex; align-items:center; margin-bottom:1.4rem;
  font-family:var(--ff-title); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.9rem,3.4vw,2.6rem); color:#fff;
}
.pulsomarca i{
  width:.6em; height:.6em; border-radius:50%; background:var(--lime); margin-left:.05em;
  display:inline-block; animation:latido 2.8s ease-in-out infinite;
}
@keyframes latido{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1);opacity:.5} }
.pulsosec__bajada{
  max-width:56ch; margin:0 auto 1rem; font-size:clamp(1.05rem,1.7vw,1.25rem);
  line-height:1.65; color:rgba(255,255,255,.82);
}
.pulsosec__simple{ max-width:58ch; margin:0 auto; color:rgba(255,255,255,.5); line-height:1.7; }

.pulsovid{ margin:0 0 2.6rem; }
.pulsovid__marco{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(200,255,51,.08) inset;
  background:#000; aspect-ratio:16/10;
}
.pulsovid__v{ width:100%; height:100%; display:block; object-fit:cover; }
.pulsovid__play{
  position:absolute; inset:0; width:100%; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  background:linear-gradient(180deg, rgba(10,11,9,.30), rgba(10,11,9,.62));
  color:#fff; font-family:var(--ff-title); font-weight:600; font-size:1rem;
  transition:background .25s ease;
}
.pulsovid__play:hover{ background:linear-gradient(180deg, rgba(10,11,9,.20), rgba(10,11,9,.52)); }
.pulsovid__play svg{
  width:26px; height:26px; padding:1.05rem; box-sizing:content-box;
  background:var(--lime); color:#0a0b09; border-radius:50%;
  box-shadow:0 12px 40px rgba(200,255,51,.36);
  transition:transform .25s ease;
}
.pulsovid__play:hover svg{ transform:scale(1.07); }
.pulsovid__pie{
  margin-top:.9rem; text-align:center; font-family:var(--ff-mono);
  font-size:.7rem; letter-spacing:.04em; color:rgba(255,255,255,.4);
}

/* ============ LAS CUATRO DECISIONES ============ */
.dec__cab{ display:flex; align-items:center; gap:clamp(1.4rem,3vw,3rem); margin-bottom:3rem; }
/* La cifra fantasma, igual que los 01/03/07 gigantes del informe */
.dec__cifra{
  font-family:var(--ff-title); font-weight:800; line-height:.78; letter-spacing:-.06em;
  font-size:clamp(7rem,16vw,15rem); flex:none;
  background:linear-gradient(180deg, rgba(200,255,51,.9), rgba(200,255,51,.06));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dec__cab .titulon{ margin-bottom:.5rem; }
.dec__cab .section__sub{ margin:0; }

.dec__lista{ border-top:1px solid var(--linea-2); }
.dec{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(1.2rem,3vw,2.6rem);
  align-items:start; padding:clamp(1.6rem,3vw,2.4rem) 0;
  border-bottom:1px solid var(--linea-2); transition:background .3s ease;
}
.dec:hover{ background:rgba(200,255,51,.028); }
.dec__n{
  font-family:var(--ff-mono); font-size:.78rem; color:var(--lime); letter-spacing:.1em;
  padding-top:.5rem;
}
.dec__cuerpo h3{
  font-family:var(--ff-title); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(1.4rem,2.6vw,2.05rem); line-height:1.12; color:#fff; margin:0 0 .7rem;
}
.dec__cuerpo p{ margin:0; color:rgba(255,255,255,.62); line-height:1.75; max-width:62ch; }
.dec__clave{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-align:right; padding-top:.6rem; white-space:nowrap;
}

/* ============ LA MUESTRA · mecanismo ============ */
.muestra__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.mec{ list-style:none; margin:2.2rem 0 0; padding:0; }
.mec__paso{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.3rem;
  padding:1.4rem 0; border-top:1px solid var(--linea-2);
}
.mec__paso:last-child{ border-bottom:1px solid var(--linea-2); }
.mec__n{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--linea-2); color:var(--lime);
  font-family:var(--ff-mono); font-size:.85rem;
}
.mec__paso h3{ font-size:1.12rem; color:#fff; margin:.3rem 0 .45rem; letter-spacing:-.015em; }
.mec__paso p{ margin:0; color:rgba(255,255,255,.62); line-height:1.68; }
.muestra__foto{ margin:0; position:sticky; top:6rem; }
.muestra__foto img{
  width:100%; height:auto; display:block; border-radius:18px;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.muestra__foto figcaption{
  margin-top:.85rem; font-family:var(--ff-mono); font-size:.7rem;
  letter-spacing:.05em; color:rgba(255,255,255,.42); text-align:center;
}

/* ============ PROYECTOS ============ */
.proy__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }
.proy{
  border-radius:18px; overflow:hidden; background:var(--panel-2);
  border:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}
.proy:hover{ border-color:var(--linea-2); transform:translateY(-4px); }
.proy__shot{ position:relative; overflow:hidden; background:#000; }
.proy__shot img{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; display:block;
  transition:transform .6s ease;
}
.proy:hover .proy__shot img{ transform:scale(1.03); }
.proy__tag{
  position:absolute; top:.9rem; left:.9rem; padding:.28rem .65rem; border-radius:99px;
  font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.proy__tag--vivo{ background:rgba(200,255,51,.9); color:#0a0b09; }
.proy__tag--prod{ background:rgba(255,255,255,.86); color:#0a0b09; }
.proy__tag--prop{ background:rgba(10,11,9,.7); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.2); }
.proy__body{ padding:1.5rem 1.5rem 1.7rem; }
.proy__rubro{
  display:block; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:.5rem;
}
.proy__body h3{
  font-family:var(--ff-title); font-weight:700; font-size:1.45rem; letter-spacing:-.025em;
  color:#fff; margin:0 0 1.1rem;
}
.proy__foco, .proy__idea{ margin:0 0 .9rem; color:rgba(255,255,255,.66); line-height:1.65; font-size:.94rem; }
.proy__idea{ margin-bottom:0; }
.proy__foco span, .proy__idea span{
  display:block; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lime); margin-bottom:.3rem;
}
.proy__idea span{ color:rgba(255,255,255,.38); }

/* ============ ADICIONALES EN LÍNEA ============ */
.extras{ margin:2.4rem 0 0; padding-top:2rem; border-top:1px solid var(--linea-2); }
.extras__t{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.42); margin:0 0 1.4rem; font-weight:400;
}
.extras__lista{ margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.extra dt{
  font-family:var(--ff-title); font-weight:600; font-size:1.05rem; color:#fff;
  margin-bottom:.55rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.extra__marca{
  display:inline-flex; align-items:center; gap:.3rem; font-family:var(--ff-body);
  font-size:.68rem; font-weight:400; color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.12); border-radius:99px; padding:.15rem .5rem;
}
.extra dd{ margin:0 0 .5rem; color:rgba(255,255,255,.58); line-height:1.6; font-size:.92rem; }
.extra__p{ font-family:var(--ff-mono); font-size:.82rem; color:rgba(255,255,255,.72) !important; }
.extra__p b{ color:var(--lime); font-weight:500; }
.extra__logo{ vertical-align:-2px; margin:0 .1rem; }
.extra--focalis dt{ color:rgba(255,255,255,.86); }

/* ============ TESTIMONIOS · pila ============ */
.pila{ position:relative; max-width:640px; margin:0 auto; padding-bottom:3rem; min-height:290px; }
.testic{
  position:absolute; inset:0 0 auto; padding:2rem 2rem 1.8rem; border-radius:20px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 26px 70px rgba(0,0,0,.5);
  cursor:grab; user-select:none;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
}
.testic.is-drag{ transition:none; cursor:grabbing; }
.testic__top{ display:flex; align-items:center; gap:1rem; margin-bottom:1.3rem; }
.testic__ava{
  width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center;
  font-family:var(--ff-title); font-weight:700; font-size:.95rem; color:#0a0b09;
}
.testic__top b{ display:block; color:#fff; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }
/* Ojo: el selector va acotado a >div. Como .testic__ava también es un span dentro de
   .testic__top, la regla del rol le ganaba por especificidad y le pintaba las iniciales
   en gris de 11 px sobre el disco lima — se veía un cuadrado vacío. */
.testic__top > div span{ display:block; font-family:var(--ff-mono); font-size:.72rem; color:rgba(255,255,255,.5); margin-top:.15rem; }
.testic blockquote{
  margin:0; color:rgba(255,255,255,.88); font-size:1.08rem; line-height:1.65;
}
.pila__puntos{ position:absolute; bottom:0; left:0; right:0; display:flex; gap:.5rem; justify-content:center; }
.pila__puntos button{
  width:7px; height:7px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.22); transition:background .25s ease, width .25s ease;
}
.pila__puntos button.is-on{ background:var(--lime); width:22px; border-radius:99px; }

/* ============ CIERRE ============
   Fondo de foto y no de lima: el verde a pantalla completa cansaba y le quitaba peso al
   único argumento que cierra la venta. */
.cierre{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(5rem,10vw,8rem); }
.cierre__fondo{ position:absolute; inset:0; z-index:0; }
.cierre__fondo img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) brightness(.92); }
.cierre::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(66% 62% at 50% 48%, rgba(10,11,9,.86), rgba(10,11,9,.5) 78%),
    linear-gradient(180deg, rgba(10,11,9,.92), rgba(10,11,9,.25) 42%, rgba(10,11,9,.94));
}
.cierre__inner{ position:relative; z-index:2; }
.cierre__box{ max-width:620px; margin:0 auto; text-align:center; }
.cierre__box .titulon{ margin-inline:auto; max-width:16ch; }
.cierre__sub{ color:rgba(255,255,255,.72); font-size:1.05rem; line-height:1.7; margin:0 auto 1.8rem; max-width:48ch; }
.cierre__list{
  list-style:none; margin:0 0 2rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.cierre__list li{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.05em;
  color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.16);
  border-radius:99px; padding:.4rem .9rem;
}
.cierre__cont{ margin:1.4rem 0 0; font-size:.9rem; color:rgba(255,255,255,.45); }

/* ============ PIE NEGRO ============
   Negro entero, sin degradado (Patrick, 12/08). Cierra la página con un corte seco. */
.site-footer.footer--clay{ background:#000 !important; border-top:1px solid rgba(255,255,255,.07); }
.site-footer.footer--clay::before, .site-footer.footer--clay::after{ display:none !important; }
.footer--clay .fc-top, .footer--clay .fc-mid, .footer--clay .fc-bottom{ background:transparent; }

/* ============ RESPONSIVE ITERACIÓN 2 ============ */
@media (max-width:1024px){
  .extras__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dec__cab{ gap:1.2rem; }
}
@media (max-width:900px){
  .muestra__grid{ grid-template-columns:1fr; }
  .muestra__foto{ position:static; order:-1; }
  .dec__cab{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  .dec__cifra{ font-size:clamp(5rem,22vw,8rem); }
  .dec{ grid-template-columns:auto minmax(0,1fr); }
  /* La clave pasa debajo del texto: al costado, en 390 px, partía las palabras en dos. */
  .dec__clave{ grid-column:2; text-align:left; padding-top:.9rem; white-space:normal; }
  .guias__v{ display:none; }
  .hero--min{ min-height:auto; }
  .hero__baja{ display:none; }
}
@media (max-width:700px){
  .proy__grid{ grid-template-columns:1fr; }
  .extras__lista{ grid-template-columns:1fr; gap:1.6rem; }
  .pulsovid__marco{ aspect-ratio:4/3; }
  .pulsovid__play span{ font-size:.9rem; }
  .testic{ padding:1.5rem 1.4rem 1.4rem; }
  .testic blockquote{ font-size:1rem; }
  .pila{ min-height:340px; }
}
@media (prefers-reduced-motion: reduce){
  .pulsomarca i, .hero__baja span{ animation:none; }
  .testic{ transition:none; }
}

/* Hero centrado (ajuste tras mirarlo): alineado a la izquierda dejaba media pantalla
   vacía a la derecha, que en un hero sin mockup se lee como que falta algo. Centrado, el
   titular usa todo el ancho y el vacío pasa a ser aire a propósito. */
.hero--min .hero__inner{ justify-items:center; text-align:center; }
.hero--min .hero__copy{ display:flex; flex-direction:column; align-items:center; }
.hero--min .hero__title{ max-width:20ch; }
.hero--min .hero__lead{ max-width:52ch; }
.hero--min .hero__cta{ justify-content:center; }
.hero--min .hero__firma{ max-width:none; text-align:center; }
.hero--min .hero__pill{ align-self:center; }
/* El indicador de bajar se pisaba con la cota del pie del hero. */
.hero--min .hero__baja{ bottom:2.1rem; left:auto; right:2.6rem; transform:none; }
.guias__cota{ left:2.6rem; transform:none; }

/* Dos frases en el titular, y solo las dos últimas palabras en lima. Con la frase entera
   en verde eran cuatro líneas fluorescentes: cansaba y le quitaba el golpe justo a lo que
   importa, que es "trayendo clientes". El acento vale cuando es escaso. */
.hero__t2{ display:block; color:rgba(255,255,255,.9); }
.hero--senal .hero__title em{ display:inline; }

/* La pila, corregida tras verla. El vidrio de la referencia funciona sobre un fondo claro;
   sobre negro, un blanco al 5% no tapa nada y se leían las tres citas encima de la otra.
   El fondo pasa a ser oscuro y sólido, y el "vidrio" queda en el borde y el desenfoque. */
.testic{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    rgba(13,15,12,.94);
}
/* Las de atrás asoman por ARRIBA y no se ven completas: apiladas al ras se leían como
   tarjetas superpuestas y no como una pila. */
.testic:not(:first-child){ box-shadow:0 -10px 40px rgba(0,0,0,.55); }
.pila{ min-height:330px; }
@media (max-width:700px){ .pila{ min-height:400px; } }

/* El logo de Focalis iba incrustado en medio de la frase y partía el párrafo en dos.
   Un logo dentro de una oración casi nunca cae bien: va el nombre en texto. */
.extra__focalis-n{ color:#fff; font-weight:600; }

/* ==========================================================================
   ITERACIÓN 3 (13/08/2026) — MacBook, fichas de proyecto, cinta y tarjetas
   ========================================================================== */

/* ============ SECCIÓN DEL PULSO · dos bloques ============ */
.pulsosec__cab{ display:none; }            /* la reemplazó el bloque horizontal */
.pulsosec__uno{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem);
  align-items:center; padding-bottom:clamp(2rem,4vw,3.2rem); margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--linea-2);
}
.pulsosec__marca .pulsomarca{ font-size:clamp(2.6rem,6vw,4.4rem); margin:0; }
.pulsosec__texto .titulon{ margin-bottom:.9rem; max-width:none; }
.pulsosec__texto .pulsosec__bajada,
.pulsosec__texto .pulsosec__simple{ margin-left:0; margin-right:0; }
/* La marca dentro del titular: hereda el tamaño de la línea para no descolgarse. */
.pulsomarca--inline{ font-size:inherit; margin:0; letter-spacing:-.038em; vertical-align:baseline; }
.pulsomarca--inline i{ width:.52em; height:.52em; }

/* ============ MOCKUP DE MACBOOK ============
   En CSS y no en imagen: pesa cero, se adapta a cualquier ancho y no hay que mantener un
   PNG con la pantalla recortada al pixel. */
.mac{ max-width:1000px; margin:0 auto; }
.mac__tapa{
  background:linear-gradient(160deg,#3a3d40,#1b1d1f 42%,#2a2d30);
  border-radius:14px; padding:11px 11px 13px;
  box-shadow:0 40px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.07) inset;
}
.mac__pantalla{
  position:relative; border-radius:6px; overflow:hidden; background:#000;
  aspect-ratio:16/10; box-shadow:0 0 0 1px rgba(0,0,0,.7) inset;
}
.mac__notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
  width:16%; height:9px; background:#1b1d1f; border-radius:0 0 6px 6px;
}
.mac__pantalla video{ width:100%; height:100%; display:block; object-fit:cover; }
.mac__base{
  height:12px; margin:0 auto; width:114%; max-width:none; position:relative; left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#33363a,#1c1e20 62%,#0e0f10);
  border-radius:0 0 10px 10px;
  box-shadow:0 16px 30px rgba(0,0,0,.55);
}
.mac__muesca{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:14%; height:5px; background:rgba(0,0,0,.5); border-radius:0 0 6px 6px;
}

/* ============ CUATRO DECISIONES · el 4 después del título ============ */
.dec__cab{ justify-content:space-between; align-items:flex-end; }
.dec__cab-txt{ flex:1 1 auto; min-width:0; }
.dec__cifra{ order:2; }

/* ============ PROYECTOS · tarjeta y ficha ============ */
.proy{ padding:0; }
.proy__btn{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  text-align:left; color:inherit; font:inherit;
}
.proy__shot{ display:block; position:relative; overflow:hidden; background:#000; }
.proy__shot img{
  width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center; display:block;
  transition:transform .6s ease;
}
.proy:hover .proy__shot img{ transform:scale(1.03); }
.proy__body{ display:block; padding:1.4rem 1.5rem 1.5rem; }
.proy__cat{
  display:block; font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:.5rem;
}
.proy__h{
  display:block; font-family:var(--ff-title); font-weight:700; font-size:1.4rem;
  letter-spacing:-.025em; color:#fff; margin-bottom:.55rem;
}
.proy__corta{ display:block; color:rgba(255,255,255,.62); line-height:1.6; font-size:.94rem; }
.proy__ver{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lime);
}
.proy__ver svg{ width:14px; height:14px; transition:transform .25s ease; }
.proy:hover .proy__ver svg{ transform:translateX(4px); }

/* La ficha, en vidrio sobre el sitio */
.ficha{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:clamp(1rem,3vw,2.5rem); }
.ficha__fondo{
  position:absolute; inset:0; background:rgba(6,7,6,.72);
  backdrop-filter:blur(14px) saturate(.9); -webkit-backdrop-filter:blur(14px) saturate(.9);
  opacity:0; transition:opacity .26s ease;
}
.ficha.is-on .ficha__fondo{ opacity:1; }
.ficha__panel{
  position:relative; z-index:2; width:min(1120px,100%); max-height:88vh; overflow:auto;
  border-radius:22px; padding:clamp(1.6rem,3.5vw,2.8rem);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), rgba(11,13,10,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 50px 120px rgba(0,0,0,.7);
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.ficha.is-on .ficha__panel{ opacity:1; transform:none; }
.ficha__cerrar{
  position:absolute; top:1rem; right:1rem; z-index:3;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  transition:background .2s ease;
}
.ficha__cerrar:hover{ background:rgba(255,255,255,.16); }
.ficha__cerrar svg{ width:17px; height:17px; }
.ficha__cuerpo{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(1.6rem,4vw,3rem); }
.ficha__cat{
  display:block; font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--lime); margin-bottom:.6rem;
}
.ficha__h{
  font-family:var(--ff-title); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.7rem,3.2vw,2.4rem); color:#fff; margin:0 0 1.6rem; line-height:1.05;
}
.ficha__bloque{ padding:1.1rem 0; border-top:1px solid var(--linea-2); }
.ficha__bloque:last-child{ border-bottom:1px solid var(--linea-2); }
.ficha__bloque span{
  display:block; font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:.45rem;
}
.ficha__bloque p{ margin:0; color:rgba(255,255,255,.72); line-height:1.7; }
.ficha__vistas{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr); gap:1.2rem; align-items:start; }
.vista{ margin:0; }
.vista figcaption{
  margin-top:.7rem; text-align:center; font-family:var(--ff-mono); font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.36);
}
/* Marco de navegador para la vista de escritorio */
.nav-mock{
  border-radius:10px; overflow:hidden; background:#0d0f0d;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 50px rgba(0,0,0,.55);
}
.nav-mock__barra{
  display:flex; align-items:center; gap:5px; padding:8px 10px;
  background:#17191a; border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-mock__barra i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); }
.nav-mock img{ width:100%; height:auto; display:block; }
/* Marco de celular para la vista móvil */
.fono-mock{
  position:relative; border-radius:26px; padding:7px; background:linear-gradient(160deg,#33363a,#141516);
  box-shadow:0 24px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.fono-mock__notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:2;
  width:34%; height:14px; background:#141516; border-radius:99px;
}
.fono-mock img{ width:100%; height:auto; display:block; border-radius:20px; }

/* ============ DESPUÉS DE PUBLICAR ============ */
.mant__princ{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(1.6rem,4vw,3rem);
  padding:clamp(1.8rem,3.5vw,2.6rem); border-radius:20px; margin-bottom:1.3rem;
  background:linear-gradient(135deg, rgba(200,255,51,.085), rgba(200,255,51,.015));
  border:1px solid var(--linea-2);
}
.mant__eti{
  display:inline-block; font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lime); margin-bottom:.7rem;
}
.mant__princ-txt h3{
  font-family:var(--ff-title); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.05; color:#fff; margin:0 0 .8rem;
}
.mant__princ-txt p{ margin:0; color:rgba(255,255,255,.62); line-height:1.7; }
.mant__princ-lista{ list-style:none; margin:0; padding:0; }
.mant__princ-lista li{
  position:relative; padding:.62rem 0 .62rem 1.5rem; font-size:.94rem; line-height:1.6;
  color:rgba(255,255,255,.66); border-top:1px solid rgba(255,255,255,.06);
}
.mant__princ-lista li:first-child{ border-top:0; }
.mant__princ-lista li::before{
  content:""; position:absolute; left:0; top:1.15rem; width:6px; height:6px; border-radius:50%;
  background:var(--lime);
}
.mant__princ-lista b{ color:#fff; font-weight:600; }
.mant__tres{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; align-items:start; }
/* El destacado va en la misma familia que el resto y en lima. La serif no entra al sitio:
   la mezcla de familias en un párrafo se lee como error de carga, no como énfasis. */
.mant__frase{
  font-family:var(--ff-title) !important; font-style:normal !important; font-weight:600;
  font-size:1.05rem; color:var(--lime) !important; line-height:1.5 !important; margin:1rem 0 !important;
}

/* ============ SIN LETRA CHICA · sección con imagen ============ */
.letrach__grid{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.letrach__foto{ margin:0; }
.letrach__foto img{
  width:100%; height:auto; display:block; border-radius:18px;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 30px 70px rgba(0,0,0,.5);
  filter:saturate(.85);
}
.letrach__copy .titulon{ font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:16ch; margin-bottom:1.2rem; }
.letrach__copy p{ margin:0 0 1rem; color:rgba(255,255,255,.68); line-height:1.75; max-width:56ch; }
.letrach__copy strong{ color:#fff; }
.letrach__golpe{
  font-family:var(--ff-title); font-weight:600; font-size:1.15rem;
  color:var(--lime) !important; margin-top:1.4rem !important;
  padding-top:1.2rem; border-top:1px solid var(--linea-2);
}

/* ============ ADICIONALES EN TARJETAS ============ */
.extras__lista{ display:none; }
.extras__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; align-items:stretch; }
.xcard{
  display:flex; flex-direction:column; padding:1.7rem 1.5rem 1.5rem; border-radius:18px;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.07);
  transition:border-color .28s ease, transform .28s ease;
}
.xcard:hover{ border-color:var(--linea-2); transform:translateY(-3px); }
.xcard__ico{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:rgba(200,255,51,.1); color:var(--lime); border:1px solid var(--linea-2);
}
.xcard__ico svg{ width:19px; height:19px; }
.xcard h4{ font-family:var(--ff-title); font-weight:700; font-size:1.15rem; color:#fff; margin:0 0 .6rem; letter-spacing:-.02em; }
.xcard p{ margin:0 0 1.3rem; color:rgba(255,255,255,.6); line-height:1.65; font-size:.93rem; flex:1; }
.xcard__precios{ border-top:1px solid var(--linea-2); padding-top:1rem; }
.xcard__precios div{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; margin-bottom:.4rem; }
.xcard__precios b{ font-family:var(--ff-title); font-weight:700; font-size:1.35rem; color:#fff; letter-spacing:-.02em; }
.xcard__precios span{ font-size:.82rem; color:rgba(255,255,255,.48); }
.xcard__pie{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
  font-family:var(--ff-mono); font-size:.64rem; letter-spacing:.04em; color:rgba(255,255,255,.4);
}
/* La de Focalis lleva su propia estética: es otra marca, no un servicio más de la lista. */
.xcard--focalis{
  background:linear-gradient(160deg, rgba(232,87,42,.16), rgba(232,87,42,.04)), #17110e;
  border-color:rgba(232,87,42,.34);
}
.xcard--focalis:hover{ border-color:rgba(232,87,42,.6); box-shadow:0 22px 50px rgba(232,87,42,.18); }
.xcard__logo{ height:22px; width:auto; margin-bottom:1.2rem; align-self:flex-start; }
.xcard--focalis h4{ color:#fff; }
.xcard__cta{
  display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  padding:.6rem 1.05rem; border-radius:99px; text-decoration:none;
  background:#E8572A; color:#fff; font-weight:600; font-size:.9rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.xcard__cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,87,42,.4); }
.xcard__cta svg{ width:14px; height:14px; }
.xcard--focalis .xcard__pie{ color:rgba(255,255,255,.44); }

/* ============ TESTIMONIOS · cinta ============ */
.testimonios{ overflow:hidden; }
.cinta{
  position:relative; margin-top:2.4rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cinta__riel{ display:flex; gap:1.2rem; width:max-content; }
.cinta.is-on .cinta__riel{ animation:cintar 40s linear infinite; }
.cinta:hover .cinta__riel{ animation-play-state:paused; }
@keyframes cintar{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.tcard{
  width:min(420px,78vw); flex:none; padding:1.7rem 1.6rem 1.4rem; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), rgba(13,15,12,.9);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column;
}
.tcard__estrellas{ display:flex; gap:.18rem; color:var(--lime); margin-bottom:1rem; }
.tcard__estrellas svg{ width:15px; height:15px; }
.tcard blockquote{
  margin:0 0 1.4rem; color:rgba(255,255,255,.86); line-height:1.65; font-size:1rem; flex:1;
}
.tcard blockquote::before{ content:"“"; }
.tcard blockquote::after{ content:"”"; }
.tcard footer{ display:flex; align-items:center; gap:.85rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.09); }
.tcard__ava{
  width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  font-family:var(--ff-title); font-weight:700; font-size:.82rem; color:#0a0b09;
}
.tcard__quien b{ display:block; color:#fff; font-size:.95rem; font-weight:600; }
.tcard__quien i{ display:block; font-style:normal; font-family:var(--ff-mono); font-size:.7rem; color:rgba(255,255,255,.5); margin-top:.1rem; }

/* ============ PIE · la línea legal deja de quedar bajo el chat ============ */
.footer--clay .fc-bottom{
  flex-direction:column; align-items:flex-start; gap:1.1rem;
  padding-right:0;
}
.footer--clay .fc-meta{ justify-content:flex-start; }
/* El botón de chat es fijo abajo a la derecha y tapaba el copyright. La línea se corre a
   la izquierda y se deja un colchón: en el teléfono el botón ocupa el ancho de un pulgar. */
@media (max-width:900px){
  .footer--clay .fc-bottom{ padding-bottom:4.6rem; }
}

/* ============ RESPONSIVE ITERACIÓN 3 ============ */
@media (max-width:1024px){
  .extras__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mant__tres{ grid-template-columns:1fr; }
  .ficha__cuerpo{ grid-template-columns:1fr; }
  .ficha__vistas{ grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); }
}
@media (max-width:900px){
  .pulsosec__uno{ grid-template-columns:1fr; gap:1.4rem; text-align:left; }
  .mant__princ{ grid-template-columns:1fr; }
  .letrach__grid{ grid-template-columns:1fr; }
  .letrach__foto{ order:-1; }
  .letrach__foto img{ max-height:260px; object-fit:cover; }
  .dec__cab{ flex-direction:column-reverse; align-items:flex-start; }
  .dec__cifra{ order:0; }
}
@media (max-width:700px){
  .extras__grid{ grid-template-columns:1fr; }
  .ficha__vistas{ grid-template-columns:1fr; }
  .vista--m{ max-width:230px; margin-inline:auto; }
  .ficha__panel{ max-height:92vh; padding:1.4rem 1.1rem 1.8rem; }
  .mac__tapa{ padding:7px 7px 9px; border-radius:10px; }
  .tcard{ padding:1.4rem 1.3rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .cinta.is-on .cinta__riel{ animation:none; }
  .ficha__panel, .ficha__fondo{ transition:none; }
}

/* `hidden` es display:none, pero cualquier `display` en una regla de clase le gana: la
   ficha quedaba invisible Y ENCIMA DE TODO EL SITIO, tapando cada clic de la página.
   No se notaba mirando —es transparente— y rompía el sitio entero. */
.ficha[hidden]{ display:none !important; }

/* ==========================================================================
   ITERACIÓN 4 (13/08/2026) — el video al lado, el hero más contenido
   ========================================================================== */

/* El Pulso: un bloque de dos columnas. El video va AL LADO del texto. */
.pulsosec__uno{
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center; border-bottom:0; padding-bottom:0; margin-bottom:clamp(2.4rem,5vw,3.6rem);
}
.pulsosec__texto .titulon{ font-size:clamp(1.9rem,3.6vw,3rem); }
.pulsosec__bajada{ font-size:clamp(1rem,1.5vw,1.12rem); }
.pulsovid{ margin:0; }

/* El MacBook: la base sobresalía un 14% del contenedor y chocaba con las orillas de la
   página. Ahora la tapa deja el margen y la base sale apenas. */
.mac{ max-width:none; padding-inline:clamp(.6rem,2vw,1.6rem); }
.mac__base{ width:104%; }
.mac__muesca{ width:11%; }

/* Hero: el titular baja de tamaño. Con el techo anterior ocupaba cuatro líneas de pantalla
   completa y el ojo no encontraba dónde parar. */
.hero--min .hero__title{ font-size:clamp(2rem,4vw,3.2rem); max-width:24ch; }
.hero--min .hero__lead{ font-size:clamp(1rem,1.5vw,1.15rem); max-width:50ch; }
.hero--min{ min-height:min(84svh,820px); }

@media (max-width:900px){
  /* En el teléfono el video vuelve abajo: al lado no cabe ninguno de los dos. */
  .pulsosec__uno{ grid-template-columns:1fr; gap:2rem; }
  .mac{ padding-inline:0; }
}