/* ==========================================================================
   Electro Habana — Sistema visual UX/UI (rediseño)
   --------------------------------------------------------------------------
   Capa de presentación que se carga DESPUÉS de site-refinements.css.
   No modifica contenido, rutas, SEO, schema, formularios ni scripts:
   solo reescribe la presentación sobre las clases existentes.

   Orden de carga en cada página:
     ... /site-refinements.css
     /eh-redesign.css          <- este archivo
     ... /static-page-interactions.js
     /eh-redesign.js           <- complemento de estados (menú, nav activa)
   ========================================================================== */

/* 1. TOKENS ================================================================ */
html:root {
  --eh-forest: #0D281E;
  --eh-forest-hover: #163A2C;
  --eh-charcoal: #16201B;
  --eh-warm: #FBFBF9;
  --eh-sand: #F4F5F0;
  --eh-white: #FFFFFF;
  --eh-wa: #25D366;
  --eh-wa-hover: #20BD5A;
  --eh-energy: #E5A910;
  --eh-energy-soft: #FFF3C4;
  --eh-muted: #45544B;
  --eh-line: #CDD5D0;
  --eh-line-strong: #8A968F;
  --eh-focus: #D89B00;
  --eh-error: #B3261E;
  --eh-error-soft: #FCEDEC;
  --eh-success: #1E6B45;
  --eh-success-soft: #E7F4EC;
  --eh-font-display: "Space Grotesk", "SpaceGrotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --eh-font-body: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --eh-radius-sm: 8px;
  --eh-radius: 12px;
  --eh-radius-lg: 18px;
  --eh-max: 80rem;
  --eh-read: 46rem;
  --eh-gutter: clamp(1rem, 4vw, 2.5rem);
  --eh-header-h: 4.5rem;
  --eh-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --eh-shadow-pop: 0 12px 32px -12px rgba(13, 40, 30, 0.22);
  /* Re-mapeo de variables heredadas para que todo lo no reescrito
     adopte la nueva paleta automáticamente. */
  --ink: var(--eh-charcoal) !important;
  --ink-2: var(--eh-muted) !important;
  --paper: var(--eh-warm) !important;
  --paper-2: var(--eh-sand) !important;
  --cream: var(--eh-white) !important;
  --coral: var(--eh-forest) !important;
  --coral-deep: var(--eh-charcoal) !important;
  --coral-dark: var(--eh-charcoal) !important;
  --palma: var(--eh-forest) !important;
  --palma-deep: var(--eh-charcoal) !important;
  --sol: var(--eh-energy) !important;
  --line: var(--eh-line) !important;
  --font-display: var(--eh-font-display) !important;
  --font-body: var(--eh-font-body) !important;
  --silk-paper: var(--eh-warm) !important;
  --silk-paper-strong: var(--eh-sand) !important;
  --silk-card: var(--eh-white) !important;
  --silk-ink: var(--eh-charcoal) !important;
  --silk-muted: var(--eh-muted) !important;
  --silk-forest: var(--eh-forest) !important;
  --silk-forest-deep: var(--eh-charcoal) !important;
  --silk-lime: var(--eh-energy) !important;
  --silk-lime-soft: var(--eh-energy-soft) !important;
  --silk-coral: var(--eh-energy) !important;
  --silk-line: var(--eh-line) !important;
  --silk-line-strong: var(--eh-line-strong) !important;
  --silk-shadow: none !important;
  --silk-shadow-soft: none !important;
  --silk-radius-lg: var(--eh-radius-lg) !important;
  --silk-radius-md: var(--eh-radius) !important;
  --silk-radius-sm: var(--eh-radius-sm) !important;
  --silk-max: var(--eh-max) !important;
  --cta-surface: var(--eh-sand) !important;
  --cta-surface-border: var(--eh-line) !important;
  --cta-surface-ink: var(--eh-forest) !important;
  --cta-surface-muted: var(--eh-muted) !important;
  --cta-accent: var(--eh-energy) !important;
  font-family: var(--eh-font-body) !important;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--eh-header-h) + 1rem);
}
/* 2. BASE ================================================================== */
html body {
  background: var(--eh-warm) !important;
  background-image: none !important;
  color: var(--eh-charcoal);
  font-family: var(--eh-font-body) !important;
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--eh-font-body) !important;
}
[hidden] { display: none !important; }
html body img,
html body picture,
html body video,
html body svg { max-width: 100%; }
html body img { height: auto; }
html body h1,
html body h2,
html body h3,
html body h4,
html body .detail-price,
html body .price-now,
html body .footer-brand {
  font-family: var(--eh-font-display) !important;
  color: inherit;
  text-wrap: balance;
}
html body h1 {
  color: var(--eh-forest);
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 1rem;
}
html body h2 {
  color: var(--eh-forest);
  font-size: clamp(1.5rem, 2.8vw, 2.125rem) !important;
  font-weight: 700;
  letter-spacing: -0.03em !important;
  line-height: 1.12;
  margin: 0 0 .75rem;
}
html body h3 {
  color: var(--eh-charcoal);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 .5rem;
}
html body p { text-wrap: pretty; }
html body a { color: var(--eh-forest); text-underline-offset: 3px; }
html body ::selection { background: var(--eh-energy-soft); color: var(--eh-charcoal); }
html body :focus-visible {
  outline: 3px solid var(--eh-focus) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
html body .skip-link {
  background: var(--eh-forest);
  border-radius: var(--eh-radius-sm);
  color: var(--eh-white);
  font-weight: 600;
  left: 1rem;
  padding: .75rem 1rem;
  position: fixed;
  top: -4rem;
  transition: top 160ms var(--eh-ease);
  z-index: 1000;
}
html body .skip-link:focus { top: 1rem; }
/* Kicker: etiqueta corta con detalle energético amarillo */
html body .kicker,
html body .kicker[style] {
  align-items: center;
  background: transparent !important;
  color: var(--eh-muted) !important;
  display: inline-flex;
  font-family: var(--eh-font-body) !important;
  font-size: .875rem;
  font-weight: 600;
  gap: .5rem;
  letter-spacing: 0;
  margin: 0 0 .75rem;
  padding: 0 !important;
  text-transform: none;
}
html body .kicker::before {
  background: var(--eh-energy);
  border-radius: 2px;
  content: "";
  flex: none;
  height: .875rem;
  width: 3px;
}
html body .kicker svg { display: none; }
/* 3. BOTONES =============================================================== */
html body .btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--eh-font-body) !important;
  font-size: .9375rem;
  font-weight: 600;
  gap: .5rem;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.2;
  min-height: 48px;
  padding: .75rem 1.25rem;
  text-align: center;
  text-decoration: none;
  transform: none;
  transition: background-color 160ms var(--eh-ease), border-color 160ms var(--eh-ease), color 160ms var(--eh-ease), transform 120ms var(--eh-ease);
  white-space: normal;
}
html body .btn:active { transform: scale(0.98); }
html body .btn-dark,
html body .btn-primary {
  background: var(--eh-forest) !important;
  border-color: var(--eh-forest) !important;
  color: var(--eh-white) !important;
}
html body .btn-light {
  background: var(--eh-white) !important;
  border-color: var(--eh-line-strong) !important;
  color: var(--eh-forest) !important;
}
/* Verde WhatsApp SOLO en acciones que abren WhatsApp */
html body .btn-whatsapp,
html body a.btn[href*="wa.me"],
html body a.btn[href*="api.whatsapp"],
html body .footer-wa,
html body .header-cta {
  background: var(--eh-wa) !important;
  border-color: var(--eh-wa) !important;
  color: var(--eh-forest) !important;
}
@media (hover: hover) and (pointer: fine) {
  html body .btn-dark:hover,
  html body .btn-primary:hover { background: var(--eh-forest-hover) !important; border-color: var(--eh-forest-hover) !important; }
  html body .btn-light:hover { background: var(--eh-sand) !important; border-color: var(--eh-forest) !important; }
  html body .btn-whatsapp:hover,
  html body a.btn[href*="wa.me"]:hover,
  html body a.btn[href*="api.whatsapp"]:hover,
  html body .footer-wa:hover,
  html body .header-cta:hover { background: var(--eh-wa-hover) !important; border-color: var(--eh-wa-hover) !important; }
}
html body .btn[disabled],
html body .btn[aria-disabled="true"],
html body button[disabled] {
  background: #E4E8E5 !important;
  border-color: #E4E8E5 !important;
  color: #5E6B63 !important;
  cursor: not-allowed;
  transform: none;
}
html body .btn-full { width: 100%; }
/* Superficies oscuras: botones siempre legibles */
html body .lead-magnet .btn-primary,
html body .lead-magnet .btn-dark,
html body .quote-form-aside .btn-primary,
html body .quote-form-aside .btn-dark,
html body .experience-bar .btn-dark {
  background: var(--eh-energy) !important;
  border-color: var(--eh-energy) !important;
  color: var(--eh-forest) !important;
}
html body .lead-magnet .btn-light,
html body .quote-form-aside .btn-light {
  background: var(--eh-white) !important;
  border-color: var(--eh-white) !important;
  color: var(--eh-forest) !important;
}
/* 4. HEADER Y NAVEGACIÓN =================================================== */
html body .site-chrome {
  background: var(--eh-white);
  border-bottom: 1px solid var(--eh-line);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 100;
}
html body .site-header {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  gap: 1.5rem;
  margin: 0 auto;
  max-width: var(--eh-max);
  min-height: var(--eh-header-h);
  padding: 0 var(--eh-gutter);
  position: relative;
  width: 100%;
}
html body .brand {
  align-items: center;
  color: var(--eh-forest);
  display: inline-flex;
  flex: none;
  gap: .625rem;
  min-height: 44px;
  position: relative;
  text-decoration: none;
  z-index: 3;
}
html body .brand-mark {
  align-items: center;
  background: var(--eh-forest);
  border-radius: 10px;
  color: var(--eh-white);
  display: inline-flex !important;
  flex: none;
  font-family: var(--eh-font-display) !important;
  font-size: .9375rem;
  font-weight: 700;
  height: 2.5rem;
  justify-content: center;
  letter-spacing: -0.02em;
  position: relative;
  width: 2.5rem;
}
html body .brand-mark::after {
  background: var(--eh-energy);
  border-radius: 999px;
  bottom: 6px;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 12px;
}
html body .brand-text {
  display: inline-flex !important;
  flex-direction: column;
  font-family: var(--eh-font-display) !important;
  line-height: 1;
}
html body .brand-text strong {
  color: var(--eh-forest);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
html body .brand-text em {
  color: var(--eh-muted);
  font-size: .8125rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .02em;
  margin-top: .2rem;
}
html body .site-nav {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex: 1;
  gap: .125rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: static;
}
html body .site-nav .nav-item {
  align-items: center;
  display: flex;
  position: relative;
}
html body .site-nav .nav-item > a {
  border-radius: var(--eh-radius-sm);
  color: var(--eh-muted);
  font-size: .9375rem;
  font-weight: 500;
  padding: .625rem .625rem;
  position: relative;
  text-decoration: none;
  transition: color 160ms var(--eh-ease), background-color 160ms var(--eh-ease);
  white-space: nowrap;
}
html body .site-nav .nav-item > a::after {
  background: var(--eh-energy);
  border-radius: 2px;
  bottom: 2px;
  content: "";
  height: 3px;
  left: .625rem;
  opacity: 0;
  position: absolute;
  right: .625rem;
  transform: scaleX(.6);
  transition: opacity 160ms var(--eh-ease), transform 160ms var(--eh-ease);
}
html body .site-nav .nav-item > a[aria-current="page"],
html body .site-nav .nav-item > a.is-current {
  color: var(--eh-forest);
  font-weight: 600;
}
html body .site-nav .nav-item > a[aria-current="page"]::after,
html body .site-nav .nav-item > a.is-current::after {
  opacity: 1;
  transform: none;
}
html body .nav-dropdown-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--eh-radius-sm);
  color: var(--eh-muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0;
  height: 2rem;
  justify-content: center;
  margin-left: -.25rem;
  padding: 0;
  width: 1.75rem;
}
html body .nav-dropdown-toggle::before {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 7px;
  margin-top: -4px;
  transform: rotate(45deg);
  transition: transform 160ms var(--eh-ease);
  width: 7px;
}
html body .nav-dropdown-toggle[aria-expanded="true"]::before {
  margin-top: 3px;
  transform: rotate(-135deg);
}
@media (hover: hover) and (pointer: fine) {
  html body .site-nav .nav-item > a:hover { color: var(--eh-forest); background: var(--eh-sand); }
  html body .nav-dropdown-toggle:hover { color: var(--eh-forest); background: var(--eh-sand); }
}
/* Submenús escritorio */
html body .site-nav .dropdown {
  background: var(--eh-white);
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius);
  box-shadow: var(--eh-shadow-pop);
  display: grid;
  gap: .125rem;
  left: 0;
  min-width: 16rem;
  padding: .5rem;
  position: absolute;
  top: calc(100% + .5rem);
  z-index: 20;
  animation: eh-pop 180ms var(--eh-ease);
}
html body .site-nav .catalog-dropdown {
  display: block;
  columns: 2;
  column-gap: .5rem;
  min-width: min(34rem, 90vw);
}
html body .site-nav .dropdown > * { break-inside: avoid; }
html body .site-nav .dropdown a {
  border-radius: var(--eh-radius-sm);
  color: var(--eh-charcoal);
  display: block;
  font-size: .9375rem;
  font-weight: 500;
  padding: .55rem .75rem;
  text-decoration: none;
}
html body .site-nav .dropdown a:hover { background: var(--eh-sand); color: var(--eh-forest); }
html body .site-nav .dropdown p,
html body .site-nav .dropdown strong,
html body .site-nav .dropdown span:not(:empty) {
  color: var(--eh-muted);
  font-size: .75rem;
  font-weight: 600;
}
@keyframes eh-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: none; }
}
/* CTA WhatsApp del header */
html body .header-cta {
  align-items: center;
  border-radius: 10px;
  display: inline-flex !important;
  flex: none;
  font-size: .9375rem;
  font-weight: 600;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  position: relative;
  text-decoration: none;
  z-index: 3;
}
html body .header-cta .cta-icon { color: var(--eh-forest); flex: none; }
html body .header-cta .cta-text { color: var(--eh-forest); display: inline !important; }
/* Hamburguesa (oculta en escritorio) */
html body .nav-burger {
  align-items: center;
  background: var(--eh-white);
  border: 1px solid var(--eh-line-strong);
  border-radius: 10px;
  cursor: pointer;
  display: none;
  flex: none;
  flex-direction: column;
  gap: 5px;
  height: 44px;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  width: 44px;
  z-index: 3;
}
html body .nav-burger span {
  background: var(--eh-forest);
  border-radius: 2px;
  display: block;
  height: 2px;
  transition: transform 200ms var(--eh-ease), opacity 160ms var(--eh-ease);
  width: 18px;
}
html body .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html body .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
html body .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
html body .eh-nav-overlay { display: none; }
/* Banda superior de contexto (home) */
html body .experience-bar {
  align-items: center;
  background: var(--eh-forest);
  border: 0;
  color: var(--eh-white);
  display: flex;
  flex-wrap: wrap;
  font-size: .875rem;
  gap: .25rem 1rem;
  justify-content: center;
  margin: 0;
  min-height: 2.75rem;
  padding: .375rem var(--eh-gutter);
}
html body .experience-bar > span { align-items: baseline; display: inline-flex; gap: .5rem; }
html body .experience-bar strong { color: var(--eh-energy-soft); font-weight: 600; }
html body .experience-bar small { color: rgba(255, 255, 255, .82); font-size: .8125rem; }
html body .experience-bar button,
html body .experience-bar a {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: var(--eh-white);
  cursor: pointer;
  display: inline-flex;
  font-size: .8125rem;
  font-weight: 600;
  min-height: 32px;
  padding: .25rem .875rem;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  html body .experience-bar button:hover,
  html body .experience-bar a:hover { background: rgba(255, 255, 255, .1); border-color: var(--eh-white); }
}
html body .experience-dialog {
  background: var(--eh-white);
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius-lg);
  box-shadow: var(--eh-shadow-pop);
  color: var(--eh-charcoal);
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 1.75rem;
}
html body .experience-dialog::backdrop { background: rgba(22, 32, 27, .55); }
html body .experience-dialog #experience-title { color: var(--eh-forest); font-family: var(--eh-font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5rem; }
html body .experience-options { display: grid; gap: .75rem; margin: 1.25rem 0; }
html body .experience-options button {
  background: var(--eh-white);
  border: 1px solid var(--eh-line-strong);
  border-radius: var(--eh-radius);
  color: var(--eh-charcoal);
  cursor: pointer;
  display: grid;
  gap: .25rem;
  padding: 1rem 1.125rem;
  text-align: left;
  transition: border-color 160ms var(--eh-ease), background-color 160ms var(--eh-ease);
}
html body .experience-options button:hover { background: var(--eh-sand); border-color: var(--eh-forest); }
html body .experience-options strong { color: var(--eh-forest); font-family: var(--eh-font-display); font-size: 1.0625rem; }
html body .experience-options span { color: var(--eh-muted); font-size: .9375rem; }
html body .experience-options em { color: var(--eh-forest); font-size: .875rem; font-style: normal; font-weight: 600; }
html body .experience-close {
  background: transparent; border: 0; border-radius: var(--eh-radius-sm); color: var(--eh-muted); cursor: pointer;
  font-size: 1.5rem; height: 44px; position: absolute; right: .5rem; top: .5rem; width: 44px;
}
html body .experience-later {
  background: transparent; border: 0; color: var(--eh-forest); cursor: pointer; font-weight: 600;
  min-height: 44px; text-decoration: underline; text-underline-offset: 3px;
}
/* 5. LAYOUT GENERAL ======================================================== */
html body main#contenido-principal:not(.eh-calculator-page):not(.not-found) {
  margin-inline: auto;
  max-width: var(--eh-max);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  padding-inline: var(--eh-gutter);
  width: 100%;
}
html body main#contenido-principal > section,
html body main#contenido-principal > aside,
html body main#contenido-principal > nav.guide-slider,
html body main#contenido-principal > figure {
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
  margin-inline: 0;
  max-width: none;
  width: auto;
}
html body main#contenido-principal > :first-child { margin-top: clamp(1.25rem, 3vw, 2rem); }
/* Breadcrumbs */
html body .breadcrumbs,
html body main > .breadcrumbs {
  align-items: center;
  color: var(--eh-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: .875rem;
  gap: .25rem .375rem;
  line-height: 1.4;
  margin: clamp(1rem, 3vw, 1.5rem) 0 0 !important;
  max-width: none !important;
  padding: 0 !important;
}
html body .breadcrumbs a {
  color: var(--eh-muted);
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  text-decoration: underline;
  text-decoration-color: var(--eh-line-strong);
}
html body .breadcrumbs a:hover { color: var(--eh-forest); text-decoration-color: var(--eh-forest); }
html body .breadcrumbs strong { color: var(--eh-charcoal); font-weight: 600; }
html body .breadcrumbs [aria-hidden="true"] { color: var(--eh-line-strong); }
/* Encabezados de sección */
html body .section-head {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 44rem;
}
html body .section-head p,
html body .section-cta > div > p:not(.kicker),
html body .hero-copy > p:not(.kicker):not(.experience-hint) {
  color: var(--eh-muted);
  font-size: 1.0625rem;
  max-width: 40rem;
}
/* 6. HERO ================================================================== */
html body .hero {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: 0 !important;
  overflow: visible;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 !important;
}
html body .hero-copy { color: var(--eh-charcoal); max-width: 38rem; }
html body .hero-copy h1 { margin-bottom: 1.25rem; }
html body .hero-actions,
html body .lead-actions,
html body .not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
html body .experience-hint {
  align-items: center;
  color: var(--eh-muted);
  display: flex;
  font-size: .875rem;
  gap: .5rem;
  margin-top: 1.25rem;
}
html body .experience-hint::before {
  background: var(--eh-energy);
  border-radius: 999px;
  content: "";
  flex: none;
  height: 8px;
  width: 8px;
}
html body .hero-showcase {
  aspect-ratio: 3 / 2;
  background: var(--eh-sand);
  border-radius: var(--eh-radius-lg);
  min-height: 0 !important;
  overflow: visible;
  position: relative;
}
html body .showcase-glow { display: none !important; }
html body .hero-product-image {
  border-radius: var(--eh-radius-lg);
  height: 100% !important;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transform: none !important;
  width: 100% !important;
}
html body .floating-card {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius) !important;
  box-shadow: var(--eh-shadow-pop) !important;
  color: var(--eh-charcoal) !important;
  display: grid;
  gap: .125rem;
  max-width: 15rem;
  padding: .75rem 1rem !important;
  position: absolute;
  animation: none !important;
}
html body .floating-card span { color: var(--eh-muted); font-size: .75rem; font-weight: 500; }
html body .floating-card strong { color: var(--eh-forest); font-family: var(--eh-font-display); font-size: .9375rem; font-weight: 700; }
html body .floating-card.top-card { left: auto !important; right: -.75rem !important; top: 1.25rem !important; bottom: auto !important; }
html body .floating-card.bottom-card { bottom: 1.25rem !important; left: -.75rem !important; right: auto !important; top: auto !important; }
html body .floating-card.top-card::before { background: var(--eh-energy); border-radius: 999px; content: ""; height: 3px; margin-bottom: .375rem; width: 20px; }
/* Panel lateral de hero en guías / zonas */
html body .comfort-panel {
  background: var(--eh-sand) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
}
html body .comfort-panel h2,
html body .comfort-panel h3,
html body .comfort-panel strong { color: var(--eh-forest) !important; }
/* Atajos por necesidad */
html body .need-strip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 0 !important;
}
html body .need-strip a {
  align-items: center;
  background: var(--eh-white);
  border: 1px solid var(--eh-line);
  border-radius: 999px;
  color: var(--eh-forest);
  display: inline-flex;
  font-size: .9375rem;
  font-weight: 600;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1rem;
  text-decoration: none;
  transition: border-color 160ms var(--eh-ease), background-color 160ms var(--eh-ease);
}
html body .need-strip a svg { color: var(--eh-forest); flex: none; }
@media (hover: hover) and (pointer: fine) {
  html body .need-strip a:hover { background: var(--eh-energy-soft); border-color: var(--eh-energy); }
}
/* Rutas principales / pilares */
html body .section-cta,
html body .section-cta.inbound-links {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  display: block;
  padding: 0 !important;
  text-align: left;
}
html body .section-cta[style] {
  background: var(--eh-sand) !important;
  border-radius: var(--eh-radius-lg) !important;
  padding: clamp(1.5rem, 4vw, 3rem) !important;
}
html body .section-cta h2[style] { color: var(--eh-forest) !important; font-family: var(--eh-font-display) !important; }
html body .section-cta > div:first-child { margin-bottom: 1.5rem; max-width: 44rem; }
html body .section-cta > p:first-child { color: var(--eh-muted); font-weight: 500; margin: 0 0 .5rem; }
html body .section-cta .lead-actions { margin-top: .5rem; }
html body .pillar-grid,
html body .new-guides-grid,
html body .seo-decision-grid,
html body .category-link-grid,
html body .category-info-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
html body .pillar-card,
html body .new-guide-card,
html body .pillar-link-card {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  min-height: 100%;
  padding: 1.25rem 1.25rem 1.375rem !important;
  text-decoration: none;
  transition: border-color 160ms var(--eh-ease), transform 160ms var(--eh-ease);
}
html body .pillar-card h3,
html body .new-guide-card strong,
html body .pillar-link-card h3 {
  align-items: flex-start;
  color: var(--eh-forest);
  display: flex;
  font-family: var(--eh-font-display) !important;
  font-size: 1.0625rem;
  font-weight: 700;
  gap: .5rem;
  justify-content: space-between;
  margin: 0;
}
html body .pillar-card h3::after {
  border-right: 2px solid var(--eh-energy);
  border-top: 2px solid var(--eh-energy);
  content: "";
  flex: none;
  height: 7px;
  margin-top: .45rem;
  transform: rotate(45deg);
  transition: transform 160ms var(--eh-ease);
  width: 7px;
}
html body .pillar-card p,
html body .new-guide-card p,
html body .new-guide-card span,
html body .pillar-link-card p { color: var(--eh-muted); font-size: .9375rem; margin: 0; }
html body .pillar-card-stage { color: var(--eh-forest); font-size: .75rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  html body .pillar-card:hover,
  html body .new-guide-card:hover,
  html body .pillar-link-card:hover { border-color: var(--eh-forest) !important; }
  html body .pillar-card:hover h3::after { transform: translateX(3px) rotate(45deg); }
}
/* 7. TARJETAS DE PRODUCTO ================================================== */
html body .product-grid,
html body .productos-grid,
html body .related-grid,
html body .article-product-grid {
  display: grid !important;
  gap: clamp(.875rem, 2vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
html body .product-card {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0 !important;
  transform: none !important;
  transition: border-color 160ms var(--eh-ease);
}
html body .product-card[hidden] { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  html body .product-card:hover { border-color: var(--eh-forest) !important; }
  html body .product-card:hover .product-image { transform: scale(1.03) !important; }
}
html body .product-image-wrap {
  aspect-ratio: 520 / 420;
  background: var(--eh-sand) !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  position: relative;
}
html body .product-image-wrap > a,
html body .product-image-wrap picture {
  display: block;
  height: 100%;
  width: 100%;
}
html body .product-image-wrap img,
html body .product-image {
  height: 100% !important;
  mix-blend-mode: multiply;
  object-fit: contain !important;
  padding: clamp(.75rem, 2vw, 1.25rem);
  transition: transform 240ms var(--eh-ease);
  width: 100% !important;
}
html body .product-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem 1.125rem 1.125rem !important;
}
html body .product-category-tag {
  align-self: flex-start;
  background: var(--eh-sand);
  border-radius: 999px;
  color: var(--eh-forest);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  padding: .25rem .625rem;
}
html body .product-use { color: var(--eh-muted) !important; font-size: .8125rem !important; line-height: 1.4; margin: 0 !important; }
html body .product-card h3 {
  font-family: var(--eh-font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}
html body .product-card h3 a { color: var(--eh-charcoal); text-decoration: none; }
html body .product-card h3 a:hover { color: var(--eh-forest); text-decoration: underline; }
html body .product-rating { align-items: center; display: flex; font-size: .8125rem; gap: .375rem; }
html body .rating-stars { color: var(--eh-energy); letter-spacing: .05em; }
html body .rating-value { color: var(--eh-charcoal); font-weight: 600; }
html body .rating-count { color: var(--eh-muted); }
html body .price-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: space-between;
  margin: .25rem 0 0;
}
html body .price-now {
  color: var(--eh-forest) !important;
  font-size: 1.375rem !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
html body .product-stock-status {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: .75rem;
  font-weight: 600;
  gap: .375rem;
  padding: .25rem .625rem;
}
html body .product-stock-status.is-out,
html body .article-product-card-price.is-out {
  background: #EEF0EC !important;
  border: 1px solid var(--eh-line) !important;
  color: var(--eh-muted) !important;
}
html body .product-stock-status.is-out::before {
  background: var(--eh-line-strong);
  border-radius: 999px;
  content: "";
  height: 6px;
  width: 6px;
}
html body .product-card.is-out .product-image,
html body .product-card:has(.is-out) .product-image { opacity: .72; }
html body .product-card .note {
  color: var(--eh-muted) !important;
  font-size: .875rem !important;
  line-height: 1.5;
  margin: 0 !important;
}
html body .product-delivery-note { color: var(--eh-muted); display: block; font-size: .8125rem; line-height: 1.4; }
html body .product-detail-link,
html body .product-card-cta {
  align-items: center;
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line-strong) !important;
  border-radius: 10px !important;
  color: var(--eh-forest) !important;
  display: flex !important;
  font-size: .9375rem;
  font-weight: 600;
  justify-content: center;
  margin-top: auto !important;
  min-height: 44px;
  padding: .625rem 1rem !important;
  text-decoration: none !important;
  transition: background-color 160ms var(--eh-ease), border-color 160ms var(--eh-ease);
}
html body .product-card-body > .price-row + .product-detail-link,
html body .product-card-body > .note + .product-detail-link,
html body .product-card-body > .product-delivery-note + .product-detail-link { margin-top: auto !important; }
html body .product-card-body > :nth-last-child(2) { margin-bottom: .5rem; }
@media (hover: hover) and (pointer: fine) {
  html body .product-detail-link:hover,
  html body .product-card-cta:hover { background: var(--eh-forest) !important; border-color: var(--eh-forest) !important; color: var(--eh-white) !important; }
}
html body .product-card a[href*="wa.me"]:not(.btn) { color: var(--eh-forest); }
html body .catalog-cta-row { display: flex; justify-content: center; margin-top: 2rem; }
/* Tarjetas de producto relacionadas / dentro de artículos */
html body .related-card,
html body .article-product-card {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow: hidden;
  padding: 0 0 1rem !important;
  text-decoration: none;
  transition: border-color 160ms var(--eh-ease);
}
html body .related-card img,
html body .article-product-card img {
  aspect-ratio: 520 / 420;
  background: var(--eh-sand);
  mix-blend-mode: multiply;
  object-fit: contain;
  padding: .75rem;
  width: 100%;
}
html body .related-card > :not(img):not(picture),
html body .article-product-card-copy { display: flex; flex-direction: column; gap: .25rem; padding: 0 1rem; }
html body .article-product-card-copy strong { color: var(--eh-charcoal); font-family: var(--eh-font-display); font-size: 1rem; line-height: 1.3; }
html body .article-product-card-price { align-self: flex-start; color: var(--eh-forest); font-family: var(--eh-font-display); font-size: 1.125rem; font-weight: 700; }
html body .article-product-card-price.is-out { border-radius: 999px; font-family: var(--eh-font-body); font-size: .75rem; padding: .25rem .625rem; }
html body .article-product-card-cta { color: var(--eh-forest); font-size: .875rem; font-weight: 600; margin-top: .25rem; text-decoration: underline; text-underline-offset: 3px; }
html body .related-card:hover,
html body .article-product-card:hover { border-color: var(--eh-forest) !important; }
/* 8. CATÁLOGO ============================================================== */
html body .productos-hub-hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: clamp(1.5rem, 4vw, 3rem) 0 0 !important;
  text-align: left !important;
}
html body .productos-hub-hero h1 { max-width: 36rem; }
html body .productos-count { color: var(--eh-muted); font-size: 1rem; }
html body .productos-count strong { color: var(--eh-forest); font-family: var(--eh-font-display); font-weight: 700; }
html body .productos-hub { margin-top: 1.5rem !important; }
html body .productos-controls {
  align-items: end;
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  display: grid !important;
  gap: .875rem 1rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
  margin-bottom: 1.25rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) !important;
  position: relative;
}
html body .productos-controls > details,
html body .productos-controls > .catalog-guides,
html body .productos-controls > section { grid-column: 1 / -1; }
html body .productos-controls label,
html body .productos-search {
  color: var(--eh-charcoal);
  display: flex;
  flex-direction: column;
  font-size: .8125rem;
  font-weight: 600;
  gap: .375rem;
  margin: 0;
  min-width: 0;
}
html body .productos-search { position: relative; }
html body .productos-search-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2345544B' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-position: .875rem center !important;
  background-repeat: no-repeat !important;
  padding-left: 2.625rem !important;
}
html body .catalog-reset { min-height: 48px; white-space: nowrap; }
html body .productos-results-info {
  align-items: center;
  color: var(--eh-muted);
  display: flex;
  font-size: .9375rem;
  margin: 0 0 1rem;
}
html body .productos-results-info p { margin: 0; }
html body .productos-results-info strong { color: var(--eh-forest); font-weight: 700; }
html body .productos-empty {
  align-items: center;
  background: var(--eh-white);
  border: 1px dashed var(--eh-line-strong);
  border-radius: var(--eh-radius-lg);
  color: var(--eh-charcoal);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  text-align: center;
}
html body .productos-empty p { color: var(--eh-muted); font-size: 1.0625rem; margin: 0; max-width: 32rem; }
html body .catalog-guides {
  border-top: 1px solid var(--eh-line);
  margin-top: .25rem;
  padding-top: .75rem;
}
html body .catalog-guides > summary {
  align-items: center;
  color: var(--eh-forest);
  cursor: pointer;
  display: flex;
  font-weight: 600;
  gap: .5rem;
  list-style: none;
  min-height: 44px;
}
html body .catalog-guides > summary::-webkit-details-marker { display: none; }
html body .catalog-guides > summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: 7px;
  margin-left: auto;
  transform: rotate(45deg);
  transition: transform 160ms var(--eh-ease);
  width: 7px;
}
html body .catalog-guides[open] > summary::after { transform: rotate(-135deg); }
html body .catalog-category-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
html body .catalog-category-links a {
  align-items: center;
  background: var(--eh-sand);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--eh-forest);
  display: inline-flex;
  font-size: .875rem;
  font-weight: 500;
  min-height: 40px;
  padding: .375rem .875rem;
  text-decoration: none;
}
html body .catalog-category-links a:hover { border-color: var(--eh-forest); }
/* Filtros tipo botón (si existen) */
html body .solution-filter {
  background: var(--eh-white);
  border: 1px solid var(--eh-line-strong);
  border-radius: 999px;
  color: var(--eh-forest);
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  padding: .5rem 1rem;
}
html body .solution-filter.is-active,
html body .solution-filter[aria-pressed="true"] {
  background: var(--eh-energy-soft);
  border-color: var(--eh-energy);
  color: var(--eh-forest);
}
/* 9. FICHA DE PRODUCTO ===================================================== */
html body .product-detail-hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body .product-detail-grid {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  margin-top: 1.25rem;
}
html body .product-detail-image-panel {
  align-items: center;
  aspect-ratio: 820 / 680;
  background: var(--eh-sand) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2rem) !important;
}
html body .product-detail-image-panel picture { display: block; height: 100%; width: 100%; }
html body .product-detail-image {
  height: 100% !important;
  mix-blend-mode: multiply;
  object-fit: contain !important;
  width: 100% !important;
}
html body .product-buy-panel {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  position: sticky;
  top: calc(var(--eh-header-h) + 1.25rem);
}
html body .product-buy-panel h1 { font-size: clamp(1.625rem, 3vw, 2.375rem); letter-spacing: -0.03em; }
html body .detail-price {
  color: var(--eh-forest) !important;
  font-size: clamp(2rem, 3.5vw, 2.5rem) !important;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: .5rem 0 1.25rem;
}
html body .product-journey { display: grid; gap: .75rem; }
html body .availability-note {
  align-items: flex-start;
  background: var(--eh-energy-soft) !important;
  border: 1px solid #EAD38A !important;
  border-radius: var(--eh-radius) !important;
  color: var(--eh-charcoal) !important;
  display: flex;
  font-size: .9375rem;
  gap: .625rem;
  margin: 0;
  padding: .75rem 1rem !important;
}
html body .availability-note::before {
  background: var(--eh-energy);
  border-radius: 999px;
  content: "";
  flex: none;
  height: 8px;
  margin-top: .45rem;
  width: 8px;
}
html body .product-journey .btn { width: 100%; }
html body .product-detail-section {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--eh-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid;
  gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  padding: clamp(1.75rem, 4vw, 2.5rem) 0 0 !important;
}
html body .product-detail-section h2 { font-size: clamp(1.25rem, 2.2vw, 1.625rem) !important; }
html body .product-specs,
html body .product-description,
html body .detail-card,
html body .product-specs-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--eh-charcoal);
  max-width: var(--eh-read);
  padding: 0 !important;
}
html body .product-specs ul,
html body .express-source-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
html body .product-specs li,
html body .express-source-list li {
  border-bottom: 1px solid var(--eh-line);
  padding: .75rem 0 .75rem 1.25rem;
  position: relative;
}
html body .product-specs li::before,
html body .express-source-list li::before {
  background: var(--eh-energy);
  border-radius: 2px;
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  top: 1.35rem;
  width: 6px;
}
html body .product-description p { color: var(--eh-charcoal); font-size: 1.0625rem; line-height: 1.7; }
html body .product-reviews-section textarea,
html body .product-reviews-section input { width: 100%; }
/* 10. FORMULARIOS ========================================================== */
html body main input[type="text"],
html body main input[type="search"],
html body main input[type="email"],
html body main input[type="tel"],
html body main input[type="number"],
html body main input[type="url"],
html body main select,
html body main textarea {
  appearance: none;
  background-color: var(--eh-white) !important;
  border: 1px solid var(--eh-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  font-size: 1rem !important;
  line-height: 1.4;
  min-height: 48px;
  padding: .75rem .875rem;
  transition: border-color 160ms var(--eh-ease), box-shadow 160ms var(--eh-ease);
  width: 100%;
}
html body main select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230D281E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-position: right .875rem center !important;
  background-repeat: no-repeat !important;
  padding-right: 2.5rem !important;
}
html body main textarea { min-height: 7rem; resize: vertical; }
html body main input::placeholder,
html body main textarea::placeholder { color: #6B7770; opacity: 1; }
html body main input:hover,
html body main select:hover,
html body main textarea:hover { border-color: var(--eh-forest) !important; }
html body main input:focus,
html body main select:focus,
html body main textarea:focus {
  border-color: var(--eh-forest) !important;
  box-shadow: 0 0 0 3px rgba(216, 155, 0, .35) !important;
  outline: none !important;
}
html body main input:disabled,
html body main select:disabled,
html body main textarea:disabled {
  background-color: var(--eh-sand) !important;
  border-color: var(--eh-line) !important;
  color: #6B7770 !important;
  cursor: not-allowed;
}
html body main input[type="checkbox"],
html body main input[type="radio"] { accent-color: var(--eh-forest); height: 1.125rem; width: 1.125rem; }
/* Formulario de cotización */
html body .quote-form-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  overflow: hidden;
  padding: 0 !important;
  border-radius: var(--eh-radius-lg) !important;
}
html body .quote-form-aside {
  background: var(--eh-forest) !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, .86) !important;
  padding: clamp(1.75rem, 4vw, 3rem) !important;
}
html body .quote-form-aside h2 { color: var(--eh-white) !important; }
html body .quote-form-aside p { color: rgba(255, 255, 255, .86) !important; }
html body .quote-form-aside .kicker,
html body .quote-form-aside .kicker[style] { color: var(--eh-energy-soft) !important; }
html body .checklist-bullets { display: grid; gap: .75rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
html body .checklist-bullets li {
  color: var(--eh-white);
  padding-left: 1.75rem;
  position: relative;
}
html body .quote-form-aside .checklist-bullets li::marker { content: "" !important; }
html body .checklist-bullets li::before {
  border-bottom: 2px solid var(--eh-energy);
  border-right: 2px solid var(--eh-energy);
  content: "";
  height: 11px;
  left: .25rem;
  position: absolute;
  top: .3rem;
  transform: rotate(45deg);
  width: 6px;
}
html body .quote-form-wrap {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-left: 0 !important;
  border-radius: 0 var(--eh-radius-lg) var(--eh-radius-lg) 0 !important;
  box-shadow: none !important;
  padding: clamp(1.5rem, 4vw, 2.75rem) !important;
}
html body .quote-form-wrap h2 { font-size: clamp(1.25rem, 2.2vw, 1.625rem) !important; }
html body .quote-form-grid {
  display: grid;
  gap: 1rem 1.125rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.25rem 0;
}
html body .quote-field { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
html body .quote-field-full { grid-column: 1 / -1; }
html body .quote-field label,
html body main form label {
  color: var(--eh-charcoal);
  font-size: .875rem;
  font-weight: 600;
}
html body .quote-field.is-invalid input,
html body .quote-field.is-invalid select,
html body .quote-field.is-invalid textarea,
html body main [aria-invalid="true"] {
  background-color: var(--eh-error-soft) !important;
  border-color: var(--eh-error) !important;
}
html body .quote-field.is-valid input,
html body .quote-field.is-valid select,
html body .quote-field.is-valid textarea { border-color: var(--eh-success) !important; }
html body .quote-field-feedback {
  align-items: flex-start;
  color: var(--eh-error) !important;
  display: flex;
  font-size: .8125rem;
  font-weight: 500;
  gap: .375rem;
  margin: 0;
}
html body .quote-field-feedback:not(:empty)::before {
  align-items: center;
  background: var(--eh-error);
  border-radius: 999px;
  color: var(--eh-white);
  content: "!";
  display: inline-flex;
  flex: none;
  font-size: .6875rem;
  font-weight: 700;
  height: 1rem;
  justify-content: center;
  margin-top: .1rem;
  width: 1rem;
}
html body .quote-form-note { color: var(--eh-muted); font-size: .8125rem; margin-top: .875rem; }
html body .form-feedback {
  background: var(--eh-success-soft);
  border: 1px solid #B9DCC7;
  border-radius: var(--eh-radius);
  color: var(--eh-success);
  font-size: .9375rem;
  font-weight: 500;
  margin: 1rem 0 0;
  padding: .75rem 1rem;
}
html body .form-feedback.is-error,
html body .form-feedback[data-state="error"] {
  background: var(--eh-error-soft);
  border-color: #F1C2BE;
  color: var(--eh-error);
}
html body .whatsapp-recovery { margin-top: .75rem; width: 100%; }
html body form[aria-busy="true"] button[type="submit"],
html body form.is-submitting button[type="submit"] {
  cursor: progress;
  opacity: .8;
  position: relative;
}
html body form[aria-busy="true"] button[type="submit"]::after,
html body form.is-submitting button[type="submit"]::after {
  animation: eh-spin 700ms linear infinite;
  border: 2px solid currentColor;
  border-radius: 999px;
  border-right-color: transparent;
  content: "";
  height: 1rem;
  width: 1rem;
}
@keyframes eh-spin { to { transform: rotate(360deg); } }
html body .audience-help {
  background: var(--eh-energy-soft);
  border-radius: var(--eh-radius);
  color: var(--eh-charcoal);
  font-size: .875rem;
  padding: .75rem 1rem;
}
/* 11. LEAD MAGNETS Y CTA FINAL ============================================= */
html body .lead-magnet {
  align-items: center;
  background: var(--eh-forest) !important;
  border: 0 !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .86) !important;
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  padding: clamp(1.5rem, 4vw, 2.75rem) !important;
}
html body .lead-magnet h2,
html body .lead-magnet h3,
html body .lead-magnet strong { color: var(--eh-white) !important; }
html body .lead-magnet p { color: rgba(255, 255, 255, .86) !important; max-width: 40rem; }
html body .lead-magnet .kicker { color: var(--eh-energy-soft) !important; }
html body .lead-magnet .lead-actions { justify-content: flex-end; margin-top: 0; }
html body .lead-magnet a:not(.btn) { color: var(--eh-energy-soft); }
html body .lead-magnet.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
}
html body .lead-magnet.compact h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem) !important; }
html body .final-cta {
  background: var(--eh-sand) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  padding: clamp(2rem, 5vw, 3.5rem) !important;
  text-align: center;
}
html body .final-cta h2 { color: var(--eh-forest) !important; margin-inline: auto; max-width: 36rem; }
html body .final-cta p { color: var(--eh-muted) !important; margin: 0 auto 1.5rem; max-width: 36rem; }
html body .final-cta .kicker { justify-content: center; }
html body .scroll-depth-cta {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: var(--eh-shadow-pop) !important;
  color: var(--eh-charcoal) !important;
}
html body .scroll-depth-cta-title { color: var(--eh-forest) !important; font-family: var(--eh-font-display); font-weight: 700; }
html body .scroll-depth-cta-text { color: var(--eh-muted) !important; }
html body .scroll-depth-close { background: transparent; border: 0; color: var(--eh-muted); cursor: pointer; font-size: 1.25rem; min-height: 44px; min-width: 44px; }
/* 12. CONTENIDO INFORMATIVO, FAQ, GRIDS ==================================== */
html body .content-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
html body .info-card,
html body .seo-decision-grid > article,
html body .category-checklist > * {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  padding: 1.25rem !important;
}
html body .info-card > span:first-child {
  color: var(--eh-forest);
  display: inline-block;
  font-family: var(--eh-font-display);
  font-size: .875rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
html body .info-card p,
html body .seo-decision-grid > article p { color: var(--eh-muted); }
html body .seo-answer-block {
  background: var(--eh-sand) !important;
  border: 0 !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  padding: clamp(1.5rem, 4vw, 2.75rem) !important;
}
html body .seo-answer-block > p,
html body .seo-answer-block > div > p { color: var(--eh-muted); max-width: var(--eh-read); }
html body .faq-block {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-inline: auto !important;
  max-width: 56rem;
  padding: 0 !important;
}
html body .faq-list,
html body .category-faq {
  border-top: 1px solid var(--eh-line);
  display: block;
}
html body .faq-list details,
html body .category-faq details,
html body main details.faq-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--eh-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .faq-list summary,
html body .category-faq summary {
  align-items: center;
  color: var(--eh-forest);
  cursor: pointer;
  display: flex;
  font-family: var(--eh-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  gap: 1rem;
  justify-content: space-between;
  line-height: 1.35;
  list-style: none;
  min-height: 56px;
  padding: 1rem 0;
}
html body .faq-list summary::-webkit-details-marker,
html body .category-faq summary::-webkit-details-marker { display: none; }
html body .faq-list summary::after,
html body .category-faq summary::after {
  align-items: center;
  background: var(--eh-sand);
  border-radius: 999px;
  color: var(--eh-forest);
  content: "+";
  display: inline-flex;
  flex: none;
  font-family: var(--eh-font-body);
  font-size: 1.25rem;
  font-weight: 500;
  height: 2rem;
  justify-content: center;
  transition: transform 200ms var(--eh-ease), background-color 160ms var(--eh-ease);
  width: 2rem;
}
html body .faq-list details[open] > summary::after,
html body .category-faq details[open] > summary::after {
  background: var(--eh-energy-soft);
  transform: rotate(45deg);
}
html body .faq-list details > :not(summary),
html body .category-faq details > :not(summary) {
  color: var(--eh-muted);
  margin: 0 0 1.25rem;
  max-width: var(--eh-read);
}
html body .faq-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
html body .faq-control {
  background: var(--eh-white);
  border: 1px solid var(--eh-line-strong);
  border-radius: 999px;
  color: var(--eh-forest);
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  min-height: 44px;
  padding: .5rem 1rem;
}
html body .faq-control:hover { background: var(--eh-sand); }
/* Slider de guías */
html body .guide-slider {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
}
html body .guide-slider > a {
  background: var(--eh-white);
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius);
  color: var(--eh-forest);
  flex: none;
  font-weight: 600;
  min-height: 44px;
  padding: .75rem 1rem;
  scroll-snap-align: start;
  text-decoration: none;
}
/* YouTube */
html body .youtube-review { margin-inline: 0; }
html body .youtube-frame { border-radius: var(--eh-radius-lg); overflow: hidden; }
html body .youtube-play { background: var(--eh-forest) !important; }
/* 13. BLOG, ARTÍCULOS Y GUÍAS ============================================== */
html body .article-hero {
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(1.5rem, 4vw, 3rem) 0 !important;
}
html body .article-hero > :first-child p:not(.kicker) { color: var(--eh-muted); font-size: 1.125rem; max-width: 38rem; }
/* Páginas sin imagen (p. ej. Sobre nosotros): columna centrada y equilibrada */
html body .article-hero:not(.article-hero-visual) {
  display: block;
  margin-inline: auto !important;
  max-width: var(--eh-read) !important;
  text-align: left;
}
html body .article-hero-image-card {
  aspect-ratio: 16 / 10;
  background: var(--eh-sand) !important;
  border: 0 !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
  padding: 0 !important;
}
html body .article-hero-image-card picture { display: block; height: 100%; }
html body .article-hero-image { height: 100% !important; object-fit: cover; width: 100% !important; }
html body .article-shell {
  align-items: start;
  display: grid !important;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  margin-inline: auto !important;
  max-width: 68rem !important;
}
/* Sin índice lateral: una sola columna centrada */
html body .article-shell:not(:has(.article-sidebar-wrap)):not(:has(.article-sidebar)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--eh-read) !important;
}
html body .article-sidebar-wrap { position: sticky; top: calc(var(--eh-header-h) + 1.25rem); }
html body .article-sidebar-mobile-toggle > summary {
  align-items: center;
  border-bottom: 1px solid var(--eh-line);
  color: var(--eh-forest);
  cursor: pointer;
  display: flex;
  font-size: .875rem;
  font-weight: 600;
  list-style: none;
  min-height: 44px;
}
html body .article-sidebar-mobile-toggle > summary::-webkit-details-marker { display: none; }
html body .article-sidebar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid;
  gap: .125rem;
  padding: .75rem 0 0 !important;
  position: static !important;
}
html body .sidebar-title { color: var(--eh-muted); font-size: .8125rem; font-weight: 600; margin: 0 0 .5rem; }
html body .article-sidebar a {
  border-left: 2px solid var(--eh-line);
  color: var(--eh-muted);
  display: block;
  font-size: .875rem;
  line-height: 1.4;
  padding: .5rem 0 .5rem .875rem;
  text-decoration: none;
}
html body .article-sidebar a:hover,
html body .article-sidebar a[aria-current="true"] { border-left-color: var(--eh-energy); color: var(--eh-forest); }
html body .article-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--eh-charcoal);
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: var(--eh-read);
  min-width: 0;
  padding: 0 !important;
}
html body .article-content > section { margin: 0 0 2.25rem; }
html body .article-content h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem) !important; margin: 2.5rem 0 .875rem; scroll-margin-top: calc(var(--eh-header-h) + 1rem); }
html body .article-content h3 { color: var(--eh-forest); font-size: 1.1875rem; margin: 1.75rem 0 .5rem; }
html body .article-content p { margin: 0 0 1.125rem; }
html body .article-content ul,
html body .article-content ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
html body .article-content li { margin: .375rem 0; padding-left: .25rem; }
html body .article-content ul li::marker { color: var(--eh-energy); }
html body .article-content ol li::marker { color: var(--eh-forest); font-weight: 700; }
html body .article-content a:not(.btn):not(.article-product-card):not(.related-card) {
  color: var(--eh-forest);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--eh-energy);
  text-decoration-thickness: 2px;
}
html body .article-content a:not(.btn):hover { text-decoration-color: var(--eh-forest); }
html body .article-content blockquote {
  border-left: 3px solid var(--eh-energy);
  color: var(--eh-charcoal);
  font-size: 1.125rem;
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1.25rem;
}
html body .article-content img { border-radius: var(--eh-radius); }
/* Tablas */
html body .article-table-wrap {
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius);
  margin: 1.5rem 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
