/* ============================================================================
   E72H SYSTEM · hoja del sistema post-Elementor · v0.3 (pase Fable, 8 ago)
   Prefijo propio: .e72s-  (no colisiona con .e72g-/.e72u-/.pk-/.e72cr- viejos)
   AUTOSUFICIENTE: tokens y texturas propias, no depende del Additional CSS del
   Customizer, para que sobreviva a un futuro cambio de theme.

   Decisiones de este pase (los porqués, para el siguiente que toque esto):
   - UN eje de contenido. Antes el borde izquierdo bailaba 43/143/253 px según
     la sección. Ahora: 1180 para lo visual de arriba (compra + bento) y 980
     para TODO lo demás; la prosa se estrecha con max-width en el texto, no
     moviendo el contenedor. El salto de eje pasa una vez, no siete.
   - Ritmo variable a propósito: siete secciones con el mismo padding es el
     tell de maqueta automática. Banda crema aireada, banda tostada con la
     tabla, punto denso oscuro, cierre. Densidad por contraste.
   - El topo pasa a ser TERRENO REAL (Mulhacén, IGN MDT25) en variantes
     tintadas -l/-d, SIEMPRE en un ::before con su token de opacidad: los SVG
     nuevos no llevan opacidad incrustada, de fondo directo saldrían al 100%.
   - El bloque de compra vive en una tarjeta (buybox), no flotando en crema.

   Capas: 1 tokens · 2 base · 3 layout y bandas · 4 tipografía · 5 componentes
          6 ficha de producto · 7 bento · 8 barra fija · 9 hub · 10 móvil/a11y
   ============================================================================ */

/* ---------- 1. TOKENS -------------------------------------------------------- */
:root{
  --e72-cream:#F5F2EA; --e72-cream2:#FBF8F1; --e72-band:#ECE6D8;
  --e72-ink:#15170E; --e72-ink2:#14160F; --e72-olive:#3B4B30; --e72-olive2:#23301A;
  --e72-gold:#D4A44C; --e72-gold-soft:#E8C97E; --e72-gold-ink:#7E6224;
  /* muted y gold-ink SE OSCURECIERON el 11 ago 2026: los valores viejos
     (#8A8A7C y #9A7A2E) daban 3,1:1 y 3,6:1 sobre crema, por debajo del 4,5:1
     que pide AA para texto pequeno, y son justo los colores del aviso legal,
     los kickers y "precios comprobados el". Los nuevos pasan AA sobre los TRES
     fondos claros del sistema (crema, crema2 y la banda tostada). Medido, no
     estimado: crema 5,03 y 5,13. */
  --e72-text:#5C5E50; --e72-muted:#68685E; --e72-line:#ECE5D4;
  --e72-green:#2E9E47; --e72-green-dark:#278A3D; --e72-amber:#D9A441; --e72-red:#C2562F;

  --e72-r-s:10px; --e72-r-m:14px; --e72-r-l:16px; --e72-r-pill:999px;
  --e72-shadow:0 18px 44px -16px rgba(21,23,14,.3);
  --e72-shadow-soft:0 2px 8px rgba(58,74,48,.05), 0 14px 32px -22px rgba(58,74,48,.16);

  --e72-font-display:'Space Grotesk', system-ui, sans-serif;
  --e72-font-body:'Inter', system-ui, sans-serif;
  --e72-font-mono:'Space Mono', ui-monospace, monospace;

  /* opacidades del topo, calibradas en el Gate 2 del sistema Topo v2 */
  --topo-op-web:.06;
  --topo-op-web-alta:.10;

  --e72noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");

  /* terreno real (Mulhacén, IGN MDT25) en variantes tintadas.
     Atribución CC BY 4.0 obligatoria: la pinta e72h_web_atrib_ign() en el pie. */
  --e72-topo-l:url('/wp-content/uploads/e72/topo/cordal-alcazaba-l.svg');
  --e72-topo-d:url('/wp-content/uploads/e72/topo/cordal-alcazaba-d.svg');
  --e72-topo-hero-d:url('/wp-content/uploads/e72/topo/hero-apaisado-d.svg');
  --e72-topo-hero-l:url('/wp-content/uploads/e72/topo/hero-apaisado-l.svg');
}

/* ---------- 2. BASE ---------------------------------------------------------- */
/* TODO lo tipografico va anclado a .e72s-main (nuestro <main>), JAMAS a
   body.e72s: el body incluye el header y el footer de Elementor, y anclar
   color/fuente al body tinta de gris los textos del chrome que heredan color
   (el footer se veia negro sobre verde). body.e72s solo marca el scope y pone
   el fondo de pagina. Gotcha S19. */
.e72s-main *, .e72s-main *::before, .e72s-main *::after,
.e72s-bar *, .e72s-bar *::before, .e72s-bar *::after{box-sizing:border-box;}

