/* ==========================================================================
   Essential Studio — hoja de estilos
   Paleta: tinta y bermellón — casi-negro cálido · rojo de corrección · papel
   Tipografía: Fraunces (titulares) · IBM Plex Sans (texto) · IBM Plex Mono (cifras)
   Contrastes verificados en navegador: todos pasan WCAG AA.
   ========================================================================== */

:root{
  /* ---- Color ------------------------------------------------------------ */
  --papel:        #F5F2ED;
  --papel-alto:   #FFFDFA;
  --tinta:        #14171A;
  --tinta-suave:  #585E66;   /* 5.9:1 sobre papel */
  --linea:        #DDD8D0;
  --banda:        #16181C;   /* banda oscura */
  --banda-honda:  #0E1013;   /* pie de página */
  --senal:        #C8351F;   /* acento sobre fondo claro — 4.8:1 sobre papel */
  --senal-honda:  #A82A17;
  --senal-texto:  #AE2D19;   /* micro-texto sobre papel — 5.9:1 */
  --senal-clara:  #FF8266;   /* acento sobre la banda oscura — 7.3:1 */

  /* Texto sobre la banda oscura, en niveles de énfasis */
  --sobre-banda-1: #F7F4EF;
  --sobre-banda-2: rgba(255,255,255,.82);
  --sobre-banda-3: rgba(255,255,255,.66);
  --borde-banda:   rgba(255,255,255,.16);

  /* ---- Escala de espaciado (base 4) ------------------------------------- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;   --s-5:1.5rem;
  --s-6:2rem;   --s-7:3rem;   --s-8:4rem;   --s-9:6rem;   --s-10:8rem;

  /* ---- Escala tipográfica ------------------------------------------------ */
  --t-display: clamp(1.95rem, 8.4vw, 4.35rem);
  --t-lead:    clamp(1.0625rem, .95rem + .75vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   .9375rem;
  --t-micro:   .7rem;

  /* ---- Familias ---------------------------------------------------------- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --texto:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Movimiento -------------------------------------------------------- */
  --ease:  cubic-bezier(.22,.61,.36,1);
  --rapido: 150ms;
  --medio:  200ms;
  --lento:  250ms;

  /* ---- Medidas ----------------------------------------------------------- */
  --ancho: 1140px;
  --margen: clamp(1.25rem, 5vw, 3.5rem);
}

/* ==========================================================================
   Reset y base
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,p,figure{ margin:0; }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--senal);
  outline-offset:3px;
  border-radius:2px;
}
.banda-oscura :focus-visible{ outline-color:var(--senal-clara); }

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--margen);
}

/* Enlace de salto — solo visible al tabular */
.salto{
  position:absolute; left:var(--s-4); top:var(--s-4);
  transform:translateY(-160%);
  z-index:50;
  background:var(--senal); color:#fff;
  font-size:var(--t-small); font-weight:600;
  padding:.7rem 1.1rem; border-radius:2px;
  text-decoration:none;
  transition:transform var(--medio) var(--ease);
}
.salto:focus{ transform:translateY(0); }

/* ==========================================================================
   Banda oscura (envuelve cabecera + hero, y se repite en el cierre)
   ========================================================================== */

.banda-oscura{
  position:relative;
  isolation:isolate;
  background:var(--banda);
  color:var(--sobre-banda-1);
}

/* Grano de papel: textura estática, ~1 KB, sin coste de render */
.banda-oscura::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.banda-oscura > *{ position:relative; z-index:1; }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.cabecera{ padding-block:var(--s-5); }

.cabecera__fila{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
}

.marca{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:1.125rem;
  letter-spacing:-.02em;
  color:var(--sobre-banda-1);
}
.marca__punto{
  width:7px; height:7px; border-radius:50%;
  background:var(--senal-clara);
  flex:none;
  transition:transform var(--medio) var(--ease);
}
.marca:hover .marca__punto{ transform:scale(1.35); }

.cabecera__nav{
  display:flex;
  align-items:center;
  gap:var(--s-5);
}

.enlace-nav{
  display:none;                       /* en móvil manda el botón */
  font-size:var(--t-small);
  font-weight:500;
  color:var(--sobre-banda-2);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.enlace-nav:hover{ color:var(--sobre-banda-1); border-bottom-color:var(--senal-clara); }

@media (min-width:640px){ .enlace-nav{ display:inline-block; } }

/* ==========================================================================
   Botones
   ========================================================================== */

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:52px;
  padding:.9rem 1.5rem;
  border-radius:3px;
  font-family:var(--texto);
  font-size:1rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color var(--medio) var(--ease),
             border-color var(--medio) var(--ease),
             color var(--medio) var(--ease),
             transform var(--rapido) var(--ease);
}
.boton--compacto{ min-height:44px; padding:.55rem 1.05rem; font-size:var(--t-small); }

.boton--senal{ background:var(--senal); color:#fff; }
.boton--senal:hover{ background:var(--senal-honda); transform:translateY(-1px); }
.boton--senal:active{ transform:translateY(0); }

.boton--linea{
  border:1px solid rgba(255,255,255,.45);
  color:var(--sobre-banda-1);
  background:transparent;
}
.boton--linea:hover{ border-color:var(--sobre-banda-1); background:rgba(255,255,255,.06); transform:translateY(-1px); }
.boton--linea:active{ transform:translateY(0); }

.icono-wa{ width:19px; height:19px; fill:currentColor; flex:none; }
.boton--compacto .icono-wa{ width:16px; height:16px; }

/* ==========================================================================
   ① Hero
   ========================================================================== */

.hero{
  padding-top:clamp(2rem, 5vh, 4.5rem);
  padding-top:clamp(2rem, 5svh, 4.5rem);
  padding-bottom:clamp(3rem, 9vh, 6.5rem);
  padding-bottom:clamp(3rem, 9svh, 6.5rem);
}

.descriptor{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--sobre-banda-3);
  margin-bottom:var(--s-5);
}
@media (min-width:768px){
  .descriptor{ letter-spacing:.14em; margin-bottom:var(--s-6); }
}

.hero__titulo{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:var(--t-display);
  line-height:1.04;
  letter-spacing:-.028em;
  color:var(--sobre-banda-1);
  text-wrap:pretty;
}
.hero__titulo .destacado{ color:var(--senal-clara); }

@media (min-width:768px){
  .hero__titulo{
    max-width:19ch;
    line-height:1.02;
    letter-spacing:-.032em;
    text-wrap:balance;   /* evita líneas huérfanas terminadas en artículo */
  }
}

.hero__bajada{
  margin-top:clamp(1.25rem, 2.2vw, 2.25rem);
  max-width:54ch;
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--sobre-banda-2);
  text-wrap:pretty;
}

