/* ==========================================================================
   Veta Labs — sistema visual
   Una sola hoja para todo el sitio público. Antes cada página llevaba los
   estilos inline: el navegador no podía cachearlos y cada página repetía el
   mismo CSS. Acá se descarga una vez y sirve para todas.

   Índice
   1.  Tokens
   2.  Base y tipografía
   3.  Layout (wrap, section, grid)
   4.  Cabecera y navegación
   5.  Botones y enlaces
   6.  Tarjetas y motivos de marca
   7.  Bloques de contenido (hero, pasos, planes, FAQ, casos)
   8.  Formulario
   9.  Pie de página y barra fija mobile
   10. Animación de entrada
   ========================================================================== */

/* ============================ 1. TOKENS =================================== */
:root{
  /* Paleta del manual de marca. Nada fuera de estos cinco valores. */
  --ink:#111111;        /* negro profundo  */
  --ink-2:#27272a;      /* negro elevado   */
  --ink-3:#3f3f46;      /* borde en oscuro */
  --ink-soft:#52525b;   /* gris oscuro     */
  --ink-faint:#a1a1aa;  /* gris metálico   */
  --paper:#f4f4f5;      /* blanco          */
  --paper-2:#ebebed;    /* blanco hundido  */
  --card:#ffffff;
  --line:#e4e4e7;

  --font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SF Mono',monospace;

  /* Escala fluida: un solo valor sirve de 360px a 1440px. */
  --t-hero:clamp(34px,5.6vw,60px);
  --t-h2:clamp(27px,4vw,40px);
  --t-h3:clamp(19px,2.2vw,21px);
  --t-lead:clamp(17px,2vw,20px);
  --t-body:16px;
  --t-small:14.5px;

  --gap:clamp(16px,2vw,20px);
  --pad-x:clamp(20px,4vw,44px);
  --pad-y:clamp(56px,8vw,104px);
  --wrap:1160px;

  --radius:0;                       /* esquinas rectas: lenguaje de plano */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ======================= 2. BASE Y TIPOGRAFÍA ============================= */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
/* El scroll suave solo si la persona no pidió menos movimiento. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--t-body)/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

[hidden]{display:none!important}

h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Titulares en caja alta y apretados, como en las piezas de marca. */
h1,h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-.03em;line-height:1.05}
h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.25}
h1{font-size:var(--t-hero)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
strong{font-weight:600;color:var(--ink)}

/* Foco visible siempre: se navega con teclado sin adivinar dónde estás. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.sec--dark :focus-visible{outline-color:var(--paper)}

/* Saltar al contenido: primer tabulador de cada página. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 18px;font:600 14px var(--font-body)}
.skip:focus{left:8px;top:8px}

.eyebrow{font:700 12px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);display:inline-flex;align-items:center;gap:10px;margin:0 0 16px}
.eyebrow::before{content:'';width:6px;height:6px;background:currentColor;flex:none}
.sec--dark .eyebrow{color:var(--ink-faint)}

.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-soft);max-width:62ch}
.sec--dark .lead{color:var(--ink-faint)}
.muted{color:var(--ink-soft)}
.sec--dark .muted{color:var(--ink-faint)}
.fine{font-size:13px;line-height:1.55;color:var(--ink-soft)}
.sec--dark .fine{color:var(--ink-faint)}
.mono{font-family:var(--font-mono)}

/* ============================ 3. LAYOUT ================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:820px}

.sec{padding-block:var(--pad-y);scroll-margin-top:76px}
.sec--tight{padding-block:clamp(40px,6vw,72px)}
/* Alternancia de fondos: el contraste entre secciones es parte del diseño. */
.sec--paper{background:var(--paper)}
.sec--sunk{background:var(--paper-2)}
.sec--card{background:var(--card)}
.sec--dark{background:var(--ink);color:var(--paper)}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--paper)}

