/* Una sola familia auto-hospedada (OFL). En este registro la tipografía de
   display sobra: los titulares son la MISMA cara del cuerpo en peso 700, muy
   apretada y en minúscula. Archivo Black se fue con el rediseño — dos caras
   eran una jerarquía que el sistema ya no necesita, y esto ahorra una
   petición y ~30 KB en la ruta crítica. */
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/fuentes/public-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   Yuistudio — hoja de estilos única y compartida por las 14 páginas.
   No duplicar estilos por página: la portada y las landings ya divergieron
   una vez y acabaron con dos identidades visuales distintas.

   REGISTRO: campos a sangre, minúscula y filete de pelo. La gramática viene
   del sistema de Kiwi Events, pero la PALETA es de Yuistudio: crema, turquesa
   y casi-negro verdoso. El brillo de Kiwi no es el verde en sí — es
   luminosidad y saturación muy altas a la vez, algo que la gama solo permite
   en pocos matices. El turquesa es el punto equivalente en frío; copiarle el
   verde a Kiwi sería copiarle la marca, no el oficio.

   Cinco reglas sostienen el registro:

     1. UNA SOLA CARA. Titular y cuerpo son la misma tipografía; lo que
        cambia es el peso (700) y el tracking (muy negativo). Sin segunda
        familia y sin versalitas.

     2. TODO EN MINÚSCULA, titulares incluidos. Es el gesto que define el
        registro. No es descuido: es la voz de alguien que contesta el
        teléfono él mismo.

     3. EL COLOR ES LA SUPERFICIE. Las secciones son campos enteros de un
        color que se turnan — crema, turquesa, casi-negro. El ritmo lo marca
        la alternancia, no los marcos.

     4. NADA DE CAJAS. Ni tarjetas, ni botones rectangulares, ni celdas con
        contorno, ni sombras. Lo que separa dos cosas es un FILETE DE PELO de
        1px, y lo que pide una acción es una palabra subrayada. Radio 0 en
        todo, sin excepciones.

     5. NO SE ANIMA. Lo único que se mueve es la opacidad al pasar por
        encima. Sin desplazamientos, sin apariciones, sin transiciones de
        color.

   Colores en oklch con reserva en hex para navegadores antiguos.
   Sin media queries salvo el bloque final medido: todo fluido con clamp(),
   auto-fit y flex-wrap.
   =========================================================================== */

:root{
  --bg:#F5EFE4;
  --bg-2:#EDE2D0;
  --ink:#241E19;
  /* Turquesa: no es el acento, es la SUPERFICIE. El verde de Kiwi brilla
     porque en su gama cabe luminosidad y saturación muy altas a la vez,
     puesto contra negro casi puro — no por ser verde. El amarillo permite
     lo mismo (cálido); el turquesa es el punto equivalente en frío, y no lo
     usa nadie más en el rubro. Con tinta encima aguanta 9.9:1. */
  --acid:#21D9C2;
  /* Casi negro con sesgo verdoso: el "negro casi puro" contra el que Kiwi
     pone su brillo, aquí virado un grado hacia el turquesa en vez de neutro,
     para que los dos campos sigan siendo la misma familia. */
  --deep:#0F2624;
  /* Sobre el negro verdoso el cuerpo va en crema. El turquesa se reserva ahí
     para cifras y palabras sueltas — mismo mecanismo que antes con naranja
     y azul, solo que ahora ambos campos brillan en vez de solo uno. */
  --on-deep:#F5EFE4;
  --rule:currentColor;

  --body:'Public Sans',ui-sans-serif,system-ui,sans-serif;

  /* Escala 1.25 (tercera mayor) desde 16px */
  --t-xs:.64rem;
  --t-sm:.8rem;
  --t-base:1rem;
  --t-md:1.25rem;
  --t-lg:1.5625rem;
  --t-xl:1.9531rem;
  --t-2xl:2.4414rem;
  --t-3xl:3.0518rem;
  /* la declaración: el titular ocupa el primer golpe de vista y nada más */
  --t-claim:clamp(2.6rem,5vw + 1rem,5.25rem);
  --t-claim-s:clamp(2.1rem,3.5vw + 1rem,3.5rem);

  /* Base 4pt, nueve pasos */
  --s-3xs:.125rem;
  --s-2xs:.25rem;
  --s-xs:.5rem;
  --s-sm:.75rem;
  --s-md:1rem;
  --s-lg:1.5rem;
  --s-xl:2.5rem;
  --s-2xl:4rem;
  --s-3xl:6rem;

  --gutter:clamp(1.25rem,5vw,4.5rem);
  --measure:65ch;

  /* Radio 0 en todo. Antes había una excepción para las pastillas de etiqueta;
     al pasar los rótulos a texto pelado sin fondo dejó de haber pastillas, así
     que la excepción se fue con ellas y en el sistema no queda una sola
     esquina redondeada. */
  --hair:1px;
  --slab:2px;
}