.hero__acciones{
  margin-top:clamp(2rem, 4vh, 3rem);
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-3);
}
@media (max-width:479px){
  .hero__acciones{ flex-direction:column; align-items:stretch; }
  .hero__acciones .boton{ width:100%; }
}

.hero__confianza{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  padding-top:var(--s-4);
  border-top:1px solid var(--borde-banda);
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.7;
  color:var(--sobre-banda-3);
}
/* Inline, no flex: así nunca queda huérfano en su propia línea al envolver. */
.senal-punto{
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--senal-clara);
  margin-right:.6rem;
  vertical-align:.15em;
}

/* ==========================================================================
   Entrada escalonada
   El estado por defecto es VISIBLE. La animación solo se aplica si el
   sistema no pide movimiento reducido, así nunca queda contenido oculto.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){
  @keyframes subir{
    from{ opacity:0; transform:translateY(14px); }
    to  { opacity:1; transform:translateY(0); }
  }
  .entrada{ animation:subir 620ms var(--ease) both; }
  .entrada--1{ animation-delay:60ms;  }
  .entrada--2{ animation-delay:140ms; }
  .entrada--3{ animation-delay:260ms; }
  .entrada--4{ animation-delay:360ms; }
  .entrada--5{ animation-delay:460ms; }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.oculto-visual{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ==========================================================================
   Secciones claras — estructura común
   ========================================================================== */

.seccion{
  border-top:1px solid var(--linea);
  padding-block:clamp(3.5rem, 9vh, 6.5rem);
}
.seccion--primera{ border-top:0; }

.indice{
  display:block;
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--senal-texto);
  margin-bottom:var(--s-4);
}

.titulo-seccion{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(1.7rem, 4.4vw, 2.9rem);
  line-height:1.08;
  letter-spacing:-.025em;
  max-width:21ch;
  text-wrap:balance;
}

.intro-seccion{
  margin-top:var(--s-5);
  max-width:58ch;
  font-size:var(--t-lead);
  line-height:1.58;
  color:var(--tinta-suave);
  text-wrap:pretty;
}

/* ==========================================================================
   ② El problema
   ========================================================================== */

.problema__cuerpo{
  margin-top:clamp(1.5rem, 3.5vw, 2.5rem);
  max-width:60ch;
  display:grid;
  gap:var(--s-5);
}
.problema__cuerpo p{
  font-size:var(--t-lead);
  line-height:1.62;
  color:var(--tinta-suave);
  text-wrap:pretty;
}
.problema__cuerpo p:first-child{ color:var(--tinta); }

/* ==========================================================================
   ③ Qué recibes
   ========================================================================== */

.entrega__lista{
  margin-top:clamp(2rem, 4.5vw, 3rem);
  display:grid;
  gap:var(--s-6);
}
@media (min-width:760px){
  .entrega__lista{ grid-template-columns:1fr 1fr; gap:var(--s-7) var(--s-8); }
}

.entrega__item{ border-top:2px solid var(--tinta); padding-top:var(--s-4); }
.entrega__item dt{
  font-weight:600;
  font-size:1.125rem;
  letter-spacing:-.012em;
  line-height:1.3;
}
.entrega__item dd{
  margin:var(--s-3) 0 0;
  color:var(--tinta-suave);
  font-size:var(--t-small);
  line-height:1.62;
}