.sec__head{max-width:70ch;margin-bottom:clamp(32px,4.5vw,52px)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head h2{margin-bottom:16px}

.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Regla de cota: línea fina con topes cuadrados. */
.rule{display:flex;align-items:center;gap:12px;width:100%;margin-block:clamp(28px,4vw,40px)}
.rule i{height:1px;background:var(--line);flex:1}
.rule b{width:5px;height:5px;background:var(--ink);flex:none}
.sec--dark .rule i{background:var(--ink-3)}
.sec--dark .rule b{background:var(--paper)}

/* ===================== 4. CABECERA Y NAVEGACIÓN ========================== */
.site-header{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}
.site-header::before{content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(244,244,245,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:64px;padding-block:10px}

.brand{display:inline-flex;align-items:center;gap:10px;font:700 18px var(--font-display);
  letter-spacing:-.02em;flex:none}
.brand svg{width:24px;height:24px;flex:none}

.nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px)}
.nav a:not(.btn){font:500 14.5px var(--font-body);color:var(--ink-soft);padding:6px 0;
  border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.nav a:not(.btn):hover{color:var(--ink)}
.nav a:not(.btn)[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}

.nav-toggle{display:none;align-items:center;gap:9px;background:none;border:1px solid var(--line);
  padding:9px 16px;min-height:44px;font:600 14px var(--font-body);color:var(--ink);cursor:pointer;border-radius:0}
.nav-toggle__bars{display:block;width:16px;height:10px;position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:'';position:absolute;left:0;right:0;
  height:1.5px;background:var(--ink);transition:transform .22s var(--ease),opacity .22s var(--ease)}
.nav-toggle__bars::before{top:0}
.nav-toggle__bars::after{bottom:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(4.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-4.25px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  /* Especificidad 0,2,0 a propósito: `.btn` se declara más abajo con la misma
     especificidad que `.site-header__cta` y, al ir después, ganaba el display. */
  .site-header .site-header__cta{display:none}
  /* Cajón mobile: ocupa el ancho, no tapa la cabecera y se cierra con Esc. */
  .nav{position:fixed;inset:64px 0 0 0;flex-direction:column;align-items:stretch;gap:0;
    justify-content:flex-start;background:var(--paper);
    padding:8px var(--pad-x) calc(28px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
  .nav[data-open="true"]{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav a:not(.btn){padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav a:not(.btn)[aria-current="page"]{border-bottom-color:var(--line)}
  .nav .btn{margin-top:18px;justify-content:center;border-bottom:0}
}

/* ==================== 5. BOTONES Y ENLACES =============================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border:1px solid transparent;border-radius:var(--radius);
  font:700 15px var(--font-body);cursor:pointer;text-align:center;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),opacity .18s var(--ease)}
.btn--sm{padding:11px 20px;min-height:44px;font-size:14px}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--ink-2)}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--outline-light{background:transparent;border-color:var(--ink-3);color:var(--paper)}
.btn--outline-light:hover{border-color:var(--paper)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.btn--block{width:100%}

/* Enlace de texto con subrayado propio: se ve que es un enlace sin color. */
.link{border-bottom:1.5px solid currentColor;padding-bottom:1px;font-weight:600;
  transition:opacity .18s var(--ease)}
.link:hover{opacity:.6}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font:700 14.5px var(--font-body)}
.link-arrow span{transition:transform .18s var(--ease)}
.link-arrow:hover span{transform:translateX(4px)}

.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line);
  background:var(--paper);font:600 12.5px var(--font-body);color:var(--ink-soft);border-radius:0}
.sec--dark .chip{border-color:var(--ink-3);background:transparent;color:var(--ink-faint)}
.chip--live{background:var(--ink);color:var(--paper);border-color:var(--ink);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em}
.chip--live i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}

/* ================ 6. TARJETAS Y MOTIVOS DE MARCA ========================= */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,32px)}
.card--sunk{background:var(--paper);border-color:transparent}
.card--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card--dark h3{color:var(--paper)}
.card--hover{transition:border-color .18s var(--ease),transform .18s var(--ease)}
.card--hover:hover{border-color:var(--ink)}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:15.5px}
.card--dark p{color:var(--ink-faint)}
.card__num{font:700 12px var(--font-mono);letter-spacing:.1em;color:var(--ink-faint);
  display:block;margin-bottom:16px}

/* Marco de registro: esquinas en L, no un borde completo. */
.marco{position:relative}
.marco::before,.marco::after{content:'';position:absolute;width:13px;height:13px;
  border:1px solid currentColor;opacity:.45;pointer-events:none}
.marco::before{top:9px;left:9px;border-right:0;border-bottom:0}
.marco::after{bottom:9px;right:9px;border-left:0;border-top:0}