@supports (color:oklch(0.5 0.1 50)){
  :root{
    --bg:oklch(0.95 0.02 78);
    --bg-2:oklch(0.92 0.03 74);
    --ink:oklch(0.20 0.018 50);
    --acid:oklch(0.796 0.139 181);
    --deep:oklch(0.249 0.029 188);
    --on-deep:oklch(0.95 0.02 78);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  /* hueco para la barra de acción fija, que si no tapa el final del pie */
  padding-bottom:84px;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-md);
  line-height:1.25;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--body);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.045em;
  text-transform:lowercase;
  overflow-wrap:anywhere;
  min-width:0;
}
p{max-width:var(--measure)}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%;height:auto}
strong,b{font-weight:700}
ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:var(--slab) solid currentColor;outline-offset:3px}

/* El registro no anima. Lo único que se mueve es la opacidad al pasar por
   encima, y eso ya respeta la preferencia por sí solo. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--acid);padding:12px 18px;font-weight:700;z-index:99;text-transform:lowercase}
.skip:focus{left:12px;top:12px}

/* ── campos ───────────────────────────────────────────────────────────────
   La unidad de composición: bloques enteros de un color. Nada de secciones
   separadas por líneas, nada de contenedores con marco. */
.wrap{max-width:82rem;margin-inline:auto;padding-inline:var(--gutter)}

.sec{padding-block:var(--s-3xl)}
.field--paper{background:var(--bg);color:var(--ink)}
.field--paper2{background:var(--bg-2);color:var(--ink)}
.field--acid{background:var(--acid);color:var(--ink)}
.field--deep{background:var(--deep);color:var(--on-deep)}

/* ── tipografía de declaración ────────────────────────────────────────────
   Cuatro grados y ya. La jerarquía la hace el tamaño y el tracking, no la
   familia ni el color. */

/* el titular de portada: ocupa el primer golpe de vista */
.claim{
  font-size:var(--t-claim);font-weight:700;
  line-height:.88;letter-spacing:-.05em;
  text-transform:lowercase;max-width:17ch;
}
/* los titulares largos de las landings piden más caja de línea */
.claim--wide{max-width:26ch;font-size:var(--t-claim-s);line-height:.94}

/* el encabezado de un campo: la frase que resume la sección */
.say{
  font-size:var(--t-xl);font-weight:700;
  line-height:1;letter-spacing:-.035em;
  text-transform:lowercase;max-width:24ch;
}
.say--wide{max-width:34ch}

/* antetítulo. Sirve para ubicarse, no para leerse. */
.tag{
  font-size:var(--t-sm);font-weight:600;
  text-transform:lowercase;letter-spacing:0;
  opacity:.7;margin-bottom:var(--s-md);
}

.body{font-size:var(--t-md);line-height:1.4;max-width:46ch}
.note{font-size:var(--t-sm);opacity:.7;max-width:52ch}
/* La letra menuda lleva la dirección postal, que es obligatoria por CAN-SPAM
   en todo correo comercial y por tanto tiene que poder leerse: al 60% daba
   4.16:1 sobre crema. Al 72% cumple sin dejar de ser el último grado. */
.fine{font-size:var(--t-xs);opacity:.72;line-height:1.5;max-width:70ch}

/* El texto secundario se apaga con opacidad, y cuánto puede apagarse depende
   del campo: sobre crema hay 15.6:1 de margen y sobre el turquesa 9.23:1. Con
   el naranja anterior el suelo global del 70% no llegaba a 4.5:1 y había que
   subirlo a 82%; con turquesa el 70% ya da 4.69:1 —pasa, pero raspando— así
   que se mantiene igual el suelo del 82% (6.35:1): más margen no estorba, y
   así todos los campos claros comparten el mismo número. */
.field--acid .tag,
.field--acid .note,
.field--acid .fine,
.field--acid .row__kick,
.field--acid .row__para,
.field--acid .paso__b,
.field--acid .proof span,
.field--acid .qs .ans,
.field--acid .shot__cap span{opacity:.82}
.field--acid .vs__a{opacity:.72}

