/* =========================================================================
   Antelo Hierros -- CSS propio, mobile-first, sin framework.

   Etapa 2 (27/08/2026) estrenó una identidad propia ("grafito + acero +
   óxido"). Fue un error de criterio: el negocio YA tenía identidad y hay que
   reproducirla, no inventarle otra. El 15/09/2026, con el sitio en vivo,
   Andrés lo dijo textual: "no respetaste los colores ni el diseño que tenía
   la otra versión".

   Rediseño fiel (15/09/2026): esta paleta, estas tipografías y estos bloques
   son los de la versión anterior del sitio (WordPress/Divi), MEDIDOS sobre el
   sitio viejo real -- getComputedStyle sobre la home renderizada más su CSS
   compilado (et-core-unified-deferred-15.min.css), no de memoria. El detalle
   completo, en DISENO-VERSION-ANTERIOR.md.

   Lo único que NO se copia del sitio viejo, y por qué:
   - Blanco sobre ámbar (1,76:1) y blanco sobre turquesa (2,09:1): ilegibles.
     Acá esos dos fondos llevan texto azul noche (7,6:1 y 6,4:1).
   - 16/09/2026: Andrés marcó que el terracota había quedado como color
     general del sitio (links, precios, botones, pie, íconos) y no sabía de
     dónde había salido. Revisado contra el CSS real del sitio viejo
     (et-core-unified-deferred-15.min.css, servidor viejo, todavía vivo en
     212.85.7.227): el terracota (#D9522B) aparecía en un ÚNICO lugar de toda
     la home, el fondo de un cartel de "Envíos gratis" que ya no corre; todo
     lo demás (links, precios, botones por defecto, pie) era blanco/negro o
     azul noche (11 apariciones de #2A2E40 contra 3 de #D9522B). Se sacó el
     terracota de todo eso y quedó SOLO en la franja de abajo del hero, que
     es la réplica de ese cartel real. #D9522B con texto blanco da 4,04:1 y
     no pasa AA, por eso la franja usa --rust-600 (#C9481F, 4,74:1) en vez
     del tono exacto -- es la única razón para no usar el color tal cual.
   - A 375 px el hero se apila en vez de partirse en dos. (El sitio viejo
     tampoco desbordaba ahí: lo verifiqué mal la primera vez -- Chrome headless
     en Windows no abre una ventana de menos de ~500 px y RECORTA la captura a
     375 en vez de maquetar angosto, lo que hace pasar por desborde algo que no
     lo es. Medido en serio, con emulación de dispositivo, el viejo daba
     scrollWidth 375 igual que este.)
   ========================================================================= */

/* Fuentes: Roboto (títulos/botones) + Open Sans (texto) se cargan con <link>
   en includes/layout_top.php, no con @import acá -- @import retrasa el
   descubrimiento del request hasta que el navegador parsea este archivo
   entero, <link> lo dispara en paralelo desde el <head>. */

:root{
  /* ---- color: la paleta real de la versión anterior ---- */
  --ink:        #333333;   /* títulos -- el h1..h6 del sitio viejo */
  --ink-soft:   #666666;   /* texto corrido del sitio viejo (5,74:1 sobre blanco) */
  --paper:      #ffffff;   /* fondo de página: blanco puro */
  --paper-raised:#ffffff;
  --surface:    #f4f4f6;   /* relleno suave: campos, cabeceras de tabla, caja de imagen */
  --steel-900:  #1d1f2a;   /* azul noche oscuro: el real del sitio viejo (footer, botones, hover) */
  --steel-800:  #2a2e40;   /* azul noche: el real del sitio viejo (barra de datos, botón "Shop Now", panel del hero) */
  --steel-100:  #eceef4;
  --rust-600:   #c9481f;   /* terracota de trabajo: SOLO la franja debajo del hero (4,74:1 con blanco; el D9522B real no pasa AA con texto blanco) */
  --rust-500:   #d9522b;   /* terracota tal cual el sitio viejo -- ahí sólo estaba en el fondo de UN cartel ("Envíos gratis"), no es un color de uso general */
  --amber:      #ffb456;   /* ámbar del sitio viejo: tarjeta de promoción */
  --amber-strong:#ff9616;
  --teal:       #7ebec5;   /* turquesa del sitio viejo: panel derecho del hero */
  --wa:         #158040;   /* verde WhatsApp ajustado para 5:1 con texto blanco (el oficial #25D366 no pasa contraste) */
  --wa-dark:    #0f6e37;
  --line:       #e3e4e8;
  --line-strong:#cacbd0;   /* el gris de línea del sitio viejo */
  --ok:         #2f7d4f;
  --warn:       #8a5100;

  /* El sitio viejo no tenía una sola esquina redondeada: Divi con
     border-radius 0 en botones, tarjetas y campos. */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --wrap: 1080px;          /* el .et_pb_row del sitio viejo: min(80%, 1080px) */

  --shadow-sm: 0 1px 2px rgba(29,31,42,.07), 0 1px 1px rgba(29,31,42,.05);
  --shadow-md: 0 6px 16px rgba(29,31,42,.10), 0 2px 6px rgba(29,31,42,.06);
  --shadow-lg: 0 18px 40px rgba(29,31,42,.22), 0 4px 12px rgba(29,31,42,.12);

  --font-display: "Roboto", "Segoe UI", Arial, sans-serif;
  --font-body: "Open Sans", "Segoe UI", Arial, sans-serif;

  /* Botones del sitio viejo: Roboto 700, 10 px, MAYÚSCULAS, 4 px de
     interletrado (0,4em sobre 10 px), sin redondeo. */
  --btn-type: 700 .72rem/1 var(--font-display);
  --btn-track: .4em;
}

