/* ==========================================================================
   Chicmachine — Design system
   Outfit (titulares y texto) + IBM Plex Mono (datos técnicos)
   Tipografías del Manual de Identidad Chicmachine.
   Outfit es variable: un solo archivo cubre los pesos 100–900.
   ========================================================================== */

@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/outfit-variable.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2')}

:root{
  /* Color — paleta del Manual de Identidad Chicmachine.
     El azul es del logo: SOLO acción/acento, nunca fondo grande */
  --blue:#0D2DB2;                /* azul eléctrico — acento, botones */
  --blue-hover-on-blue:#021D7F;  /* azul profundo — logotipo, titulares */
  --blue-hover-on-dark:#4056CE;
  --blue-light:#8FA0F0;
  --lavanda:#5D6CD1;       /* relieve, detalles, gráficos */
  --acero:#2E5375;         /* versión sobria, técnica */
  --amber:#C2660A;         /* fuera del manual: se conserva para el badge de patente */
  --amber-hover:#A6560A;
  --ink:#131720;           /* grafito — texto y fondos oscuros */
  --ink-soft:#1E2430;
  --paper:#EEF0F4;         /* niebla — fondos claros, separadores */
  --white:#FFFFFF;
  --text:#131720;
  --text-2:#4B5260;
  --text-3:#656C7A;        /* el #6B7280 del manual queda en 4.24:1 sobre --paper; se oscurece lo mínimo para pasar AA */
  --border:#D7DBE2;
  --divider:#E4E7ED;
  --success:#2F7D4F;
  --success-bg:#EAF6EE;
  --danger:#B4231F;
  --danger-bg:#FBEAE9;

  /* Tonos sobre fondo oscuro (--ink) */
  --dark-border:#2C3340;
  --dark-muted:#9AA1AD;
  --dark-text:#C3CBF6;
  --dark-outline:#3A4252;

  /* Topbar */
  --topbar-text:#9AA1AD;
  --topbar-phone:#E8EBED;

  /* Bloques de imagen pendiente (media-placeholder) */
  --media-border:#2C3340;
  --media-border-soft:#4A5261;
  --media-text:#7A8290;
  --media-light-bg-1:#E4E7ED;
  --media-light-bg-2:#EEF0F4;
  --media-light-border:#C9CEDA;

  /* Estado "recomendado" en tablas de modelos */
  --rec-bg:#EDEFFB;

  /* Rayado diagonal del bloque de imagen pendiente */
  --media-stripe-1:#20232B80;
  --media-stripe-2:#2A2E3880;

  --font-display:'Outfit',-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:'Outfit',-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',"SF Mono",Consolas,monospace;

  --radius-sm:2px;
  --radius-md:3px;
  --radius-lg:4px;

  --container:1240px;
  --gap-section:80px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover-on-blue)}
button,input,textarea,select{font-family:inherit;font-size:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-0.005em;line-height:1.05;margin:0}
.mono{font-family:var(--font-mono)}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
@media(min-width:640px){.container{padding:0 32px}}

.section{padding:56px 0 0}
@media(min-width:900px){.section{padding:var(--gap-section) 0 0}}

.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;
  color:var(--blue);margin-bottom:12px;text-transform:uppercase;
}

h1{font-size:clamp(34px,6vw,52px)}
h2{font-size:clamp(26px,4vw,38px)}
h3{font-size:clamp(19px,3vw,24px)}
p{margin:0 0 1em;color:var(--text-2)}
.lead{font-size:18px;line-height:1.55;color:var(--text-2);max-width:560px}
/* h1 y h2 tienen margin:0, así que el lead quedaba pegado al titular */
h1 + .lead,h2 + .lead{margin-top:16px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:16px;
  padding:15px 26px;border-radius:var(--radius-lg);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;min-height:44px;line-height:1.2;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--blue-hover-on-blue);color:var(--white)}
.btn-dark{background:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--blue)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-outline-light{background:transparent;border-color:var(--dark-outline);color:var(--white)}
.btn-outline-light:hover{border-color:var(--white)}
.btn-link{background:none;border:none;color:var(--blue);font-weight:600;font-size:15px;padding:12px 4px;text-decoration:underline;cursor:pointer}
.btn-link:hover{color:var(--blue-hover-on-blue)}
.btn-sm{padding:10px 14px;font-size:13px;font-weight:600;border-radius:var(--radius-md)}
.btn-block{width:100%}

