/* ==========================================================================
   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}}

/* Solo padding-top: el atajo "padding:56px 0 0" ponía en 0 el padding lateral
   de .container en todo <section class="section container">, porque va
   después en la hoja. En móvil el contenido quedaba pegado al borde. */
.section{padding-top:56px}
@media(min-width:900px){.section{padding-top:var(--gap-section)}}

.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)}
.topbar a.phone,.topbar a.mail{font-weight:400}

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}
.mobile-menu a.header-cta{color:var(--white);text-align:center}
.mobile-menu a.menu-tel{font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--text-2)}

/* ---------- 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)}
/* .dark a no debe teñir el texto del botón azul (quedaba azul claro sobre azul, 4,15:1) */
.dark a.btn-primary,.dark a.btn-primary: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)}
/* .card va después de .dark en la hoja: sin esta regla "card dark" quedaba
   blanca con texto claro, y la sección "La fábrica" del home no se leía. */
.card.dark{background:var(--ink);border-color:var(--dark-border)}

/* Enlaces dentro del texto de artículos y listas: subrayados, para que no
   dependan solo del color (WCAG 1.4.1, "link-in-text-block" de Lighthouse) */
main p a:not(.btn),main li a:not(.btn),main label a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,minmax(0,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,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,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 .eyebrow{color:var(--blue-light)}
.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 y .spec-table son <table> de verdad desde el 21-sep-2026: sin ellas el
   texto que extrae un crawler pegaba etiqueta y valor ("Operarios2", "AR20002.000 / hora").
   Se les devuelve el layout de grid con display, que es lo que ya tenían. Nota: anular el
   display de tabla quita la semántica de tabla del árbol de accesibilidad; el marcado
   semántico se conserva en el HTML, que es lo que leen los crawlers. Si algún día se
   quiere también para lectores de pantalla, hay que añadir role="table"/"row"/"cell"
   explícitos y desactivar la regla no-redundant-role de html-validate. */
.model-table{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:block;border-collapse:collapse}
.model-table thead,.model-table tbody,.model-table tfoot{display:block}
.model-table th,.model-table td{font-weight:inherit;text-align:left;padding:0;vertical-align:inherit}
.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-table tbody:last-child tr:last-child,.model-table tfoot tr:last-child{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}}
/* Variante de 4 columnas (etapa / qué pasa / equipo / qué falla), para el artículo
   del proceso del maíz. Mismo criterio que cols-3: en pantalla ancha la tabla se
   sale de la columna de prosa con márgenes negativos, sin tocar el width. */
.model-table.cols-4{margin:20px 0}
@media(min-width:760px){.model-table.cols-4 .model-row{grid-template-columns:minmax(120px,0.9fr) minmax(150px,1.2fr) minmax(130px,1fr) minmax(170px,1.4fr)}}
@media(min-width:1100px){.model-table.cols-4{margin-left:-110px;margin-right:-110px}}
.model-table.cols-4 .model-name{font-size:15px}
/* Comparativa criterio / opción A / opción B (artículo manual vs automática) */
.model-table.compare .model-name{font-size:15px}
.model-equipo{font-weight:600;color:var(--text)}
.model-equipo a{color:inherit;text-decoration:none}
.model-equipo a:hover{color:var(--blue);text-decoration:underline}
/* Apilada en móvil, cols-4 perdía el sentido: la cabecera se oculta y tres de las
   cuatro celdas se veían iguales. Cada celda lleva su rótulo con data-label. */
@media(max-width:759px){
  .model-table.cols-4 .model-row > [data-label]::before,
  .model-table.compare .model-row > [data-label]::before{content:attr(data-label) " · ";font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-3)}
}
.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}
.model-table tfoot td{display:block;border-bottom: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-hover);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 ---------- */
/* Las preguntas van dentro de un <h3> para que delimiten el pasaje: el encabezado
   es puramente semántico y no debe aportar ningún estilo propio. */