body.e72s{background:var(--e72-cream);}
.e72s-main{
  font-family:var(--e72-font-body);
  color:var(--e72-text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html:has(body.e72s){scroll-behavior:smooth;}
.e72s-main img{max-width:100%; height:auto; display:block;}
/* OJO: nada de "a{color:inherit}" a pelo. Un selector clase+tipo (0,1,1) gana a
   las clases de componente (0,1,0) y deja los botones sin color propio. */
.e72s-main p > a:not([class]), .e72s-main li > a:not([class]), .e72s-main dd > a:not([class]){
  color:var(--e72-ink); text-decoration:none; border-bottom:1px solid var(--e72-line);
}
.e72s-main p > a:not([class]):hover{border-bottom-color:var(--e72-gold);}

/* ---------- 3. LAYOUT Y BANDAS ----------------------------------------------- */
/* Dos anchos, un criterio: 1180 = escaparate (compra, bento), 980 = lectura y
   datos. Comparten padding lateral para que el borde no salte. */
.e72s-wrap{max-width:1180px; margin-inline:auto; padding:0 clamp(20px,5vw,40px);}
.e72s-wrap-mid{max-width:980px; margin-inline:auto; padding:0 clamp(20px,5vw,40px);}

.e72s-sec{padding:clamp(52px,8vh,92px) 0;}
.e72s-sec--tight{padding:clamp(32px,5vh,56px) 0;}

/* banda tostada: rompe la crema continua sin irse a oscuro */
.e72s-banda{
  background:var(--e72-band);
  border-top:1px solid #E0D8C4; border-bottom:1px solid #E0D8C4;
  padding:clamp(48px,7vh,84px) 0;
}

/* fondo con terreno real, siempre via ::before con token de opacidad */
.e72s-topo{position:relative;}
.e72s-topo > *{position:relative; z-index:1;}
.e72s-topo::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--e72-topo-l);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:var(--topo-op-web);
}

/* anclas de las pestañas: que el salto no esconda el título bajo el chrome.
   MEDIDO 11 ago: el header de Elementor es sticky y mide 151px con la
   announcement bar; con 96px el titulo quedaba tapado al pulsar una pestaña. */
.e72s-main [id]{scroll-margin-top:170px;}

/* ---------- 4. TIPOGRAFÍA ---------------------------------------------------- */
.e72s-main h1, .e72s-main h2, .e72s-main h3{font-family:var(--e72-font-display); color:var(--e72-ink2); margin:0;}
.e72s-h1{
  font-weight:700; font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.05;
  letter-spacing:-.03em; text-wrap:balance; max-width:22ch;
}
.e72s-h2{
  font-weight:700; font-size:clamp(1.5rem,2.8vw,2.15rem); line-height:1.08;
  letter-spacing:-.028em; text-wrap:balance; max-width:26ch;
}
.e72s-h3{font-weight:600; font-size:clamp(1.08rem,1.5vw,1.3rem); line-height:1.2; letter-spacing:-.01em;}

/* cabecera de sección: título + entradilla con el MISMO ritmo en toda la ficha.
   El aire entre secciones lo pone la sección, no cada título a su bola. */
.e72s-schead{margin:0 0 clamp(22px,3vh,34px);}
.e72s-schead .e72s-lead{margin-top:10px;}

.e72s-lead{
  font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.6;
  color:var(--e72-text); max-width:56ch; margin:0;
}
.e72s-body{font-size:16.5px; line-height:1.72; color:var(--e72-text);}
.e72s-body p{margin:0 0 1.05em; max-width:68ch;}
.e72s-body p:last-child{margin-bottom:0;}
.e72s-body .hit{color:var(--e72-ink); font-weight:500;}
/* el subrayado de Mario (**negrita** en los campos, via e72h_web_prosa):
   mismo tamano y misma fuente, solo sube tinta y peso (golden 2) */
.e72s-body strong, .e72s-det-txt strong{color:var(--e72-ink); font-weight:600;}

.e72s-micro{
  font-family:var(--e72-font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--e72-muted); line-height:1.7; margin:0;
}

/* ---------- 5. COMPONENTES --------------------------------------------------- */
/* Botones: clase doblada (0,2,0) porque el kit de Elementor declara
   ".elementor-kit-N a{color}" (0,1,1) y pisaba el color. */
.e72s-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--e72-font-display); font-weight:600; font-size:15px;
  border-radius:var(--e72-r-s); padding:13px 24px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .2s, background .2s, border-color .2s;
}
.e72s-btn.e72s-btn--ink{background:var(--e72-ink); color:var(--e72-cream); border-color:var(--e72-ink);
  box-shadow:0 16px 30px -18px rgba(20,22,15,.45);}