/* Marcador de contenido pendiente. Se ve en pantalla a propósito: si queda uno
   suelto en producción, salta a la vista. Buscar "PLACEHOLDER" para listarlos. */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:32px 24px;min-height:220px;
  border:1px dashed var(--ink-faint);background:
    repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(161,161,170,.13) 9px,rgba(161,161,170,.13) 10px);
  color:var(--ink-soft)}
.placeholder b{font:700 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.placeholder span{font-size:13px;max-width:34ch;line-height:1.5}
.sec--dark .placeholder{border-color:var(--ink-3);color:var(--ink-faint)}

/* ====================== 7. BLOQUES DE CONTENIDO ========================== */

/* --- Hero --- */
.hero{padding-block:clamp(40px,6vw,84px) clamp(36px,5vw,64px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(36px,5vw,68px);align-items:center}
@media (max-width:900px){ .hero__grid{grid-template-columns:1fr;gap:36px} }
.hero h1{margin-bottom:20px;max-width:16ch}
.hero .lead{margin-bottom:clamp(24px,3vw,32px);max-width:50ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
@media (max-width:420px){ .hero__cta .btn{width:100%} }
.hero__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font:500 14.5px var(--font-body);color:var(--ink-soft)}
.hero__price b{font:700 15.5px var(--font-display);color:var(--ink)}

/* Mockup de tienda en el celular. HTML y CSS, sin imagen: pesa cero, no
   provoca saltos de layout y se ve nítido en cualquier pantalla. */
.phone{width:min(100%,320px);margin-inline:auto;background:var(--ink);padding:10px;
  border:1px solid var(--ink-3)}
.phone__screen{background:var(--card);aspect-ratio:9/17;display:flex;flex-direction:column;overflow:hidden}
.phone__bar{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;
  border-bottom:1px solid var(--line);font:700 11px var(--font-mono);letter-spacing:.1em;color:var(--ink)}
.phone__bar i{display:flex;gap:4px}
.phone__bar i b{width:13px;height:1.5px;background:var(--ink-faint);display:block}
.phone__body{flex:1;display:flex;flex-direction:column;padding:13px;gap:11px;min-height:0}
.phone__img{flex:1;min-height:0;background:var(--paper-2);position:relative;overflow:hidden}
.phone__img::after{content:'';position:absolute;inset:22% 20%;border:1px solid var(--ink-faint);opacity:.5}
.phone__img::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(17,17,17,.045) 11px,rgba(17,17,17,.045) 12px)}
.phone__title{font:600 14px var(--font-display);color:var(--ink)}
.phone__price{font:700 17px var(--font-display);color:var(--ink)}
.phone__sizes{display:flex;gap:6px}
.phone__sizes b{flex:1;text-align:center;padding:6px 0;border:1px solid var(--line);
  font:600 11px var(--font-body);color:var(--ink-soft)}
.phone__sizes b:first-child{border-color:var(--ink);color:var(--ink)}
.phone__buy{background:var(--ink);color:var(--paper);text-align:center;padding:12px;
  font:700 12.5px var(--font-body)}
.phone__trust{display:flex;justify-content:space-between;font:500 9.5px var(--font-body);color:var(--ink-soft)}

/* --- Franja de confianza --- */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  font:500 13.5px var(--font-body);color:var(--ink-soft);text-align:center}
.trust span[aria-hidden]{color:var(--ink-faint)}

/* --- Lista de dolores / checks --- */
.ticks li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-soft)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:'';flex:none;width:7px;height:7px;background:var(--ink);margin-top:9px}
.sec--dark .ticks li{border-color:var(--ink-3);color:var(--ink-faint)}
.sec--dark .ticks li::before{background:var(--paper)}
.ticks--cross li::before{background:var(--ink-faint)}

/* --- Pasos numerados --- */
.step{position:relative;background:var(--paper);padding:clamp(24px,3vw,30px);overflow:hidden}
.sec--sunk .step{background:var(--paper)}
.sec--card .step{background:var(--paper)}
.step__n{position:absolute;top:10px;right:16px;font:700 clamp(38px,5vw,50px) var(--font-display);
  color:var(--paper-2);line-height:1;pointer-events:none}