.faq-h{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
/* Respuesta corta al inicio de los artículos largos: el pasaje tiene que responder
   solo, sin necesidad del resto del texto. */
.tldr{background:var(--paper);border-left:3px solid var(--blue);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:18px 22px;margin:0 0 24px}
.tldr p{margin:0;color:var(--text)}
.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;display:block;border-collapse:collapse}
.spec-table tbody{display:block}
.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);font-weight:400;text-align:left}
.spec-row .v{font-family:var(--font-mono);text-align:left}
.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}
/* El marcador va posicionado, no como ítem flex: con display:flex en el <li>,
   cada <strong> o <a> del texto se volvía una columna aparte que no
   envolvía, y en móvil la política de datos desbordaba a 593 px. */
.includes-list li{position:relative;padding-left:20px;color:var(--text)}
.includes-list li::before{content:"/";position:absolute;left:0;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) */

/* ---------- Fotos ampliables y visor ----------
   Clarity mostró que ~36% de los toques en /catalogo/ caían sobre fotos que
   no hacían nada. Toda foto de producto ahora lleva a algún lado: a su ficha
   (.card-media) o al visor (.zoom, que abre main.js en un <dialog>). */
a.card-media{display:block;max-width:100%}
a.zoom{position:relative;display:block;max-width:100%;cursor:zoom-in;border-radius:var(--radius-lg)}
a.zoom::after{
  content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;
  border-radius:var(--radius-md);background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:.82;transition:opacity .15s,background-color .15s
}
a.zoom:hover::after,a.zoom:focus-visible::after{opacity:1;background-color:var(--blue)}
/* Dentro de un marco con aspect-ratio (asadores) el enlace hereda el alto,
   para que el max-height:100% de la foto siga resolviendo contra el marco */
.media-placeholder > a.zoom{height:100%;display:flex;align-items:center;justify-content:center}

dialog.lightbox{padding:0;margin:0;border:0;background:transparent;width:100vw;height:100vh;max-width:100vw;max-height:100vh;color:var(--white)}
dialog.lightbox[open]{display:flex;align-items:center;justify-content:center}
dialog.lightbox::backdrop{background:rgba(19,23,32,.94)}
html:has(dialog.lightbox[open]){overflow:hidden}
.lb-figure{margin:0;display:flex;flex-direction:column;gap:12px;max-width:min(92vw,900px)}
dialog.lightbox[open] .lb-figure{animation:lb-in .24s cubic-bezier(.16,1,.3,1)}
@keyframes lb-in{from{opacity:0;transform:scale(.97)}}
.lb-img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;margin:0 auto;background:var(--white);border-radius:var(--radius-lg)}
.lb-caption{display:flex;gap:16px;justify-content:space-between;align-items:baseline;font-size:14px;line-height:1.45;color:var(--dark-muted)}
.lb-count{font-size:12px;letter-spacing:.08em;color:var(--white);white-space:nowrap;font-variant-numeric:tabular-nums}
.lb-btn{
  position:fixed;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;border:1px solid var(--dark-border);border-radius:var(--radius-md);
  background:var(--ink-soft);color:var(--white);cursor:pointer;transition:background-color .15s,border-color .15s
}
.lb-btn:hover{background:var(--blue);border-color:var(--blue)}
.lb-btn:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px}
.lb-btn[hidden]{display:none}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
/* En móvil las flechas van abajo para no tapar la foto; también se desliza con el dedo */
@media(max-width:899px){
  .lb-figure{padding-bottom:72px}
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none}
  .lb-prev{left:calc(50% - 56px)}
  .lb-next{right:calc(50% - 56px)}
}
@media(prefers-reduced-motion:reduce){dialog.lightbox[open] .lb-figure{animation:none}}

/* ---------- 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}
/* El "p{color:var(--text-2)}" global ganaba aquí: el texto del pie quedaba
   #4B5260 sobre grafito (2,3:1). Y el enlace de WhatsApp, azul sobre grafito (1,7:1). */
footer.site p{color:var(--dark-muted)}
footer.site a{color:var(--blue-light)}
footer.site a:hover{color:var(--white)}
footer.site .cols p a{color:inherit;text-decoration:underline;text-decoration-color:var(--dark-border);text-underline-offset:3px}
footer.site .cols p a:hover{color:var(--white);text-decoration-color:currentColor}
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}}