/* El espejo de .field--deep .paso__n / .ft .act más abajo: en el campo
   casi-negro la cifra y la acción saltan en turquesa porque un campo entero
   de un solo color, con todo en tinta, no tiene dónde posarse la vista. Aquí
   es al revés — cifra y acción saltan en casi-negro sobre el turquesa.
   Reservado para cifras y palabras sueltas, nunca para un párrafo entero. */
.field--acid .act,
.bar.on-acid .act,
.field--acid .proof b{color:var(--deep)}

/* ── acción ───────────────────────────────────────────────────────────────
   El botón es una palabra subrayada. Sin caja, sin relleno, sin radio, sin
   contorno. El rectángulo de color era lo que hacía que la página pareciera
   una plantilla; el subrayado grueso hace el mismo trabajo y no compite con
   el campo. Al pasar por encima solo baja la opacidad. */
.act{
  display:inline-block;
  font-size:var(--t-lg);font-weight:700;
  letter-spacing:-.03em;text-transform:lowercase;
  border-bottom:var(--s-2xs) solid currentColor;
  padding-bottom:var(--s-3xs);
  min-height:44px;cursor:pointer;
  background:none;border-inline:0;border-top:0;color:inherit;
  font-family:var(--body);
  transition:opacity 120ms cubic-bezier(.16,1,.3,1);
}
.act:hover{opacity:.55}
.act:active{opacity:.35}
.act--sm{font-size:var(--t-base);border-bottom-width:var(--slab);min-height:auto}
.act--big{font-size:var(--t-2xl);letter-spacing:-.04em}

/* la acción y su nota al lado, en la misma línea de base */
.acts{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-md) var(--s-lg);margin-top:var(--s-xl)}
.acts .note{margin:0}

/* ── cabecera ─────────────────────────────────────────────────────────────
   Marca, idioma y una acción. Nada más: en este registro el primer golpe de
   vista es la frase, no el cromo. Se fue la franja superior de aviso y su
   texto pasó al antetítulo del titular, donde se lee de verdad. */
.bar{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s-sm) var(--s-lg);
  padding:var(--s-md) var(--gutter);
}
.field--acid+.bar,.bar.on-acid{background:var(--acid)}
.bar__mark{font-size:var(--t-md);font-weight:700;letter-spacing:-.04em;text-transform:lowercase}
.bar__end{display:flex;align-items:baseline;gap:var(--s-lg)}
.bar__lang{font-size:var(--t-sm);text-transform:lowercase;border-bottom:var(--hair) solid currentColor}
.bar__lang:hover{opacity:.55}

/* ── portada: la declaración y nada más ───────────────────────────────────
   Sin retícula de dos columnas y sin ficha de precio flotando al lado. La
   frase, la cifra en una línea, el porqué y la acción — en ese orden. La
   tarjeta negra del precio era la última caja que quedaba en la página. */
/* La declaración ocupa el alto de la pantalla y comparte campo con la barra:
   el primer golpe de vista es la frase, la cifra y una acción. `svh` y no
   `vh` porque en un teléfono la barra del navegador se come los 100vh y
   cortaba las pruebas por la mitad. Se descuenta el alto de la cabecera
   pegajosa y el de la barra fija para que la cuenta cierre. */
.top{
  min-height:calc(100svh - 8.5rem);
  display:grid;align-content:center;
  padding-block:var(--s-2xl) var(--s-3xl);
}
.top__cifra{
  margin-top:var(--s-lg);
  font-size:var(--t-lg);font-weight:700;letter-spacing:-.035em;
  text-transform:lowercase;font-variant-numeric:tabular-nums;
}
.top .body{margin-top:var(--s-lg)}
.top__cuenta{
  margin-top:var(--s-lg);padding-left:var(--s-md);
  border-left:var(--slab) solid currentColor;
  font-size:var(--t-base);line-height:1.45;max-width:46ch;opacity:.85;
}

/* ── filas: el patrón que sustituye a todas las rejillas de celdas ────────
   Un filete de pelo arriba de cada fila y nada más. Sirve para lo que
   incluye el precio, los oficios, la comparación y las pruebas. Se acabaron
   las bandas negras de las rejillas con hueco: donde no hay fila, no hay
   nada que pintar. */