.etiqueta{
  display:inline-block;
  margin-left:.45rem;
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--senal-texto);
  border:1px solid currentColor;
  border-radius:2px;
  padding:.15rem .4rem;
  vertical-align:.15em;
  white-space:nowrap;
}

/* ==========================================================================
   ④ Demos — maqueta ilustrativa, no es la captura de ningún cliente
   ========================================================================== */

.demos__caja{
  margin-top:clamp(2rem, 5vw, 3.5rem);
  display:grid;
  gap:clamp(2rem, 5vw, 3.5rem);
  align-items:center;
}
@media (min-width:820px){
  .demos__caja{ grid-template-columns:1fr auto; }
}

.telefono{
  width:232px;
  margin-inline:auto;
  border:9px solid var(--tinta);
  border-radius:26px;
  background:var(--papel-alto);
  overflow:hidden;
  box-shadow:0 18px 44px rgba(20,23,26,.14);
}
.telefono__barra{
  background:var(--banda);
  padding:.7rem .8rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.telefono__punto{ width:5px; height:5px; border-radius:50%; background:var(--senal-clara); flex:none; }
.telefono__marca{
  font-family:var(--mono);
  font-size:.55rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.telefono__cuerpo{ padding:.9rem .8rem 1.1rem; }
.telefono__titular{
  font-family:var(--display);
  font-weight:700;
  font-size:.95rem;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--tinta);
}
.telefono__reglon{
  height:5px;
  border-radius:2px;
  background:var(--linea);
  margin-top:.5rem;
}
.telefono__reglon--corto{ width:62%; }
.telefono__boton{
  margin-top:.9rem;
  background:var(--senal);
  color:#fff;
  border-radius:2px;
  padding:.45rem;
  text-align:center;
  font-size:.6rem;
  font-weight:600;
}
.telefono__pie{
  margin-top:.7rem;
  font-family:var(--mono);
  font-size:.5rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  text-align:center;
}
.demos__nota{
  margin-top:var(--s-4);
  font-size:var(--t-small);
  color:var(--tinta-suave);
  max-width:46ch;
}

/* ==========================================================================
   ⑤ Precios
   ========================================================================== */

.precios__rejilla{
  margin-top:clamp(2rem, 5vw, 3.25rem);
  display:grid;
  gap:var(--s-5);
}
@media (min-width:920px){
  .precios__rejilla{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
}

.plan{
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:4px;
  padding:clamp(1.5rem, 3vw, 2rem);
  display:flex;
  flex-direction:column;
}
.plan--recomendado{
  border-color:var(--tinta);
  box-shadow:0 0 0 1px var(--tinta);
}

.plan__cabeza{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  flex-wrap:wrap;
  min-height:24px;
}
.plan__nombre{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tinta);
}
.plan__sello{
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:var(--tinta);
  color:var(--papel);
  border-radius:2px;
  padding:.2rem .45rem;
  white-space:nowrap;
}

.plan__precio{
  margin-top:var(--s-5);
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(1.5rem, 3.4vw, 1.95rem);
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--tinta);
}
.plan__periodo{
  margin-top:var(--s-2);
  font-size:var(--t-small);
  color:var(--tinta-suave);
}
.plan__periodo strong{ color:var(--tinta); font-weight:600; }

.plan__promesa{
  margin-top:var(--s-4);
  padding-top:var(--s-4);
  border-top:1px solid var(--linea);
  font-size:var(--t-small);
  line-height:1.55;
  color:var(--tinta);
}

.plan__lista{
  margin:var(--s-4) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:var(--s-3);
}
.plan__lista li{
  position:relative;
  padding-left:1.15rem;
  font-size:var(--t-small);
  line-height:1.55;
  color:var(--tinta-suave);
}
.plan__lista li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:9px; height:1px;
  background:var(--senal);
}
.plan__previo{
  margin-top:var(--s-4);
  font-size:var(--t-small);
  font-weight:600;
  color:var(--tinta);
}

.plan__nota{
  margin-top:auto;
  padding-top:var(--s-5);
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  line-height:1.8;
}
.plan__nota strong{ color:var(--senal-texto); font-weight:500; }

.precios__cierre{
  margin-top:clamp(2rem, 4vw, 2.75rem);
  padding-top:var(--s-5);
  border-top:1px solid var(--linea);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-4) var(--s-5);
}
.precios__cierre p{
  font-size:var(--t-lead);
  color:var(--tinta);
  max-width:44ch;
  line-height:1.5;
}

/* ==========================================================================
   ⑥ Cómo funciona
   ========================================================================== */

.proceso__pasos{
  margin-top:clamp(2rem, 4.5vw, 3rem);
  display:grid;
  gap:var(--s-6);
}
@media (min-width:820px){
  .proceso__pasos{ grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
}

.paso{ border-top:2px solid var(--tinta); padding-top:var(--s-4); }
.paso__n{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.14em;
  color:var(--senal-texto);
}
.paso h3{
  margin-top:var(--s-3);
  font-size:1.0625rem;
  font-weight:600;
  line-height:1.32;
  letter-spacing:-.01em;
}
.paso p{
  margin-top:var(--s-2);
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--tinta-suave);
}