.badge{
  display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-size:10px;font-weight:600;letter-spacing:0.1em;padding:5px 8px;border-radius:var(--radius-sm);
  background:var(--amber-hover);color:var(--white);text-transform:uppercase;
}
.chip{
  font-family:var(--font-mono);font-size:13px;padding:10px 14px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--white);color:var(--text);cursor:pointer;
  min-height:44px;
}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--white);border-color:var(--ink)}
.chip-plain{font-family:var(--font-body);font-weight:600;font-size:14px}

/* ---------- Header ---------- */
/* En móvil el topbar ocupaba 153px (19% de la pantalla) de datos de contacto
   ANTES del logo, empujando todo el contenido hacia abajo. Se oculta: el
   teléfono y el correo siguen en el pie, y el botón flotante de WhatsApp
   cubre el contacto inmediato. */
.topbar{display:none;background:var(--ink);color:var(--topbar-text);font-size:13px}
@media(min-width:900px){.topbar{display:block}}
.topbar .container{padding:9px 24px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.topbar a,.topbar button{color:var(--topbar-text);background:none;border:none;font-size:13px;font-weight:600;cursor:pointer;padding:0}
.topbar a:hover,.topbar button:hover{color:var(--white)}
.topbar .spacer{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.topbar .phone{font-family:var(--font-mono);color:var(--topbar-phone)}

header.site{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--border)}
[id]{scroll-margin-top:88px}
header.site .bar{max-width:var(--container);margin:0 auto;padding:0 24px;min-height:72px;display:flex;align-items:center;gap:20px}
@media(min-width:640px){header.site .bar{padding:0 32px}}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{height:40px;width:auto}
.brand .tag{font-family:var(--font-mono);font-size:9px;color:var(--blue);letter-spacing:0.1em;border-left:1px solid var(--border);padding-left:10px;line-height:1.3;display:none}
@media(min-width:480px){.brand .tag{display:block}}
.nav-main{display:none;margin-left:auto;align-items:center;gap:2px}
@media(min-width:940px){.nav-main{display:flex}}
.nav-main a{font-size:14px;font-weight:600;color:var(--text-2);padding:9px 13px;border-radius:var(--radius-md);white-space:nowrap}
.nav-main a:hover{color:var(--text)}
.nav-main a[aria-current="page"]{background:var(--paper);color:var(--text)}
.header-cta{display:none;flex-shrink:0}
@media(min-width:640px){.header-cta{display:inline-flex}}
.menu-toggle{display:inline-flex;margin-left:auto;background:none;border:1px solid var(--border);border-radius:var(--radius-md);width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer}
@media(min-width:940px){.menu-toggle{display:none}}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{display:none}
.mobile-menu{display:none;border-top:1px solid var(--border);background:var(--white)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:14px 24px;font-weight:600;color:var(--text);border-bottom:1px solid var(--divider)}
.mobile-menu .header-cta{display:block;margin:16px 24px}

/* ---------- Secciones oscuras ---------- */
.dark{background:var(--ink);color:var(--white)}
.dark p{color:var(--dark-text)}
.dark .eyebrow{color:var(--blue-light)}
.dark a{color:var(--blue-light)}
.dark a:hover{color:var(--white)}

/* .hero / .hero .container se eliminaron: eran el grid de 2 columnas del hero
   con imagen, que ya no existe. Solo quedan las clases que siguen en uso. */
/* Hero: en móvil solo texto y compacto, para que la grilla de máquinas
   entre en la primera pantalla. En escritorio, texto y foto lado a lado. */
.hero-split{display:grid;gap:32px;align-items:center;padding-top:32px;padding-bottom:36px}
@media(min-width:900px){.hero-split{grid-template-columns:1.1fr 0.9fr;gap:48px;padding-top:56px;padding-bottom:56px}}
/* Foto del hero: la laminadora manual, que es el único producto patentado.
   Es un enlace a su ficha, así que la patente se puede verificar. */
.hero-photo{display:none}
@media(min-width:900px){
  .hero-photo{display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:relative;background:var(--white);border-radius:var(--radius-lg);
    padding:26px 22px 18px;min-height:300px;text-decoration:none;
    border:1px solid transparent;transition:border-color .15s ease}
  .hero-photo:hover{border-color:var(--blue)}
  .hero-photo:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .hero-photo img{max-width:100%;max-height:232px;width:auto;height:auto}
  .hero-photo-badge{position:absolute;top:12px;left:12px}
  .hero-photo-cap{display:flex;flex-direction:column;gap:2px;align-items:center;
    text-align:center;margin-top:14px;padding-top:13px;
    border-top:1px solid var(--divider);width:100%}
  .hpc-name{font-weight:700;font-size:16px;color:var(--text)}
  .hpc-meta{font-size:11px;color:var(--text-3);letter-spacing:0.02em}
  .hero-photo:hover .hpc-meta{color:var(--blue)}
}

/* Grilla de máquinas: reemplaza a la imagen plana con las 6 máquinas.
   Cada tarjeta es un enlace real a su ficha, legible en móvil y con la
   tipografía de la marca (la imagen dejaba cada máquina en ~54px a 375px). */
.machine-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.machine-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:980px){.machine-grid{grid-template-columns:repeat(5,1fr);gap:16px}}
.machine-card{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  text-decoration:none;transition:border-color .15s ease,transform .1s ease;
}
.machine-card:hover{border-color:var(--blue);transform:translateY(-2px)}
.machine-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mc-photo{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:10px}
.mc-photo img{max-width:100%;max-height:100%;width:auto;height:auto}
.mc-badge{
  position:absolute;top:7px;left:7px;z-index:1;font-family:var(--font-mono);
  font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
  background:var(--amber-hover);color:var(--white);padding:3px 6px;border-radius:var(--radius-sm);
}
.mc-body{padding:10px 12px 13px;border-top:1px solid var(--divider);display:flex;flex-direction:column;gap:3px}
.mc-name{font-weight:700;font-size:15px;color:var(--text);line-height:1.15}
.mc-spec{font-size:11.5px;color:var(--text-3)}