.sec--sunk .step__n{color:var(--line)}
.step__tag{font:700 11.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);display:block;margin-bottom:14px;position:relative}
.step h3{margin-bottom:8px;position:relative}
.step p{color:var(--ink-soft);font-size:15px;position:relative}

/* --- Planes de precio --- */
.plans{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(272px,1fr));align-items:start}
.plan{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  padding:clamp(26px,3vw,34px);height:100%}
.plan--feature{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan--feature h3{color:var(--paper)}
.plan__flag{font:700 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-bottom:14px}
.plan--feature .plan__flag{color:var(--paper)}
.plan h3{margin-bottom:6px;font-size:22px}
.plan__for{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px;min-height:44px}
.plan--feature .plan__for{color:var(--ink-faint)}
.plan__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.plan__price em{font:500 13px var(--font-body);font-style:normal;color:var(--ink-soft)}
.plan--feature .plan__price em{color:var(--ink-faint)}
.plan__price b{font:700 clamp(30px,3.4vw,36px) var(--font-display);letter-spacing:-.03em}
.plan__price i{font:500 13px var(--font-body);font-style:normal;color:var(--ink-soft)}
.plan--feature .plan__price i{color:var(--ink-faint)}
.plan__list{margin:20px 0 26px;flex:1}
.plan__list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:14.5px;color:var(--ink-soft)}
.plan--feature .plan__list li{color:var(--ink-faint)}
.plan__list li::before{content:'';flex:none;width:6px;height:6px;background:var(--ink);margin-top:8px}
.plan--feature .plan__list li::before{background:var(--paper)}
.plan .btn{width:100%}

/* --- FAQ: <details> nativo, sin JS y accesible desde el teclado --- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px 0;cursor:pointer;list-style:none;
  font:600 clamp(16px,2vw,17.5px)/1.4 var(--font-display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:13px;height:13px;margin-top:5px;
  border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq summary:hover{color:var(--ink-soft)}
.faq__a{padding:0 0 22px;max-width:74ch;color:var(--ink-soft);font-size:15.5px}
.faq__a p+p{margin-top:12px}

/* --- Casos y proyectos --- */
.case{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  background:var(--card);border:1px solid var(--line)}
.case__media{background:var(--ink);display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,3vw,40px);min-height:260px}
.case__media .placeholder{width:100%;border-color:var(--ink-3);color:var(--ink-faint);background:
  repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(244,244,245,.07) 9px,rgba(244,244,245,.07) 10px)}
.case__body{padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;justify-content:center}
.case__body h3{font-size:clamp(21px,2.6vw,25px);margin-bottom:0}
.case__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.case__body p{color:var(--ink-soft);margin-bottom:18px}
.case--flip .case__media{order:2}
@media (max-width:760px){ .case--flip .case__media{order:0} }

/* Bloque Contexto / Problema / Solución / Resultado */
.cps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cps>div{background:var(--card);padding:clamp(22px,3vw,30px)}
.cps h3{font-size:15px;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);
  font-weight:700;color:var(--ink-soft);margin-bottom:12px}
.cps p{color:var(--ink-soft);font-size:15.5px}
.cps p+p{margin-top:10px}
@media (min-width:760px){ .cps{grid-template-columns:1fr 1fr} }