.e72s-btn.e72s-btn--ink:hover{background:#2A361C; transform:translateY(-2px);}
.e72s-btn.e72s-btn--ghost{background:transparent; color:var(--e72-ink); border-color:#C9C0AC; font-weight:500;}
.e72s-btn.e72s-btn--ghost:hover{border-color:var(--e72-ink); background:#EFEADD;}
.e72s-btn.e72s-btn--cream{background:var(--e72-cream); color:var(--e72-ink);}
.e72s-btn.e72s-btn--cream:hover{background:#fff; transform:translateY(-2px);}
/* verde = LA accion de dinero de la pagina (el clic de tienda que deja comision),
   igual que en la landing de la guia. Uno por vista; la barra repite el MISMO. */
.e72s-btn.e72s-btn--green{background:var(--e72-green); color:#fff; border-color:var(--e72-green);
  border-radius:26px; box-shadow:0 14px 26px -14px rgba(46,158,71,.45); font-weight:500;}
.e72s-btn.e72s-btn--green:hover{background:var(--e72-green-dark); transform:translateY(-2px);}
.e72s-btn .arw{max-width:0; opacity:0; overflow:hidden; display:inline-block;
  transition:max-width .28s ease, opacity .25s ease, margin-left .28s ease;}
.e72s-btn:hover .arw{max-width:1.2em; opacity:1; margin-left:.4em;}

.e72s-actions{display:flex; flex-wrap:wrap; gap:12px; margin:0;}

.e72s-card{
  background:var(--e72-cream2); border:1px solid var(--e72-line);
  border-radius:var(--e72-r-m); box-shadow:var(--e72-shadow-soft);
  padding:clamp(18px,2.2vw,26px);
}

/* panel oscuro: EL punto denso de la página, con terreno real detrás */
.e72s-panel{
  position:relative; overflow:hidden;
  background-image:var(--e72noise), linear-gradient(165deg,#3B4B30 0%,#26331A 100%);
  background-size:150px 150px, 100% 100%;
  border-radius:var(--e72-r-m); color:#F4F0E6; padding:clamp(28px,3.6vw,48px);
  box-shadow:var(--e72-shadow);
}
.e72s-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--e72-topo-d);
  background-size:cover; background-position:center;
  opacity:var(--topo-op-web-alta);
}
.e72s-panel > *{position:relative;}
.e72s-panel h2, .e72s-panel h3{color:#F4F0E6;}
.e72s-panel .e72s-lead{color:rgba(244,240,230,.72);}

/* NOTA DE CRITERIO PROPIO (del sistema print: .nota-mario) */
/* El veredicto de Mario: una frase dicha, NO una tarjeta. La version anterior
   (caja crema con borde dorado a la izquierda) es EL gesto de plantilla que
   Mario tiene VETADO en claro (07/D8, anti-ejemplo del golden 2; lo re-veto el
   11 ago al verlo aqui). PROHIBIDO reintroducirlo en cualquier fondo claro.
   Sobre banda oscura el filete fino si es canonico (el giro de la carta). */
.e72s-nota{margin:22px 0; padding:0; background:none; border:0;}
.e72s-nota p{
  margin:0; font-size:clamp(1.12rem,1.6vw,1.3rem); line-height:1.45;
  color:var(--e72-ink); font-style:italic; font-weight:500; max-width:44ch;
  text-wrap:balance;
}
.e72s-nota cite{
  display:block; margin-top:10px; font-style:normal;
  font-family:var(--e72-font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--e72-muted);
}

/* CINTA DE AVISO (del sistema print: .cinta) */
.e72s-cinta{
  display:flex; gap:12px; align-items:baseline; margin:18px 0;
  background:var(--e72-band); border:1px solid var(--e72-ink);
  padding:13px 16px; font-size:15px; line-height:1.5; color:var(--e72-ink);
}
.e72s-cinta > span{
  font-family:var(--e72-font-display); font-weight:600; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; flex:0 0 auto;
}

/* TABLA CRUDA (del sistema print: .rawbox): de libro, no de landing */
.e72s-raw{
  width:100%; border-collapse:collapse; background:var(--e72-cream);
  border:1px solid var(--e72-ink); font-size:15px; margin:0;
}
.e72s-raw th, .e72s-raw td{
  padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid rgba(21,23,14,.14); line-height:1.5;
}
.e72s-raw thead th{
  font-family:var(--e72-font-display); font-weight:600; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--e72-ink);
  border-bottom:1px solid var(--e72-ink); background:rgba(236,230,216,.6);
}
.e72s-raw tbody th{font-family:var(--e72-font-body); font-weight:600; color:var(--e72-ink); width:24%;}
.e72s-raw tbody tr:last-child th, .e72s-raw tbody tr:last-child td{border-bottom:0;}
.e72s-raw td{color:var(--e72-text);}
.e72s-raw--specs tbody th{width:38%;}
.e72s-raw--specs td{font-variant-numeric:tabular-nums;}

/* listas: guion oro, nunca bolitas */
.e72s-list{list-style:none; margin:14px 0 0; padding:0;}
.e72s-list li{
  position:relative; padding-left:24px; margin-bottom:.75em;
  font-size:16px; line-height:1.62; color:var(--e72-text);
}
.e72s-list li::before{content:""; position:absolute; left:0; top:.7em; width:13px; height:1px; background:var(--e72-gold);}
.e72s-list li:last-child{margin-bottom:0;}
.e72s-list--warn li::before{background:var(--e72-red);}
.e72s-panel .e72s-list li{color:rgba(244,240,230,.82);}

/* aviso de afiliado: visible, no escondido */
.e72s-afil{
  border:1px dashed #D9CFB6; border-radius:var(--e72-r-s);
  background:rgba(240,231,210,.45); padding:12px 16px;
  font-size:14px; line-height:1.5; color:#5d4f23; margin:0 0 16px;
}

/* desplegables */
.e72s-det{border-bottom:1px solid var(--e72-line); padding:16px 0;}
.e72s-det summary{
  font-family:var(--e72-font-display); font-weight:600; font-size:1.05rem;
  color:var(--e72-ink); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.e72s-det summary::-webkit-details-marker{display:none;}
.e72s-det summary::after{content:"+"; color:var(--e72-gold-ink); font-size:1.2rem; flex:0 0 auto;}
.e72s-det[open] summary::after{content:"–";}
.e72s-det p{margin:12px 0 0; font-size:16px; line-height:1.65; max-width:66ch;}

/* CIERRE. Es el MISMO gesto que cierra la home (.e72cta): crema con el terreno
   de fondo, isotipo de vineta, titular grande en tinta, capsula y P.D.
   Antes era una banda oscura y no integraba: (1) chocaba contra el footer, que
   ya es oscuro, con dos cantos redondeados apilados y una costura visible;
   (2) obligaba a ocultar la cresta alpina del footer, que es el remate de marca
   de TODAS las demas paginas, asi que la ficha terminaba distinta al sitio;
   (3) dejaba el boton de la Guia en crema, cuando el cierre canonico es capsula.
   Sobre crema, la cresta vuelve y la ficha acaba como la home. */
.e72s-cierre{
  position:relative; overflow:hidden;
  background:var(--e72-cream); color:var(--e72-ink);
  padding:clamp(56px,9vh,104px) 0 clamp(48px,7vh,88px);
  border-top:1px solid var(--e72-line);
}
.e72s-cierre::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--e72-topo-hero-l);
  background-size:cover; background-position:center 30%;
  opacity:var(--topo-op-web);
}
.e72s-cierre-in{position:relative; max-width:740px; margin-inline:auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:0 clamp(20px,5vw,40px);}
/* el isotipo hace de vineta de cierre, como en la home (golden 4).
   Clase DOBLADA (0,2,0): ".e72s-main img{height:auto}" es (0,1,1) y ganaba, y
   como la imagen es lazy y aun no ha cargado, auto = 0 y el isotipo no salia. */
.e72s-cierre .e72s-cierre-iso{display:block; width:auto; height:52px; margin:0 0 2px; opacity:.92;}
/* el titular del cierre pesa mas que un h2 de seccion: es la despedida */
.e72s-cierre .e72s-h2{
  color:var(--e72-ink2); max-width:20ch;
  font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.05; letter-spacing:-.03em;
}
.e72s-cierre p{color:var(--e72-text); margin:0; max-width:54ch;}
.e72s-pd{font-size:13px; color:var(--e72-muted);}

/* pie legal: cierra el bloque, centrado y discreto, sin robarle el momento al
   boton. Va DENTRO del cierre para no quedar flotando entre secciones. */
.e72s-legal--dark{
  margin:22px auto 0; max-width:74ch; font-size:11.5px; line-height:1.8;
  color:var(--e72-muted); text-align:center;
}
/* version para paginas sin cierre oscuro (hub): pegada al contenido, con filete */
.e72s-legal{
  max-width:980px; margin:0 auto; padding:18px clamp(20px,5vw,40px) 26px;
  font-size:11.5px; line-height:1.8; color:var(--e72-muted);
  border-top:1px solid var(--e72-line);
}

/* SELLO DE PROCEDENCIA (del sistema print): de donde sale un dato */
.e72s-sello{
  display:inline-flex; align-items:center; gap:8px; margin:14px 0 0;
  border:1px solid var(--e72-line); border-radius:var(--e72-r-s);
  padding:7px 12px; font-family:var(--e72-font-display); font-weight:600;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--e72-muted);
}
.e72s-sello::before{content:""; width:22px; height:1px; background:var(--e72-gold);}

/* migas */
.e72s-migas{padding:18px 0 0; font-size:13px;}
.e72s-migas .e72s-wrap{display:flex; gap:9px; flex-wrap:wrap; align-items:center;}
.e72s-migas a{color:var(--e72-muted); text-decoration:none;}
.e72s-migas a:hover{color:var(--e72-ink);}
.e72s-migas span{color:#C9C0AC;}

/* ---------- 6. FICHA DE PRODUCTO --------------------------------------------- */
.e72s-pdp{padding:clamp(20px,3vh,34px) 0 clamp(34px,5vh,58px);}
.e72s-pdp-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px); align-items:start;
}