.hero-copy{padding:24px 0}
@media(min-width:900px){.hero-copy{padding:64px 0}}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}

.media-placeholder{
  background-image:repeating-linear-gradient(135deg,var(--media-stripe-1) 0 9px,var(--media-stripe-2) 9px 18px);
  border:1px solid var(--media-border);border-radius:var(--radius-lg);
  display:flex;align-items:flex-end;padding:18px;position:relative;min-height:220px;
}
.media-placeholder::before,.media-placeholder::after{
  content:"";position:absolute;width:16px;height:16px;border:1px solid var(--media-border-soft);
}
.media-placeholder::before{top:8px;left:8px;border-right:none;border-bottom:none}
.media-placeholder::after{bottom:8px;right:8px;border-left:none;border-top:none}
.media-placeholder span{font-family:var(--font-mono);font-size:11px;color:var(--media-text);letter-spacing:0.06em}
.media-placeholder.light{background-image:repeating-linear-gradient(135deg,var(--media-light-bg-1) 0 9px,var(--media-light-bg-2) 9px 18px);border-color:var(--border)}
.media-placeholder.light::before,.media-placeholder.light::after{border-color:var(--media-light-border)}
.media-placeholder.light span{color:var(--text-3)}

.stats-strip{border-top:1px solid var(--dark-border);margin-top:40px}
.stats-strip .container{display:grid;grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){.stats-strip .container{grid-template-columns:repeat(4,1fr)}}
.stat{padding:24px 20px 26px 0;border-bottom:1px solid var(--dark-border)}
@media(min-width:640px){.stat{border-bottom:none}}
.stat .value{font-family:var(--font-mono);font-size:28px;font-weight:600;color:var(--white)}
.stat .label{font-size:13px;color:var(--dark-muted);margin-top:6px}

/* ---------- Tarjetas ---------- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg)}
.grid{display:grid;gap:20px}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.product-layout{grid-template-columns:1.1fr 1fr;align-items:start}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Configurador ---------- */
.configurator{grid-template-columns:1fr;overflow:hidden;padding:0}
@media(min-width:900px){.configurator{display:grid;grid-template-columns:1.15fr 1fr}}
.configurator-form{padding:28px;display:flex;flex-direction:column;gap:24px}
.configurator-field .field-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--text-2);margin-bottom:12px;text-transform:uppercase}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.configurator-result{padding:28px;background:var(--ink);color:var(--white);display:flex;flex-direction:column}
.configurator-result .rec-name{font-size:34px;font-weight:700;font-family:var(--font-display);letter-spacing:-0.01em;line-height:1;margin-bottom:6px}
.configurator-result .rec-rate{font-family:var(--font-mono);font-size:15px;color:var(--blue-light);margin-bottom:16px}
.configurator-result .rec-note{color:var(--dark-text);margin-bottom:14px}
.configurator-result .rec-summary{font-family:var(--font-mono);font-size:12px;color:var(--dark-muted);line-height:1.7;white-space:pre-line;margin-bottom:20px}
.configurator-result .rec-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px}