/* Fichas del método de conversión (numeradas 1..6) */
.method{counter-reset:m;display:grid;gap:1px;background:var(--ink-3);border:1px solid var(--ink-3)}
@media (min-width:640px){ .method{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .method{grid-template-columns:repeat(3,1fr)} }
.method li{background:var(--ink);padding:clamp(24px,3vw,32px);counter-increment:m}
.method li::before{content:counter(m,decimal-leading-zero);display:block;
  font:700 12px var(--font-mono);letter-spacing:.1em;color:var(--ink-faint);margin-bottom:14px}
.method h3{font-size:18px;color:var(--paper);margin-bottom:8px}
.method p{color:var(--ink-faint);font-size:15px}

/* Franja de CTA compacta */
.cta-strip{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;
  background:var(--ink);color:var(--paper);padding:clamp(24px,3vw,34px) clamp(26px,4vw,40px)}
.cta-strip h3{color:var(--paper);margin-bottom:5px}
.cta-strip p{color:var(--ink-faint);font-size:15px}

/* Retrato del equipo */
.person{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(26px,4vw,44px);align-items:center}
@media (max-width:640px){ .person{grid-template-columns:1fr;justify-items:start} }
.person__photo{width:min(200px,60vw);aspect-ratio:1;overflow:hidden;border-radius:50%;flex:none}
.person__photo img{width:100%;height:100%;object-fit:cover}

/* ========================== 8. FORMULARIO ================================ */
.form{display:flex;flex-direction:column;gap:18px}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>label,.fieldset__legend{font:700 11.5px var(--font-mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.on-dark .field>label,.on-dark .fieldset__legend{color:var(--ink-faint)}
.field input,.field select,.field textarea{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:0;
  padding:14px 15px;font:400 16px var(--font-body);color:var(--ink);
  transition:border-color .18s var(--ease)}
.field textarea{resize:vertical;min-height:92px}
.field select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field [aria-invalid="true"]{border-color:var(--ink);border-width:2px}
.field__error{font:600 12.5px var(--font-body);color:var(--ink)}
.field__hint{font:400 12.5px var(--font-body);color:var(--ink-soft)}

/* En fondo oscuro el formulario invierte, manteniendo el contraste alto. */
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{
  background:var(--ink);border-color:var(--ink-3);color:var(--paper)}
.on-dark .field input:focus,.on-dark .field select:focus,.on-dark .field textarea:focus{border-color:var(--paper)}
.on-dark .field input::placeholder,.on-dark .field textarea::placeholder{color:var(--ink-soft)}
.on-dark .field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%)}
.on-dark .field [aria-invalid="true"]{border-color:var(--paper)}
.on-dark .field__error{color:var(--paper)}
.on-dark .field__hint{color:var(--ink-faint)}

.fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
/* Casilla dibujada como chip: se toca fácil en el celular y no depende de color. */
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--line);
  background:var(--card);font:600 14px var(--font-body);color:var(--ink-soft);cursor:pointer;
  transition:border-color .16s var(--ease),background-color .16s var(--ease),color .16s var(--ease)}
.opt input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.on-dark .opt span{background:var(--ink);border-color:var(--ink-3);color:var(--ink-faint)}
.on-dark .opt input:checked+span{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.on-dark .opt input:focus-visible+span{outline-color:var(--paper)}

.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__status{font:600 14px/1.55 var(--font-body);margin:0}
.form__done{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3vw,32px);
  border:1px solid var(--line);background:var(--card)}
.on-dark .form__done{background:var(--ink);border-color:var(--ink-3)}
.form__done h3{font-size:21px}
.form__done p{color:var(--ink-soft);font-size:15.5px}
.on-dark .form__done p{color:var(--ink-faint)}

/* ============= 9. PIE DE PÁGINA Y BARRA FIJA MOBILE ====================== */
.site-footer{background:var(--ink);color:var(--ink-faint);font-size:14.5px}
.site-footer a{transition:color .18s var(--ease)}
.site-footer a:hover{color:var(--paper)}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(28px,4vw,44px);padding-block:clamp(48px,6vw,68px)}
.site-footer h2,.site-footer h3{color:var(--paper)}
.site-footer__col h3{font:700 11.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:16px}
.site-footer__col li{margin-bottom:11px}
.site-footer__brand{display:inline-flex;align-items:center;gap:10px;font:700 17px var(--font-display);
  color:var(--paper);margin-bottom:14px}
.site-footer__brand svg{width:22px;height:22px}
.site-footer__base{border-top:1px solid var(--ink-3);padding-block:22px;display:flex;flex-wrap:wrap;
  gap:10px 22px;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-soft)}

/* Barra fija: solo en celular, solo después del hero. El CTA principal siempre
   a un toque, sin un botón flotante que tape el contenido. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;align-items:center;
  padding:10px var(--pad-x) calc(10px + env(safe-area-inset-bottom));
  background:rgba(244,244,245,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .26s var(--ease)}
.dock[data-show="true"]{transform:none}
.dock .btn{flex:1}
.dock__wa{flex:none;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
@media (max-width:760px){
  .dock{display:flex}
  body{padding-bottom:0}
  .site-footer__base{padding-bottom:84px}
}

/* ====================== 10. ANIMACIÓN DE ENTRADA ========================= */
/* Sutil y barata: opacidad + 18px. La añade el JS solo si hay IntersectionObserver
   y si la persona no pidió menos movimiento, así nunca deja contenido invisible. */