/* ---------------------------------------------------------------------
   Reset + base
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} }
/* 14 px de base, como el sitio viejo (el nuevo venía en 16). Se toca la raíz
   y no sólo el body para que TODA la escala en rem baje con él. */
html{font-size:87.5%}
body{margin:0;font-family:var(--font-body);color:var(--ink-soft);background:var(--paper);line-height:1.7;font-size:1rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
main{display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;letter-spacing:normal;margin:0 0 .5em;color:var(--ink);font-weight:700}
/* Los titulares del sitio viejo iban en Roboto 900 y en mayúsculas */
h1{font-size:clamp(1.75rem,2.6vw + .95rem,2.9rem);font-weight:900;text-transform:uppercase;line-height:1.15}
h2{font-size:clamp(1.5rem,1.7vw + 1rem,2.2rem);font-weight:900;margin-top:0}
h3{font-size:1.15rem}
h4{font-size:1.05rem}
p{margin:0 0 1em}
.measure{max-width:68ch}
ul,ol{margin:0 0 1em;padding-left:1.3em}
table{font-variant-numeric:tabular-nums}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--steel-800);outline-offset:2px;border-radius:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media(min-width:1180px){.wrap{padding:0}}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--steel-900);color:#fff;padding:10px 16px;z-index:200;border-radius:0}
.skip-link:focus{left:0}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
/* Cabecera del sitio viejo: barra azul noche con dirección, horario y
   teléfono; abajo una banda blanca fina con el logo a la izquierda. */