/* ==========================================================================
   ⑦ Quiénes somos
   ========================================================================== */

.equipo__caja{
  margin-top:clamp(2rem, 4.5vw, 3rem);
  display:grid;
  gap:clamp(1.75rem, 4vw, 3rem);
}
@media (min-width:760px){
  .equipo__caja{ grid-template-columns:auto 1fr; align-items:start; gap:clamp(2rem,5vw,4rem); }
}

.monogramas{ display:flex; gap:var(--s-3); }
/* Marcador tipográfico hasta que haya foto real. Reemplazar por <img>. */
.monograma{
  width:86px; height:104px;
  display:grid; place-items:center;
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:1.9rem;
  letter-spacing:-.03em;
  border-radius:3px;
}
.monograma:last-child{ background:var(--senal); color:#fff; }

.equipo__cuerpo{ display:grid; gap:var(--s-5); max-width:60ch; }
.equipo__cuerpo p{ color:var(--tinta-suave); line-height:1.62; text-wrap:pretty; }
.equipo__cuerpo p:first-child{ color:var(--tinta); font-size:var(--t-lead); line-height:1.55; }

.equipo__firmas{
  padding-top:var(--s-4);
  border-top:1px solid var(--linea);
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  line-height:1.9;
}

/* ==========================================================================
   ⑧ Preguntas
   ========================================================================== */

.faq__lista{ margin-top:clamp(2rem, 4vw, 2.75rem); max-width:72ch; }

.faq__item{ border-top:1px solid var(--linea); }
.faq__item:last-child{ border-bottom:1px solid var(--linea); }

.faq__item summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:var(--s-5) 2.75rem var(--s-5) 0;
  font-weight:600;
  font-size:1.0625rem;
  line-height:1.4;
  letter-spacing:-.01em;
  transition:color var(--rapido) var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--senal-texto); }

.faq__item summary::before,
.faq__item summary::after{
  content:"";
  position:absolute;
  right:.55rem;
  background:var(--senal);
  transition:transform var(--medio) var(--ease), opacity var(--medio) var(--ease);
}
.faq__item summary::before{ top:50%; width:14px; height:1.5px; margin-top:-.75px; }
.faq__item summary::after{ top:50%; right:calc(.55rem + 6.25px); width:1.5px; height:14px; margin-top:-7px; }
.faq__item[open] summary::after{ transform:rotate(90deg); opacity:0; }

.faq__respuesta{
  padding:0 2.75rem var(--s-5) 0;
  max-width:64ch;
  font-size:var(--t-small);
  line-height:1.68;
  color:var(--tinta-suave);
}

/* ==========================================================================
   ⑨ Cierre
   ========================================================================== */

.cierre{ padding-block:clamp(3.5rem, 9vh, 6rem); }
.cierre__titulo{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(1.7rem, 4.6vw, 2.9rem);
  line-height:1.08;
  letter-spacing:-.028em;
  max-width:19ch;
  color:var(--sobre-banda-1);
  text-wrap:balance;
}
.cierre__texto{
  margin-top:var(--s-4);
  max-width:50ch;
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--sobre-banda-2);
}
.cierre__accion{ margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:var(--s-3); }
@media (max-width:479px){
  .cierre__accion{ flex-direction:column; align-items:stretch; }
  .cierre__accion .boton{ width:100%; }
}

/* ==========================================================================
   Pie
   ========================================================================== */

.pie{
  background:var(--banda-honda);
  color:var(--sobre-banda-3);
  padding-block:var(--s-7);
  font-size:var(--t-small);
}
.pie :focus-visible{ outline-color:var(--senal-clara); }

.pie__fila{ display:grid; gap:var(--s-5); }
@media (min-width:760px){
  .pie__fila{ grid-template-columns:1fr auto; align-items:end; }
}

.pie__descriptor{ max-width:42ch; line-height:1.6; }
.pie__nombres{
  margin-top:var(--s-3);
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.9;
}