[data-reveal].is-armed{opacity:0;transform:translateY(18px)}
[data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal].is-armed{opacity:1;transform:none}
}

/* ============================ IMPRESIÓN ================================== */
@media print{
  .site-header,.dock,.nav-toggle{display:none!important}
  body{background:#fff}
  .sec--dark{background:#fff;color:#111}
}

/* ============= AJUSTES FINOS AÑADIDOS AL SISTEMA BASE ==================== */
/* El CTA vive dos veces en la cabecera: dentro del cajón (mobile) y suelto a
   la derecha (escritorio). Cada ancho muestra uno solo. */
@media (min-width:901px){ .nav .btn{display:none} }

/* Rejilla técnica de fondo para bloques oscuros: textura, no ruido. */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(244,244,245,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(244,244,245,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 100%);
          mask-image:radial-gradient(120% 100% at 50% 0%,#000 30%,transparent 100%)}
.sec--paper.grid-bg::before,.sec--sunk.grid-bg::before{
  background-image:linear-gradient(rgba(17,17,17,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(17,17,17,.05) 1px,transparent 1px)}

/* Cifra grande de apoyo (no es una métrica de negocio, es un rótulo). */
.figure-line{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.figure-line>div{background:var(--card);padding:clamp(24px,3vw,32px)}
.figure-line b{display:block;font:700 clamp(30px,3.6vw,40px) var(--font-display);
  letter-spacing:-.03em;margin-bottom:6px}
.figure-line p{color:var(--ink-soft);font-size:15px}

/* Migas de pan */
.breadcrumb{font:500 13px var(--font-body);color:var(--ink-soft);margin-bottom:18px}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumb li::after{content:'/';margin-left:8px;color:var(--ink-faint)}
.breadcrumb li:last-child::after{content:''}
.breadcrumb a{border-bottom:1px solid transparent}
.breadcrumb a:hover{border-bottom-color:currentColor}

/* Tabla comparativa sencilla (precios / alcances) */
.table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--card)}
table.cmp{border-collapse:collapse;width:100%;min-width:560px}
table.cmp th,table.cmp td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--ink-soft);vertical-align:top}
table.cmp thead th{font:700 11.5px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap}
table.cmp tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}

/* Prosa larga (privacidad, artículos) */
.prose h2{font-size:clamp(20px,2.6vw,24px);margin:clamp(34px,4vw,46px) 0 14px}
.prose h3{font-size:18px;margin:26px 0 10px}
.prose p,.prose li{color:var(--ink-soft);font-size:16px;line-height:1.7}
.prose p{margin-bottom:14px}
.prose ul{margin:0 0 16px;padding-left:20px;list-style:disc}
.prose li{margin-bottom:7px}
.prose a{border-bottom:1px solid var(--ink-faint)}
.prose a:hover{border-bottom-color:var(--ink)}
.prose code{font:400 14px var(--font-mono);background:var(--paper-2);padding:2px 6px}
.prose .caja{border:1px solid var(--line);background:var(--card);padding:clamp(20px,3vw,26px);margin-bottom:16px}
.prose table{border-collapse:collapse;width:100%;margin-bottom:16px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.5;color:var(--ink-soft);vertical-align:top}
.prose th{font-weight:600;color:var(--ink);white-space:nowrap}

/* ================== CAPTURAS DE PRODUCTO ================================= */
/* Las capturas de celular son verticales y muy altas. En las tarjetas de caso
   se muestran recortadas por arriba —que es donde se identifica el producto—
   y en la página del caso se ven completas. */
.case__media img{max-height:min(46vh,360px);width:auto;object-fit:cover;object-position:top center;
  border:1px solid var(--ink-3)}

.shots{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
.shots figure{margin:0;display:flex;flex-direction:column;gap:12px}
.shots img{width:100%;border:1px solid var(--line);background:var(--card)}
.shots figcaption{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}

/* Rótulo de una captura dentro de .shots (por ejemplo "Antes" / "Ahora"). */
.shots figure>b{font:700 11.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);display:flex;align-items:center;gap:9px}
.shots figure>b::before{content:'';width:6px;height:6px;background:currentColor;flex:none}