/* galería fija mientras se lee la columna de compra. El top respeta el header
   sticky del sitio (151px medidos + aire); con 24px la galeria se metia 127px
   por debajo del header al scrollear. */
@media (min-width:901px){
  .e72s-gal{position:sticky; top:170px;}
}
.e72s-gal-main{margin:0; position:relative;}
/* contain sobre blanco, como una tienda de verdad: las fotos oficiales vienen
   sobre fondo blanco y un recorte cover las mutila. Las verticales de Mario
   quedan con aire a los lados, y eso esta bien. */
.e72s-gal-main img{
  width:100%; border-radius:var(--e72-r-m); background:#fff;
  border:1px solid var(--e72-line); box-shadow:var(--e72-shadow-soft);
  aspect-ratio:4/3; object-fit:contain;
}
.e72s-gal-main figcaption{
  margin-top:10px; font-size:13px; line-height:1.5; color:var(--e72-muted);
  min-height:1.4em;
}
/* fila de miniaturas: en pantallas cortas scrollea ELLA, nunca rompe el layout */
.e72s-gal-thumbs{display:flex; gap:10px; margin:12px 0 0; padding:0 0 4px; list-style:none;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;}
.e72s-gal-thumbs li{flex:0 0 auto;}
.e72s-gal-thumb{
  padding:0; border:1px solid var(--e72-line); background:#fff; cursor:pointer;
  border-radius:var(--e72-r-s); overflow:hidden; width:72px; height:72px;
  transition:border-color .2s, transform .2s;
}
.e72s-gal-thumb img{width:100%; height:100%; object-fit:contain; background:#fff;}
.e72s-gal-thumb:hover{border-color:#C9C0AC; transform:translateY(-2px);}
.e72s-gal-thumb.is-on{border-color:var(--e72-ink); border-width:2px;}
.e72s-gal-nota{margin:12px 0 0; font-size:12.5px; color:var(--e72-muted);}

/* columna de compra */
.e72s-buy .e72s-h1{margin:0 0 6px;}
.e72s-buy-modelo{
  margin:0 0 14px; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--e72-gold-ink); font-weight:600;
  font-family:var(--e72-font-display);
}
.e72s-buy > .e72s-lead{margin-bottom:6px;}

/* la caja de compra: el momento tienda, contenido y con borde, no flotando */
.e72s-buybox{
  margin-top:22px; background:var(--e72-cream2);
  border:1px solid #E3DBC8; border-radius:var(--e72-r-m);
  box-shadow:var(--e72-shadow-soft); padding:clamp(18px,2.4vw,26px);
}
.e72s-buybox .e72s-afil{margin-bottom:6px; border:0; background:none; padding:0 0 10px;
  border-bottom:1px dashed #D9CFB6; border-radius:0;}

.e72s-variantes{list-style:none; margin:0; padding:0;}
.e72s-variante{
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  padding:15px 0; border-bottom:1px solid var(--e72-line);
}
.e72s-variante:last-child{border-bottom:0; padding-bottom:4px;}
.e72s-variante-nombre{margin:0; font-weight:600; color:var(--e72-ink); font-size:16px; line-height:1.35;}
.e72s-variante-para{margin:3px 0 0; font-size:14px; color:var(--e72-muted); line-height:1.4;}
.e72s-variante-acc{display:flex; align-items:center; gap:16px; flex:0 0 auto;}
.e72s-precio{
  margin:0; font-family:var(--e72-font-display); font-weight:700;
  font-size:1.4rem; color:var(--e72-ink); line-height:1; font-variant-numeric:tabular-nums;
}
.e72s-precio--none{font-size:11.5px; font-weight:600; color:var(--e72-muted);
  text-transform:uppercase; letter-spacing:.08em; max-width:9ch; line-height:1.3;}
.e72s-buybox .e72s-micro{margin-top:12px;}

/* pestañas de ficha: navegación de tienda de verdad, no adorno */
.e72s-tabs{
  border-top:1px solid var(--e72-line); border-bottom:1px solid var(--e72-line);
  background:var(--e72-cream);
}
.e72s-tabs .e72s-wrap-mid{
  display:flex; gap:clamp(18px,3vw,38px); overflow-x:auto; scrollbar-width:none;
}
.e72s-tabs .e72s-wrap-mid::-webkit-scrollbar{display:none;}
.e72s-main .e72s-tab{
  font-family:var(--e72-font-display); font-weight:600; font-size:14px;
  color:var(--e72-text); text-decoration:none; white-space:nowrap;
  padding:14px 2px; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s, border-color .2s;
}
.e72s-main .e72s-tab:hover{color:var(--e72-ink); border-bottom-color:var(--e72-gold);}

/* dichos del grupo */
.e72s-dichos{list-style:none; margin:26px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px 34px;}
.e72s-dichos li{border-left:2px solid rgba(212,164,76,.55); padding-left:18px;}
.e72s-dicho-txt{margin:0; font-size:15.5px; line-height:1.6; color:#F4F0E6;}
.e72s-dicho-quien{
  margin:6px 0 0; font-size:12.5px; color:var(--e72-gold); font-weight:600;
  font-family:var(--e72-font-display); letter-spacing:.04em;
}

/* dos columnas */
.e72s-dos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,3vw,48px);}

/* ---------- 7. BENTO "EN CORTO" ---------------------------------------------- */
.e72s-bento{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px);
}
.e72s-b{
  background:var(--e72-cream2); border:1px solid var(--e72-line);
  border-radius:var(--e72-r-m); box-shadow:var(--e72-shadow-soft);
  padding:clamp(16px,2vw,24px); min-height:118px;
  display:flex; flex-direction:column; gap:8px;
}
.e72s-b--2w{grid-column:span 2;}
.e72s-b-label{
  font-family:var(--e72-font-display); font-weight:600; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--e72-gold-ink); margin:0;
}
.e72s-b-valor{margin:0; font-size:16.5px; font-weight:500; color:var(--e72-ink); line-height:1.45;}
.e72s-b .e72s-list{margin-top:2px;}
.e72s-b .e72s-list li{font-size:15px; margin-bottom:.55em;}