.pie__legales{ display:flex; flex-wrap:wrap; gap:var(--s-4); }
.pie a{
  color:var(--sobre-banda-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.pie a:hover{ color:var(--sobre-banda-1); border-bottom-color:var(--senal-clara); }

.pie__firma{
  margin-top:var(--s-6);
  padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ==========================================================================
   Objetivos táctiles — se agranda el área de toque sin mover la maqueta
   ========================================================================== */

.marca{ padding-block:.5rem; margin-block:-.5rem; }

.pie__legales a{ position:relative; }
.pie__legales a::after{
  content:"";
  position:absolute;
  inset:-.65rem -.45rem;   /* zona de toque de ~46 px, invisible */
}

/* ==========================================================================
   Retrato del bloque ⑦ — listo para cuando exista la foto real.
   Se usa reemplazando el div .monogramas por:
   <img class="retrato" src="assets/img/equipo.webp" alt="…" width="372" height="465">
   ========================================================================== */

.retrato{
  width:186px;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:3px;
  background:var(--linea);
}
@media (min-width:760px){ .retrato{ width:224px; } }

/* ==========================================================================
   Páginas de texto (privacidad, términos) y 404
   ========================================================================== */

.legal{ padding-block:clamp(2.5rem, 7vh, 4.5rem); }

.legal__cabeza{ padding-bottom:var(--s-6); border-bottom:1px solid var(--linea); }
.legal__titulo{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(1.85rem, 5vw, 3rem);
  line-height:1.06;
  letter-spacing:-.028em;
  max-width:20ch;
}
.legal__fecha{
  margin-top:var(--s-4);
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}

.aviso{
  margin-top:var(--s-6);
  padding:var(--s-4) var(--s-5);
  border-left:2px solid var(--senal);
  background:var(--papel-alto);
  font-size:var(--t-small);
  line-height:1.6;
  color:var(--tinta-suave);
  max-width:64ch;
}
.aviso strong{ color:var(--tinta); font-weight:600; }

.prosa{ max-width:68ch; }
.prosa h2{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(1.2rem, 2.6vw, 1.55rem);
  line-height:1.2;
  letter-spacing:-.02em;
  margin-top:var(--s-7);
}
.prosa h2:first-child{ margin-top:var(--s-6); }
.prosa p{ margin-top:var(--s-4); color:var(--tinta-suave); line-height:1.68; }
.prosa ul{
  margin:var(--s-4) 0 0;
  padding-left:1.15rem;
  color:var(--tinta-suave);
  display:grid;
  gap:var(--s-2);
  line-height:1.6;
}
.prosa li::marker{ color:var(--senal-texto); }
.prosa strong{ color:var(--tinta); font-weight:600; }
.prosa a{
  color:var(--senal-texto);
  text-decoration:underline;
  text-underline-offset:.16em;
  text-decoration-thickness:1px;
  transition:color var(--rapido) var(--ease);
}
.prosa a:hover{ color:var(--tinta); }

/* ---- 404 ---------------------------------------------------------------- */

.perdido{
  padding-block:clamp(4rem, 16vh, 9rem);
  min-height:60vh;
  display:flex;
  align-items:center;
}
.perdido__codigo{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--senal-clara);
}
.perdido__titulo{
  margin-top:var(--s-5);
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:700;
  font-size:clamp(1.85rem, 6vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-.03em;
  max-width:17ch;
  color:var(--sobre-banda-1);
  text-wrap:balance;
}
.perdido__texto{
  margin-top:var(--s-5);
  max-width:46ch;
  font-size:var(--t-lead);
  line-height:1.55;
  color:var(--sobre-banda-2);
}
.perdido__acciones{ margin-top:var(--s-6); display:flex; flex-wrap:wrap; gap:var(--s-3); }
@media (max-width:479px){
  .perdido__acciones{ flex-direction:column; align-items:stretch; }
  .perdido__acciones .boton{ width:100%; }
}

/* ==========================================================================
   MOVIMIENTO
   Regla de oro: el estado por defecto siempre es VISIBLE. Todo lo que esconde
   contenido vive detrás de .js (la pone el script) Y de prefers-reduced-motion.
   Si falla el JS, si el navegador es viejo o si el sistema pide menos
   movimiento, el sitio se ve completo y quieto. Nunca en blanco.
   Solo se animan transform y opacity: la GPU las compone sin repintar.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){

  /* ---- Revelado por grupos --------------------------------------------- */
  .js .grupo > *{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 620ms var(--ease), transform 620ms var(--ease);
    will-change:opacity, transform;
  }
  .js .grupo.visible > *{ opacity:1; transform:none; will-change:auto; }

  .js .grupo.visible > *:nth-child(2){ transition-delay:80ms; }
  .js .grupo.visible > *:nth-child(3){ transition-delay:160ms; }
  .js .grupo.visible > *:nth-child(4){ transition-delay:240ms; }
  .js .grupo.visible > *:nth-child(n+5){ transition-delay:300ms; }

  /* Las rejillas no entran como bloque: entran sus hijos, uno a uno. */
  .js .grupo > .precios__rejilla,
  .js .grupo > .proceso__pasos,
  .js .grupo > .faq__lista{
    opacity:1;
    transform:none;
    transition:none;
  }

  .js .precios__rejilla > *,
  .js .proceso__pasos > *,
  .js .faq__lista > *{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 560ms var(--ease), transform 560ms var(--ease);
  }
  .js .grupo.visible .precios__rejilla > *,
  .js .grupo.visible .proceso__pasos > *,
  .js .grupo.visible .faq__lista > *{ opacity:1; transform:none; }

  .js .grupo.visible .precios__rejilla > *:nth-child(1){ transition-delay:240ms; }
  .js .grupo.visible .precios__rejilla > *:nth-child(2){ transition-delay:340ms; }
  .js .grupo.visible .precios__rejilla > *:nth-child(3){ transition-delay:440ms; }

  .js .grupo.visible .proceso__pasos > *:nth-child(1){ transition-delay:240ms; }
  .js .grupo.visible .proceso__pasos > *:nth-child(2){ transition-delay:330ms; }
  .js .grupo.visible .proceso__pasos > *:nth-child(3){ transition-delay:420ms; }
  .js .grupo.visible .proceso__pasos > *:nth-child(4){ transition-delay:510ms; }

  .js .grupo.visible .faq__lista > *:nth-child(n+1){ transition-delay:200ms; }
  .js .grupo.visible .faq__lista > *:nth-child(n+3){ transition-delay:280ms; }
  .js .grupo.visible .faq__lista > *:nth-child(n+5){ transition-delay:360ms; }

  /* ---- ⑥ La línea de los pasos se dibuja ------------------------------- */
  /* No es adorno: dibuja el plazo de 5 días avanzando de izquierda a derecha. */
  .js .proceso__pasos .paso::before{
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 560ms var(--ease);
  }
  .js .grupo.visible .proceso__pasos .paso::before{ transform:scaleX(1); }
  .js .grupo.visible .proceso__pasos .paso:nth-child(1)::before{ transition-delay:300ms; }
  .js .grupo.visible .proceso__pasos .paso:nth-child(2)::before{ transition-delay:400ms; }
  .js .grupo.visible .proceso__pasos .paso:nth-child(3)::before{ transition-delay:500ms; }
  .js .grupo.visible .proceso__pasos .paso:nth-child(4)::before{ transition-delay:600ms; }

  /* ---- ① El remate del titular se enciende ----------------------------- */
  /* La frase entra del mismo color que el resto y prende al final: primero
     se lee la oración completa, después golpea el remate. */
  .js .hero__titulo .destacado{
    color:var(--sobre-banda-1);
    animation:encender 460ms var(--ease) 1s forwards;
  }
  @keyframes encender{ to{ color:var(--senal-clara); } }

  /* ---- ④ Llega un contacto al teléfono --------------------------------- */
  .telefono.animando .telefono__boton{ animation:pulsar 620ms var(--ease) 300ms; }
  @keyframes pulsar{
    40%{ transform:scale(.96); }
    70%{ transform:scale(1.02); }
    100%{ transform:scale(1); }
  }
  .telefono.animando .telefono__aviso{
    animation:avisar 3.4s var(--ease) 900ms forwards;
  }
  @keyframes avisar{
    0%   { opacity:0; transform:translateY(115%); }
    14%  { opacity:1; transform:translateY(0); }
    86%  { opacity:1; transform:translateY(0); }
    100% { opacity:0; transform:translateY(115%); }
  }

  /* ---- Micro-interacción de los botones -------------------------------- */
  .boton .icono-wa{ transition:transform var(--medio) var(--ease); }
  .boton:hover .icono-wa{ transform:translateX(2px) rotate(-8deg); }

  /* ---- ⑧ El acordeón abre con suavidad --------------------------------- */
  /* Progresivo: donde no exista ::details-content, simplemente salta como
     hasta ahora. No se rompe nada. */
  .js .faq__item::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size 280ms var(--ease), content-visibility 280ms allow-discrete;
  }
  .js .faq__item[open]::details-content{ block-size:auto; }
}

@supports (interpolate-size: allow-keywords){
  :root{ interpolate-size:allow-keywords; }
}

/* Al imprimir, todo visible sí o sí. */
@media print{
  .grupo > *,
  .precios__rejilla > *,
  .proceso__pasos > *,
  .faq__lista > *{ opacity:1 !important; transform:none !important; }
  .barra{ display:none !important; }
}

/* ==========================================================================
   Línea superior de los pasos como pseudo-elemento, para poder dibujarla
   ========================================================================== */

.paso{ border-top:0; position:relative; padding-top:var(--s-4); }
.paso::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:var(--tinta);
}