.rows{display:grid}
.row{
  display:grid;gap:var(--s-sm) var(--s-lg);
  padding-block:var(--s-lg);
  border-top:var(--hair) solid var(--rule);
}
.row:last-child{border-bottom:var(--hair) solid var(--rule)}
.row__name{
  font-size:var(--t-lg);font-weight:700;line-height:1;
  letter-spacing:-.035em;text-transform:lowercase;
}
.row__para{font-size:var(--t-base);line-height:1.35;opacity:.75;max-width:52ch}
.row__cifra{
  font-size:var(--t-lg);font-weight:700;line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.row__kick{font-size:var(--t-sm);opacity:.65;text-transform:lowercase}

/* lo que incluye: nombre + explicación */
.rows--incluye .row{grid-template-columns:minmax(11rem,1fr) minmax(0,2fr)}
/* la comparación: concepto + una agencia + conmigo */
.rows--vs .row{grid-template-columns:minmax(7rem,.9fr) minmax(0,1fr) minmax(0,1fr)}
.rows--vs .row--head{padding-block:var(--s-sm)}
.rows--vs .row--head span{font-size:var(--t-sm);text-transform:lowercase;opacity:.65}
.rows--vs .row--head .is-mine{opacity:1;font-weight:700}
/* la columna de la agencia se apaga, pero no por debajo de 4.5:1 sobre crema:
   al 60% daba 4.18:1 y el texto que dice lo que cobra la competencia es
   justo el que el cliente lee con lupa */
.vs__a{opacity:.68;font-size:var(--t-base);line-height:1.35}
.vs__b{font-size:var(--t-base);line-height:1.35;font-weight:700}

/* los oficios: una fila por oficio, con la flecha al final */
.rows--oficios .row{grid-template-columns:1fr auto;align-items:baseline}
.rows--oficios .row:hover{opacity:.55}
.rows--oficios .row__go{font-size:var(--t-lg);font-weight:700;line-height:1}

/* las pruebas del encabezado: tres columnas bajo un solo filete */
.proofs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  gap:var(--s-lg) var(--s-xl);
  margin-top:var(--s-xl);padding-top:var(--s-lg);
  border-top:var(--hair) solid var(--rule);
}
.proof{font-size:var(--t-base);line-height:1.35;max-width:24ch}
.proof b{display:block;font-size:var(--t-lg);font-weight:700;letter-spacing:-.035em;line-height:1;text-transform:lowercase;font-variant-numeric:tabular-nums}
.proof span{display:block;margin-top:var(--s-2xs);opacity:.7;font-size:var(--t-sm)}

/* ── pasos: la cifra desnuda, sin celda y sin fondo ───────────────────────── */
.pasos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:var(--s-xl);margin-top:var(--s-2xl);
}
.paso__n{
  display:block;font-size:var(--t-3xl);font-weight:700;
  line-height:.8;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
}
.field--paper .paso__n,.field--paper2 .paso__n{color:var(--deep)}
.field--acid .paso__n{color:var(--ink);opacity:.55}
.field--deep .paso__n{color:var(--acid)}
.paso__t{display:block;margin-top:var(--s-md);font-size:var(--t-lg);font-weight:700;line-height:1;letter-spacing:-.04em;text-transform:lowercase}
.paso__b{display:block;margin-top:var(--s-sm);font-size:var(--t-base);line-height:1.35;opacity:.8}

/* ── demos: las capturas a sangre, sin marco ──────────────────────────────
   Eran dos fichas con contorno de 3px y pie de foto. En este registro la
   prueba se enseña cruda: la imagen y su nombre debajo en pequeño. */
.shots{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:var(--s-lg);margin-top:var(--s-2xl);
}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.shot__cap{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-md);margin-top:var(--s-sm)}
.shot__cap b{font-size:var(--t-base);font-weight:700;text-transform:lowercase;letter-spacing:-.02em}
.shot__cap span{font-size:var(--t-sm);opacity:.7}
.shot:hover{opacity:.55}

/* ── preguntas ────────────────────────────────────────────────────────────
   Kiwi las deja abiertas en dos columnas porque tiene cinco. Aquí son doce:
   abiertas son un muro de texto de tres pantallas, así que se quedan en
   <details> nativo — cero JS. Lo que cambia es todo lo demás: filete de
   pelo, minúscula, sin caja y el signo en fino a la derecha. */
.qs{margin-top:var(--s-2xl)}
.qs details{border-top:var(--hair) solid var(--rule)}
.qs details:last-child{border-bottom:var(--hair) solid var(--rule)}
.qs summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-lg);
  padding-block:var(--s-lg);cursor:pointer;list-style:none;
  font-size:var(--t-lg);font-weight:700;line-height:1.05;
  letter-spacing:-.035em;text-transform:lowercase;
}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";font-weight:400;font-size:var(--t-lg);line-height:1;flex:none;opacity:.7}
.qs details[open] summary::after{content:"–"}
.qs summary:hover{opacity:.55}
.qs .ans{padding-bottom:var(--s-lg);max-width:62ch;font-size:var(--t-base);line-height:1.45;opacity:.8}