/* la celda oscura: un dato grande que se gana el peso */
.e72s-b--dark{
  position:relative; overflow:hidden; border:0; justify-content:center;
  background-image:var(--e72noise), linear-gradient(165deg,#3B4B30 0%,#26331A 100%);
  background-size:150px 150px, 100% 100%;
  color:#F4F0E6; box-shadow:var(--e72-shadow);
}
.e72s-b--dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--e72-topo-d); background-size:cover; background-position:center;
  opacity:var(--topo-op-web-alta);
}
.e72s-b--dark > *{position:relative;}
.e72s-b--dark .e72s-b-label{color:var(--e72-gold);}
.e72s-b-cifra{
  margin:0; font-family:var(--e72-font-display); font-weight:700;
  font-size:clamp(2.6rem,4.5vw,3.6rem); line-height:1; color:#F4F0E6;
  font-variant-numeric:tabular-nums;
}
.e72s-b-cifra small{
  display:block; font-size:15px; font-weight:500; color:rgba(244,240,230,.75);
  margin-top:8px; letter-spacing:0; font-family:var(--e72-font-body);
}
.e72s-b--dark a{color:inherit; text-decoration:none;}
.e72s-b--dark a:hover small{color:var(--e72-gold-soft);}

/* ---------- 8. BARRA DE COMPRA FIJA ------------------------------------------ */
/* Clon de la barra de la landing de la guia (.e72gv-bar): pildora flotante
   centrada con blur, borde verde tenue, miniatura del producto y topo detras.
   La accion es LA MISMA del buybox, repetida, en verde. */