/* ==========================================================================
   ④ Aviso de contacto dentro del teléfono
   ========================================================================== */

.telefono{ position:relative; }

.telefono__aviso{
  position:absolute;
  left:8px; right:8px; bottom:10px;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .6rem;
  border-radius:4px;
  background:var(--banda);
  color:var(--sobre-banda-1);
  box-shadow:0 6px 18px rgba(20,23,26,.3);
  opacity:0;                       /* invisible salvo durante la animación */
  transform:translateY(115%);
  pointer-events:none;
}
.telefono__aviso .icono-wa{ width:15px; height:15px; color:var(--senal-clara); }
.telefono__aviso b{
  display:block;
  font-size:.6rem;
  font-weight:600;
  line-height:1.25;
}
.telefono__aviso span{
  display:block;
  font-family:var(--mono);
  font-size:.5rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sobre-banda-3);
  line-height:1.4;
}

/* ==========================================================================
   Barra fija de acción — aparece cuando el hero sale de pantalla
   ========================================================================== */

.barra{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:30;
  background:var(--papel-alto);
  border-top:1px solid var(--linea);
  box-shadow:0 -6px 24px rgba(20,23,26,.09);
  padding:.7rem var(--margen);
  transform:translateY(115%);
  transition:transform 280ms var(--ease);
}
.barra.visible{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .barra{ transition:none; }
}