/* ── pie ──────────────────────────────────────────────────────────────────
   Cierra en casi-negro con la última acción a tamaño de titular. */
.ft{background:var(--deep);color:var(--on-deep);padding-block:var(--s-3xl) var(--s-xl)}
.ft__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:var(--s-2xl)}
.ft .act{color:var(--acid)}
.ft__links b{display:block;font-size:var(--t-sm);opacity:.65;text-transform:lowercase;margin-bottom:var(--s-sm)}
.ft__links a{display:block;padding-block:var(--s-sm);font-size:var(--t-base);text-transform:lowercase;border-top:var(--hair) solid currentColor}
.ft__links a:hover{opacity:.55}
.ft__end{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-xs) var(--s-lg);
  margin-top:var(--s-2xl);padding-top:var(--s-lg);
  border-top:var(--hair) solid currentColor;
  font-size:var(--t-sm);opacity:.65;
}
.ft__end a{border-bottom:var(--hair) solid currentColor}

/* ── barra de acción fija: el teléfono nunca sale de pantalla ─────────────
   En casi-negro, con las dos acciones subrayadas. Sin rectángulos: la barra
   ya es el campo de color, los botones dentro no necesitan otro. */
.fixedbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--deep);color:var(--on-deep);
  padding:var(--s-md) var(--gutter);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:var(--s-md) var(--s-xl);
}
.fixedbar .act{font-size:var(--t-base);border-bottom-width:var(--slab);min-height:auto}
.fixedbar .act:first-child{color:var(--acid)}

/* La barra lleva las mismas dos acciones que el encabezado. En el primer
   pantallazo de un teléfono eso es decir cuatro veces lo mismo, así que se
   retira mientras la declaración está a la vista y entra al primer empujón
   de scroll. Sin JS: animación guiada por el scroll. Donde no se soporte, se
   queda quieta y visible — el teléfono nunca desaparece. Solo en páginas con
   declaración: el 404 no tiene scroll que la hiciera aparecer. */
@supports (animation-timeline:scroll()){
  body:has(section.top) .fixedbar{
    animation:barra-entra linear both;
    animation-timeline:scroll(root block);
    animation-range:0 300px;
  }
  @keyframes barra-entra{
    0%,72%{transform:translateY(100%)}
    100%{transform:translateY(0)}
  }
}
@media (prefers-reduced-motion:reduce){
  body:has(section.top) .fixedbar{animation:none;transform:none}
}

/* Único bloque de media queries del proyecto. No es estético: es el teléfono
   de 360×640, donde el cromo permanente se come la pantalla. */
@media (max-width:560px){
  :root{--t-claim:clamp(2.2rem,10vw,3rem)}
  .bar{padding-block:var(--s-sm)}
  .bar__end{gap:var(--s-md)}
  .top{padding-block:var(--s-2xl) var(--s-xl)}
  .sec{padding-block:var(--s-2xl)}
  /* las filas de tres columnas se ahogan: pasan a bloques con su etiqueta */
  .rows--vs .row{grid-template-columns:1fr;gap:var(--s-2xs)}
  .rows--vs .row--head{display:none}
  .vs__a::before{content:"una agencia";display:block;font-size:var(--t-xs);text-transform:lowercase;opacity:.7;margin-bottom:2px}
  .vs__b::before{content:"conmigo";display:block;font-size:var(--t-xs);text-transform:lowercase;opacity:.7;margin-bottom:2px;font-weight:400}
  .vs__a{margin-top:var(--s-xs)}
  .rows--incluye .row{grid-template-columns:1fr}
  .fixedbar{padding:var(--s-sm) var(--s-md);gap:var(--s-md)}
}

/* páginas legales: una columna de lectura, sin adornos */
.legal h1{font-size:var(--t-2xl);margin-bottom:var(--s-lg)}
.legal h2{font-size:var(--t-lg);margin-top:var(--s-xl);margin-bottom:var(--s-sm)}
.legal p{margin-bottom:var(--s-md);max-width:66ch;font-size:var(--t-base);line-height:1.5}
.legal a{border-bottom:var(--hair) solid currentColor}
.legal a:hover{opacity:.55}