/* ---------- Tabla de modelos ---------- */
.model-table{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.model-row{display:grid;grid-template-columns:1fr;gap:12px;padding:18px 20px;border-bottom:1px solid var(--divider);align-items:center}
@media(min-width:760px){.model-row{grid-template-columns:minmax(110px,1fr) minmax(80px,1fr) minmax(120px,0.8fr) minmax(140px,1.3fr) 150px;gap:16px}}
.model-row:last-of-type{border-bottom:none}
/* Variante de 3 columnas (modelo / capacidad / perfil), usada en los artículos del blog.
   La columna de perfil necesita bastante ancho, así que se le da más peso y la cifra
   baja a 14px para que "1.000 arepas/hora" quepa en una línea. */
@media(min-width:760px){.model-table.cols-3 .model-row{grid-template-columns:minmax(140px,1fr) minmax(120px,0.85fr) minmax(200px,1.5fr)}}
.model-table.cols-3{margin:20px 0}
.model-table.cols-3 .model-rate{font-size:14px}
/* En pantallas anchas la tabla se sale de la columna de prosa: el texto del artículo
   se mantiene en una medida legible, pero la tabla aprovecha el espacio disponible.
   Se usan solo márgenes negativos (sin width) para que el ancho no pueda desincronizarse
   del desplazamiento. A 1100px de viewport quedan ~162px libres a cada lado, así que
   -110px entra con holgura. No poner margin inline en el HTML: le ganaría a esta regla. */
@media(min-width:1100px){.model-table.cols-3{margin-left:-110px;margin-right:-110px}}
.model-table .model-name a{color:inherit;text-decoration:none}
.model-table .model-name a:hover{color:var(--blue);text-decoration:underline}
.model-row.head{background:var(--paper);font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--text-2);display:none}
@media(min-width:760px){.model-row.head{display:grid}}
.model-row.rec{background:var(--rec-bg)}
.model-name{font-size:18px;font-weight:700}
.model-patent{font-family:var(--font-mono);font-size:10px;color:var(--amber);letter-spacing:0.08em;margin-top:4px}
.model-bar{height:8px;background:var(--divider);border-radius:2px;overflow:hidden}
.model-bar span{display:block;height:100%;background:var(--blue)}
.model-rate{font-family:var(--font-mono);font-size:16px}
.model-who{font-size:14px;color:var(--text-2)}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--border)}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-q{
  width:100%;background:none;border:none;text-align:left;padding:20px 0;
  display:flex;gap:16px;align-items:baseline;cursor:pointer;font-family:var(--font-body);
}
.faq-q .q-text{font-size:17px;font-weight:600;color:var(--text);flex:1}
.faq-q .q-sign{font-family:var(--font-mono);font-size:18px;color:var(--blue);flex-shrink:0}
.faq-a{margin:0 0 22px;max-width:640px;color:var(--text-2);display:none}
.faq-item.open .faq-a{display:block}