.barra__fila{
  max-width:var(--ancho);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
}
.barra__nota{
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  line-height:1.5;
}
@media (max-width:479px){
  .barra__nota{ display:none; }
  .barra__fila .boton{ width:100%; }
}

@media (min-width:900px){
  /* En escritorio no cruza la pantalla: se acomoda como pastilla a la derecha. */
  .barra{
    left:auto;
    right:clamp(1rem, 3vw, 2rem);
    bottom:clamp(1rem, 3vw, 2rem);
    border:1px solid var(--linea);
    border-radius:4px;
    padding:.6rem .7rem;
    box-shadow:0 12px 32px rgba(20,23,26,.16);
    transform:translateY(160%);
  }
  .barra.visible{ transform:none; }
  .barra__fila{ gap:var(--s-4); }
}

/* ==========================================================================
   GRILLA ASIMÉTRICA
   12 columnas con líneas nombradas. Las pistas de los extremos absorben el
   sobrante, así un bloque puede sangrar hasta el borde del viewport sin
   márgenes negativos ni trucos que rompan el scroll horizontal.
   Bajo 900 px no existe: columna única, orden del documento intacto.
   ========================================================================== */

:root{ --hueco: clamp(.75rem, 1.6vw, 1.75rem); }

/* Bajo 900 px NO hay grilla: se comporta igual que .contenedor, para no
   perder ancho útil con canaletas que en móvil no sirven a nadie. */
.lienzo{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--margen);
}

@media (min-width:900px){
  .lienzo{
    max-width:none;
    padding-inline:0;
    display:grid;
    grid-template-columns:
      [borde-izq] minmax(var(--margen), 1fr)
      [c] repeat(11, minmax(0, calc((var(--ancho) - 11 * var(--hueco)) / 12)) [c])
      minmax(0, calc((var(--ancho) - 11 * var(--hueco)) / 12))
      [col-fin] minmax(var(--margen), 1fr) [borde-der];
    column-gap:var(--hueco);
  }
  .lienzo > *{ grid-column: c 1 / col-fin; }
}

/* ==========================================================================
   ① Hero asimétrico
   ========================================================================== */

@media (min-width:900px){
  /* Borde izquierdo escalonado: cada bloque termina en una columna distinta.
     Eso es lo que produce la asimetría — no mover cosas al azar. */
  .hero .descriptor      { grid-column: c 1 / c 7; }
  .hero__titulo          { grid-column: c 1 / c 9; max-width:none; }
  .hero__bajada          { grid-column: c 1 / c 7; max-width:none; }
  .hero__acciones        { grid-column: c 1 / c 8; }
  .hero__confianza       { grid-column: c 1 / c 10; }

  /* La ficha sangra hasta el borde derecho de la pantalla y se solapa
     verticalmente con el titular y la bajada. */
  /* Baja hasta la altura del titular (no roza el descriptor) y se estira
     hasta la línea de confianza, para que no quede hueco muerto abajo. */
  /* Mayor especificidad a propósito: así la regla de escritorio gana sin
     depender del orden del archivo. */
  .lienzo > .ficha{
    grid-column: c 10 / borde-der;
    grid-row: 2 / span 4;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    margin-top:0;
    padding:var(--s-5) var(--margen) var(--s-6) var(--s-5);
    background:transparent;
    border-top:0;
    /* Decisión, no herencia: la regla bermellón es la espina vertical de la
       composición asimétrica. Es lo que sostiene el lado derecho y lleva el
       ojo del titular hasta la línea de confianza. */
    border-left:2px solid var(--senal-clara);
  }
}

/* Base (móvil): la ficha es un bloque más, apilado tras la línea de confianza. */
.ficha{
  margin-top:var(--s-6);
  padding:var(--s-5) 0 var(--s-4) var(--s-5);
  border-left:2px solid var(--senal-clara);
}

.ficha__rotulo{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--senal-clara);
  margin-bottom:var(--s-4);
}

.ficha__lista{ margin:0; padding:0; list-style:none; }
.ficha__lista li{
  padding:var(--s-3) 0;
  border-top:1px solid var(--borde-banda);
  font-size:var(--t-small);
  line-height:1.4;
  color:var(--sobre-banda-2);
}
.ficha__lista li:first-child{ border-top:0; padding-top:0; }
.ficha__lista li b{
  display:block;
  font-weight:600;
  color:var(--sobre-banda-1);
}
.ficha__lista li span{
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--sobre-banda-3);
}

/* El hero ya no centra su contenido: lo alinea al borde izquierdo de la
   grilla y deja el aire a la derecha, bajo la ficha. */
@media (min-width:900px){
  .hero{ padding-bottom:clamp(4rem, 12vh, 8rem); }
}

/* ==========================================================================
   COLOCACIÓN ASIMÉTRICA POR BLOQUE
   Todo vive dentro de @media (min-width:900px): bajo ese ancho la grilla no
   existe y el documento se apila en orden, sin desplazamientos.
   ========================================================================== */