.e72s-bar{
  position:fixed; left:50%; bottom:18px; z-index:80;
  width:min(1180px, calc(100% - 2*clamp(20px,5vw,40px)));
  transform:translate(-50%, calc(100% + 26px));
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  border-radius:18px; padding:13px 16px 13px 13px;
  background:rgba(24,28,17,.72);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(46,158,71,.3);
  box-shadow:0 28px 56px -20px rgba(21,23,14,.55), inset 0 1px 0 rgba(244,240,230,.12);
  overflow:hidden; color:#F4F0E6;
  opacity:0; pointer-events:none;
  transition:opacity .4s ease, transform .55s cubic-bezier(.22,.9,.3,1);
}
.e72s-bar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--e72-topo-d); background-size:cover; background-position:center;
  opacity:.09;
}
.e72s-bar > *{position:relative; z-index:1;}
.e72s-bar.is-on{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}

.e72s-bar-thumb{
  width:58px; height:58px; border-radius:13px; flex:0 0 auto;
  background:rgba(244,240,230,.9); border:1px solid rgba(244,240,230,.14);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.e72s-bar-thumb img{width:100%; height:100%; object-fit:contain;}
.e72s-bar-txt{min-width:0; display:flex; flex-direction:column; gap:5px;}
.e72s-bar-nombre{
  margin:0; font-family:var(--e72-font-display); font-weight:600; font-size:1.15rem;
  color:#F4F0E6; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.e72s-bar-sub{
  margin:0; font-family:var(--e72-font-mono); font-size:12.5px; letter-spacing:.02em;
  color:rgba(244,240,230,.66); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.e72s-bar-sub em{font-style:normal; color:var(--e72-gold-soft);}
.e72s-bar .e72s-btn{padding:12px 24px; font-size:14.5px; flex:0 0 auto;}

/* ---------- 9. HUB ------------------------------------------------------------ */
.e72s-hub-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  gap:clamp(16px,2.2vw,26px); list-style:none; margin:0; padding:0;
}
.e72s-main .e72s-kit-card{
  display:flex; flex-direction:column; gap:11px; height:100%;
  text-decoration:none; color:var(--e72-text);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.e72s-main .e72s-kit-card:hover{transform:translateY(-3px); border-color:#DCD2B8; box-shadow:var(--e72-shadow);}
.e72s-kit-card img{border-radius:var(--e72-r-s); aspect-ratio:4/3; object-fit:cover; width:100%;}
.e72s-kit-card .e72s-h3{margin:0;}
.e72s-kit-card p{margin:0; font-size:14.5px; line-height:1.5;}
.e72s-kit-card footer{margin-top:auto; padding-top:4px; display:flex; gap:8px; align-items:center;}
.e72s-kit-meta{
  font-family:var(--e72-font-display); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--e72-gold-ink); font-weight:600;
}

/* ---- hub agrupado (se activa con 8+ fichas y 2+ categorias) ---- */
.e72s-hub-cat{margin:0 0 clamp(36px,5vh,56px);}
.e72s-hub-cat:last-of-type{margin-bottom:0;}
.e72s-hub-cathead{
  display:flex; align-items:baseline; gap:12px;
  border-top:1px solid var(--e72-line); padding-top:20px; margin:0 0 18px;
}
.e72s-hub-h2{font-size:clamp(1.25rem,1.9vw,1.55rem);}
.e72s-hub-n{
  font-family:var(--e72-font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--e72-muted); font-variant-numeric:tabular-nums;
}
.e72s-kit-meta--fuera{color:var(--e72-red);}
/* anclas de grupos bajo el header sticky del sitio (S25) */
.e72s-hub-cat[id]{scroll-margin-top:170px;}

/* buscador instantaneo. Selector doblado: el theme Hello estila
   input[type="search"] con selector de atributo y pisa clases sueltas. */
/* Los tres porques del hub. Sin cajas ni borde de color a la izquierda
   (S24, vetado por escrito): tres parrafos con la primera frase en negrita,
   que es como escribe Mario en Telegram. En escritorio van en fila para que
   no empujen la rejilla de productos hacia abajo; en movil se apilan. */
.e72s-porques{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,3vw,34px);
  margin-top:clamp(24px,4vw,34px);
  padding-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--e72-line);
}
.e72s-porques p{
  margin:0; font-size:15.5px; line-height:1.66;
  color:var(--e72-text); max-width:40ch;
}
.e72s-porques strong{color:var(--e72-ink); font-weight:600;}
@media (max-width:860px){
  .e72s-porques{grid-template-columns:1fr; gap:15px;}
  .e72s-porques p{max-width:60ch;}
}