html body .article-table,
html body .article-content table {
  border-collapse: collapse;
  font-size: .9375rem;
  min-width: 32rem;
  width: 100%;
}
html body .article-table th,
html body .article-content table th {
  background: var(--eh-sand);
  color: var(--eh-forest);
  font-weight: 600;
  padding: .75rem 1rem;
  text-align: left;
  white-space: nowrap;
}
html body .article-table td,
html body .article-content table td {
  border-top: 1px solid var(--eh-line);
  color: var(--eh-charcoal);
  padding: .75rem 1rem;
  vertical-align: top;
}
html body .article-table tbody tr:nth-child(even) td { background: #FCFCFA; }
/* Bloques destacados */
html body .article-review-note,
html body .article-product-recommendation {
  background: var(--eh-energy-soft) !important;
  border: 1px solid #EAD38A !important;
  border-radius: var(--eh-radius) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  font-size: .9375rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem !important;
}
html body .article-product-recommendation {
  background: var(--eh-sand) !important;
  border-color: var(--eh-line) !important;
}
html body .article-product-cards { margin: 1.75rem 0; }
html body .links-label { color: var(--eh-muted); font-size: .875rem; font-weight: 600; margin: 0 0 .75rem; }
/* Navegación de cluster y artículos relacionados */
html body .seo-cluster-nav {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  padding: clamp(1.25rem, 3vw, 1.75rem) !important;
}
html body .seo-cluster-links { display: flex; flex-wrap: wrap; gap: .5rem; }
html body .seo-cluster-links a {
  align-items: center;
  background: var(--eh-sand);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--eh-forest);
  display: inline-flex;
  font-size: .875rem;
  font-weight: 500;
  min-height: 40px;
  padding: .375rem .875rem;
  text-decoration: none;
}
html body .seo-cluster-links a:hover { border-color: var(--eh-forest); }
html body .related-articles { max-width: 68rem; margin-inline: auto !important; }
html body .article-link-list {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  border-top: 1px solid var(--eh-line);
}
html body .article-link-list a {
  border-bottom: 1px solid var(--eh-line);
  color: var(--eh-forest);
  display: flex;
  flex-direction: column;
  font-family: var(--eh-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  gap: .25rem;
  line-height: 1.3;
  padding: 1rem 1rem 1rem 0;
  text-decoration: none;
}
html body .article-link-list a span { color: var(--eh-muted); font-family: var(--eh-font-body); font-size: .8125rem; font-weight: 500; }
html body .article-link-list a:hover { text-decoration: underline; text-decoration-color: var(--eh-energy); text-decoration-thickness: 2px; }
/* Índice del blog */
html body .blog-index-grid {
  display: grid !important;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
html body .blog-index-row {
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
  display: flex !important;
  flex-direction: column;
  gap: .375rem;
  overflow: hidden;
  padding: 0 0 1.25rem !important;
  text-decoration: none;
  transition: border-color 160ms var(--eh-ease);
}
html body .blog-index-row picture { aspect-ratio: 420 / 260; background: var(--eh-sand); display: block; margin-bottom: .625rem; overflow: hidden; }
html body .blog-card-image { height: 100% !important; object-fit: cover; transition: transform 240ms var(--eh-ease); width: 100% !important; }
html body .blog-index-row > span { color: var(--eh-muted); font-size: .8125rem; font-weight: 600; padding-inline: 1.25rem; }
html body .blog-index-row > strong { color: var(--eh-forest); font-family: var(--eh-font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; padding-inline: 1.25rem; text-wrap: balance; }
html body .blog-index-row > p { color: var(--eh-muted); font-size: .9375rem; line-height: 1.5; margin: 0; padding-inline: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  html body .blog-index-row:hover { border-color: var(--eh-forest) !important; }
  html body .blog-index-row:hover .blog-card-image { transform: scale(1.03); }
}
html body .new-guides > h2 { color: var(--eh-forest); }
/* 14. CHECKLIST ============================================================ */
html body .checklist-tool { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
html body .checklist-steps { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; counter-reset: eh-step; }
html body .checklist-steps > li {
  background: var(--eh-white);
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius-lg);
  padding: clamp(1.125rem, 3vw, 1.5rem);
}
html body .checklist-grid,
html body .checklist-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
html body .check-pill {
  align-items: center;
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line-strong) !important;
  border-radius: 999px !important;
  color: var(--eh-charcoal) !important;
  cursor: pointer;
  display: inline-flex;
  font-size: .9375rem;
  font-weight: 500;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1rem !important;
  transition: background-color 160ms var(--eh-ease), border-color 160ms var(--eh-ease);
}
html body .check-pill:hover { border-color: var(--eh-forest) !important; }
html body .check-pill.is-active,
html body .check-pill:has(input:checked) {
  background: var(--eh-energy-soft) !important;
  border-color: var(--eh-energy) !important;
  color: var(--eh-forest) !important;
  font-weight: 600;
}
html body .check-pill:has(input:focus-visible) { outline: 3px solid var(--eh-focus); outline-offset: 2px; }
html body .checklist-result {
  background: var(--eh-forest) !important;
  border-radius: var(--eh-radius-lg) !important;
  color: rgba(255, 255, 255, .88) !important;
  padding: clamp(1.25rem, 3vw, 2rem) !important;
  position: sticky;
  top: calc(var(--eh-header-h) + 1.25rem);
}
html body .checklist-result h2,
html body .checklist-result .checklist-rec { color: var(--eh-white) !important; }
html body .checklist-result .checklist-wh { color: var(--eh-energy-soft) !important; font-family: var(--eh-font-display); font-size: 1.5rem; font-weight: 700; }
html body .checklist-result a:not(.btn) { color: var(--eh-energy-soft); }
html body .checklist-result .btn-dark,
html body .checklist-result .btn-primary { background: var(--eh-energy) !important; border-color: var(--eh-energy) !important; color: var(--eh-forest) !important; }
html body .checklist-result .btn-light { border-color: var(--eh-white) !important; }
html body .checklist-assumptions summary { color: var(--eh-white); cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
html body .download-card,
html body .checklist-download-cta {
  background: var(--eh-sand) !important;
  border: 1px solid var(--eh-line) !important;
  border-radius: var(--eh-radius-lg) !important;
  box-shadow: none !important;
  color: var(--eh-charcoal) !important;
}
/* 15. CALCULADORA (respeta su lógica; solo tokens) ========================= */
html body .eh-calculator-page {
  --eh-forest: #0D281E;
  --eh-forest-dark: #16201B;
  --eh-ink: #16201B;
  --eh-muted: #45544B;
  --eh-paper: #FBFBF9;
  --eh-panel: #FFFFFF;
  --eh-line: #CDD5D0;
  --eh-solar: #E5A910;
  background: var(--eh-warm) !important;
  font-family: var(--eh-font-body) !important;
}
html body .eh-calculator-page h1,
html body .eh-calculator-page h2,
html body .eh-calculator-page h3 { font-family: var(--eh-font-display) !important; }
/* 16. FOOTER =============================================================== */
html body .footer {
  background: var(--eh-forest) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(255, 255, 255, .78) !important;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  font-size: .9375rem;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  margin: 0 !important;
  max-width: none !important;
  padding: clamp(2.5rem, 6vw, 4.5rem) max(var(--eh-gutter), calc((100% - var(--eh-max)) / 2 + var(--eh-gutter))) clamp(2rem, 4vw, 3rem) !important;
  row-gap: 2rem;
  width: 100% !important;
}
html body .footer > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
html body .footer-brand { color: var(--eh-white) !important; font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: .5rem; }
html body .footer p { color: rgba(255, 255, 255, .78); margin: 0 0 .75rem; max-width: 30rem; }
html body .footer-disclosure { font-size: .8125rem; }
html body .footer-title {
  color: var(--eh-energy-soft) !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  margin: 0 0 .5rem !important;
}
html body .footer a:not(.footer-wa) {
  color: rgba(255, 255, 255, .86) !important;
  display: inline-flex;
  font-size: .875rem;
  line-height: 1.35;
  min-height: 32px;
  align-items: center;
  text-decoration: none;
}
html body .footer a:not(.footer-wa):hover { color: var(--eh-white) !important; text-decoration: underline; text-decoration-color: var(--eh-energy); }
html body .footer-wa {
  align-items: center;
  align-self: flex-start;
  border-radius: 10px;
  display: inline-flex;
  font-weight: 600;
  min-height: 44px;
  margin-top: .5rem;
  padding: .625rem 1.125rem;
  text-decoration: none;
}
html body .footer-meta {
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .64) !important;
  font-size: .8125rem;
  margin-top: 1rem !important;
  padding-top: 1rem;
}
html body .back-to-top {
  align-items: center;
  background: var(--eh-white) !important;
  border: 1px solid var(--eh-line-strong) !important;
  border-radius: 999px !important;
  box-shadow: var(--eh-shadow-pop) !important;
  color: var(--eh-forest) !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.125rem;
  height: 44px;
  justify-content: center;
  width: 44px;
}
html body .sticky-mobile-cta {
  background: var(--eh-white) !important;
  border-top: 1px solid var(--eh-line) !important;
  box-shadow: 0 -8px 24px -16px rgba(13, 40, 30, .3) !important;
  gap: .5rem;
  padding: .625rem .75rem calc(.625rem + env(safe-area-inset-bottom)) !important;
}
html body .sticky-mobile-cta .btn { flex: 1; font-size: .875rem; min-height: 44px; padding: .5rem .75rem; }
@media (max-width: 640px) {
  html body.eh-consent-visible .sticky-mobile-cta { display: none !important; }
  html body #eh-consent-banner {
    bottom: auto !important;
    position: relative !important;
  }
}
/* 17. 404 ================================================================== */
html body main.not-found {
  background: var(--eh-white);
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius-lg);
  margin: clamp(2rem, 12vh, 7rem) auto;
  max-width: 36rem;
  padding: clamp(1.75rem, 5vw, 3rem);
  width: calc(100% - 2rem);
}
html body main.not-found > a:first-child {
  align-items: center;
  color: var(--eh-forest);
  display: inline-flex;
  font-family: var(--eh-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  gap: .625rem;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  min-height: 44px;
  text-decoration: none;
}
html body main.not-found > a:first-child::before {
  align-items: center;
  background: var(--eh-forest);
  border-radius: 10px;
  color: var(--eh-white);
  content: "EH";
  display: inline-flex;
  font-size: .9375rem;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}
html body main.not-found > p:nth-of-type(1) { color: var(--eh-muted); font-size: .875rem; font-weight: 600; margin: 0 0 .5rem; }
html body main.not-found > p { color: var(--eh-muted); }
/* 18. RESPONSIVE =========================================================== */
@media (max-width: 1180px) {
  html body .site-header { gap: 1rem; }
  html body .site-nav .nav-item > a { padding-inline: .5rem; font-size: .875rem; }
  html body .brand-text em { display: none; }
}
@media (max-width: 1080px) {
  html body .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .footer > :first-child { grid-column: 1 / -1; }
}
/* Menú móvil: panel lateral */
@media (max-width: 1023px) {
  html body .site-header { gap: .75rem; min-height: 4rem; }
  html:root { --eh-header-h: 4rem; }
  html body .nav-burger { display: inline-flex !important; margin-left: 0; order: 3; }
  html body .header-cta { margin-left: auto; order: 2; }
  html body .site-nav {
    align-items: stretch !important;
    background: var(--eh-white) !important;
    border: 0 !important;
    border-left: 1px solid var(--eh-line) !important;
    border-radius: 0 !important;
    bottom: 0 !important;
    box-shadow: -16px 0 40px -24px rgba(13, 40, 30, .35) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: 100dvh;
    justify-content: flex-start !important;
    left: auto !important;
    margin: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5rem 1rem 2rem !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    transform: translateX(100%);
    transition: transform 260ms var(--eh-ease), visibility 0s linear 260ms;
    visibility: hidden;
    width: min(22rem, 88vw) !important;
    z-index: 2;
  }
  html body.is-nav-open .site-nav {
    transform: none;
    transition: transform 260ms var(--eh-ease), visibility 0s linear 0s;
    visibility: visible;
  }
  html body.is-nav-open { overflow: hidden; }
  html body .eh-nav-overlay {
    background: rgba(22, 32, 27, .5);
    display: block;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 220ms var(--eh-ease);
    z-index: 99;
  }
  html body.is-nav-open .eh-nav-overlay { opacity: 1; pointer-events: auto; }
  html body .site-nav .nav-item {
    border-bottom: 1px solid var(--eh-line);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  html body .site-nav .nav-item > a {
    align-items: center;
    color: var(--eh-charcoal);
    display: flex;
    font-size: 1rem !important;
    font-weight: 600;
    min-height: 52px;
    padding: .75rem .5rem !important;
  }
  html body .site-nav .nav-item > a::after { bottom: auto; height: 60%; left: -1rem; right: auto; top: 20%; transform: none; width: 3px; }
  html body .nav-dropdown-toggle { height: 52px; margin: 0; width: 52px; }
  html body .site-nav .dropdown,
  html body .site-nav .catalog-dropdown {
    animation: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    columns: 1;
    grid-column: 1 / -1;
    margin: 0 0 .75rem;
    min-width: 0;
    padding: 0 0 0 .75rem;
    position: static;
  }
  html body .site-nav .dropdown a { color: var(--eh-muted); font-size: .9375rem; min-height: 44px; display: flex; align-items: center; }
  html body .hero,
  html body .article-hero,
  html body .product-detail-grid,
  html body .quote-form-shell,
  html body .lead-magnet,
  html body .checklist-tool { grid-template-columns: minmax(0, 1fr) !important; }
  html body .hero-copy { max-width: none; }
  html body .product-buy-panel,
  html body .checklist-result,
  html body .article-sidebar-wrap { position: static; }
  html body .article-shell { grid-template-columns: minmax(0, 1fr) !important; max-width: var(--eh-read) !important; }
  html body .quote-form-wrap {
    border-left: 1px solid var(--eh-line) !important;
    border-radius: 0 0 var(--eh-radius-lg) var(--eh-radius-lg) !important;
    border-top: 0 !important;
  }
  html body .lead-magnet .lead-actions { justify-content: flex-start; }
  html body .productos-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .productos-controls > .productos-search { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  html body .product-detail-section { grid-template-columns: minmax(0, 1fr); }
  html body .footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; }
  html body .back-to-top { bottom: calc(5rem + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 640px) {
  html body .quote-form-grid { grid-template-columns: minmax(0, 1fr); }
  html body .productos-controls { grid-template-columns: minmax(0, 1fr); }
  html body .catalog-reset { width: 100%; }
  html body .lead-magnet.compact { grid-template-columns: minmax(0, 1fr); }
  html body .hero-actions .btn,
  html body .lead-actions .btn { flex: 1 1 100%; }
  html body .floating-card { display: none !important; }
  html body .footer { grid-template-columns: minmax(0, 1fr); }
  html body .experience-bar small { display: none; }
}
@media (max-width: 420px) {
  html body .header-cta { padding: .5rem .75rem; }
  html body .header-cta .cta-text { display: none !important; }
  html body .brand-text strong { font-size: 1rem; }
}
@media (max-width: 340px) {
  html body .brand-text { display: none !important; }
}
/* 19. MOVIMIENTO REDUCIDO ================================================== */
@media (prefers-reduced-motion: reduce) {
  html:root { scroll-behavior: auto !important; }
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  html body .product-card:hover .product-image,
  html body .blog-index-row:hover .blog-card-image { transform: none !important; }
}
/* 20. IMPRESIÓN ============================================================ */
@media print {
  html body .site-chrome,
  html body .sticky-mobile-cta,
  html body .back-to-top,
  html body .scroll-depth-cta,
  html body .eh-nav-overlay { display: none !important; }
  html body { background: #fff !important; }
}