@media (min-width:900px){

  /* ---- ② El problema ---------------------------------------------------- */
  /* Decisión de Juanko: este bloque va simétrico. Los tres elementos comparten
     el mismo borde izquierdo, sin desplazamientos. Es el punto de calma de la
     página — una pregunta se lee mejor quieta que descolocada. */
  #problema .indice          { grid-column: c 1 / c 6; }
  #problema .titulo-seccion  { grid-column: c 1 / c 9; }
  #problema .problema__cuerpo{ grid-column: c 1 / c 8; }

  /* ---- ③ Qué recibes ---------------------------------------------------- */
  #sistema .indice         { grid-column: c 1 / c 4; }
  #sistema .titulo-seccion { grid-column: c 1 / c 8; }
  #sistema .entrega__lista { grid-column: c 1 / col-fin; }

  /* Se rompe la reja pareja de 2×2: spans distintos y desfase vertical. */
  .entrega__lista{
    grid-template-columns:repeat(12, minmax(0,1fr));
    column-gap:var(--hueco);
    row-gap:var(--s-7);
  }
  .entrega__item:nth-child(1){ grid-column:1 / 6;  }
  .entrega__item:nth-child(2){ grid-column:7 / 12; margin-top:var(--s-8); }
  .entrega__item:nth-child(3){ grid-column:2 / 7;  }
  .entrega__item:nth-child(4){ grid-column:8 / 13; margin-top:var(--s-8); }

  /* ---- ④ Demos ---------------------------------------------------------- */
  #demos .indice        { grid-column: c 1 / c 4; }
  #demos .titulo-seccion{ grid-column: c 1 / c 8; }
  #demos .demos__caja   { grid-column: c 1 / col-fin; }

  .demos__caja{ grid-template-columns:minmax(0,1fr) auto; align-items:start; }
  /* El teléfono sube fuera de su fila y se solapa con el bloque de arriba. */
  .demos__caja .telefono{ margin-top:calc(-1 * var(--s-9)); }

  /* ---- ⑤ Precios -------------------------------------------------------- */
  /* La reja se queda pareja a propósito: tres paquetes comparables tienen que
     leerse en paralelo. La asimetría va en el encabezado y en la elevación
     de la tarjeta recomendada — jerarquía, no ruido. */
  #precios .indice         { grid-column: c 1 / c 4; }
  #precios .titulo-seccion { grid-column: c 1 / c 8; }
  #precios .intro-seccion  { grid-column: c 6 / c 12; max-width:none; }
  #precios .precios__rejilla,
  #precios .precios__cierre{ grid-column: c 1 / col-fin; }

  .plan--recomendado{ margin-top:calc(-1 * var(--s-5)); margin-bottom:var(--s-5); }

  /* ---- ⑥ Cómo funciona -------------------------------------------------- */
  /* Los 4 pasos son una secuencia real: no se rotan ni se desalinean. */
  #proceso .indice         { grid-column: c 1 / c 4; }
  #proceso .titulo-seccion { grid-column: c 3 / c 10; }
  #proceso .proceso__pasos { grid-column: c 1 / col-fin; }

  /* ---- ⑦ Quiénes somos -------------------------------------------------- */
  #nosotros .indice        { grid-column: c 1 / c 4; }
  #nosotros .titulo-seccion{ grid-column: c 1 / c 9; }
  #nosotros .equipo__caja  { grid-column: c 1 / col-fin; }

  .equipo__caja{
    grid-template-columns:repeat(12, minmax(0,1fr));
    column-gap:var(--hueco);
    align-items:start;
  }
  /* Los monogramas invaden la columna del texto. */
  .equipo__caja .monogramas{ grid-column:1 / 4; grid-row:1; z-index:1; }
  .equipo__caja .equipo__cuerpo{
    grid-column:3 / 11;
    grid-row:1;
    padding-left:calc(var(--s-8) + var(--s-4));
    max-width:none;
  }

  /* ---- ⑧ Preguntas ------------------------------------------------------ */
  /* Título a la izquierda, acompañando la lectura; acordeón a la derecha. */
  #preguntas .indice        { grid-column: c 1 / c 5; grid-row:1; }
  #preguntas .titulo-seccion{
    grid-column: c 1 / c 5;
    grid-row:2;
    align-self:start;
    position:sticky;
    top:clamp(1.5rem, 6vh, 3rem);
  }
  #preguntas .faq__lista{
    grid-column: c 6 / col-fin;
    grid-row:1 / span 2;
    margin-top:0;
    max-width:none;
  }

  /* ---- ⑨ Cierre --------------------------------------------------------- */
  /* Espejo del hero: allá el texto arrancaba en la columna 1, acá en la 3. */
  .cierre .cierre__titulo{ grid-column: c 3 / c 11; max-width:none; }
  .cierre .cierre__texto { grid-column: c 3 / c 9;  max-width:none; }
  .cierre .cierre__accion{ grid-column: c 3 / c 9;  }
}

/* Sin estilos inline: permite una CSP que prohíba unsafe-inline. */
.intro-seccion--pegada{ margin-top:0; }