.e72s-buscador{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:26px 0 0;}
.e72s-buscador label{
  font-family:var(--e72-font-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--e72-muted);
}
.e72s-buscador input[type="search"]{
  width:min(340px,100%); padding:11px 16px; font:inherit; font-size:15px;
  color:var(--e72-ink); background:var(--e72-cream2);
  border:1px solid #C9C0AC; border-radius:var(--e72-r-s);
  transition:border-color .2s, background .2s;
}
.e72s-buscador input[type="search"]:focus{
  outline:2px solid var(--e72-ink); outline-offset:1px; border-color:var(--e72-ink);
  background:#fff;
}
.e72s-buscador input[type="search"]::placeholder{color:var(--e72-muted);}
#e72s-buscar-n{
  font-family:var(--e72-font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--e72-text); font-variant-numeric:tabular-nums;
}

.e72s-filtros{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0;}
/* el atributo hidden pierde contra cualquier clase con display: se refuerza
   para todo lo que oculta el buscador (pildoras, grupos, tarjetas) */
.e72s-filtros[hidden], .e72s-hub-cat[hidden], .e72s-hub-grid li[hidden]{display:none;}
.e72s-main .e72s-filtro{
  display:inline-flex; align-items:baseline; gap:7px; text-decoration:none;
  font-family:var(--e72-font-display); font-weight:600; font-size:14px;
  color:var(--e72-text); border:1px solid var(--e72-line);
  background:var(--e72-cream2); padding:8px 14px; border-radius:var(--e72-r-s);
  transition:border-color .2s, background .2s, color .2s;
}
.e72s-main .e72s-filtro span{font-size:11.5px; color:var(--e72-muted); font-variant-numeric:tabular-nums;}
.e72s-main .e72s-filtro:hover{border-color:#C9C0AC; color:var(--e72-ink);}
.e72s-main .e72s-filtro.is-on{background:var(--e72-ink); border-color:var(--e72-ink); color:var(--e72-cream);}
.e72s-main .e72s-filtro.is-on span{color:rgba(245,242,234,.6);}

.e72s-main .nav-links{display:flex; gap:10px; justify-content:center; margin-top:36px; flex-wrap:wrap;}
.e72s-main .nav-links .page-numbers{
  font-family:var(--e72-font-display); font-size:14px; font-weight:600;
  padding:8px 13px; border:1px solid var(--e72-line); border-radius:var(--e72-r-s);
  text-decoration:none; color:var(--e72-text); background:var(--e72-cream2);
}
.e72s-main .nav-links .page-numbers.current{background:var(--e72-ink); color:var(--e72-cream); border-color:var(--e72-ink);}

/* ---------- 10. MÓVIL Y ACCESIBILIDAD ---------------------------------------- */
@media (max-width:1024px){
  .e72s-bento{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width:900px){
  /* minmax(0,1fr), no 1fr a secas: con auto de minimo, la fila de miniaturas
     (nowrap) impone su min-content al track y desborda la pagina. Gotcha S20. */
  .e72s-pdp-grid{grid-template-columns:minmax(0,1fr);}
  .e72s-gal, .e72s-buy{min-width:0;}
  .e72s-gal-main img{aspect-ratio:1/1;}
}
@media (max-width:600px){
  .e72s-bento{grid-template-columns:1fr;}
  .e72s-b--2w{grid-column:auto;}
  .e72s-variante{flex-direction:column; align-items:stretch; gap:12px;}
  .e72s-variante-acc{justify-content:space-between;}
  .e72s-precio--none{max-width:none;}
  .e72s-actions{flex-direction:column;}
  .e72s-actions .e72s-btn{width:100%;}
  .e72s-raw{font-size:14px;}
  .e72s-raw th, .e72s-raw td{padding:9px 10px;}
  .e72s-raw tbody th{width:34%;}
  .e72s-bar{gap:12px; padding:10px 12px; bottom:10px; width:calc(100% - 20px); border-radius:14px;}
  .e72s-bar-thumb{width:46px; height:46px; border-radius:10px;}
  .e72s-bar-nombre{font-size:1rem;}
  .e72s-bar-sub{display:none;}
  .e72s-bar .e72s-btn{padding:11px 18px; font-size:14px;}
  .e72s-gal-main img{aspect-ratio:1/1;}
}
@media (max-width:760px){
  .e72s-raw{display:block; overflow-x:auto; white-space:normal;}
}
.e72s-main a:focus-visible, .e72s-main button:focus-visible, .e72s-main summary:focus-visible,
.e72s-bar a:focus-visible{
  outline:2px solid var(--e72-gold); outline-offset:3px; border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  html:has(body.e72s){scroll-behavior:auto;}
  .e72s-main *, .e72s-bar *{animation:none !important; transition:none !important;}
  .e72s-btn:hover, .e72s-kit-card:hover, .e72s-gal-thumb:hover{transform:none;}
  .e72s-bar{transition:none;}
}

/* ---------- 12. MANUALES (/manuales/) ------------------------------------------ */
/* Ficha de folleto oficial. Sin portada remota (hotlink a webs de gobiernos que
   mueven rutas = imagen rota); en su lugar una placa tipografica con el organismo
   y los dias que recomienda. Es la misma tarjeta del hub, con otro contenido. */
/* Cuatro fichas: 2x2 en escritorio y tableta, una columna en movil. Nunca 3+1
   con una huerfana abajo (V1 salia asi con auto-fill). */
.e72s-man-grid{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:980px; margin-inline:auto;}
@media (max-width:640px){ .e72s-man-grid{grid-template-columns:1fr;} }
.e72s-main .e72s-man{display:flex; flex-direction:column; gap:12px; height:100%;}
.e72s-man-placa{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px 20px 18px; border-radius:var(--e72-r-s);
  background-image:var(--e72noise), linear-gradient(165deg,#3B4B30 0%,#26331A 100%);
  background-size:150px 150px, 100% 100%; color:#F4F0E6; position:relative; overflow:hidden;
}
.e72s-man-placa::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--e72-topo-d); background-size:cover; background-position:center; opacity:.10;
}
.e72s-man-placa > *{position:relative;}
.e72s-man-org{font-family:var(--e72-font-display); font-weight:700; font-size:clamp(1.6rem,2.4vw,2rem); letter-spacing:-.02em; line-height:1;}
.e72s-man-dias{font-family:var(--e72-font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--e72-gold-soft);}
.e72s-man .e72s-h3{margin-top:2px;}
.e72s-man-titulo{margin:-6px 0 0; font-size:14.5px; color:var(--e72-text); line-height:1.5;}
.e72s-man-titulo span{color:var(--e72-muted);}
.e72s-man-mario{
  margin:2px 0 0; font-style:italic; font-weight:500; font-size:1.05rem; color:var(--e72-ink);
}
.e72s-man .e72s-list{margin-top:4px; flex:1 1 auto;}
.e72s-man .e72s-list li{font-size:15px; line-height:1.55;}
.e72s-man-idioma{
  margin:6px 0 0; font-family:var(--e72-font-mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--e72-muted); line-height:1.6;
}
.e72s-man .e72s-btn{align-self:flex-start; margin-top:4px;}
/* tira de organismos en el hero: cinco chips-ancla con el dato que importa.
   Sustituye a las dos columnas de parrafos del hero V1 (Mario, 22 ago: "se ve
   bastante cutre"): mismo argumento, contado con datos y no con parrafos. */
.e72s-man-strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,3vw,30px);}
.e72s-main .e72s-man-strip a{
  display:inline-flex; align-items:baseline; gap:10px; text-decoration:none;
  border:1px solid var(--e72-line); background:var(--e72-cream2); border-radius:var(--e72-r-s);
  padding:10px 14px; transition:border-color .2s, transform .2s;
}
.e72s-main .e72s-man-strip a:hover{border-color:var(--e72-ink); transform:translateY(-2px);}
.e72s-man-strip b{font-family:var(--e72-font-display); font-weight:700; font-size:15px; color:var(--e72-ink); letter-spacing:-.01em;}
.e72s-man-strip span{font-family:var(--e72-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--e72-gold-ink);}