.site-header{background:var(--paper-raised)}
.topbar{background:var(--steel-800);color:#fff}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:6px 22px;padding:9px 16px;flex-wrap:wrap;font-size:.86rem;font-weight:600}
.topbar-inner a{color:#fff;font-weight:700}
.topbar-inner a:hover{color:var(--amber);text-decoration:none}
.topbar-addr{display:flex;align-items:center;gap:6px}
.topbar-addr svg{flex:none;opacity:.8}
.topbar-horario{color:#d6d8e2}

.header-inner{display:flex;align-items:center;gap:14px;padding:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;color:var(--ink);flex:none}
.logo:hover{text-decoration:none}
.logo-svg{display:block;height:auto}
.logo-svg--footer{color:#fff}

.search{flex:1 1 220px;display:flex;min-width:150px;position:relative}
/* min-width:0 es obligatorio: un <input> dentro de un flex arranca con
   min-width:auto = su ancho minimo intrinseco (unos 20 caracteres), no
   encoge, y empuja al boton de la lupa fuera de la pantalla. Eso metia 21 px
   de desborde a 375 px. */
.search input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line-strong);border-right:0;border-radius:0;font-size:1rem;background:var(--surface);color:var(--ink);font-family:inherit}
.search input:focus{outline:none;border-color:var(--steel-800);background:#fff}
.search button{border:1px solid var(--steel-800);border-left:0;background:var(--steel-800);color:#fff;border-radius:0;padding:0 16px;cursor:pointer;transition:background .15s}
.search button:hover{background:var(--steel-900)}

/* En celular el logo baja a 132 px para que entre en la misma fila que el
   buscador: asi la cabecera ocupa dos renglones y no tres, y el h1 entra en
   la primera pantalla (79 % del trafico es mobile, segun GSC). */
@media(max-width:559px){
  .logo-svg{width:132px}
  .header-inner{gap:10px;padding:12px 16px}
  .search{flex:1 1 140px;min-width:120px}
  .topbar-inner{font-size:.82rem;gap:2px 14px;padding:7px 16px}
}


/* El botón de WhatsApp es del sitio nuevo (no existía en el viejo) y es lo
   que convierte: se queda con tamaño legible, no con los 10 px de los
   botones de Divi. */
.btn-wa{display:flex;align-items:center;gap:7px;background:var(--wa);color:#fff;padding:11px 18px;border-radius:0;white-space:nowrap;font-weight:700;font-size:.95rem;transition:background .15s}
.btn-wa:hover{background:var(--wa-dark);text-decoration:none}
.btn-wa svg{flex:none}
.btn-cart{position:relative;padding:9px;color:var(--ink);border-radius:0;transition:background .15s}
.btn-cart:hover{background:var(--steel-100);text-decoration:none}
.cart-count{position:absolute;top:2px;right:2px;background:var(--steel-800);color:#fff;font-size:.7rem;font-weight:700;border-radius:50%;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 0 0 2px var(--paper-raised)}

.catnav{background:var(--steel-900);overflow-x:auto;position:sticky;top:0;z-index:40;scrollbar-width:thin}
.catnav-inner{display:flex;gap:0;padding:0 8px;white-space:nowrap}
.catnav-inner a{color:#d3d6e0;padding:12px 13px;font-size:.93rem;font-weight:600;display:inline-block;border-bottom:3px solid transparent;transition:background .15s,color .15s,border-color .15s}
.catnav-inner a:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none;border-bottom-color:#fff}
.catnav-inner a:first-child{color:#fff;font-weight:700}

/* barra de acción fija en mobile: siempre a mano el pedido por WhatsApp */
.mobile-actionbar{display:none}
@media (max-width:759px){
  .mobile-actionbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--paper-raised);border-top:1px solid var(--line);
    box-shadow:0 -8px 20px rgba(15,12,8,.10);padding:9px 12px;gap:8px;
    padding-bottom:max(9px, env(safe-area-inset-bottom));
  }
  .mobile-actionbar .btn-wa{flex:1;justify-content:center}
  .mobile-actionbar .btn-cart-mobile{flex:none;display:flex;align-items:center;justify-content:center;width:46px;border:1px solid var(--line-strong);border-radius:0;color:var(--ink);position:relative}
  body{padding-bottom:64px}
  /* la barra fija de abajo ya tiene WhatsApp + carrito -- repetirlos en el
     header angosto le come un tercio de la pantalla al visitante mobile
     (79% del tráfico según GSC). */
  .header-inner .btn-wa,.header-inner .btn-cart{display:none}
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
/* Pie del sitio viejo: panel azul noche con los datos del local y una barra
   casi negra al final con la letra chica. */
.site-footer{background:var(--steel-800);color:#c9ccd6;margin-top:56px}
.footer-top{background:var(--steel-900);color:#fff;padding:26px 16px}
.footer-top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.footer-top h2{color:#fff;font-size:1.5rem;margin:0}
.footer-top p{margin:.2em 0 0;color:#c9ccd6;font-size:1rem}
.footer-inner{display:grid;grid-template-columns:1fr;gap:28px;padding:40px 16px}
@media(min-width:640px){.footer-inner{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.footer-inner{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer-col h3{color:#fff;font-size:.86rem;text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-display);font-weight:700;margin-bottom:14px}
.footer-col p{margin:.3em 0;font-size:.95rem;color:#a9adbd}
.footer-col a{color:#c9ccd6}
.footer-col a:hover{color:#fff}
.footer-col nav{display:flex;flex-direction:column;gap:9px}
.footer-brand{margin:0 0 14px}
/* Barra final casi negra, como la del sitio viejo. El elemento es un .wrap
   (no se toca el markup), así que la banda se extiende de lado a lado con
   una sombra ancha recortada en vertical en vez de con un div nuevo. */
.footer-legal{padding:16px;font-size:.85rem;color:#8a8ea0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid rgba(255,255,255,.08)}
@supports (clip-path: inset(0 -100vmax)){
  .footer-legal{background:var(--steel-900);border-top:0;box-shadow:0 0 0 100vmax var(--steel-900);clip-path:inset(0 -100vmax)}
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
/* Hero partido en dos paneles, como el del sitio viejo: azul noche a la
   izquierda y turquesa a la derecha. Se apilan abajo de 860 px -- el hero
   del sitio viejo, a 375 px, se cortaba por el costado. */
.hero{padding:0;color:#fff;background:var(--steel-800)}
.hero .wrap{padding:0}
.hero-split{display:grid;grid-template-columns:1fr}
@media(min-width:860px){.hero-split{grid-template-columns:58fr 42fr}}
.hero-main{background:var(--steel-800);padding:44px 28px 40px}
.hero-side{background:var(--teal);color:var(--steel-900);padding:34px 28px 38px;display:flex;flex-direction:column;justify-content:center}
@media(min-width:1180px){.hero-main{padding-left:0}.hero-side{padding-right:0}}
.hero h1{color:#fff;margin-bottom:.35em}
.hero-main p{max-width:52ch;color:#d8dae4;font-size:1.05rem}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-badges{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.hero-badge{display:flex;align-items:center;gap:8px;color:#d8dae4;font-size:.93rem;font-weight:600}
.hero-badge svg{flex:none;color:var(--amber)}
.hero .google-rating{color:#fff}
.hero .google-rating:hover{color:var(--amber)}
/* El sitio viejo ponía texto blanco sobre el turquesa (2,09:1, ilegible).
   Acá el panel turquesa lleva el azul noche encima: 7,85:1. */
.hero-side-title{font-family:var(--font-display);font-weight:700;font-size:1.6rem;line-height:1.25;margin:0 0 .4em;color:var(--steel-900)}
.hero-side p{color:#23283a;font-size:1rem;margin-bottom:22px}
.hero-side .btn-primary{align-self:flex-start}

/* Franja terracota debajo del hero, como la de "Envíos gratis" del viejo */
.franja{background:var(--rust-600);color:#fff}
.franja-inner{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;padding:13px 16px;font-weight:700;font-size:1rem}
.franja-inner a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.franja-inner a:hover{color:#ffe0d3}

/* Las dos tarjetas de promoción del sitio viejo: una azul noche, una ámbar */
.promo-duo{display:grid;grid-template-columns:1fr;gap:18px;margin:34px 0 8px}
@media(min-width:760px){.promo-duo{grid-template-columns:1fr 1fr}}
.promo-card{padding:26px 24px 28px;display:flex;flex-direction:column;justify-content:center;min-height:190px}
.promo-card--dark{background:var(--steel-800);color:#fff}
.promo-card--amber{background:var(--amber);color:var(--steel-900)}
.promo-eyebrow{font-size:.93rem;margin:0 0 .35em;font-weight:600}
.promo-card--dark .promo-eyebrow{color:#c9ccd6}
.promo-card--amber .promo-eyebrow{color:#5b3d12}
.promo-title{font-family:var(--font-display);font-weight:700;font-size:1.7rem;line-height:1.25;margin:0 0 .35em}
.promo-card--dark .promo-title{color:#fff}
.promo-card--amber .promo-title{color:var(--steel-800)}
.promo-note{font-size:.92rem;margin:0 0 18px}
.promo-card--dark .promo-note{color:#a9adbd}
.promo-card--amber .promo-note{color:#5b3d12}
.promo-card .btn-primary,.promo-card .btn-secondary{align-self:flex-start}

.section{padding:44px 16px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head .ver-todo{font-weight:700;font-size:.93rem;white-space:nowrap;color:var(--steel-800)}
.section-head .ver-todo:hover{color:var(--steel-900)}

/* Botones: Roboto 700, 10 px, MAYÚSCULAS, 4 px de interletrado, sin
   redondeo -- el "VER MÁS..." del sitio viejo, medido en su CSS. El padding
   derecho lleva menos que el izquierdo porque el interletrado deja un hueco
   detrás de la última letra. */
.btn-primary,.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 22px 15px 26px;border-radius:0;font:var(--btn-type);
  text-transform:uppercase;letter-spacing:var(--btn-track);
  cursor:pointer;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s;
}
.btn-primary svg,.btn-secondary svg{flex:none;width:15px;height:15px;margin-right:-.4em}
.btn-primary{background:var(--steel-800);color:#fff}
.btn-primary:hover{background:var(--steel-900);text-decoration:none}
.btn-primary--onrust{background:#fff;color:var(--steel-900)}
.btn-primary--onrust:hover{background:var(--steel-100);color:var(--steel-900)}
/* sobre el panel turquesa y sobre el ámbar: bloque azul noche, texto blanco */
.hero-side .btn-primary,.promo-card--amber .btn-primary{background:var(--steel-800);color:#fff}
.hero-side .btn-primary:hover,.promo-card--amber .btn-primary:hover{background:var(--steel-900)}
/* sobre fondos que YA son azul noche (el panel izquierdo del hero, el
   resultado de la calculadora): el botón por defecto quedaría del mismo
   color que el fondo. Bloque blanco, texto azul noche, como el "VER MÁS..."
   del sitio viejo sobre sus paneles oscuros. */
.hero-main .btn-primary,.calc-resultado .btn-primary{background:#fff;color:var(--steel-900)}
.hero-main .btn-primary:hover,.calc-resultado .btn-primary:hover{background:var(--steel-100)}
.btn-secondary{background:#fff;color:#000;border-color:#fff}
.btn-secondary:hover{background:transparent;color:#fff;text-decoration:none;border-color:#fff}
/* variante clara del botón secundario, para usar fuera de fondos oscuros */
.btn-secondary--light{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary--light:hover{background:var(--steel-100);color:var(--ink);border-color:var(--ink-soft)}
button.btn-primary,button.btn-secondary{font-family:var(--font-display)}

/* ---------------------------------------------------------------------
   Categorías (home)
   --------------------------------------------------------------------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cat-grid--sub{margin-bottom:24px}
.cat-tile{
  background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:0;
  padding:16px 14px;color:var(--ink);font-weight:700;font-family:var(--font-display);
  display:flex;flex-direction:column;gap:5px;transition:border-color .15s,background .15s,color .15s;
}
.cat-tile:hover{border-color:var(--steel-800);background:var(--steel-800);color:#fff;text-decoration:none}
.cat-count{font-weight:400;font-family:var(--font-body);font-size:.82rem;color:var(--ink-soft)}
.cat-tile:hover .cat-count{color:#c9ccd6}

/* ---------------------------------------------------------------------
   Grilla de productos + tarjeta
   --------------------------------------------------------------------- */
/* Tarjetas de producto del sitio viejo (WooCommerce + Divi): foto, título en
   Open Sans y el precio en Roboto 700 con interletrado. */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
/* La grilla de la tienda vieja no tenia recuadros: foto, titulo y precio
   sueltos sobre el blanco. Se copia eso, con un borde que solo aparece al
   pasar el mouse para que se entienda que la tarjeta entera es un enlace. */
.product-card{background:var(--paper-raised);border:1px solid transparent;border-radius:0;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.product-card:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.product-card:focus-within{border-color:var(--line-strong)}
.product-card-link{color:var(--ink);display:flex;flex-direction:column;height:100%}
.product-card-link:hover{text-decoration:none}
.product-card-img{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-card-img img{width:100%;height:100%;object-fit:contain;padding:8px}
.product-card-body{padding:10px 8px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.product-card h3{font-size:.95rem;margin:0;font-weight:400;line-height:1.5;font-family:var(--font-body);color:var(--ink);flex:1}
.product-card .price{margin:6px 0 0;font-weight:700;color:var(--ink-soft);font-family:var(--font-display);font-size:.95rem;letter-spacing:.14em}
.price-consultar{color:var(--ink-soft);font-weight:600;font-size:.9rem;letter-spacing:normal}
.variants-note{display:inline-flex;align-self:flex-start;margin-top:2px;font-size:.8rem;font-weight:600;color:var(--steel-800);background:var(--steel-100);padding:2px 8px;border-radius:0}

.result-count{color:var(--ink-soft);font-size:.95rem;margin-top:-6px}
.cat-intro{color:var(--ink-soft);font-size:1rem}

.empty-state{background:var(--paper-raised);border:1px dashed var(--line-strong);border-radius:0;padding:32px 20px;text-align:center;color:var(--ink-soft)}
.empty-state svg{color:var(--line-strong);margin-bottom:10px}
.empty-state .btn-primary{margin-top:14px}

/* ---------------------------------------------------------------------
   Breadcrumbs
   --------------------------------------------------------------------- */
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:0;padding:0;margin:18px 0 6px;font-size:.88rem;color:var(--ink-soft)}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li:not(:last-child)::after{content:"";width:5px;height:5px;border-top:1px solid var(--line-strong);border-right:1px solid var(--line-strong);transform:rotate(45deg);margin:0 9px;flex:none}
.breadcrumbs a{color:var(--ink-soft);font-weight:500}
.breadcrumbs a:hover{color:var(--steel-800)}
.breadcrumbs li:last-child span{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------------
   Ficha de producto
   --------------------------------------------------------------------- */
.ficha-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:8px}
.ficha-grid>*{min-width:0}
@media(min-width:760px){.ficha-grid{grid-template-columns:minmax(280px,400px) minmax(0,1fr)}}
.ficha-imgs{display:flex;flex-direction:column;gap:10px}
@media(min-width:760px){.ficha-imgs{position:sticky;top:57px;align-self:start}}
.ficha-img-main{aspect-ratio:1/1;background:#fff;border:1px solid var(--line-strong);border-radius:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ficha-img-main img{width:100%;height:100%;object-fit:contain;padding:22px}
.ficha-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.ficha-thumb{width:62px;height:62px;border:1px solid var(--line-strong);border-radius:0;overflow:hidden;padding:0;background:#fff;cursor:pointer;transition:border-color .15s}
.ficha-thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
.ficha-thumb:hover,.ficha-thumb[aria-current="true"]{border-color:var(--steel-800)}

.ficha-cat{margin:2px 0 10px}
.tag-cat{display:inline-flex;align-items:center;gap:5px;background:var(--steel-100);color:var(--steel-800);font-family:var(--font-display);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding:5px 11px;border-radius:0}
.tag-cat:hover{background:var(--steel-800);color:#fff;text-decoration:none}
.ficha-desc{color:var(--ink-soft);max-width:68ch;font-size:1rem}
.ficha-info h2{margin-top:28px;margin-bottom:12px}

.tabla-medidas,.tabla-precios,.tabla-carrito{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--paper-raised)}
.tabla-medidas th,.tabla-precios th,.tabla-carrito th{
  text-align:left;font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);padding:11px 12px;background:var(--surface);
  border-bottom:2px solid var(--line-strong);position:sticky;top:0;
}
.tabla-medidas td,.tabla-precios td,.tabla-carrito td{padding:11px 12px;border-bottom:1px solid var(--line)}
.tabla-medidas tbody tr:hover,.tabla-precios tbody tr:hover{background:var(--surface)}
.tabla-medidas td:nth-child(3),.tabla-precios td:last-child{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-soft);font-family:var(--font-display);letter-spacing:.1em}
.tabla-medidas td:nth-child(2){font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.9rem}
.peso-barra{display:block;font-size:.82rem;color:var(--ink-soft)}
.tabla-precios-wrap{overflow:auto;border:1px solid var(--line-strong);border-radius:0;margin-bottom:8px;max-height:min(70vh,640px)}
.tabla-precios-wrap .tabla-precios th{top:0}

.stock-badge{display:inline-flex;align-items:center;gap:5px;font-size:.88rem;font-weight:600}
.stock-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.stock-badge.a-pedido{color:var(--warn)}
.stock-badge.a-pedido::before{background:var(--warn)}
.stock-badge.en-stock{color:var(--ok)}

.btn-add-cart{
  display:inline-flex;align-items:center;gap:5px;background:var(--steel-800);color:#fff;border:0;
  padding:8px 13px;border-radius:0;cursor:pointer;font-family:var(--font-display);font-size:.78rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.14em;transition:background .15s,transform .1s;
}
.btn-add-cart:hover{background:var(--steel-900)}
.btn-add-cart:active{transform:scale(.96)}
.btn-add-cart.added{background:var(--ok)}
.iva-note{font-size:.88rem;color:var(--ink-soft);margin-top:10px}

/* ---------------------------------------------------------------------
   Calculadora
   --------------------------------------------------------------------- */
.calc-panel{display:grid;grid-template-columns:1fr;gap:28px;margin-top:20px;align-items:start}
@media(min-width:820px){.calc-panel{grid-template-columns:1.1fr .9fr}}
.calc-form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;background:var(--surface);border:1px solid var(--line-strong);border-radius:0;padding:22px}
.calc-form .campo:first-child{grid-column:1 / -1}
.campo label{display:block;font-family:var(--font-display);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px;font-weight:700;color:var(--ink)}
.campo input,.campo select{width:100%;padding:11px;border:1px solid var(--line-strong);border-radius:0;font-size:1rem;background:#fff;color:var(--ink);font-family:inherit}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--steel-800);background:#fff}
.campo select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:32px}

.calc-resultado{
  background:var(--steel-800);color:#fff;border-radius:0;padding:28px 26px;
}
.calc-resultado-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.calc-resultado-row:last-of-type{border-bottom:0}
.calc-resultado-label{font-family:var(--font-display);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:#c9ccd6;font-weight:700}
.calc-resultado-value{font-family:var(--font-display);font-size:1.9rem;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.calc-resultado-value small{font-size:.9rem;color:#c9ccd6;font-weight:400;margin-left:4px}
.calc-resultado .btn-primary{width:100%;margin-top:18px}
.calc-note{font-size:.86rem;color:#a9adbd;margin-top:12px}

.faq{margin-top:8px}
.faq details{background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:0;padding:4px 16px;margin-bottom:8px}
.faq summary{cursor:pointer;padding:13px 0;font-weight:700;color:var(--ink);font-family:var(--font-display);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--ink-soft);flex:none;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line);padding-bottom:11px}
.faq p{color:var(--ink-soft);padding:12px 0 14px;margin:0}

/* ---------------------------------------------------------------------
   Carrito
   --------------------------------------------------------------------- */
.honeypot{position:absolute;left:-9999px}
.carrito-total{font-size:1.15rem;margin-top:14px}
.carrito-total strong{font-family:var(--font-display);font-weight:900;color:var(--ink)}
.carrito-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.qty-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:0;overflow:hidden}
.qty-stepper button{background:var(--surface);border:0;width:28px;cursor:pointer;font-size:1rem;color:var(--ink);line-height:1}
.qty-stepper button:hover{background:var(--steel-100)}
.qty-stepper input{width:38px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;padding:6px 2px;font-family:inherit;font-size:.9rem}
.btn-remove{background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:1.1rem;line-height:1;padding:4px 8px;border-radius:0}
.btn-remove:hover{background:var(--surface);color:var(--ink)}

/* ---------------------------------------------------------------------
   Lista de precios
   --------------------------------------------------------------------- */
.precios-toolbar{position:sticky;top:45px;z-index:30;background:var(--paper);padding:10px 0;margin:0 0 6px;border-bottom:1px solid var(--line-strong)}
.precios-filtro{position:relative;max-width:420px;margin-bottom:10px}
.precios-filtro input{width:100%;padding:12px 14px 12px 40px;border:1px solid var(--line-strong);border-radius:0;font-size:1rem;background:#fff;font-family:inherit}
.precios-filtro input:focus{outline:none;border-color:var(--steel-800)}
.precios-filtro svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-soft)}
.precios-indice{display:flex;flex-wrap:wrap;gap:6px;margin:0;font-size:.88rem}
.precios-indice a{background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:0;padding:6px 12px;font-weight:600;color:var(--ink)}
.precios-indice a:hover{border-color:var(--steel-800);background:var(--steel-800);color:#fff;text-decoration:none}
.precios-cat-heading{display:flex;align-items:baseline;gap:10px;margin-top:36px}
.precios-cat-heading .n-productos{font-size:.88rem;font-weight:400;color:var(--ink-soft);font-family:var(--font-body)}
.precios-sin-resultados{display:none;padding:28px;text-align:center;color:var(--ink-soft)}

/* ---------------------------------------------------------------------
   Trust strip (home)
   --------------------------------------------------------------------- */
.trust-strip{display:flex;flex-wrap:wrap;gap:24px 36px;padding:28px 0}
.trust-item{display:flex;align-items:flex-start;gap:12px;flex:1 1 220px;min-width:200px}
.trust-item svg{flex:none;color:var(--steel-800);margin-top:2px}
.trust-item strong{display:block;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:1rem;margin-bottom:2px}
.trust-item span{color:var(--ink-soft);font-size:.95rem}

/* ---------------------------------------------------------------------
   Paginación
   --------------------------------------------------------------------- */
.pagination{display:flex;gap:6px;margin-top:24px;flex-wrap:wrap}
.pagination a{padding:9px 14px;border:1px solid var(--line-strong);border-radius:0;font-weight:700;font-size:.93rem;color:var(--ink)}
.pagination a:hover{border-color:var(--steel-800);background:var(--steel-800);color:#fff;text-decoration:none}
.pagination a[aria-current="page"]{background:var(--steel-800);color:#fff;border-color:var(--steel-800)}

/* ---------------------------------------------------------------------
   Buscador -- sugerencias
   --------------------------------------------------------------------- */
.suggest-box{position:absolute;top:100%;left:0;right:0;background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:0;max-width:360px;z-index:60;box-shadow:var(--shadow-md);overflow:hidden;display:none}
.suggest-box a{display:block;padding:10px 14px;color:var(--ink);font-size:.9rem;border-bottom:1px solid var(--line)}
.suggest-box a:last-child{border-bottom:0}
.suggest-box a:hover,.suggest-box a.is-active{background:var(--surface);color:var(--steel-800);text-decoration:none}
.suggest-empty{padding:12px 14px;color:var(--ink-soft);font-size:.86rem}

/* ---------------------------------------------------------------------
   404 / genérico
   --------------------------------------------------------------------- */
.page-generic{padding:64px 16px;text-align:center}
.page-generic-icon{color:var(--line-strong);margin:0 auto 16px}
.page-generic p{font-size:1.05rem}
.page-generic h1{margin-bottom:.3em}
.page-generic p{color:var(--ink-soft);max-width:50ch;margin:0 auto 22px}

/* ---------------------------------------------------------------------
   Guías (Etapa 3)
   --------------------------------------------------------------------- */
.guia-articulo{max-width:74ch}
.guia-cuerpo{margin-top:18px;font-size:1rem;line-height:1.65}
.guia-cuerpo h2{margin-top:1.8em;font-size:1.25rem}
.guia-cuerpo h3{margin-top:1.4em;font-size:1.05rem}
.guia-cuerpo p,.guia-cuerpo ul,.guia-cuerpo ol{margin:0 0 1em}
.guia-cuerpo ul,.guia-cuerpo ol{padding-left:1.3em}
.guia-cuerpo a{font-weight:600}
.guia-cuerpo .tabla-guia-wrap{overflow-x:auto;margin:1.2em 0;border-radius:var(--radius-sm)}
.guia-cuerpo table.tabla-guia{width:100%;min-width:480px;border-collapse:collapse;margin:0;font-size:.92rem;table-layout:fixed}
.guia-cuerpo table.tabla-guia th,.guia-cuerpo table.tabla-guia td{border:1px solid var(--line-strong);padding:9px 11px;text-align:left;vertical-align:top;overflow-wrap:break-word}
.guia-cuerpo table.tabla-guia th{background:var(--surface);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--ink)}

.guia-faqs{margin-top:32px;border-top:1px solid var(--line-strong);padding-top:20px}
.guia-faq-item{border-bottom:1px solid var(--line);padding:12px 0}
.guia-faq-item summary{cursor:pointer;font-weight:700;color:var(--ink);font-family:var(--font-display)}
.guia-faq-item p{margin:10px 0 0;color:var(--ink-soft)}

.guia-cta{margin-top:32px;background:var(--surface);border:1px solid var(--line-strong);border-radius:0;padding:24px}
.guia-cta p{margin:0 0 .4em}

/* ---------------------------------------------------------------------
   Prueba social -- reseñas de Google (Etapa 3)
   --------------------------------------------------------------------- */
.google-rating{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:var(--ink);font-weight:600}
.google-rating:hover{color:var(--steel-800);text-decoration:none}
.google-rating-stars{display:inline-flex;gap:1px;color:var(--amber-strong)}
.google-rating strong{font-family:var(--font-display);font-weight:900;font-size:1.1rem}

.reviews-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px}
.review-card{background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:0;padding:18px}
.review-card .google-rating-stars{margin-bottom:8px;color:var(--amber-strong)}
.review-card p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.review-card cite{display:block;margin-top:12px;font-style:normal;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--ink)}

/* ---------------------------------------------------------------------
   /contacto/
   --------------------------------------------------------------------- */
.contacto-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start;margin-top:20px}
@media (max-width:760px){.contacto-grid{grid-template-columns:1fr}}
.contacto-nap{background:var(--surface);border:1px solid var(--line-strong);border-radius:0;padding:24px}
.contacto-nap dt{font-family:var(--font-display);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink);margin-top:16px}
.contacto-nap dt:first-child{margin-top:0}
.contacto-nap dd{margin:4px 0 0;font-size:1rem}
.contacto-botones{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.contacto-fotos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.contacto-foto{aspect-ratio:4/3;border-radius:0;overflow:hidden;border:1px solid var(--line-strong);background:var(--surface)}
.contacto-foto img{width:100%;height:100%;object-fit:cover;display:block}
.contacto-foto-pendiente{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink-soft);font-size:.86rem;text-align:center;padding:10px}
.contacto-foto-pendiente svg{color:var(--line-strong)}
.page-generic .acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}