/* ---------- Catálogo ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:22px}
.product-card{display:flex;flex-direction:column;overflow:hidden}
.product-card .media-placeholder{min-height:180px;position:relative}
.product-card .body{padding:22px;display:flex;flex-direction:column;flex:1}
.product-card .cat{font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:0.08em;margin-bottom:8px;text-transform:uppercase}
.product-card .spec{font-family:var(--font-mono);font-size:12px;color:var(--text);border-top:1px solid var(--divider);padding-top:12px;margin-top:auto}
.product-card .media-placeholder .badge{position:absolute;top:12px;left:12px}

/* ---------- Producto ---------- */
.spec-table{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--white);overflow:hidden}
.spec-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:13px 18px;border-bottom:1px solid var(--divider)}
.spec-row:last-child{border-bottom:none}
.spec-row .k{color:var(--text-2)}
.spec-row .v{font-family:var(--font-mono)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tab{font-family:var(--font-mono);font-size:13px;letter-spacing:0.04em}
.includes-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.includes-list li{display:flex;gap:10px;color:var(--text)}
.includes-list li::before{content:"/";color:var(--blue);font-weight:700}
/* Lista numerada de los artículos del blog. El sitio no tenía ningún <ol> hasta el
   artículo de capacidad; hereda la tipografía del cuerpo y usa el mismo azul de acento
   que el marcador "/" de .includes-list, para que las dos listas se lean como familia. */
.article-steps{margin:20px 0 24px;padding-left:22px}
.article-steps li{margin-bottom:10px;color:var(--text)}
.article-steps li::marker{color:var(--blue);font-weight:700}

/* ---------- Formulario ---------- */
.form-field{display:flex;flex-direction:column;gap:7px}
.form-field label{font-size:13px;font-weight:600;color:var(--text)}
.form-field input,.form-field textarea,.form-field select{
  border:1px solid var(--border);border-radius:var(--radius-md);padding:13px 14px;
  background:var(--white);color:var(--text);min-height:44px;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--blue);outline:2px solid transparent}
.form-field textarea{min-height:100px;resize:vertical}
.form-note{font-family:var(--font-mono);font-size:11px;color:var(--text-3);border-top:1px solid var(--divider);padding-top:14px}
.form-error{font-family:var(--font-mono);font-size:13px;color:var(--danger);background:var(--danger-bg);padding:12px 14px;border-radius:var(--radius-md)}

/* ---------- Video facade ---------- */
.video-facade{aspect-ratio:16/9;background:var(--ink);border-radius:var(--radius-lg);border:1px solid var(--media-border);position:relative;overflow:hidden;display:block;cursor:pointer}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block}
.video-facade .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:70px;height:70px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.video-facade .play::after{content:"";border-left:20px solid var(--white);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.video-facade iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Botón flotante WhatsApp ---------- */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--blue);color:var(--white);font-weight:700;font-size:14px;
  padding:14px 18px;border-radius:100px;box-shadow:0 8px 24px rgba(24,25,26,.28);
  min-height:48px;
}
.wa-float:hover{background:var(--blue-hover-on-blue);color:var(--white)}
.wa-float svg{flex-shrink:0}
.wa-float .wa-label{display:none}
@media(min-width:640px){.wa-float .wa-label{display:inline}}
/* Nunca debe tapar el CTA sticky del header ni el form: se retira cuando el footer/CTA final está en viewport */
body.wa-hide .wa-float{display:none}
/* En páginas con barra fija inferior (ninguna por ahora) sumar var(--wa-bottom-offset) */

/* ---------- Footer ---------- */
footer.site{margin-top:80px;background:var(--ink);color:var(--dark-muted);border-top:1px solid var(--dark-border)}
footer.site .cols{display:grid;gap:32px;padding:48px 24px}
@media(min-width:640px){footer.site .cols{grid-template-columns:1.4fr 1fr 1fr 1fr;padding:56px 32px}}
/* Los títulos de columna del pie son <h3> (antes eran <h4>, se subieron de
   nivel para no saltar de h2 a h4). El selector debe seguirlos: si apunta a
   h4 no aplica nada y caen en el h3 global, que es un titular enorme. */
footer.site h3{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--white);margin:0 0 14px;text-transform:uppercase;line-height:1.3;font-weight:600}
footer.site .brand-mark-img{height:36px;width:auto;vertical-align:middle}
footer.site .brand-tag{font-family:var(--font-mono);font-size:10px;color:var(--blue-light);letter-spacing:0.1em;margin-left:8px}
footer.site .links{display:flex;flex-direction:column;gap:9px}
footer.site .links a{color:var(--dark-muted)}
footer.site .links a:hover{color:var(--white)}
footer.site .bottom{border-top:1px solid var(--dark-border);padding:18px 24px;font-size:13px}
@media(min-width:640px){footer.site .bottom{padding:20px 32px}}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{font-family:var(--font-mono);font-size:12px;color:var(--text-3);margin-bottom:20px}
.breadcrumbs a{color:var(--text-3)}
.breadcrumbs a:hover{color:var(--blue)}

/* ---------- Utilidades ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.max-w-sm{max-width:520px}
.max-w-md{max-width:640px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:var(--white);padding:10px 16px;z-index:100}
.skip-link:focus{left:8px;top:8px}

@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important}}