/* V3 (22 ago): portada real del folleto oficial, servida desde nuestro uploads
   (captura de la pag. 1 del PDF; nunca hotlink). Proporcion A4, recorte por
   arriba para que el titulo del folleto siempre se vea. */
.e72s-man-coverw{margin:0; line-height:0;}
.e72s-man-cover{width:100%; aspect-ratio:210/297; object-fit:cover; object-position:top;
  border:1px solid var(--e72-line); border-radius:var(--e72-r-s);
  background:#fff; box-shadow:var(--e72-shadow-soft);}
.e72s-man-meta{
  margin:2px 0 0; font-family:var(--e72-font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--e72-gold-ink);
}
/* mas aire en el hero de manuales (Mario, 22 ago) */
.e72s-man-strip{margin-top:clamp(28px,4vw,40px);}

/* la ficha destacada (Suiza): a lo ancho, placa a la izquierda. Con cinco
   fichas, el 2x2 dejaba una huerfana; la destacada absorbe la quinta y ademas
   le da el sitio a la unica con historia personal ("debajo de casa"). */
.e72s-main .e72s-man--destacada{grid-column:1/-1; display:grid;
  grid-template-columns:minmax(190px,250px) 1fr; gap:clamp(18px,3vw,36px); align-items:stretch;}
.e72s-man--destacada .e72s-man-coverw{height:100%;}
.e72s-man--destacada .e72s-man-cover{height:100%; aspect-ratio:auto; min-height:280px;}
.e72s-man-destacada-body{display:flex; flex-direction:column; gap:12px; min-width:0;}
@media (max-width:640px){
  .e72s-main .e72s-man--destacada{grid-template-columns:1fr;}
  .e72s-man--destacada .e72s-man-cover{height:auto; aspect-ratio:210/160; object-position:top;}
}

/* la tabla sobre el panel oscuro */
.e72s-panel .e72s-raw--dark{
  margin-top:22px; background:transparent; border-color:rgba(244,240,230,.28); color:#F4F0E6;
}
.e72s-panel .e72s-raw--dark th, .e72s-panel .e72s-raw--dark td{border-color:rgba(244,240,230,.18); color:#F4F0E6;}
.e72s-panel .e72s-raw--dark thead th{background:rgba(244,240,230,.08); color:var(--e72-gold-soft); border-bottom-color:rgba(244,240,230,.28);}
.e72s-panel .e72s-raw--dark tbody th{color:#F4F0E6;}
.e72s-panel .e72s-raw--dark td{color:rgba(244,240,230,.86);}
.e72s-man-nota{margin:18px 0 0; font-size:14px; color:rgba(244,240,230,.72); max-width:64ch;}
.e72s-man-nota a{color:var(--e72-gold-soft);}
@media (max-width:860px){
  .e72s-panel .e72s-raw--dark{display:block; overflow-x:auto; white-space:normal; font-size:14px;}
}