/* ════════════════════════════════════════════════════════════════════
   Ekanet — Frontend público
   Construido sobre tokens.css (paleta + tipografía + radios)
   Filosofía: "centro de control de red" · dark mode dominante con toggle
   ════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Chrome en Android agranda por su cuenta los textos que considera pequeños
     ("font boosting"). Safari en iPhone no lo hace, así que la misma página se
     veía distinta y los textos agrandados desbordaban. Se desactiva. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Modo claro como único tema — remap de los tokens dark a equivalentes light
   (los componentes JSX del handoff usan var(--ek-dark-*) que aquí apuntan a light). */
body {
  --ek-dark-bg: oklch(0.985 0.003 260);
  --ek-dark-surface: #ffffff;
  --ek-dark-line: oklch(0.9 0.006 260);
  --ek-dark-ink: oklch(0.16 0.015 260);
  --ek-dark-ink-2: oklch(0.34 0.012 260);

  /* Color del texto. En Ekanet dicen que los textos se ven grises y cuesta
     leerlos, asi que se oscurecen todos de golpe: --text, --text-strong y
     --text-soft se usaban en 150 sitios como valor de reserva (var(--text-soft,
     #6b6b66)) sin estar definidos en ninguna parte; al declararlos aqui, todos
     esos textos pasan a estos valores. Ninguno se usa sobre fondo oscuro. */
  --text-strong: #111110;   /* antes #1a1a18 */
  --text: #1c1c19;          /* antes #2a2a26 */
  --text-soft: #45453f;     /* antes #6b6b66 — el gris del que se quejaban */
  --ek-ink-2: #3a3a35;      /* antes #5a5a54 */
  --ek-ink-3: #4a4a45;      /* antes #888 */

  font-family: var(--ek-font-sans);
  color: var(--ek-dark-ink);
  background: var(--ek-dark-bg);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  min-width: 320px;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.mono { font-family: var(--ek-font-mono); font-feature-settings: "ss01", "cv11"; }
.eyebrow {
  font-family: var(--ek-font-mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ek-gold);
  text-transform: uppercase;
}
.eyebrow--blue { color: var(--ek-blue-deep); }

/* Línea decorativa azul → oro (motivo del back office) */
.ek-summer {
  background: var(--ek-blue-deep, #28368c);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  line-height: 1.45;
}
.ek-summer strong { font-weight: 700; }
.ek-bar {
  height: 4px;
  background: linear-gradient(90deg,
    var(--ek-blue-deep) 0%,
    var(--ek-blue) 60%,
    var(--ek-gold) 60%,
    var(--ek-gold) 100%);
}

/* ───── Layout container ───── */
.ek-shell { width: 100%; max-width: 1280px; margin: 0 auto; }
section { position: relative; }

/* ───── Background motivos ───── */
/* Dot grid y glow dorado del handoff — se ocultan en modo claro */
.ek-dotgrid, .ek-glow-gold { display: none; }

section > .ek-shell, section > div { position: relative; z-index: 1; }

/* ───── Botones ───── */
.ek-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--ek-r); font-weight: 500; cursor: pointer;
  border: 1px solid transparent; transition: transform .12s, background .15s, opacity .15s;
  white-space: nowrap; text-decoration: none;
}
.ek-btn:hover { transform: translateY(-1px); }
.ek-btn:active { transform: translateY(0); }
.ek-btn--sm { padding: 6px 12px; font-size: 13px; }
.ek-btn--md { padding: 10px 18px; font-size: 15px; }
.ek-btn--lg { padding: 14px 22px; font-size: 16px; }

.ek-btn--gold       { background: var(--ek-gold); color: var(--ek-ink); }
.ek-btn--primary    { background: var(--ek-blue); color: #fff; }
.ek-btn--dark       { background: var(--ek-ink); color: #fff; }
.ek-btn--outline    { background: #fff; color: var(--ek-ink); border-color: var(--ek-line); }
.ek-btn--darkOutline{ background: transparent; color: var(--ek-dark-ink); border-color: var(--ek-dark-line); }
.ek-btn--ghost      { background: transparent; color: var(--ek-dark-ink-2); }

/* ───── Badges ───── */
.ek-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; padding: 3px 8px; border-radius: 100px;
}
.ek-badge--gold { background: var(--ek-gold); color: var(--ek-ink); }
.ek-badge--blue { background: var(--ek-blue-soft); color: var(--ek-blue-deep); }
.ek-badge--ok   { background: color-mix(in oklch, var(--ek-ok) 18%, white); color: oklch(0.36 0.1 150); }
.ek-badge--dark { background: var(--ek-ink); color: #fff; }

/* ───── Animaciones de entrada (scroll reveal) ───── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }

/* ───── Animaciones nombradas ───── */
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.ek-blink { animation: blink 1s step-end infinite; }

/* Typewriter caret (banda informativa del hero) */
.ek-typer-caret {
  display: inline-block;
  color: var(--ek-blue);
  font-weight: 600;
  animation: blink 0.7s step-end infinite;
  margin-left: 2px;
}
.ek-pulse-dot { animation: pulse 1.4s ease-in-out infinite; }
.ek-float { animation: float 3.4s ease-in-out infinite; }

/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ───── Utility strip top ───── */
.ek-utility {
  background: var(--ek-dark-bg);
  color: var(--ek-dark-ink-2);
  font-family: var(--ek-font-mono);
  font-size: 13px;
  padding: 6px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--ek-dark-line);
}
.ek-utility__left, .ek-utility__right { display: flex; gap: 18px; align-items: center; }

/* ───── Nav principal ───── */
.ek-nav {
  background: var(--ek-dark-surface);
  border-bottom: 1px solid var(--ek-dark-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* El menú y el aviso de verano se quedan pegados arriba y se desplazan juntos. */
.ek-topstack { position: sticky; top: 0; z-index: 100; }
.ek-nav__inner {
  position: relative;   /* ancla del panel del megamenú */
  padding: 10px 40px;
  display: flex; align-items: center; gap: 32px;
  max-width: 1280px; margin: 0 auto;
}
.ek-logo { display: flex; align-items: center; gap: 10px; line-height: 1; }
.ek-logo__name { font-weight: 600; font-size: 21px; letter-spacing: -0.6px; color: var(--ek-dark-ink); }
.ek-logo__img { display: block; height: 38px; width: auto; max-width: 180px; object-fit: contain; }
.ek-logo--footer .ek-logo__img { height: 38px; max-width: 180px; }
.ek-nav__links { display: flex; gap: 4px; font-size: 14px; color: var(--ek-dark-ink-2); }

/* ───── Megamenú compacto (dropdown anidado) ───── */
.ek-mega-item { position: static; }
.ek-mega-trigger {
  display: inline-block;
  padding: 10px 12px;
  white-space: nowrap;
  position: relative;
  transition: color .15s;
}
.ek-mega-trigger::after {
  content: ''; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px;
  background: var(--ek-blue); transition: width .2s, left .2s;
}
.ek-mega-item:hover .ek-mega-trigger,
.ek-mega-item:focus-within .ek-mega-trigger { color: var(--ek-blue-deep); }
.ek-mega-item:hover .ek-mega-trigger::after { width: calc(100% - 24px); left: 12px; }
/* «outlet» destacado (como en la maqueta de Ekanet): negrita y letra de máquina, también en el menú del móvil */
.ek-mega-trigger--highlight,
.ek-mobile-drawer__row.ek-mobile-drawer__row--highlight { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-weight: 700; color: var(--ek-dark-ink, #1a1a18); }

/* Panel del megamenú (estilo Electronic Group / euroconnex): ocupa todo el ancho
   de la cabecera y reparte el 2º nivel en columnas, con su 3er nivel debajo.
   Antes era una cascada lateral de hasta 4 niveles: había que ir encadenando
   submenús y los de las últimas familias se salían de la pantalla. */
.ek-mega-panel {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 100;
  padding: 22px 24px 16px;
  background: var(--ek-dark-surface);
  border-top: 2px solid var(--ek-blue-deep);
  border-bottom: 1px solid var(--ek-dark-line);
  box-shadow: 0 18px 40px -14px rgba(20, 30, 60, 0.22);
  max-height: min(72vh, 620px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
/* Puente invisible: sin él, al bajar el ratón del título al panel se pierde el
   hover en el hueco de la cabecera y el panel se cerraba. */
.ek-mega-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
}
.ek-mega-item:hover > .ek-mega-panel,
.ek-mega-item:focus-within > .ek-mega-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
}
.ek-mega-panel__cols { columns: 4; column-gap: 30px; }
.ek-mega-group { break-inside: avoid; margin: 0 0 18px; }
.ek-mega-group__title {
  display: block; padding: 2px 0;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--ek-dark-ink);
}
.ek-mega-group__title:hover { color: var(--ek-blue-deep); }
.ek-mega-group__list {
  list-style: none; margin: 5px 0 0; padding: 0 0 0 12px;
  border-left: 1px solid var(--ek-dark-line);
}
.ek-mega-group__list a {
  display: block; padding: 3px 0;
  font-size: 14px; line-height: 1.35; color: var(--text-soft, #45453f);
}
.ek-mega-group__list a:hover { color: var(--ek-blue-deep); }
.ek-mega-panel__all {
  display: inline-block; margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--ek-dark-line);
  width: 100%;
  font-size: 14px; font-weight: 500; color: var(--ek-blue-deep);
}
.ek-mega-panel__all:hover { color: var(--ek-blue); }

/* Hasta 1240px la cabecera usa el menú hamburguesa (ver "Cabecera de escritorio"
   más abajo), así que el panel se esconde. */
@media (max-width: 1240px) {
  .ek-mega-panel { display: none !important; }
}
/* El subrayado azul es solo para el nombre de la familia; si no, lo heredaban
   también los ~150 enlaces del panel. */
.ek-nav__links > .ek-mega-item > a { transition: color .15s; position: relative; }
.ek-nav__links > .ek-mega-item > a:hover { color: var(--ek-blue-deep); }
.ek-nav__links > .ek-mega-item > a::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 0; height: 2px;
  background: var(--ek-blue); transition: width .2s, left .2s;
}
.ek-nav__links > .ek-mega-item > a:hover::after { width: 100%; left: 0; }
.ek-nav__search { flex: 1; max-width: 480px; }
.ek-nav__actions { display: flex; gap: 16px; align-items: center; color: var(--ek-dark-ink-2); margin-left: auto; }
.ek-nav__access {
  padding: 6px 14px; border-radius: 100px;
  background: var(--ek-dark-line);
  color: var(--ek-dark-ink);
  font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
}
.ek-nav__access:hover { background: var(--ek-blue); color: #fff; }

/* ───── Search bar ───── */
.ek-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--ek-dark-bg);
  border: 1px solid var(--ek-dark-line);
  border-radius: var(--ek-r);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ek-dark-ink-2);
  cursor: text;
  transition: border-color .15s;
}
.ek-search:hover { border-color: var(--ek-blue); }
/* ───── Desplegable del buscador en vivo (autocomplete del nav) ───── */
.ek-nav__search { position: relative; }
.ek-search-suggest {
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  z-index: 200;
  background: var(--ek-dark-surface, #fff);
  border: 1px solid var(--ek-dark-line);
  border-radius: var(--ek-r);
  box-shadow: 0 18px 44px -20px color-mix(in oklch, var(--ek-blue) 45%, transparent),
              0 2px 8px -5px rgba(0, 0, 0, 0.18);
  overflow-y: auto;
  max-height: min(70vh, 520px);
}
.ek-search-suggest[hidden] { display: none; }
.ek-search-suggest__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ek-dark-line);
  color: var(--ek-dark-ink);
  transition: background .12s;
}
.ek-search-suggest__item:last-of-type { border-bottom: 0; }
.ek-search-suggest__item:hover,
.ek-search-suggest__item.is-active { background: var(--ek-blue-soft, #eef3ff); }
.ek-search-suggest__media {
  flex: 0 0 44px; width: 44px; height: 44px;
  border: 1px solid var(--ek-dark-line); border-radius: 8px;
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ek-search-suggest__media img { width: 100%; height: 100%; object-fit: contain; }
.ek-search-suggest__media--noimg {
  font-family: var(--ek-font-mono); font-size: 12px; font-weight: 700;
  line-height: 1.1; text-align: center; color: var(--ek-dark-ink-2);
}
.ek-search-suggest__name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ek-dark-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ek-search-suggest__state {
  padding: 16px 14px; text-align: center; font-size: 14px; color: var(--ek-dark-ink-2);
}
.ek-search-suggest__more {
  display: block; padding: 11px 14px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--ek-blue, #2f6df6);
  background: var(--ek-dark-bg); border-top: 1px solid var(--ek-dark-line);
}
.ek-search-suggest__more:hover { background: var(--ek-blue-soft, #eef3ff); }

/* ───── Tarjeta de categoría — círculo flecha en azul, hover en oro ───── */
.ek-cat-card {
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.ek-cat-card:hover {
  border-color: var(--ek-blue) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px color-mix(in oklch, var(--ek-blue) 50%, transparent);
}
.ek-cat-card__arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ek-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500;
  transition: background .18s, color .18s, transform .18s;
}
.ek-cat-card:hover .ek-cat-card__arrow {
  background: var(--ek-gold); color: var(--ek-ink);
  transform: translateX(3px);
}

/* ───── Section heads ───── */
.ek-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 40px; border-bottom: 1px solid var(--ek-dark-line); padding-bottom: 20px;
}
.ek-section-head__title { font-size: 32px; font-weight: 500; margin-top: 6px; letter-spacing: -0.7px; color: var(--ek-dark-ink); }
.ek-section-head__right { font-family: var(--ek-font-mono); font-size: 13px; color: var(--ek-dark-ink-2); letter-spacing: 0.1em; }

/* ───── Footer ───── */
.ek-footer {
  background: var(--ek-dark-bg);
  color: var(--ek-dark-ink-2);
  padding: 48px 40px 24px;
  border-top: 1px solid var(--ek-dark-line);
}
.ek-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
}
.ek-footer__cols {
  display: grid;
  /* 4 columnas iguales que ocupan TODO el ancho disponible del inner */
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: start;
  text-align: left;
}
.ek-footer__col-title {
  font-family: var(--ek-font-mono); font-size: 12px; letter-spacing: 0.12em;
  color: var(--ek-gold); margin-bottom: 14px; text-transform: uppercase;
}
.ek-footer__col a, .ek-footer__col span { display: block; font-size: 14px; margin-bottom: 6px; transition: color .15s; }
.ek-footer__col a:hover { color: var(--ek-blue); }
.ek-footer__bottom {
  border-top: 1px solid color-mix(in oklch, var(--ek-dark-ink-2) 20%, transparent);
  margin-top: 32px; padding-top: 18px;
  display: flex; justify-content: space-between; font-size: 13px;
}

/* ───── Responsive básico (más adelante mobile-first completo) ───── */
@media (max-width: 980px) {
  .ek-nav__inner { flex-wrap: wrap; gap: 16px; padding: 14px 20px; }
  .ek-nav__links { display: none; }
  .ek-nav__search { order: 4; flex-basis: 100%; max-width: none; }
  .ek-utility { padding: 6px 20px; font-size: 13px; }
  .ek-utility__left { gap: 10px; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  .ek-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .ek-utility__right { display: none; }
  .ek-section-head { flex-direction: column; gap: 8px; align-items: flex-start; }
  .ek-section-head__title { font-size: 24px; }

  /* Footer móvil: centrado y un punto más grande */
  .ek-footer { padding: 40px 20px 28px; text-align: center; }
  .ek-footer__cols { grid-template-columns: 1fr; gap: 28px; }
  .ek-footer__cols > div { display: flex; flex-direction: column; align-items: center; }
  .ek-footer__cols > div > div[style] { font-size: 15px !important; max-width: 320px; }
  .ek-footer__col-title { font-size: 13px; margin-bottom: 12px; }
  .ek-footer__col a, .ek-footer__col span { font-size: 16px; margin-bottom: 10px; }
  .ek-footer__social { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; gap: 12px; }
  .ek-footer__social a { width: 44px; height: 44px; }
  .ek-footer__social a svg { width: 20px; height: 20px; }
  .ek-footer .ek-logo svg { width: 36px; height: 36px; }
  .ek-footer .ek-logo__img { height: 44px; max-width: 180px; }
}

/* ════════════════════════════════════════════════════════════════════
   LISTADO DE CATEGORÍA
   ════════════════════════════════════════════════════════════════════ */

.ek-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; }

/* ── Hero de categoría ── */
.ek-cat-hero {
  background: var(--bg-soft, #fafaf7);
  padding: 36px 0 24px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-breadcrumb {
  font-size: 13px; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-soft, #6b6b66); text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 14px;
}
.ek-breadcrumb a { color: var(--text-soft, #6b6b66); text-decoration: none; }
.ek-breadcrumb a:hover { color: var(--brand-blue, oklch(0.55 0.12 250)); }
.ek-breadcrumb__sep { margin: 0 6px; color: var(--border-soft, #d0d0c8); }
.ek-cat-hero__title {
  font-size: 36px; font-weight: 500; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--text-strong, #1a1a18);
}
.ek-cat-hero__desc {
  font-size: 16px; line-height: 1.6; color: var(--text, #2a2a26);
  max-width: 720px; margin: 8px 0 12px;
}
.ek-cat-hero__meta {
  font-size: 14px; font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-soft, #6b6b66);
}

/* ════════════════════════════════════════════════════════════════════
   Hero categoría — variante "tech" (oscura con dot grid + scan line)
   ════════════════════════════════════════════════════════════════════ */
.ek-cat-hero--tech {
  position: relative;
  background: oklch(0.16 0.015 260);
  padding: 56px 0 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
/* Circuit board / chip traces — fondo PCB denso tipo plancha real.
   La máscara de voids y el fade de la izquierda los aplica el propio SVG via <mask>. */
.ek-cat-hero--tech .ek-cat-hero__circuit {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
/* Estilos del pattern PCB */
#ek-pcb-tile path,
#ek-pcb-tile rect {
  fill: none;
  stroke: #4ab3ff;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ek-pcb-tile circle {
  fill: #4ab3ff;
}
/* Capa pintada con el pattern + glow + respiración */
.ek-cat-hero--tech .ek-pcb-fill {
  filter: drop-shadow(0 0 1.5px rgba(74, 179, 255, 0.55))
          drop-shadow(0 0 6px rgba(74, 179, 255, 0.18));
  opacity: 0.45;
  animation: ek-pcb-breathe 9s ease-in-out infinite;
}
@keyframes ek-pcb-breathe {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .ek-cat-hero--tech .ek-pcb-fill { animation: none; opacity: 0.35; }
}


/* Línea con eyebrow + barras de espectro a la derecha */
.ek-cat-hero__metaline {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; max-width: 820px;
}
.ek-cat-hero__metaline .ek-cat-hero__eyebrow { margin-bottom: 0; }

/* Equalizer / spectrum analyzer animado (estilo monitor de señal) */
.ek-cat-hero__eq {
  display: flex; align-items: flex-end; gap: 4px;
  height: 24px;
}
.ek-cat-hero__eq span {
  display: block;
  width: 3px; min-height: 3px;
  background: var(--ek-gold);
  border-radius: 1px;
  animation: ek-eq-bar 1s ease-in-out infinite;
  opacity: 0.85;
}
.ek-cat-hero__eq span:nth-child(1) { animation-delay: 0s;    animation-duration: 1.10s; }
.ek-cat-hero__eq span:nth-child(2) { animation-delay: 0.18s; animation-duration: 0.95s; }
.ek-cat-hero__eq span:nth-child(3) { animation-delay: 0.42s; animation-duration: 1.25s; }
.ek-cat-hero__eq span:nth-child(4) { animation-delay: 0.10s; animation-duration: 0.85s; }
.ek-cat-hero__eq span:nth-child(5) { animation-delay: 0.65s; animation-duration: 1.05s; }
.ek-cat-hero__eq span:nth-child(6) { animation-delay: 0.30s; animation-duration: 1.15s; }
.ek-cat-hero__eq span:nth-child(7) { animation-delay: 0.55s; animation-duration: 0.90s; }
@keyframes ek-eq-bar {
  0%, 100% { height: 30%; opacity: 0.6; }
  20%      { height: 90%; opacity: 1; }
  45%      { height: 55%; opacity: 0.85; }
  70%      { height: 100%; opacity: 1; }
  90%      { height: 40%; opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .ek-cat-hero__eq span { animation: none; height: 50%; opacity: 0.6; }
}
@media (max-width: 760px) {
  .ek-cat-hero__eq { display: none; }
}

/* Brackets de esquina (estilo viewfinder/HUD) */
.ek-cat-hero__corner {
  position: absolute; width: 18px; height: 18px;
  pointer-events: none; z-index: 2;
  border-color: color-mix(in oklch, var(--ek-gold) 70%, transparent);
}
.ek-cat-hero__corner--tl { top: 18px;    left: 18px;    border-top:    1px solid; border-left:   1px solid; }
.ek-cat-hero__corner--tr { top: 18px;    right: 18px;   border-top:    1px solid; border-right:  1px solid; }
.ek-cat-hero__corner--bl { bottom: 18px; left: 18px;    border-bottom: 1px solid; border-left:   1px solid; }
.ek-cat-hero__corner--br { bottom: 18px; right: 18px;   border-bottom: 1px solid; border-right:  1px solid; }

.ek-cat-hero--tech .ek-cat-hero__inner {
  position: relative; z-index: 1;
}
.ek-breadcrumb--tech {
  color: rgba(255, 255, 255, 0.55); margin-bottom: 28px;
}
.ek-breadcrumb--tech a { color: rgba(255, 255, 255, 0.55); }
.ek-breadcrumb--tech a:hover { color: var(--ek-gold); }
.ek-breadcrumb--tech .ek-breadcrumb__sep { color: rgba(255, 255, 255, 0.25); }
.ek-breadcrumb--tech [aria-current="page"] { color: var(--ek-gold); }

.ek-cat-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; letter-spacing: 0.18em;
  color: var(--ek-gold); margin-bottom: 18px;
}
.ek-cat-hero__pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ek-gold);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--ek-gold) 60%, transparent);
  animation: ek-cat-pulse 2s ease-out infinite;
}
@keyframes ek-cat-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ek-gold) 50%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in oklch, var(--ek-gold) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--ek-gold) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .ek-cat-hero__pulse { animation: none; }
}
/* Punto animado integrado en el H1 del hero de categoría */
.ek-cat-hero__pulse--title {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 18px;
  vertical-align: middle;
  position: relative; top: -0.18em;
}

.ek-cat-hero--tech .ek-cat-hero__title {
  font-size: 56px; font-weight: 500; letter-spacing: -1.5px; line-height: 1.05;
  color: #fff; margin: 0 0 18px; max-width: 820px;
}
.ek-cat-hero--tech .ek-cat-hero__desc {
  color: rgba(255, 255, 255, 0.7); max-width: 720px; margin: 0 0 36px;
  font-size: 16px; line-height: 1.6;
}
/* Las descripciones importadas de legacy traen inline styles con color:#080808 y
   font-size variables. Forzamos coherencia con el hero oscuro. */
.ek-cat-hero--tech .ek-cat-hero__desc,
.ek-cat-hero--tech .ek-cat-hero__desc * { color: rgba(255, 255, 255, 0.7) !important; }
.ek-cat-hero--tech .ek-cat-hero__desc strong { color: rgba(255, 255, 255, 0.95) !important; font-weight: 500; }
.ek-cat-hero--tech .ek-cat-hero__desc a,
.ek-cat-hero--tech .ek-cat-hero__desc a * { color: var(--ek-gold) !important; text-decoration: underline; }
.ek-cat-hero--tech .ek-cat-hero__desc :is(h1, h2, h3, h4, h5, h6) {
  font-size: 17px !important; font-weight: 500 !important;
  margin: 0 0 8px !important; line-height: 1.4 !important;
}
.ek-cat-hero--tech .ek-cat-hero__desc :is(p, span) { font-size: inherit !important; }
.ek-cat-hero--tech .ek-cat-hero__desc p { margin: 0 0 8px !important; }
.ek-cat-hero--tech .ek-cat-hero__desc p:last-child { margin-bottom: 0 !important; }
.ek-cat-hero--tech .ek-cat-hero__desc br { display: none; }

.ek-cat-hero__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  max-width: 820px;
}
.ek-cat-hero__stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 20px 0 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.ek-cat-hero__stat:first-child { padding-left: 0; }
.ek-cat-hero__stat:last-child { border-right: 0; }
.ek-cat-hero__stat-num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 22px; font-weight: 500; letter-spacing: -0.5px;
  color: #fff; line-height: 1;
}
.ek-cat-hero__stat-num--gold { color: var(--ek-gold); }
.ek-cat-hero__stat-lbl {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 760px) {
  .ek-cat-hero--tech { padding: 40px 0 32px; }
  .ek-cat-hero--tech .ek-cat-hero__title { font-size: 36px; letter-spacing: -0.8px; }
  .ek-cat-hero--tech .ek-cat-hero__scan { width: 100%; opacity: 0.25; }
  .ek-cat-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .ek-cat-hero__stat { border-right: 0; padding-right: 0; }
  .ek-cat-hero__stat:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, 0.08); padding-right: 16px; }
}

/* ── Grid principal ── */
.ek-cat-listing { padding: 32px 0 64px; }
.ek-cat-listing__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

/* ── Sidebar de filtros ── */
.ek-filters {
  position: sticky; top: 24px;
  background: #fff; border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 6px; padding: 20px;
}
.ek-filters__form { display: flex; flex-direction: column; gap: 20px; }
.ek-filters__group { border: 0; padding: 0; margin: 0; }
.ek-filters__group legend {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-strong, #1a1a18);
  margin-bottom: 10px; padding: 0;
}
.ek-filters__list { display: flex; flex-direction: column; gap: 4px; }
.ek-filters__check {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer;
  color: var(--text, #2a2a26);
}
.ek-filters__check:hover { color: var(--brand-blue, oklch(0.55 0.12 250)); }
.ek-filters__check input[type="checkbox"] { accent-color: var(--brand-blue, oklch(0.55 0.12 250)); }
.ek-filters__count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; color: var(--text-soft, #6b6b66);
}
.ek-filters__list details summary {
  cursor: pointer; font-size: 13px; color: var(--brand-blue, oklch(0.55 0.12 250));
  padding: 6px 0; user-select: none;
}
/* Filtro por color: dropdown con swatches pequeños */
.ek-filters__details > summary {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-strong, #1a1a18);
  cursor: pointer; padding: 4px 0; user-select: none;
  list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.ek-filters__details > summary::-webkit-details-marker { display: none; }
.ek-filters__details > summary::after {
  content: '›'; margin-left: auto; font-size: 15px; line-height: 1;
  transform: rotate(90deg); transition: transform .15s;
  color: var(--text-soft, #6b6b66);
}
.ek-filters__details[open] > summary::after { transform: rotate(-90deg); }
.ek-filters__details > .ek-filters__list { padding-top: 10px; }

.ek-filters__colors {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding-top: 10px;
}
.ek-color-swatch {
  display: inline-block; cursor: pointer; position: relative;
}
.ek-color-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.ek-color-swatch__dot {
  display: block;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border, #d0d0c8);
  box-shadow: inset 0 0 0 2px #fff;
  transition: transform .12s, box-shadow .12s;
}
.ek-color-swatch:hover .ek-color-swatch__dot { transform: scale(1.15); }
.ek-color-swatch input:checked ~ .ek-color-swatch__dot {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--text-strong, #1a1a18);
}
.ek-color-swatch input:focus-visible ~ .ek-color-swatch__dot {
  outline: 2px solid var(--brand-blue, oklch(0.55 0.12 250)); outline-offset: 2px;
}

.ek-filters__price {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 6px;
}
.ek-filters__price input {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border, #d0d0c8);
  border-radius: 4px; font-size: 14px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-filters__clear {
  font-size: 13px; color: var(--text-soft, #6b6b66); text-decoration: underline;
  text-align: center; margin-top: -8px;
}
/* Mientras carga la página ya filtrada (los filtros se aplican solos al marcarlos):
   los productos se atenúan para que se note que algo está pasando. */
body.ek-filtering .ek-cat-products { opacity: .45; pointer-events: none; transition: opacity .15s; }
body.ek-filtering .ek-filters__form { pointer-events: none; }

/* ── Toolbar (orden + paginación count) ── */
.ek-cat-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-soft, #e5e5e0);
  margin-bottom: 24px;
}
.ek-cat-toolbar__sort label { font-size: 13px; color: var(--text-soft, #6b6b66); margin-right: 8px; }
.ek-cat-toolbar__sort select {
  padding: 6px 10px; font-size: 14px; border: 1px solid var(--border, #d0d0c8);
  border-radius: 4px; background: #fff;
}
.ek-cat-toolbar__count {
  font-size: 13px; color: var(--text-soft, #6b6b66);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ── Grid de productos ── */
.ek-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* ── Selector de vista (cuadrícula / lista) ── */
.ek-viewtoggle { display: inline-flex; gap: 4px; }
.ek-viewtoggle__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 32px; padding: 0; cursor: pointer;
  background: #fff; border: 1px solid var(--border, #d0d0c8);
  border-radius: 5px; color: var(--text-soft, #6b6b66);
  transition: background .15s, color .15s, border-color .15s;
}
.ek-viewtoggle__btn:hover { border-color: var(--brand-blue, oklch(0.55 0.12 250)); }
.ek-viewtoggle__btn.is-on {
  background: var(--ek-ink, #1a1a26); border-color: var(--ek-ink, #1a1a26); color: #fff;
}

/* ── Vista LISTA: la tarjeta pasa a horizontal (sin tocar su HTML) ── */
.ek-prod-grid.is-list { grid-template-columns: 1fr; gap: 12px; }
.ek-prod-grid.is-list .ek-prodcard { flex-direction: row; align-items: stretch; }
.ek-prod-grid.is-list .ek-prodcard__media {
  flex: 0 0 168px; width: 168px; aspect-ratio: 1/1; border-right: 1px solid var(--border-soft, #e5e5e0);
}
.ek-prod-grid.is-list .ek-prodcard__body {
  flex: 1; justify-content: center; padding: 16px 20px; gap: 6px;
}
.ek-prod-grid.is-list .ek-prodcard__name { font-size: 16px; }
@media (max-width: 620px) {
  /* En móvil la lista vuelve a apilarse para no comprimir la imagen */
  .ek-prod-grid.is-list .ek-prodcard { flex-direction: column; }
  .ek-prod-grid.is-list .ek-prodcard__media {
    flex-basis: auto; width: 100%; border-right: 0; border-bottom: 1px solid var(--border-soft, #e5e5e0);
  }
}

/* ── Product card ── */
.ek-prodcard {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 6px; overflow: hidden; text-decoration: none;
  color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ek-prodcard:hover {
  border-color: var(--brand-blue, oklch(0.55 0.12 250));
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.ek-prodcard-wrap { position: relative; height: 100%; }
.ek-prodcard__media {
  position: relative; aspect-ratio: 1/1; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}

/* Botón Añadir al carrito sobre la tarjeta */
.ek-prodcard__add {
  position: absolute; bottom: 10px; right: 10px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: #1a1208;
  background: linear-gradient(135deg, #f5b94e 0%, #e09a2e 70%, #c97f1d 100%);
  border: 0; border-radius: 8px;
  box-shadow: 0 4px 12px -4px rgba(224,154,46,0.55), 0 1px 2px rgba(0,0,0,0.08);
  cursor: pointer;
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s, transform .18s, filter .15s;
}
.ek-prodcard-wrap:hover .ek-prodcard__add,
.ek-prodcard-wrap:focus-within .ek-prodcard__add { opacity: 1; transform: translateY(0); }
.ek-prodcard__add:hover { filter: brightness(1.05); }
.ek-prodcard__add:disabled { opacity: 0.7 !important; cursor: not-allowed; filter: grayscale(0.2); }
.ek-prodcard__add svg { display: block; }
@media (max-width: 640px) {
  /* En móvil siempre visible (no hay hover) */
  .ek-prodcard__add { opacity: 1; transform: none; padding: 6px 9px; font-size: 13px; }
}
/* contain (no cover): muestra el producto entero, centrado y escalado dentro
   del cuadro uniforme, sin recortar ni deformar según su proporción. */
.ek-prodcard__media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.ek-prodcard__noimg {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 600; color: var(--border, #c0c0b8);
  text-align: center; line-height: 1.3; letter-spacing: 0.5px;
}
.ek-prodcard__badge {
  position: absolute; top: 8px; left: 8px;
  padding: 4px 8px; font-size: 13px; font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  border-radius: 3px;
}
.ek-prodcard__badge--sale { background: var(--brand-blue, oklch(0.55 0.12 250)); color: #fff; }
.ek-prodcard__badge--oos  { background: var(--text-soft, #6b6b66); color: #fff; right: 8px; left: auto; }
.ek-prodcard__badge--low  { background: var(--brand-gold, #d4a55a); color: #fff; right: 8px; left: auto; }
/* Usado o reacondicionado (estado de la ficha): sustituye a «Últimas N». En tarjetas
   estrechas (< 205 px, p. ej. 2 por fila en móvil) solo «OUTLET», para no pisar la de
   descuento (−15 % acaba a 55 px; «Producto OUTLET» mide ~133 px).
   La imagen de la tarjeta siempre toma el ancho de su rejilla, así que puede ser contenedor. */
.ek-prodcard__badge--outlet { background: #c2410c; color: #fff; right: 8px; left: auto; }
.ek-prodcard__badge--below  { top: 40px; }
/* En liquidación (otro estado de la ficha, script 183): en el mismo sitio que «OUTLET», en rojo */
.ek-prodcard__badge--clearance { background: #b91c1c; }
.ek-prodcard__media { container-type: inline-size; }
@container (max-width: 204px) {
  .ek-prodcard__badge-pre { display: none; }
  .ek-prodcard__badge--clearance { font-size: 11px; padding: 4px 6px; }   /* que no pise el de descuento */
}
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .ek-prodcard__badge-pre { display: none; }
    .ek-prodcard__badge--clearance { font-size: 11px; padding: 4px 6px; }
  }
}

.ek-prodcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ek-prodcard__brand {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-soft, #6b6b66);
}
.ek-prodcard__title {
  font-size: 15px; font-weight: 500; line-height: 1.35;
  margin: 0; color: var(--text-strong, #1a1a18);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserva 2 líneas para que la referencia/precio queden alineados entre
     tarjetas con título de 1 o 2 líneas. */
  min-height: calc(1.35em * 2);
}
.ek-prodcard__ref {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; color: var(--text-soft, #6b6b66); margin-top: 2px;
}
.ek-prodcard__price {
  margin-top: auto; padding-top: 10px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
}
.ek-prodcard__price-before {
  text-decoration: line-through; font-size: 14px; color: var(--text-soft, #6b6b66);
}
.ek-prodcard__price-now {
  font-size: 19px; font-weight: 600; color: var(--text-strong, #1a1a18);
}
.ek-prodcard__price-tax {
  font-size: 12px; color: var(--text-soft, #6b6b66); width: 100%; margin-top: -2px;
}

/* ── Paginación ── */
.ek-pagination {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin: 40px 0 0; flex-wrap: wrap;
}
.ek-pagination__btn {
  padding: 8px 14px; border: 1px solid var(--border, #d0d0c8);
  border-radius: 4px; font-size: 14px; text-decoration: none;
  color: var(--text, #2a2a26);
}
.ek-pagination__btn:hover {
  border-color: var(--brand-blue, oklch(0.55 0.12 250));
  color: var(--brand-blue, oklch(0.55 0.12 250));
}
.ek-pagination__pages { display: flex; gap: 4px; align-items: center; }
.ek-pagination__pages a, .ek-pagination__current {
  padding: 6px 11px; font-size: 14px; border-radius: 4px; text-decoration: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-pagination__pages a { color: var(--text, #2a2a26); }
.ek-pagination__pages a:hover { background: var(--bg-soft, #fafaf7); }
.ek-pagination__current {
  background: var(--brand-blue, oklch(0.55 0.12 250)); color: #fff; font-weight: 600;
}
.ek-pagination__dots { color: var(--text-soft, #6b6b66); padding: 0 4px; }

/* ── Estado vacío ── */
.ek-cat-empty {
  text-align: center; padding: 64px 20px;
  background: var(--bg-soft, #fafaf7); border-radius: 6px;
}

/* ── Texto largo para Google, al final de la categoría (plegado) ──
   Reunión del 16-sep: el texto SEO va abajo o plegado; arriba solo el corto. El
   pliegue lo pone el JS de la plantilla (.is-collapsible): sin JS se ve entero. */
.ek-cat-seo { padding: 12px 0 56px; }
.ek-cat-seo__box { position: relative; max-width: 880px; }
.ek-cat-seo__box.is-collapsible { max-height: 260px; overflow: hidden; }
.ek-cat-seo__box.is-collapsible::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(to bottom, transparent, var(--ek-dark-bg));
  pointer-events: none;
}
.ek-cat-seo__box.is-collapsible.is-open { max-height: none; }
.ek-cat-seo__box.is-collapsible.is-open::after { display: none; }
.ek-cat-seo__body { font-size: 16px; line-height: 1.7; color: var(--text, #1c1c19); }
.ek-cat-seo__body h2 { margin: 0 0 12px; font-size: 23px; line-height: 1.25; color: var(--text-strong, #111110); }
.ek-cat-seo__body h3 { margin: 24px 0 8px; font-size: 19px; line-height: 1.3; color: var(--text-strong, #111110); }
.ek-cat-seo__body p { margin: 0 0 12px; }
.ek-cat-seo__body ul, .ek-cat-seo__body ol { margin: 0 0 12px; padding-left: 22px; }
.ek-cat-seo__body li { margin-bottom: 4px; }
.ek-cat-seo__body a { color: var(--ek-blue-deep); text-decoration: underline; }
/* Tablas comparativas del texto largo (las IA y Google las leen muy bien) */
.ek-cat-seo__body table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; line-height: 1.45; }
.ek-cat-seo__body th, .ek-cat-seo__body td { border: 1px solid var(--ek-dark-line); padding: 9px 11px; text-align: left; vertical-align: top; }
.ek-cat-seo__body thead th { background: var(--ek-blue-soft); color: var(--text-strong, #111110); font-weight: 600; }
.ek-cat-seo__body tbody tr:nth-child(even) td { background: color-mix(in oklch, var(--ek-blue-soft) 30%, #fff); }
@media (max-width: 720px) {
  .ek-cat-seo__body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.ek-cat-seo__more {
  margin-top: 14px; padding: 9px 18px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ek-blue-deep);
  background: #fff; border: 1px solid var(--ek-blue); border-radius: 999px; cursor: pointer;
}
.ek-cat-seo__more:hover { background: var(--ek-blue-soft); }

/* Preguntas frecuentes de la categoría (GEO / IA): desplegables nativos <details> */
.ek-cat-faq { max-width: 880px; margin-top: 34px; }
.ek-cat-faq__title { margin: 0 0 14px; font-size: 23px; line-height: 1.25; color: var(--text-strong, #111110); }
.ek-cat-faq__item { border: 1px solid var(--ek-dark-line); border-radius: 10px; background: #fff; margin-bottom: 10px; }
.ek-cat-faq__q {
  list-style: none; cursor: pointer; padding: 15px 48px 15px 18px; position: relative;
  font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text-strong, #111110);
}
.ek-cat-faq__q::-webkit-details-marker { display: none; }
.ek-cat-faq__q::after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--ek-blue-deep);
}
.ek-cat-faq__item[open] > .ek-cat-faq__q::after { content: '–'; }
.ek-cat-faq__q:hover { color: var(--ek-blue-deep); }
.ek-cat-faq__a { padding: 0 18px 14px; font-size: 15px; line-height: 1.65; color: var(--text, #1c1c19); }
.ek-cat-faq__a p { margin: 0 0 10px; }
.ek-cat-faq__a ul { margin: 0 0 10px; padding-left: 20px; }
.ek-cat-empty h2 { font-size: 21px; font-weight: 500; margin: 0 0 8px; }
.ek-cat-empty p { color: var(--text-soft, #6b6b66); }
.ek-cat-empty a { color: var(--brand-blue, oklch(0.55 0.12 250)); }

/* ── Botones genéricos (si no existen ya) ── */
.ek-btn {
  display: inline-block; padding: 10px 18px; font-size: 14px; font-weight: 500;
  text-decoration: none; border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.ek-btn--primary { background: var(--text-strong, #1a1a18); color: #fff; }
.ek-btn--primary:hover { background: var(--brand-blue, oklch(0.55 0.12 250)); }
.ek-btn--ghost {
  background: transparent; border-color: var(--border, #d0d0c8); color: var(--text, #2a2a26);
}
.ek-btn--ghost:hover { border-color: var(--text-strong, #1a1a18); }

/* ── 404 ── */
.ek-404 { padding: 96px 0; text-align: center; }
.ek-404__code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 96px; font-weight: 500; color: var(--brand-blue, oklch(0.55 0.12 250));
  line-height: 1; margin-bottom: 8px;
}
.ek-404__title { font-size: 28px; font-weight: 500; margin: 0 0 16px; }
.ek-404__desc { color: var(--text-soft, #6b6b66); max-width: 480px; margin: 0 auto 32px; }
.ek-404__desc code {
  background: var(--bg-soft, #fafaf7); padding: 2px 6px; border-radius: 3px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 14px;
}
.ek-404__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Responsive listado ── */
@media (max-width: 900px) {
  .ek-cat-listing__grid { grid-template-columns: 1fr; }
  .ek-filters { position: static; }
  .ek-cat-hero__title { font-size: 28px; }
  .ek-prod-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .ek-prodcard__title { font-size: 14px; }
  .ek-prodcard__price-now { font-size: 17px; }
}

/* ════════════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO
   ════════════════════════════════════════════════════════════════════ */

.ek-prod-page { padding: 32px 0 64px; }
.ek-prod-page__grid {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  gap: 48px;
  margin-top: 16px;
  align-items: start;
}

/* ── Galería ── */
.ek-prod-gallery { display: flex; flex-direction: column; gap: 12px; }
.ek-prod-gallery__main {
  position: relative;
  aspect-ratio: 1/1;
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.ek-prod-gallery__main img {
  width: 100%; height: 100%; object-fit: contain; padding: 16px;
  transition: transform .12s ease-out;
}
/* Lupa: al pasar el ratón la imagen se amplía y sigue al cursor */
.ek-prod-gallery__main.is-zooming { cursor: zoom-out; }
.ek-prod-gallery__main.is-zooming img { transform: scale(2.4); padding: 0; }
.ek-gallery-noimg, .ek-gallery-noimg-fb {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 15px; font-weight: 600; color: var(--border, #c0c0b8);
  text-align: center; line-height: 1.4; letter-spacing: 1px;
  position: absolute; inset: 0;
}
.ek-gallery-noimg-fb { display: none; }
.ek-prod-gallery__main.is-noimg .ek-gallery-noimg-fb { display: flex; }

.ek-prod-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
}
.ek-thumb {
  aspect-ratio: 1/1; padding: 0; cursor: pointer;
  background: #fff;
  border: 2px solid var(--border-soft, #e5e5e0);
  border-radius: 6px; overflow: hidden;
  transition: border-color .15s;
}
.ek-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ek-thumb:hover { border-color: var(--border, #c0c0b8); }
.ek-thumb.is-active { border-color: var(--brand-blue, oklch(0.55 0.12 250)); }

/* ── Ampliar la foto a pantalla completa ──
   El cliente lo pidió "como en ekanet": un cuadradito abajo a la derecha de la
   imagen que la abre a pantalla completa. Allí es un icono de 30 px sobre fondo
   blanco translúcido a 10 px del borde; aquí va algo mayor (36) porque en la
   reunión también se quejaron del tamaño de las cosas. Nuestro visor añade las
   miniaturas abajo, que es lo que se pidió en la reunión y ekanet no tiene. */
.ek-gallery-zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text, #1c1c19);
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: var(--ek-r-sm, 4px);
  cursor: zoom-in;
  transition: background .15s, color .15s, border-color .15s;
}
.ek-gallery-zoom:hover, .ek-gallery-zoom:focus-visible {
  background: #fff; color: var(--ek-blue-deep); border-color: var(--ek-blue);
}
.ek-prod-gallery__main.is-noimg .ek-gallery-zoom { display: none; }

.ek-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  background: rgba(12, 12, 14, 0.94);
}
.ek-lightbox[hidden] { display: none; }
.ek-lightbox__stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 72px 8px;
}
/* La foto no se estira más de 1,6× su tamaño real (el tope lo pone el JS al
   cargarla): así las fotos pequeñas llenan la pantalla y ninguna se ve borrosa. */
.ek-lightbox__stage img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; background: #fff; border-radius: 6px;
}
.ek-lightbox__close, .ek-lightbox__nav {
  position: absolute; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255, 255, 255, 0.14);
  border: 0; border-radius: 50%; cursor: pointer;
  transition: background .15s;
}
.ek-lightbox__close:hover, .ek-lightbox__nav:hover,
.ek-lightbox__close:focus-visible, .ek-lightbox__nav:focus-visible { background: rgba(255, 255, 255, 0.3); }
.ek-lightbox__close { top: 12px; right: 14px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.ek-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; line-height: 1; }
.ek-lightbox__nav--prev { left: 14px; }
.ek-lightbox__nav--next { right: 14px; }
.ek-lightbox__bar { flex: 0 0 auto; padding: 8px 16px 16px; text-align: center; }
.ek-lightbox__count { display: block; margin-bottom: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.ek-lightbox__thumbs {
  display: flex; gap: 8px; justify-content: center;
  overflow-x: auto; padding-bottom: 4px;
}
.ek-lightbox__thumb {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 2px;
  background: #fff; border: 2px solid transparent; border-radius: 4px; cursor: pointer;
}
.ek-lightbox__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ek-lightbox__thumb.is-active { border-color: var(--ek-gold); }
body.ek-noscroll { overflow: hidden; }

@media (max-width: 720px) {
  .ek-lightbox__stage { padding: 56px 8px 4px; }
  .ek-lightbox__nav { width: 42px; height: 42px; font-size: 26px; }
  .ek-lightbox__nav--prev { left: 6px; }
  .ek-lightbox__nav--next { right: 6px; }
  .ek-lightbox__thumb { width: 54px; height: 54px; }
  .ek-lightbox__bar { padding: 6px 10px 12px; }
}

/* ── Info ── */
.ek-prod-info { display: flex; flex-direction: column; gap: 18px; }
.ek-prod-info__brand {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ek-gold);
}
.ek-prod-info__title {
  font-size: 28px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.01em; margin: -4px 0 0; color: var(--text-strong, #1a1a18);
}
.ek-prod-info__meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; color: var(--text-soft, #6b6b66);
  padding-bottom: 16px; border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-prod-info__meta strong { color: var(--text, #2a2a26); font-weight: 600; }
.ek-prod-info__short {
  font-size: 16px; line-height: 1.6; color: var(--text, #2a2a26);
}
.ek-prod-info__short p { margin: 0 0 8px; }

/* ── Enlaces dentro de la descripción del producto (corta y larga) ──
   La regla global `a { text-decoration:none }` los dejaba indistinguibles.
   Forzamos SOLO el subrayado; el color se hereda del texto que los rodea
   (no azul, para que no parezcan enlaces de web antigua). Un color en línea
   propio del enlace (TinyMCE) sigue mandando. */
.ek-prod-info__short a,
.ek-prod-desc__inner a {
  color: inherit;
  text-decoration-line: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.ek-prod-info__short a:hover,
.ek-prod-desc__inner a:hover {
  text-decoration-thickness: 2px;
}

/* ── Precio ── */
.ek-prod-info__pricebox {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 0; border-top: 1px solid var(--border-soft, #e5e5e0);
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-prod-info__price-before {
  text-decoration: line-through; font-size: 17px; color: var(--text-soft, #6b6b66);
}
.ek-prod-info__price-now {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 36px; font-weight: 500; line-height: 1;
  color: var(--text-strong, #1a1a18); letter-spacing: -0.02em;
}
.ek-prod-info__price-tax {
  font-size: 13px; color: var(--text-soft, #6b6b66);
}
.ek-prod-info__price-vat {
  font-size: 14px; color: var(--text-soft, #6b6b66); margin-top: 4px;
}
.ek-prod-info__price-vat span {
  font-weight: 600; color: var(--text, #2a2a26);
}

/* ── Stock ── */
.ek-prod-info__stock { display: flex; flex-direction: column; gap: 4px; }
.ek-stock-pill {
  display: inline-block; font-size: 14px; font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-stock-pill--in  { color: oklch(0.55 0.18 145); }
.ek-stock-pill--low { color: oklch(0.62 0.16 70); }
.ek-stock-pill--out { color: oklch(0.55 0.18 25); }
.ek-stock-pill--info{ color: var(--text-soft, #6b6b66); }
.ek-stock-pill__qty { font-size: 14px; color: var(--text-soft, #6b6b66); margin-left: 8px; }
.ek-stock-pill__txt { font-size: 13px; color: var(--text-soft, #6b6b66); margin-top: 2px; }

/* ── Combinaciones ── */
.ek-prod-info__sectitle {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-strong, #1a1a18);
  margin: 0 0 8px;
}
.ek-combo-list { display: flex; flex-direction: column; gap: 6px; }
.ek-combo {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 6px; cursor: pointer;
  font-size: 14px; transition: border-color .15s, background .15s;
}
.ek-combo:hover { border-color: var(--border, #c0c0b8); }
.ek-combo input[type="radio"] { accent-color: var(--brand-blue, oklch(0.55 0.12 250)); }
.ek-combo input[type="radio"]:checked + .ek-combo__name { font-weight: 600; }
.ek-combo:has(input[type="radio"]:checked) {
  border-color: var(--brand-blue, oklch(0.55 0.12 250));
  background: oklch(0.97 0.02 250);
}
.ek-combo__delta {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; color: var(--brand-blue, oklch(0.55 0.12 250));
}
.ek-combo__stock {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; color: var(--text-soft, #6b6b66);
}

/* ── Cantidad + carrito ── */
.ek-prod-info__cart {
  display: flex; gap: 12px; align-items: center;
  padding-top: 4px;
}
.ek-qty {
  display: flex; align-items: stretch;
  border: 1px solid var(--border, #d0d0c8); border-radius: 4px;
  overflow: hidden; height: 44px;
}
.ek-qty__btn {
  width: 36px; background: var(--bg-soft, #fafaf7); border: 0;
  cursor: pointer; font-size: 17px; color: var(--text, #2a2a26);
}
.ek-qty__btn:hover { background: #fff; }
.ek-qty__input {
  width: 60px; text-align: center; border: 0; padding: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 15px; -moz-appearance: textfield;
}
.ek-qty__input::-webkit-outer-spin-button,
.ek-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ek-btn--cart { flex: 0 0 auto; height: 40px; padding: 0 20px; font-size: 14px; }
.ek-btn--cart:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── USPs lista (estilo claro con check dorado) ── */
.ek-prod-info__usps {
  list-style: none; padding: 16px 18px; margin: 0;
  background: var(--bg-soft, #fafaf7);
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; color: var(--text, #2a2a26);
}
.ek-prod-info__usps li {
  position: relative; padding-left: 22px;
  letter-spacing: -0.005em;
}
.ek-prod-info__usps li::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--ek-gold);
  font-weight: 600;
}

/* ── Out of stock CTA ── */
.ek-prod-oos {
  border: 1px solid var(--border-soft, #e5e5e0);
  background: var(--bg-soft, #fafaf7);
  border-radius: 8px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.ek-prod-oos__head { display: flex; align-items: flex-start; gap: 12px; }
.ek-prod-oos__icon { font-size: 22px; flex-shrink: 0; }
.ek-prod-oos__title {
  font-size: 17px; font-weight: 600; margin: 0 0 4px;
  color: var(--text-strong, #1a1a18);
}
.ek-prod-oos__sub { font-size: 14px; color: var(--text-soft, #6b6b66); margin: 0; line-height: 1.5; }
.ek-prod-oos__form { display: flex; gap: 8px; }
.ek-prod-oos__form input[type="email"] {
  flex: 1; padding: 10px 12px; border: 1px solid var(--border, #d0d0c8);
  border-radius: 6px; font-size: 15px; font-family: inherit;
}
.ek-prod-oos__form input[type="email"]:focus {
  outline: 2px solid var(--brand-blue, oklch(0.55 0.12 250)); outline-offset: -1px; border-color: transparent;
}
.ek-prod-oos__feedback { font-size: 14px; padding: 8px 12px; border-radius: 6px; }
.ek-prod-oos__feedback--ok { background: oklch(0.92 0.05 145); color: oklch(0.30 0.15 145); }
.ek-prod-oos__feedback--err { background: oklch(0.92 0.05 25); color: oklch(0.30 0.15 25); }
@media (max-width: 540px) {
  .ek-prod-oos__form { flex-direction: column; }
}

/* ── Ficha técnica PDF ── */
.ek-prod-techsheet {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 12px 16px; margin-top: 4px;
  background: #fff;
  border: 1px solid var(--border, #d0d0c8);
  border-radius: 8px;
  text-decoration: none; color: var(--text, #2a2a26);
  transition: border-color .15s, box-shadow .15s;
}
.ek-prod-techsheet:hover {
  border-color: var(--text-strong, #1a1a18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ek-prod-techsheet__icon { font-size: 22px; }
.ek-prod-techsheet__txt { display: flex; flex-direction: column; gap: 2px; }
.ek-prod-techsheet__txt strong { font-size: 15px; color: var(--text-strong, #1a1a18); font-weight: 500; }
.ek-prod-techsheet__txt small {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; letter-spacing: 0.1em; color: var(--text-soft, #6b6b66);
}
.ek-prod-techsheet__arrow {
  font-size: 19px; color: var(--text-soft, #6b6b66);
  transition: transform .15s;
}
.ek-prod-techsheet:hover .ek-prod-techsheet__arrow { transform: translateY(2px); color: var(--text-strong, #1a1a18); }

/* ── Asesoramiento FAB (widget flotante esquina inferior derecha) ── */
.ek-advisor-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: 320px; max-width: calc(100vw - 32px);
  background: oklch(0.16 0.015 260);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--ek-gold);
  border-radius: 12px;
  padding: 16px 18px 14px;
  box-shadow: 0 12px 36px -8px rgba(0,0,0,0.45),
              0 4px 12px -4px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; gap: 12px;
  animation: ek-advisor-in .35s cubic-bezier(0.2, 0.7, 0.2, 1.0) both;
}
@keyframes ek-advisor-in {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.ek-advisor-fab.is-leaving { transform: translateY(20px); opacity: 0; transition: transform .25s, opacity .25s; }
.ek-advisor-fab__close {
  position: absolute; top: 8px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  font-size: 19px; line-height: 1;
  color: rgba(255,255,255,0.5);
  transition: color .15s, background .15s;
}
.ek-advisor-fab__close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.ek-advisor-fab__body {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start;
}
.ek-advisor-fab__icon {
  font-size: 24px; line-height: 1; padding-top: 2px;
}
.ek-advisor-fab__txt {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.45;
}
.ek-advisor-fab__txt strong {
  color: #fff; font-weight: 500; letter-spacing: -0.01em;
  font-size: 14px;
}
.ek-advisor-fab__cta {
  display: block; text-align: center;
  background: transparent; color: var(--ek-gold);
  border: 1px solid var(--ek-gold);
  border-radius: 100px;
  padding: 9px 14px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; letter-spacing: 0.08em;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.ek-advisor-fab__cta:hover {
  background: var(--ek-gold); color: oklch(0.16 0.015 260);
}
@media (max-width: 480px) {
  .ek-advisor-fab { right: 12px; bottom: 12px; width: calc(100vw - 24px); padding: 14px 14px 12px; }
}

/* ── Descripción colapsable ── */
.ek-prod-desc--collapsible:not(.is-expanded) .ek-prod-desc__inner {
  max-height: 280px; overflow: hidden;
}
.ek-prod-desc--collapsible:not(.is-expanded) .ek-prod-desc__fade {
  position: absolute; left: 0; right: 0; bottom: 36px; height: 90px;
  background: linear-gradient(to bottom, transparent, var(--bg, #fff));
  pointer-events: none;
}
.ek-prod-desc { position: relative; }
.ek-prod-desc__toggle {
  display: inline-block; margin-top: 12px;
  background: transparent; border: 1px solid var(--border, #d0d0c8);
  border-radius: 100px; padding: 8px 18px; cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; letter-spacing: 0.08em; color: var(--text, #2a2a26);
  transition: border-color .15s, color .15s;
}
.ek-prod-desc__toggle:hover { border-color: var(--text-strong, #1a1a18); color: var(--text-strong, #1a1a18); }

/* ── Tabs ── */
.ek-prod-tabs {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--border-soft, #e5e5e0);
}
.ek-prod-tabs__head {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border-soft, #e5e5e0);
  margin-bottom: 28px; flex-wrap: wrap;
}
.ek-prod-tabs__tab {
  padding: 12px 20px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft, #6b6b66);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.ek-prod-tabs__tab:hover { color: var(--text-strong, #1a1a18); }
.ek-prod-tabs__tab.is-active {
  color: var(--text-strong, #1a1a18);
  border-bottom-color: var(--ek-gold);
}
.ek-prod-tabs__body {
  display: none; line-height: 1.7; color: var(--text, #2a2a26); font-size: 15px;
  max-width: 880px;
}
.ek-prod-tabs__body.is-active { display: block; }
.ek-prod-tabs__body p { margin: 0 0 12px; }
.ek-prod-tabs__body img { max-width: 100%; height: auto; }

.ek-spec-table {
  width: 100%; max-width: 720px; border-collapse: collapse; font-size: 14px;
}
.ek-spec-table th, .ek-spec-table td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-soft, #e5e5e0);
  vertical-align: top;
}
.ek-spec-table th {
  width: 40%; font-weight: 500; color: var(--text-soft, #6b6b66);
  background: var(--bg-soft, #fafaf7);
}
.ek-spec-table td {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-strong, #1a1a18);
}

.ek-shipping-info h3 { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
.ek-shipping-info h3:first-child { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════
   Checkout (single-page con 3 secciones)
   ════════════════════════════════════════════════════════════════════ */
.ek-checkout { padding: 32px 0 80px; }
.ek-checkout__title { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; margin: 8px 0 20px; }
.ek-checkout__errors {
  background: #fee; border: 1px solid #f7c;
  border-left: 3px solid #e84; border-radius: 6px;
  padding: 14px 18px; margin-bottom: 20px;
  color: #8a2230; font-size: 14px;
}
.ek-checkout__errors ul { margin: 8px 0 0; padding-left: 20px; }
.ek-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 32px;
  align-items: start;
}
.ek-checkout__main { display: flex; flex-direction: column; gap: 20px; }

.ek-checkout-step {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 10px;
  overflow: hidden;
}
.ek-checkout-step__head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
  background: oklch(0.16 0.015 260);
}
.ek-checkout-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ek-gold); color: oklch(0.16 0.015 260);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 600;
}
.ek-checkout-step__title {
  font-size: 17px; font-weight: 500; margin: 0;
  color: #fff; letter-spacing: -0.01em;
}
.ek-checkout-step__body { padding: 22px; }

.ek-checkout__sectitle {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 500; letter-spacing: 0.15em;
  color: var(--text-soft, #6b6b66); text-transform: uppercase;
  margin: 0 0 12px;
}

.ek-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ek-field { display: flex; flex-direction: column; gap: 4px; }
.ek-field--span-2 { grid-column: 1 / -1; }
.ek-field > span {
  font-size: 13px; font-weight: 500; color: var(--text, #2a2a26);
}
.ek-field > span small { font-weight: 400; color: var(--text-soft, #6b6b66); }
.ek-field input, .ek-field textarea {
  padding: 10px 12px;
  border: 1px solid var(--border, #d0d0c8);
  border-radius: 6px;
  font-size: 15px; font-family: inherit;
  background: #fff;
}
.ek-field input:focus, .ek-field textarea:focus {
  outline: 2px solid oklch(0.55 0.12 250); outline-offset: -1px;
  border-color: transparent;
}
.ek-field input:disabled { background: var(--bg-soft, #fafaf7); color: var(--text-soft, #6b6b66); }

.ek-shipping-options { display: flex; flex-direction: column; gap: 8px; }
.ek-shipping-options__placeholder {
  padding: 16px; background: var(--bg-soft, #fafaf7);
  border-radius: 6px; font-size: 14px; color: var(--text-soft, #6b6b66);
  text-align: center;
}
.ek-shipping-options__placeholder--err { color: #c33; }
.ek-shipping-opt, .ek-payment-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #d0d0c8);
  border-radius: 8px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ek-shipping-opt:hover, .ek-payment-opt:hover { border-color: var(--text-strong, #1a1a18); }
.ek-shipping-opt:has(input:checked), .ek-payment-opt:has(input:checked) {
  border-color: var(--ek-gold);
  background: color-mix(in oklch, var(--ek-gold) 6%, transparent);
}
.ek-shipping-opt input, .ek-payment-opt input { margin: 0; flex-shrink: 0; }
.ek-shipping-opt__body, .ek-payment-opt__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ek-shipping-opt__body strong, .ek-payment-opt__body strong { font-size: 15px; }
.ek-shipping-opt__body span, .ek-payment-opt__body span { font-size: 13px; color: var(--text-soft, #6b6b66); }
.ek-shipping-opt__price {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 500; font-size: 15px;
}
.ek-payment-options { display: flex; flex-direction: column; gap: 8px; }

.ek-checkout__terms {
  display: flex; gap: 10px; margin-top: 18px;
  font-size: 14px; color: var(--text, #2a2a26); line-height: 1.5;
  cursor: pointer;
}
.ek-checkout__terms input { margin-top: 3px; flex-shrink: 0; }
.ek-checkout__terms + .ek-checkout__terms { margin-top: 10px; }
/* Enlaces legales: visibles como enlace (la regla global a{text-decoration:none}
   los dejaba indistinguibles del texto). Subrayados + hover de marca, sin azul. */
.ek-checkout__terms a {
  color: var(--text-strong, #1a1a18);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ek-checkout__terms a:hover { color: var(--ek-gold, #e09a2e); text-decoration: underline; }

/* Resumen lateral sticky */
.ek-checkout__summary {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 10px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 80px;
}
.ek-checkout-summary__items {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px;
  max-height: 220px; overflow-y: auto;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-checkout-summary__items li {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; align-items: start;
}
.ek-checkout-summary__qty {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-soft, #6b6b66); font-size: 13px;
}
.ek-checkout-summary__name { line-height: 1.35; }
.ek-checkout-summary__price {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; white-space: nowrap;
}

.ek-checkout-summary__row {
  display: flex; justify-content: space-between;
  font-size: 14px; color: var(--text, #2a2a26);
}
.ek-checkout-summary__row > span:last-child {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-checkout-summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--border-soft, #e5e5e0);
  font-size: 19px; font-weight: 600;
}
.ek-checkout-summary__total > span:last-child {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--ek-gold);
}
.ek-checkout-summary__hint {
  font-size: 13px; color: var(--text-soft, #6b6b66);
  text-align: center; margin: 8px 0 0; line-height: 1.4;
}
.ek-checkout-summary__usps {
  list-style: none; padding: 12px 0 0; margin: 12px 0 0;
  border-top: 1px solid var(--border-soft, #e5e5e0);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--text-soft, #6b6b66);
}
/* ── Botón Confirmar pedido ── */
.ek-checkout__submit {
  margin-top: 16px;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 22px;
  font-family: var(--ek-font, 'Inter Tight', system-ui, sans-serif);
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
  color: #1a1208;
  background: linear-gradient(135deg, #f5b94e 0%, #e09a2e 55%, #c97f1d 100%);
  border: 0; border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(0,0,0,0.10) inset,
    0 8px 18px -6px rgba(224,154,46,0.55),
    0 2px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
  position: relative;
}
.ek-checkout__submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset,
    0 14px 24px -8px rgba(224,154,46,0.65),
    0 4px 6px rgba(0,0,0,0.08);
}
.ek-checkout__submit:active { transform: translateY(0); filter: brightness(0.98); }
.ek-checkout__submit:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--ek-blue) 60%, transparent);
  outline-offset: 3px;
}
.ek-checkout__submit:disabled {
  opacity: 0.55; cursor: not-allowed;
  background: linear-gradient(135deg, #c9c9c2 0%, #a8a8a0 100%);
  box-shadow: none; transform: none; filter: none;
  color: #5a5a55;
}
.ek-checkout__submit-arrow {
  font-size: 18px; transition: transform .2s ease;
}
.ek-checkout__submit:hover:not(:disabled) .ek-checkout__submit-arrow { transform: translateX(3px); }

/* ── Welcome banner cliente logueado ── */
.ek-checkout__hello {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: color-mix(in oklch, var(--ek-blue) 7%, transparent);
  border: 1px solid color-mix(in oklch, var(--ek-blue) 22%, transparent);
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 14px; line-height: 1.5; color: var(--text, #2a2a26);
}
.ek-checkout__hello-ico { font-size: 19px; line-height: 1.2; flex-shrink: 0; }
.ek-checkout__hello strong { display: block; margin-bottom: 2px; color: var(--text-strong, #1a1a18); }

/* ── Checkout direcciones: facturación / envío (numeración, toggle, tarjetas) ── */
.ek-sec { display: flex; align-items: center; gap: 10px; }
.ek-sec__num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ek-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; flex: 0 0 auto;
}
.ek-ship-toggle {
  display: flex; align-items: center; gap: 10px;
  background: var(--ek-blue-soft); border: 1px solid var(--ek-blue);
  border-radius: var(--ek-r); padding: 12px 16px; margin: 18px 0 6px;
  cursor: pointer; font-weight: 500; color: var(--ek-blue-ink, #28368c);
}
.ek-ship-toggle input { width: 18px; height: 18px; accent-color: var(--ek-blue); flex: 0 0 auto; }
.ek-ship-block {
  margin-top: 16px; padding: 20px;
  border: 2px solid var(--ek-blue); border-radius: var(--ek-r-lg, 14px);
  background: color-mix(in oklch, var(--ek-blue) 4%, var(--ek-surface));
}
.ek-ship-block[hidden] { display: none; }
.ek-ship-block .ek-sec { margin-bottom: 4px; }
.ek-addr-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin: 12px 0 18px;
}
.ek-addr-card {
  text-align: left; background: var(--ek-surface); border: 1.5px solid var(--ek-line);
  border-radius: var(--ek-r-lg, 14px); padding: 16px 18px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; min-height: 96px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ek-addr-card strong { font-size: 16px; font-weight: 600; color: var(--ek-ink); }
.ek-addr-card span { font-size: 14px; color: var(--ek-ink-3, #6b6b66); }
.ek-addr-card:hover { border-color: var(--ek-blue); }
.ek-addr-card.is-active {
  border: 2px solid var(--ek-blue); background: var(--ek-blue-soft);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ek-blue) 18%, transparent);
}
.ek-addr-card--new {
  align-items: center; justify-content: center; text-align: center;
  border-style: dashed; color: var(--ek-blue-deep, #28368c); font-weight: 500;
  min-height: 96px; font-size: 15px;
}
.ek-addr-picker__chip--new { border-style: dashed; }

/* ── Address picker chips ── */
.ek-addr-picker {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 16px;
}
.ek-addr-picker__label {
  font-family: var(--ek-font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-soft, #6b6b66);
}
.ek-addr-picker__chip {
  font-family: inherit; font-size: 14px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border, #d0d0c8); background: #fff;
  color: var(--text, #2a2a26); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ek-addr-picker__chip:hover { border-color: var(--ek-blue); color: var(--ek-blue); }
.ek-addr-picker__chip.is-active {
  background: var(--ek-blue); border-color: var(--ek-blue); color: #fff;
}

/* ── Botones bajo el form de dirección ── */
.ek-addr-actions {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--border-soft, #e5e5e0);
}
.ek-addr-actions__check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer;
  color: var(--text, #2a2a26);
}
.ek-addr-actions__check input { accent-color: var(--ek-blue); }
.ek-btn--ghost {
  background: transparent; color: var(--ek-blue);
  border: 1px solid color-mix(in oklch, var(--ek-blue) 35%, transparent);
  padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.ek-btn--ghost:hover {
  background: color-mix(in oklch, var(--ek-blue) 10%, transparent);
  border-color: var(--ek-blue);
}

@media (max-width: 900px) {
  .ek-checkout__grid { grid-template-columns: 1fr; }
  .ek-checkout__summary { position: static; }
  .ek-form-grid { grid-template-columns: 1fr; }
}

/* ════════ Cupones (carrito + checkout) ════════ */
.ek-coupon-toggle {
  margin: 8px 0;
  padding: 8px 0;
  border-top: 1px dashed var(--border-soft, #e5e5e0);
  border-bottom: 1px dashed var(--border-soft, #e5e5e0);
}
.ek-coupon-toggle summary {
  cursor: pointer; font-size: 13px; color: var(--text-soft, #6b6b66);
  list-style: none; user-select: none;
  padding: 4px 0;
}
.ek-coupon-toggle summary::-webkit-details-marker { display: none; }
.ek-coupon-toggle summary::before { content: '🏷️ '; }
.ek-coupon-form {
  display: flex; gap: 6px; margin-top: 8px;
}
.ek-coupon-input {
  flex: 1; padding: 8px 10px;
  border: 1px solid var(--border, #d0d0c8);
  border-radius: 6px; font-size: 14px;
  text-transform: uppercase; font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-coupon-applied {
  padding: 10px 12px; margin: 8px 0;
  background: oklch(0.95 0.05 145); border-left: 3px solid oklch(0.55 0.18 145);
  border-radius: 6px;
}
.ek-coupon-applied__head {
  display: flex; justify-content: space-between; align-items: center;
}
.ek-coupon-applied__code {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600; color: oklch(0.30 0.18 145);
}
.ek-coupon-applied__remove {
  background: none; border: 0; cursor: pointer; font-size: 19px;
  color: oklch(0.40 0.15 145); padding: 0 4px;
}
.ek-coupon-applied small { font-size: 13px; color: var(--text-soft, #6b6b66); }
.ek-coupon-msg { padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 8px; }
.ek-coupon-msg--ok { background: oklch(0.95 0.05 145); color: oklch(0.30 0.15 145); }
.ek-coupon-msg--err { background: #fee; color: #8a2230; border-left: 3px solid #e84; }

/* ════════ Direcciones (mi-cuenta) ════════ */
.ek-addr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.ek-addr-card {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 8px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.ek-addr-card__alias {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ek-gold);
}
.ek-addr-card__body { font-size: 14px; line-height: 1.55; margin: 0; flex: 1; }
.ek-addr-card__actions {
  display: flex; justify-content: space-between; gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-soft, #e5e5e0);
}
.ek-addr-card__delete {
  background: none; border: 0; cursor: pointer;
  font-size: 13px; color: #c33; padding: 0;
}
.ek-addr-card__delete:hover { text-decoration: underline; }

/* ════════ Hero home ════════ */
.ek-hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
}
/* Los hijos de un grid no se encogen por debajo de su contenido más ancho
   (min-width:auto). La tarjeta del producto lleva el nombre en una línea
   (nowrap) y eso fijaba la columna a ~420px: en móviles de 360-390px se salía
   80px y el overflow-x:hidden del body lo recortaba. Chrome en Android recorta
   de forma estricta, por eso allí se veía cortado y en iPhone no. */
.ek-hero__grid > * { min-width: 0; }
section.ek-hero h1 {
  font-size: 64px; line-height: 1.02; letter-spacing: -1.8px;
  margin: 0; font-weight: 400; color: var(--ek-dark-ink);
}
@media (max-width: 980px) {
  /* minmax(0,1fr) en vez de 1fr: permite que la columna se encoja al ancho real
     de la pantalla en lugar de crecer hasta el contenido más ancho. */
  .ek-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
  .ek-hero { padding: 36px 0 32px !important; }
  section.ek-hero h1 {
    font-size: 46px !important; line-height: 1.05 !important;
    letter-spacing: -0.8px !important;
    overflow-wrap: normal; word-break: normal;
    hyphens: none !important;
  }
  /* El span dorado en su propia línea para evitar overflow */
  section.ek-hero h1 span { display: inline; }
  .ek-hero p { font-size: 16px !important; margin-top: 18px !important; }
  .ek-hero .ek-btn--lg { padding: 12px 18px !important; font-size: 14px !important; }
  /* Banda informativa (typer) en móvil */
  .ek-hero #ek-typer { font-size: 14px !important; line-height: 1.5 !important; }
  /* Tarjeta destacada del hero en móvil */
  .ek-hero a[class*="reveal-delay-2"] {
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  /* Tags y chips row: que respiren */
  .ek-hero [style*="display:flex"][style*="gap:28px"] { gap: 14px !important; row-gap: 8px !important; }
}
/* Móvil pequeño ≤400px: títulos un pelín más compactos */
@media (max-width: 400px) {
  section.ek-hero h1 { font-size: 38px !important; line-height: 1.1 !important; }
}
/* Evitar overflow horizontal global en móvil */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  * { max-width: 100%; }
  .ek-hero, .ek-hero__grid, section.ek-hero h1, .ek-hero p { max-width: 100%; }
}

/* ════════ Pack collage (home → sección Packs) ════════ */
.ek-pack-collage {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #fff;
  display: grid; gap: 1px;
  border-bottom: 1px solid var(--ek-dark-line);
}
.ek-pack-collage--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ek-pack-collage--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.ek-pack-collage--3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ek-pack-collage--3 .ek-pack-collage__cell:first-child { grid-row: span 2; }
.ek-pack-collage--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ek-pack-collage__cell {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 10px; overflow: hidden;
  min-width: 0; min-height: 0;
}
.ek-pack-collage__cell img {
  max-width: 90%; max-height: 90%;
  width: auto; height: auto;
  object-fit: contain;
}
.ek-pack-collage__more {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0, 0, 0, 0.7); color: #fff;
  padding: 4px 10px; border-radius: 100px;
  font-family: var(--ek-font-mono);
  font-size: 12px; letter-spacing: 0.08em;
  z-index: 2;
}
.ek-pack-collage__save {
  position: absolute; top: 12px; right: 12px;
  background: var(--ek-gold); color: var(--ek-ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  padding: 4px 8px; border-radius: 3px;
  z-index: 2;
}

/* En móvil seguimos mostrando el collage en su grid (NO colapsar a 1col) */
@media (max-width: 640px) {
  .ek-pack-collage__cell { padding: 6px; }
  .ek-pack-collage__cell img { max-width: 85%; max-height: 85%; }
  .ek-pack-collage__more { font-size: 12px; padding: 3px 8px; bottom: 6px; right: 6px; }
  .ek-pack-collage__save  { font-size: 12px; padding: 3px 6px; top: 8px; right: 8px; }
}

/* ════════ Wishlist button (ficha producto) ════════ */
.ek-wish-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; margin-bottom: 4px;
  background: transparent; border: 1px solid var(--border, #d0d0c8);
  border-radius: 100px; cursor: pointer;
  font-size: 14px; color: var(--text, #2a2a26);
  font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.ek-wish-btn:hover { border-color: #c33; color: #c33; }
.ek-wish-btn.is-on { border-color: #c33; color: #c33; background: oklch(0.96 0.04 25); }
.ek-wish-btn svg { transition: fill .15s; }

/* ════════ Fila de acciones de la ficha (deseos · oferta · presupuesto) ════════ */
.ek-prod-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
.ek-prod-actions .ek-wish-btn { flex: 1 1 0; min-width: 200px; justify-content: center; margin-bottom: 0; padding: 11px 14px; }
.ek-prod-actions .ek-quote-req { flex: 1 1 0; min-width: 200px; display: flex; }
.ek-prod-actions .ek-quote-req .ek-quote-btn { width: 100%; }
.ek-prod-actions > .ek-quote-btn { flex: 1 1 0; min-width: 200px; }
.ek-prod-actions .ek-quote-btn { justify-content: center; margin-bottom: 0; padding: 11px 14px; }

/* ════════ Solicitud de oferta: botón en ficha ════════ */
.ek-quote-req { margin: 0; }
.ek-quote-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; margin-bottom: 4px;
  background: transparent; border: 1px solid var(--ek-blue, #2f6df6);
  border-radius: 100px; cursor: pointer;
  font-size: 14px; color: var(--ek-blue, #2f6df6); font-weight: 600;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.ek-quote-btn:hover { background: var(--ek-blue, #2f6df6); color: #fff; }
.ek-quote-btn svg { flex-shrink: 0; }
.ek-quote-btn:disabled { opacity: .6; cursor: default; }
.ek-quote-feedback { font-size: 14px; margin-top: 6px; }
.ek-quote-feedback--ok { color: var(--ek-ok, #0a8a3f); }
.ek-quote-feedback--ok a { color: var(--ek-blue, #2f6df6); font-weight: 600; }
.ek-quote-feedback--err { color: #c33; }

/* ════════ Página de solicitud de oferta ════════ */
.ek-qr-intro { max-width: 720px; color: var(--ek-ink-2, #5a5a54); font-size: 16px; line-height: 1.6; margin: -6px 0 22px; }
.ek-cart-line__variant { font-size: 13px; color: var(--ek-blue, #2f6df6); margin-top: 2px; }
.ek-qr-loggedin { font-size: 14px; line-height: 1.6; color: var(--ek-ink, #2a2a26); background: var(--ek-blue-soft, #eef3ff); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.ek-qr-fields { display: grid; gap: 10px; margin-bottom: 12px; }
.ek-qr-field { display: block; }
.ek-qr-field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ek-ink-2, #5a5a54); margin-bottom: 4px; }
.ek-qr-field input, .ek-qr-field textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid var(--ek-line, #d0d0c8); border-radius: 8px;
  font-family: inherit; font-size: 15px; color: var(--ek-ink, #2a2a26); background: #fff;
}
.ek-qr-field input:focus, .ek-qr-field textarea:focus { outline: none; border-color: var(--ek-blue, #2f6df6); }
.ek-qr-field textarea { resize: vertical; }
.ek-qr-err { display: block; color: #c33; font-size: 13px; font-style: normal; margin-top: 3px; }
.ek-qr-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ek-ink-2, #5a5a54); line-height: 1.4; margin-top: 10px; cursor: pointer; }
.ek-qr-privacy input { margin-top: 2px; flex-shrink: 0; }
.ek-qr-note { font-size: 13px; color: var(--ek-ink-2, #5a5a54); line-height: 1.5; margin: 8px 0 14px; }

/* ════════ Solicitud de oferta: gracias ════════ */
.ek-qr-thanks { max-width: 600px; margin: 40px auto; text-align: center; }
.ek-qr-thanks__icon { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--ek-ok, #0a8a3f); color: #fff; font-size: 32px; }
.ek-qr-thanks h1 { font-size: 26px; margin: 0 0 10px; }
.ek-qr-thanks__ref { font-size: 16px; margin: 0 0 16px; }
.ek-qr-thanks p { color: var(--ek-ink-2, #5a5a54); line-height: 1.6; }
.ek-qr-thanks__hint { font-size: 14px; }
.ek-qr-thanks__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ════════ Wishlist card (mi-cuenta/lista-deseos) ════════ */
.ek-wishlist-card { position: relative; }
.ek-wishlist-card__remove { position: absolute; top: 8px; right: 8px; z-index: 2; }
.ek-wishlist-card__remove button {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: 0;
  cursor: pointer; font-size: 17px; line-height: 1;
}
.ek-wishlist-card__remove button:hover { background: #c33; }

/* ════════ Reseñas (ficha producto) ════════ */
.ek-reviews { padding: 64px 0 24px; border-top: 1px solid var(--border-soft, #e5e5e0); }
.ek-reviews__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.ek-reviews__head h2 { font-size: 22px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.ek-reviews__avg { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--text-soft, #6b6b66); }
.ek-reviews__stars { display: inline-flex; font-size: 17px; color: #d0d0c8; }
.ek-reviews__stars .is-on { color: var(--ek-gold); }
.ek-reviews__avg-num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 19px; font-weight: 500; color: var(--text-strong, #1a1a18);
}
.ek-reviews__count { color: var(--text-soft, #6b6b66); }
.ek-reviews__empty { font-size: 14px; color: var(--text-soft, #6b6b66); padding: 18px 0; }

.ek-review-form {
  background: var(--bg-soft, #fafaf7);
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 8px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 28px;
}
.ek-review-form h3 { font-size: 17px; font-weight: 500; margin: 0; }
.ek-review-form input[type="text"], .ek-review-form textarea {
  padding: 10px 12px; border: 1px solid var(--border, #d0d0c8);
  border-radius: 6px; font-size: 15px; font-family: inherit;
}
.ek-review-form__rating button {
  background: transparent; border: 0; cursor: pointer;
  font-size: 28px; color: #d0d0c8; padding: 0 2px;
  transition: color .12s;
}
.ek-review-form__rating button:hover { color: var(--ek-gold); }

.ek-reviews__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.ek-review {
  padding: 18px; border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 8px;
}
.ek-review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.ek-review p { margin: 6px 0; line-height: 1.55; font-size: 15px; }
.ek-review small { color: var(--text-soft, #6b6b66); font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════
   Auth (login / register / forgot / reset)
   ════════════════════════════════════════════════════════════════════ */
.ek-auth { padding: 64px 0 96px; }
.ek-auth__shell {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 0 20px;
}
.ek-auth__card {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 12px;
  padding: 32px;
}
.ek-auth__card--wide { grid-column: 1 / -1; max-width: 640px; margin: 0 auto; }
.ek-auth__title { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 6px; }
.ek-auth__sub { font-size: 15px; color: var(--text-soft, #6b6b66); margin: 0 0 20px; }
.ek-auth__form { display: flex; flex-direction: column; gap: 14px; }
.ek-auth__form .ek-btn { margin-top: 6px; }
.ek-auth__links {
  text-align: center; font-size: 14px;
  color: var(--text-soft, #6b6b66); margin-top: 4px;
}
.ek-auth__links a { color: var(--text-strong, #1a1a18); }
.ek-auth__notice {
  background: oklch(0.92 0.05 145); color: oklch(0.30 0.15 145);
  padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 14px;
}
.ek-auth__error {
  background: #fee; color: #8a2230;
  border-left: 3px solid #e84;
  padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 14px;
}
.ek-auth__aside {
  background: oklch(0.16 0.015 260); color: #fff;
  border-radius: 12px; padding: 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.ek-auth__aside-title { font-size: 19px; font-weight: 500; margin: 0; color: #fff; }
.ek-auth__aside p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.75); margin: 0; }
.ek-auth__aside-cta {
  display: inline-block; align-self: flex-start;
  padding: 11px 22px;
  background: var(--ek-gold); color: oklch(0.16 0.015 260);
  border-radius: 100px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  margin-top: 6px;
}
.ek-auth__aside-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4); }
@media (max-width: 760px) {
  .ek-auth__shell { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   Account (sidebar + dashboard + orders + profile)
   ════════════════════════════════════════════════════════════════════ */
.ek-account { padding: 24px 0 80px; }
.ek-account__grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  margin-top: 16px;
}
.ek-account__sidebar {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 10px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  position: sticky; top: 80px;
  align-self: start;
}
.ek-account__user {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-account__user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: oklch(0.16 0.015 260); color: var(--ek-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}
.ek-account__user > div:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ek-account__user strong { font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-account__user small { font-size: 13px; color: var(--text-soft, #6b6b66); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-account__nav { display: flex; flex-direction: column; gap: 4px; }
.ek-account__nav a {
  padding: 10px 12px; border-radius: 6px;
  color: var(--text, #2a2a26); text-decoration: none;
  font-size: 15px;
  transition: background .12s, color .12s;
}
.ek-account__nav a:hover { background: var(--bg-soft, #fafaf7); color: var(--text-strong, #1a1a18); }
.ek-account__nav a.is-active {
  background: oklch(0.16 0.015 260); color: var(--ek-gold);
}
.ek-account__nav-contact {
  margin-top: 12px; padding: 10px 12px;
  border-radius: 6px; text-decoration: none;
  font-size: 15px;
  background: oklch(0.16 0.015 260); color: var(--ek-gold) !important;
  border-left: 3px solid var(--ek-gold);
  transition: transform .12s, box-shadow .12s;
}
.ek-account__nav-contact:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.2);
}
.ek-account__logout {
  margin-top: 14px; padding: 10px 12px;
  background: transparent; border: 1px solid var(--border, #d0d0c8);
  border-radius: 6px; cursor: pointer;
  font-size: 14px; color: var(--text-soft, #6b6b66);
  width: 100%;
}
.ek-account__logout:hover { color: #c33; border-color: #c33; }

.ek-account__main {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 10px;
  padding: 28px 32px;
}
.ek-account__h1 {
  font-size: 24px; font-weight: 500; letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.ek-account__sub { color: var(--text-soft, #6b6b66); font-size: 14px; margin: 0; }

.ek-account__kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
  margin-bottom: 24px;
}
.ek-account__kpi {
  background: var(--bg-soft, #fafaf7);
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 8px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.ek-account__kpi-num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 22px; font-weight: 500; color: var(--text-strong, #1a1a18);
}
.ek-account__kpi-lbl {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--text-soft, #6b6b66); text-transform: uppercase;
}

.ek-account__section { margin-top: 28px; }
.ek-account__section:first-of-type { margin-top: 0; }
.ek-account__section h2 {
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-account__section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-account__section-head h2 { margin: 0; padding: 0; border: 0; }
.ek-account__section-link {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; letter-spacing: 0.1em;
  color: var(--text-soft, #6b6b66); text-decoration: none;
}
.ek-account__section-link:hover { color: var(--ek-gold); }

.ek-account__empty {
  padding: 40px 20px; text-align: center;
  background: var(--bg-soft, #fafaf7); border-radius: 8px;
}
.ek-account__empty p { color: var(--text-soft, #6b6b66); margin: 0 0 16px; }

.ek-account__table {
  width: 100%; border-collapse: collapse;
  font-size: 14px;
}
.ek-account__table th, .ek-account__table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-account__table th {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-soft, #6b6b66); font-weight: 500;
}
.ek-account__table td.mono, .ek-account__table .mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-account__link {
  color: var(--ek-gold); font-size: 14px; text-decoration: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.ek-state-pill {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  font-size: 13px; font-weight: 500;
  color: #fff; text-transform: uppercase; letter-spacing: 0.06em;
}

.ek-account__detail-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 24px;
}
.ek-account__columns {
  display: grid; grid-template-columns: 2fr 1fr; gap: 24px;
}
.ek-account__detail-aside { display: flex; flex-direction: column; gap: 24px; }
.ek-account__detail-aside .ek-account__section { margin-top: 0; }
.ek-account__detail-aside p { font-size: 14px; line-height: 1.55; margin: 0; color: var(--text, #2a2a26); }
.ek-account__totals {
  width: 100%; border-collapse: collapse; margin-top: 20px;
  margin-left: auto; max-width: 320px;
}
.ek-account__totals td {
  padding: 6px 0; font-size: 14px;
}
.ek-account__totals td:last-child { text-align: right; font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.ek-account__totals-total td {
  padding-top: 10px; border-top: 1px solid var(--border-soft, #e5e5e0);
  font-weight: 600; font-size: 17px; color: var(--ek-gold);
}

.ek-account__form { display: flex; flex-direction: column; gap: 24px; }

@media (max-width: 760px) {
  .ek-account__grid { grid-template-columns: 1fr; }
  .ek-account__sidebar { position: static; }
  .ek-account__columns { grid-template-columns: 1fr; }
  .ek-account__main { padding: 20px; }
}

/* ════════ Página de gracias ════════ */
.ek-thanks { padding: 64px 0 96px; }
.ek-thanks__inner { max-width: 620px; text-align: center; }
.ek-thanks__icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: oklch(0.92 0.08 145); color: oklch(0.40 0.18 145);
  font-size: 36px; line-height: 72px; text-align: center;
  margin: 0 auto 18px;
}
.ek-thanks__title { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 14px; }
.ek-thanks__sub { font-size: 16px; color: var(--text-soft, #6b6b66); line-height: 1.55; margin: 0 0 28px; }
.ek-thanks__card {
  background: oklch(0.16 0.015 260); color: #fff;
  border-radius: 12px; padding: 22px 26px;
  text-align: left;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 22px;
}
.ek-thanks__card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ek-thanks__lbl {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; letter-spacing: 0.18em; color: rgba(255,255,255,0.55);
}
.ek-thanks__val { font-size: 15px; }
.ek-thanks__val.mono { font-family: var(--font-mono, 'JetBrains Mono', monospace); color: var(--ek-gold); }
.ek-thanks__card-row--total {
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.ek-thanks__card-row--total .ek-thanks__val { font-size: 22px; }
.ek-thanks__bank {
  background: #fff8e8; border-left: 3px solid var(--ek-gold);
  border-radius: 6px; padding: 16px 20px;
  text-align: left; margin-bottom: 22px;
}
.ek-thanks__bank p { margin: 6px 0; font-size: 15px; line-height: 1.5; }
.ek-thanks__bank small { display: block; margin-top: 8px; color: var(--text-soft, #6b6b66); font-size: 13px; }
.ek-thanks__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Productos relacionados (cross-sell + up-sell) ── */
/* ── Accesorios seleccionables ("configure su caja") ── */
.ek-prod-acc { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ek-line, #e5e5e0); container-type: inline-size; }
.ek-prod-acc__title { font-size: 21px; font-weight: 600; margin: 0 0 4px; color: var(--ek-ink); }
.ek-prod-acc__sub { font-size: 14px; color: var(--ek-ink-3, #6b6b66); margin: 0 0 18px; }
.ek-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ek-acc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--ek-line); border-radius: var(--ek-r); background: #fff; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.ek-acc-card:hover { border-color: var(--ek-blue); box-shadow: 0 8px 24px -16px color-mix(in oklch, var(--ek-blue) 50%, transparent); }
.ek-acc-card__media { height: 120px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 8px; }
.ek-acc-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ek-acc-card__noimg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--ek-font-mono); font-size: 12px; font-weight: 700; color: var(--ek-ink-4, #aaa); text-align: center; line-height: 1.2;
}
.ek-acc-card__body { padding: 10px 12px 6px; flex: 1; }
.ek-acc-card__name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 500; color: var(--ek-ink); line-height: 1.35;
}
.ek-acc-card__name:hover { color: var(--ek-blue); }
.ek-acc-card__ref { font-family: var(--ek-font-mono); font-size: 13px; color: var(--ek-ink-3, #888); margin-top: 2px; }
.ek-acc-card__price { margin-top: 6px; }
.ek-acc-card__price-before { font-size: 13px; color: var(--ek-ink-3, #888); text-decoration: line-through; margin-right: 4px; }
.ek-acc-card__price-now { font-size: 16px; font-weight: 600; color: var(--ek-ink); }
.ek-acc-card__tax { font-size: 13px; color: var(--ek-ink-3, #888); }
.ek-acc-card__actions { display: flex; gap: 6px; align-items: center; padding: 0 12px 12px; }
.ek-acc-card__qty { width: 52px; padding: 6px 4px; text-align: center; border: 1px solid var(--ek-line); border-radius: 6px; font-size: 14px; }
.ek-acc-card__add { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 8px; font-size: 14px; }
.ek-acc-card__oos { font-size: 13px; font-weight: 600; color: #c0392b; padding: 7px 0; }
.ek-acc-card--extra, .ek-acc-card--wide { display: none; }
.ek-acc-grid.is-expanded .ek-acc-card--extra, .ek-acc-grid.is-expanded .ek-acc-card--wide { display: flex; }
/* La 5.ª se enseña de entrada solo si caben 5 por fila (5 × 220 + 4 × 14 = 1156 px); si no, iría sola en otra fila.
   Con justo 5 accesorios, en ancho ya se ven todos y el botón «Ver todos» sobra. */
@container (min-width: 1156px) {
  .ek-acc-card--wide { display: flex; }
  .ek-acc-toggle--narrow { display: none; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1220px) {
    .ek-acc-card--wide { display: flex; }
    .ek-acc-toggle--narrow { display: none; }
  }
}
.ek-acc-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 9px 18px; background: #fff; border: 1px solid var(--ek-blue);
  border-radius: 100px; color: var(--ek-blue-deep, #28368c); font-weight: 500; font-size: 14px;
  cursor: pointer; transition: background .15s;
}
.ek-acc-toggle:hover { background: var(--ek-blue-soft, #eef3ff); }
.ek-acc-toggle__chevron { transition: transform .2s; }
.ek-acc-toggle.is-expanded .ek-acc-toggle__chevron { transform: rotate(180deg); }

.ek-prod-related { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border-soft, #e5e5e0); }

/* Variante full-bleed con fondo oscuro */
.ek-prod-related--full {
  margin-top: 0;
  padding: 72px 0 80px;
  border-top: 0;
  background: oklch(0.16 0.015 260);
  position: relative;
}
.ek-prod-related--full .ek-prod-related__title { color: #fff; }
.ek-prod-related--full .ek-prod-related__sub { color: rgba(255,255,255,0.65); }
.ek-prod-related--full .ek-prod-related__eyebrow { color: var(--ek-gold); }
.ek-prod-related__head { margin-bottom: 24px; }
.ek-prod-related__eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; letter-spacing: 0.18em;
  color: var(--ek-gold); margin-bottom: 8px;
}
.ek-prod-related__title {
  font-size: 22px; font-weight: 500; margin: 0 0 6px;
  letter-spacing: -0.01em;
  color: var(--text-strong, #1a1a18);
}
.ek-prod-related__sub {
  font-size: 14px; color: var(--text-soft, #6b6b66); margin: 0;
  max-width: 640px; line-height: 1.5;
}

/* Up-sell: panel oscuro tipo "flash offers", con barra dorada al borde
   y título eyebrow para diferenciarse de la cross-sell light. */
.ek-prod-related--up {
  margin-top: 48px;
  background: oklch(0.16 0.015 260);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.ek-prod-related--up::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 4px; height: 100%; background: var(--ek-gold);
}
.ek-prod-related--up .ek-prod-related__title { color: #fff; }
.ek-prod-related--up .ek-prod-related__sub { color: rgba(255,255,255,0.65); }
.ek-prod-related--up .ek-prod-related__head::before {
  content: 'NIVEL SUPERIOR';
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; letter-spacing: 0.18em; color: var(--ek-gold);
}
/* Las cards del up-sell heredan estilo claro pero con borde tenue */
.ek-prod-related--up .ek-prodcard {
  background: var(--ek-dark-bg, #fff);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ek-prod-page__grid { grid-template-columns: 1fr; gap: 24px; }
  .ek-prod-info__title { font-size: 22px; }
  .ek-prod-info__price-now { font-size: 28px; }
  .ek-prod-tabs__head { overflow-x: auto; flex-wrap: nowrap; }
}

/* ════════════════════════════════════════════════════════════════════
   BUSCADOR (form en nav y página /buscar)
   ════════════════════════════════════════════════════════════════════ */

/* Input del nav: hereda el look de .ek-search */
.ek-search input[type="search"] {
  flex: 1; background: transparent; border: 0; outline: none;
  font-family: inherit; font-size: 14px; color: inherit;
  padding: 0; min-width: 0;
}
.ek-search input[type="search"]::placeholder { color: var(--ek-dark-ink-2, #6b6b66); opacity: 0.7; }
.ek-search input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Form de la página /buscar (versión grande) */
.ek-search-form {
  display: flex; gap: 12px; max-width: 640px; margin: 16px 0 0;
}
.ek-search-form input[type="search"] {
  flex: 1; padding: 12px 16px;
  background: #fff; border: 1px solid var(--border, #d0d0c8);
  border-radius: 4px; font-size: 15px; outline: none;
  font-family: inherit;
  transition: border-color .15s;
}
.ek-search-form input[type="search"]:focus {
  border-color: var(--brand-blue, oklch(0.55 0.12 250));
}
.ek-search-form input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Resultado vacío usa .ek-cat-empty con un toque para el code */
.ek-cat-empty code {
  background: #fff; border: 1px solid var(--border-soft, #e5e5e0);
  padding: 2px 6px; border-radius: 3px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════════
   CARRITO
   ════════════════════════════════════════════════════════════════════ */

.ek-cart-page { padding: 32px 0 64px; }
.ek-cart-page__title {
  font-size: 28px; font-weight: 500; letter-spacing: -0.01em;
  margin: 8px 0 24px; color: var(--text-strong, #1a1a18);
}

.ek-cart-empty {
  text-align: center; padding: 96px 24px;
  background: var(--bg-soft, #fafaf7); border-radius: 8px;
}
.ek-cart-empty h2 { font-size: 22px; margin: 0 0 12px; font-weight: 500; }
.ek-cart-empty p  { color: var(--text-soft, #6b6b66); margin: 0 0 24px; }
.ek-cart-empty a  { color: var(--brand-blue, oklch(0.55 0.12 250)); }

.ek-cart-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px; align-items: start;
}

/* ── Líneas ── */
.ek-cart-lines { display: flex; flex-direction: column; gap: 0; }
.ek-cart-lines__head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 110px 130px 100px 32px;
  gap: 16px; padding: 0 0 12px;
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-soft, #6b6b66);
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-cart-lines__head > span:nth-child(2),
.ek-cart-lines__head > span:nth-child(4) { text-align: right; }
.ek-cart-lines__head > span:nth-child(3) { text-align: center; }

.ek-cart-line {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 110px 130px 100px 32px;
  gap: 16px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--border-soft, #e5e5e0);
}

.ek-cart-line__product {
  display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: start;
}
.ek-cart-line__media {
  position: relative;
  width: 80px; height: 80px;
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ek-cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ek-cart-line__noimg {
  display: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 600; color: var(--border, #c0c0b8);
  text-align: center; line-height: 1.2;
}
.ek-cart-line__media.is-noimg .ek-cart-line__noimg { display: block; }

.ek-cart-line__brand {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-soft, #6b6b66);
}
.ek-cart-line__name {
  display: block; font-size: 15px; font-weight: 500; line-height: 1.3;
  color: var(--text-strong, #1a1a18); text-decoration: none; margin: 2px 0;
}
.ek-cart-line__name:hover { color: var(--brand-blue, oklch(0.55 0.12 250)); }
.ek-cart-line__ref {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; color: var(--text-soft, #6b6b66);
}
.ek-cart-line__warn {
  font-size: 13px; color: oklch(0.55 0.18 25); margin-top: 4px; font-weight: 500;
}

.ek-cart-line__price { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.ek-cart-line__price-before {
  text-decoration: line-through; font-size: 13px; color: var(--text-soft, #6b6b66);
}
.ek-cart-line__price-now { font-size: 16px; font-weight: 600; }
.ek-cart-line__price-tax { font-size: 12px; color: var(--text-soft, #6b6b66); }

.ek-cart-line__qty { display: flex; justify-content: center; }

.ek-cart-line__total {
  text-align: right; font-size: 17px; font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.ek-cart-line__remove {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border-soft, #e5e5e0);
  cursor: pointer; font-size: 19px; color: var(--text-soft, #6b6b66);
  line-height: 1;
}
.ek-cart-line__remove:hover { background: var(--bg-soft, #fafaf7); color: oklch(0.55 0.18 25); border-color: oklch(0.55 0.18 25); }

.ek-cart-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px;
}
.ek-cart-clear {
  background: transparent; border: 0; cursor: pointer; padding: 0;
  font-size: 14px; color: var(--text-soft, #6b6b66); text-decoration: underline;
}
.ek-cart-clear:hover { color: oklch(0.55 0.18 25); }

/* ── Resumen lateral ── */
.ek-cart-summary {
  position: sticky; top: 24px;
  background: var(--bg-soft, #fafaf7);
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 8px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.ek-cart-summary h3 {
  font-size: 15px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; margin: 0 0 4px;
}
.ek-cart-summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; color: var(--text, #2a2a26);
}
.ek-cart-summary__soft { color: var(--text-soft, #6b6b66); font-style: italic; font-size: 13px; }
.ek-cart-summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; margin-top: 4px;
  border-top: 2px solid var(--border, #d0d0c8);
  font-size: 19px; font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-btn--block { display: block; width: 100%; padding: 14px 0; font-size: 15px; }

/* ── Botón Finalizar compra (carrito) ── */
.ek-cart__checkout {
  margin-top: 14px;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 22px;
  font-family: var(--ek-font, 'Inter Tight', system-ui, sans-serif);
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
  color: #1a1208; text-decoration: none;
  background: linear-gradient(135deg, #f5b94e 0%, #e09a2e 55%, #c97f1d 100%);
  border: 0; border-radius: 10px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(0,0,0,0.10) inset,
    0 8px 18px -6px rgba(224,154,46,0.55),
    0 2px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.ek-cart__checkout:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset,
    0 14px 24px -8px rgba(224,154,46,0.65),
    0 4px 6px rgba(0,0,0,0.08);
}
.ek-cart__checkout:active { transform: translateY(0); filter: brightness(0.98); }
.ek-cart__checkout:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--ek-blue) 60%, transparent);
  outline-offset: 3px;
}
.ek-cart__checkout-arrow { font-size: 18px; transition: transform .2s ease; }
.ek-cart__checkout:hover .ek-cart__checkout-arrow { transform: translateX(3px); }

.ek-cart-summary__usps {
  list-style: none; padding: 12px 0 0; margin: 8px 0 0;
  border-top: 1px solid var(--border-soft, #e5e5e0);
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--text-soft, #6b6b66);
}

/* ── Contador en el icono del nav ── */
.ek-nav__cart-wrap { position: relative; display: inline-flex; }
.ek-nav__cart-count {
  position: absolute; top: -6px; right: -8px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--brand-blue, oklch(0.55 0.12 250));
  color: #fff; border-radius: 9px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ── Responsive ── */
@media (max-width: 880px) {
  .ek-cart-grid { grid-template-columns: 1fr; }
  .ek-cart-summary { position: static; }
  .ek-cart-lines__head { display: none; }
  .ek-cart-line {
    grid-template-columns: 1fr;
    gap: 12px; padding: 16px; background: #fff;
    border: 1px solid var(--border-soft, #e5e5e0); border-radius: 6px;
    margin-bottom: 12px;
  }
  .ek-cart-line__price { text-align: left; flex-direction: row; gap: 8px; align-items: baseline; }
  .ek-cart-line__qty { justify-content: flex-start; }
  .ek-cart-line__total { text-align: left; }
  .ek-cart-line__remove { position: absolute; top: 8px; right: 8px; }
  .ek-cart-line { position: relative; }
}

/* ── Feedback al añadir al carrito (en la ficha) ── */
.ek-cart-feedback {
  margin-top: -8px; padding: 10px 14px; border-radius: 4px;
  font-size: 14px; font-weight: 500;
}
.ek-cart-feedback--ok {
  background: oklch(0.95 0.05 145); color: oklch(0.35 0.15 145);
  border: 1px solid oklch(0.85 0.1 145);
}
.ek-cart-feedback--ok a { color: inherit; font-weight: 600; }
.ek-cart-feedback--err {
  background: oklch(0.95 0.05 25); color: oklch(0.35 0.15 25);
  border: 1px solid oklch(0.85 0.1 25);
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE GLOBAL (mobile-first overrides)
   ════════════════════════════════════════════════════════════════════ */

/* Tablet ≤980px */
@media (max-width: 980px) {
  /* Layout container */
  .ek-shell, .ek-container { padding-left: 20px; padding-right: 20px; }
  section { padding-left: 0 !important; padding-right: 0 !important; }
  section > .ek-shell { padding-left: 20px; padding-right: 20px; }

  /* Grids inline de la home: forzar reflow */
  .ek-shell [style*="grid-template-columns:1.2fr 1fr"],
  .ek-shell [style*="grid-template-columns:1.4fr 1fr"],
  .ek-shell [style*="grid-template-columns:1.2fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 28px !important;
  }
  .ek-shell [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ek-shell [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ek-shell [style*="grid-template-columns:repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .ek-shell [style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
  }

  /* Tarjeta de pack/kit: que el item de producto pueda envolver */
  .ek-cat-card { min-height: auto !important; }

  /* Categorías home: 2 columnas */
  .ek-cat-card [style*="grid-template-columns:1fr 140px"] {
    grid-template-columns: 1fr 100px !important;
  }
}

/* Móvil ≤640px */
@media (max-width: 640px) {
  /* Headings de la home más cortos */
  .ek-shell h1 { font-size: 28px !important; line-height: 1.1 !important; }
  .ek-section-head__title,
  .ek-shell [style*="font-size:32px"] { font-size: 22px !important; line-height: 1.15 !important; letter-spacing: -0.4px !important; }
  .ek-shell [style*="font-size:42px"] { font-size: 28px !important; line-height: 1.1 !important; }
  .ek-shell [style*="font-size:34px"] { font-size: 22px !important; }
  .ek-shell [style*="font-size:48px"] { font-size: 36px !important; }
  .ek-shell [style*="font-size:36px"] { font-size: 26px !important; }

  /* Padding de section reducido */
  .ek-shell, .ek-container { padding-left: 16px; padding-right: 16px; }
  section { padding-top: 36px !important; padding-bottom: 36px !important; }

  /* Todos los grids de 2/3/4 columnas → 1 columna en móvil */
  .ek-shell [style*="grid-template-columns:repeat(3, 1fr)"],
  .ek-shell [style*="grid-template-columns:repeat(4, 1fr)"],
  .ek-shell [style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .ek-shell [style*="grid-template-columns:repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ek-shell [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero: la tarjeta destacada también stackea (max-width auto) */
  .ek-shell [style*="max-width:460px"] { max-width: 100% !important; margin-left: 0 !important; }

  /* Padding y margins genéricos */
  .ek-shell [style*="padding:48px"] { padding: 24px !important; }
  .ek-shell [style*="padding:40px"] { padding: 22px !important; }
  .ek-shell [style*="padding:32px"] { padding: 20px !important; }
  .ek-shell [style*="gap:48px"] { gap: 24px !important; }
  .ek-shell [style*="gap:40px"] { gap: 20px !important; }
  .ek-shell [style*="gap:32px"] { gap: 18px !important; }

  /* Botones en móvil → ancho completo en CTAs hero */
  .ek-shell [style*="display:flex"][style*="gap:14px"] .ek-btn,
  .ek-shell [style*="display:flex"][style*="gap:12px"] .ek-btn { flex: 1 1 auto; min-width: 140px; }

  /* Ek-section-head se pone en columna */
  .ek-section-head { flex-direction: column; align-items: flex-start; gap: 8px !important; }
}

/* Móvil estrecho ≤400px */
@media (max-width: 400px) {
  .ek-shell, .ek-container { padding-left: 12px; padding-right: 12px; }
  .ek-prod-grid { grid-template-columns: 1fr !important; }
  /* Marcas: 2 columnas */
  .ek-shell [style*="grid-template-columns:repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   NAV MÓVIL (hamburguesa + drawer)
   ════════════════════════════════════════════════════════════════════ */

.ek-nav__burger {
  display: none;
  background: transparent; border: 0; padding: 8px; cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.ek-nav__burger span {
  width: 22px; height: 2px; background: currentColor;
  transition: transform .2s, opacity .2s;
}
.ek-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ek-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.ek-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1240px) {
  .ek-nav__burger { display: flex; }
  .ek-nav__links { display: none; }  /* hide desktop megamenu on tablet/mobile */
}

/* Drawer móvil */
.ek-mobile-drawer {
  position: fixed; inset: 0; z-index: 1000;
  display: none; visibility: hidden;
  pointer-events: none;
}
.ek-mobile-drawer.is-open {
  display: block; visibility: visible;
  pointer-events: auto;
}
.ek-mobile-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5); opacity: 0;
  transition: opacity .25s;
}
.ek-mobile-drawer.is-open .ek-mobile-drawer__backdrop { opacity: 1; }
.ek-mobile-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 88%; max-width: 360px;
  background: #fff;
  transform: translateX(100%);
  transition: transform .28s ease-out;
  display: flex; flex-direction: column;
  padding: 16px 0 0;
  box-shadow: -8px 0 32px rgba(0,0,0,0.1);
  overflow: hidden;
}
.ek-mobile-drawer.is-open .ek-mobile-drawer__panel { transform: translateX(0); }

.ek-mobile-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 20px 16px; border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-mobile-drawer__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1; padding: 6px 10px;
  color: var(--text, #2a2a26);
}
.ek-mobile-drawer__title {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-soft, #6b6b66);
}
/* Niveles del drawer móvil — paneles deslizables tipo iOS */
.ek-mobile-drawer__levels {
  position: relative; flex: 1;
  overflow: hidden;
}
.ek-mobile-drawer__level {
  position: absolute; inset: 0;
  list-style: none; padding: 0; margin: 0;
  background: #fff;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
  -webkit-overflow-scrolling: touch;
}
.ek-mobile-drawer__level.is-active { transform: translateX(0); }
.ek-mobile-drawer__level li {
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-mobile-drawer__row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; box-sizing: border-box;
  padding: 14px 20px; text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-strong, #1a1a18); font-size: 16px; font-weight: 500;
  font-family: inherit; text-align: left;
}
.ek-mobile-drawer__row:hover { background: var(--bg-soft, #fafaf7); }
.ek-mobile-drawer__row .arrow {
  color: var(--text-soft, #6b6b66); font-size: 19px; line-height: 1;
}

/* Cabecera de panel hijo: botón "Volver" + título */
.ek-mobile-drawer__back-row {
  border-bottom: 1px solid var(--border-soft, #e5e5e0) !important;
  background: var(--bg-soft, #fafaf7);
}
.ek-mobile-drawer__back {
  width: 100%; box-sizing: border-box;
  padding: 12px 20px; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--ek-gold);
}
.ek-mobile-drawer__panel-title {
  padding: 18px 20px 10px;
  font-size: 22px; font-weight: 500; letter-spacing: -0.4px;
  border-bottom: 0 !important;
}
.ek-mobile-drawer__see-all {
  display: block; padding: 10px 20px;
  color: var(--text-soft, #6b6b66) !important; font-size: 14px;
  font-style: italic;
  background: var(--bg-soft, #fafaf7);
}

.ek-mobile-drawer__footer {
  padding: 16px 20px; margin-top: 8px;
  border-top: 1px solid var(--border-soft, #e5e5e0);
  display: flex; flex-direction: column; gap: 10px;
}
.ek-mobile-drawer__footer a {
  font-size: 14px; color: var(--text-soft, #6b6b66); text-decoration: none;
}
.ek-mobile-drawer__footer a:hover { color: var(--brand-blue, oklch(0.55 0.12 250)); }

body.ek-drawer-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════
   AJUSTES NAV EN MÓVIL (afinados)
   ════════════════════════════════════════════════════════════════════ */

/* Se aplica hasta 1240px, no solo en móvil: con menos ancho las 9 familias del menú
   no caben en la cabecera junto al buscador y los iconos. */
@media (max-width: 1240px) {
  .ek-nav__inner { gap: 12px; flex-wrap: nowrap; padding: 12px 16px; }
  .ek-nav__search { order: 99; flex-basis: 100%; }
  /* En móvil: el texto del "Acceder" se oculta y queda solo el icono */
  .ek-nav__access {
    padding: 6px 8px !important;
    background: transparent !important;
    color: var(--ek-dark-ink-2) !important;
    border-radius: 50% !important;
  }
  .ek-nav__access:hover { background: var(--ek-dark-line) !important; color: var(--ek-dark-ink) !important; }
  .ek-nav__access-label { display: none; }
  .ek-nav__access-icon { display: inline-block; }
  .ek-nav__actions { gap: 10px; align-items: center; }
}
/* Desktop: el icono de usuario se oculta y queda solo el texto/nombre */
@media (min-width: 1241px) {
  .ek-nav__access-icon { display: none; }
}

/* Cabecera de escritorio (desde 1241px). Con el menú a 14px, las 9 familias, el
   buscador y los iconos no cabían: en portátiles de 1280 a 1536px el carrito y
   "Acceder" quedaban fuera de pantalla. Se ajustan márgenes, el buscador puede
   estrecharse y la cabecera llega a 1440px de ancho. */
@media (min-width: 1241px) {
  .ek-nav__inner { gap: 20px; padding: 10px 24px; max-width: 1440px; }
  .ek-mega-trigger { padding: 10px 8px; }
  .ek-nav__search { min-width: 0; }
  .ek-nav__actions { gap: 12px; }
}
@media (min-width: 1241px) and (max-width: 1399px) {
  .ek-nav__inner { gap: 16px; }
  .ek-logo__img { max-width: 150px; }
  /* Con «outlet» son 10 entradas: algo menos de aire entre ellas para que el buscador no se quede
     en nada (a 1280 px pasa de 121 a 179 px de ancho). */
  .ek-nav__links { gap: 2px; }
  .ek-mega-trigger { padding: 10px 6px; }
}

@media (max-width: 640px) {
  /* Logo más pequeño en móvil */
  .ek-logo svg { width: 24px; height: 24px; }
  .ek-logo__img { height: 30px; max-width: 140px; }
  /* Buscador en móvil va al drawer; quitarlo del header */
  .ek-nav__search { display: none; }
  /* Pero accesible desde el drawer (icono lupa allí) */
}

/* Asegurar que la línea decorativa azul-oro no se pase de ancho */
.ek-bar { max-width: 100vw; }

/* ════════════════════════════════════════════════════════════════════
   PÁGINA DE CONTACTO
   ════════════════════════════════════════════════════════════════════ */

.ek-contact-hero {
  background: linear-gradient(180deg, #ffffff 0%, oklch(0.98 0.012 250) 100%);
  padding: 64px 0 56px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
  position: relative;
  overflow: hidden;
}
.ek-contact-hero__inner {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 32px;
  align-items: center;
}
.ek-contact-hero__eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brand-blue, oklch(0.55 0.12 250));
  margin-bottom: 14px;
}
.ek-contact-hero__title {
  font-size: 56px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1; margin: 0 0 16px;
  color: var(--text-strong, #1a1a18);
}
.ek-contact-hero__lead {
  font-size: 18px; line-height: 1.55; color: var(--text, #2a2a26);
  max-width: 560px; margin: 0;
}

/* Decoración: pulsos concéntricos */
.ek-contact-hero__deco {
  position: relative; width: 200px; height: 200px;
}
.ek-pulse {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 60px;
  border: 2px solid var(--brand-blue, oklch(0.55 0.12 250));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ek-pulse-ring 2.4s ease-out infinite;
  opacity: 0;
}
.ek-pulse--2 { animation-delay: 0.8s; border-color: oklch(0.55 0.12 250 / 0.6); }
.ek-pulse--3 { animation-delay: 1.6s; border-color: oklch(0.55 0.12 250 / 0.35); }
.ek-contact-hero__deco::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px;
  background: var(--brand-blue, oklch(0.55 0.12 250));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8px oklch(0.55 0.12 250 / 0.15);
}
@keyframes ek-pulse-ring {
  0%   { width: 16px; height: 16px; opacity: 1; }
  100% { width: 200px; height: 200px; opacity: 0; }
}

/* ── 4 cards rápidas ── */
.ek-contact-cards {
  padding: 56px 0;
  background: #fff;
}
.ek-contact-cards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ek-c-card {
  display: block; padding: 22px;
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative; overflow: hidden;
}
.ek-c-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand-blue, oklch(0.55 0.12 250));
  transform: scaleY(0); transform-origin: top;
  transition: transform .25s ease;
}
.ek-c-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-blue, oklch(0.55 0.12 250));
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.15);
}
.ek-c-card:hover::before { transform: scaleY(1); }
.ek-c-card--wa::before { background: oklch(0.55 0.16 145); }
.ek-c-card--wa:hover  { border-color: oklch(0.55 0.16 145); }

.ek-c-card__icon {
  width: 44px; height: 44px;
  background: oklch(0.97 0.02 250);
  color: var(--brand-blue, oklch(0.55 0.12 250));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.ek-c-card--wa .ek-c-card__icon {
  background: oklch(0.97 0.04 145);
  color: oklch(0.45 0.18 145);
}
.ek-c-card__label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--text-soft, #6b6b66);
  margin-bottom: 6px;
}
.ek-c-card__value {
  font-size: 17px; font-weight: 500; color: var(--text-strong, #1a1a18);
  line-height: 1.3; margin-bottom: 4px;
}
.ek-c-card__sub {
  font-size: 13px; color: var(--text-soft, #6b6b66); line-height: 1.4;
}

/* ── Body: form + info ── */
.ek-contact-body {
  padding: 56px 0;
  background: oklch(0.98 0.008 250);
}
.ek-contact-body__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.ek-contact-h2 {
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--text-strong, #1a1a18);
}
.ek-contact-h2--center { text-align: center; margin-bottom: 22px; }
.ek-contact-lead {
  color: var(--text-soft, #6b6b66); font-size: 15px;
  margin: 0 0 22px;
}

.ek-contact-form-wrap {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 10px;
  padding: 32px;
}
.ek-contact-form { display: flex; flex-direction: column; gap: 16px; }
.ek-cf-row { display: grid; gap: 16px; }
.ek-cf-row--two { grid-template-columns: 1fr 1fr; }

/* Floating labels */
.ek-cf-field {
  position: relative; display: block;
}
.ek-cf-field input,
.ek-cf-field textarea,
.ek-cf-field select {
  width: 100%; padding: 18px 14px 8px;
  border: 1px solid var(--border, #d0d0c8);
  border-radius: 6px;
  font-size: 15px; color: var(--text-strong, #1a1a18);
  background: #fff; outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ek-cf-field textarea { resize: vertical; min-height: 110px; padding-top: 22px; line-height: 1.5; }
.ek-cf-field select   { padding-top: 22px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.ek-cf-field input:focus,
.ek-cf-field textarea:focus,
.ek-cf-field select:focus {
  border-color: var(--brand-blue, oklch(0.55 0.12 250));
  box-shadow: 0 0 0 3px oklch(0.55 0.12 250 / 0.12);
}
.ek-cf-label {
  position: absolute; top: 14px; left: 14px;
  font-size: 14px; color: var(--text-soft, #6b6b66);
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
  background: transparent; padding: 0 4px;
}
.ek-cf-field input:not(:placeholder-shown) + .ek-cf-label,
.ek-cf-field input:focus + .ek-cf-label,
.ek-cf-field textarea:not(:placeholder-shown) + .ek-cf-label,
.ek-cf-field textarea:focus + .ek-cf-label,
.ek-cf-field--select .ek-cf-label--static {
  top: 4px; font-size: 12px;
  color: var(--brand-blue, oklch(0.55 0.12 250));
  font-weight: 600; letter-spacing: 0.04em;
}
.ek-cf-field.has-error input,
.ek-cf-field.has-error textarea,
.ek-cf-field.has-error select { border-color: oklch(0.55 0.18 25); }
.ek-cf-error {
  display: block; font-size: 13px; color: oklch(0.55 0.18 25);
  margin-top: 4px; padding: 0 4px;
}

.ek-cf-privacy {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text, #2a2a26); cursor: pointer;
  margin-top: 4px;
}
.ek-cf-privacy input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  accent-color: var(--brand-blue, oklch(0.55 0.12 250));
}
.ek-cf-privacy a { color: var(--brand-blue, oklch(0.55 0.12 250)); font-weight: 500; }
.ek-cf-privacy.has-error span { color: oklch(0.55 0.18 25); }

.ek-btn--cf {
  align-self: flex-start;
  padding: 14px 26px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px;
  position: relative; overflow: hidden;
}
.ek-btn--cf .ek-btn-arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.ek-btn--cf:hover .ek-btn-arrow { transform: translateX(4px); }

.ek-contact-flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px; border-radius: 6px;
  margin-bottom: 18px; font-size: 15px;
}
.ek-contact-flash.is-ok {
  background: oklch(0.96 0.04 145); color: oklch(0.32 0.16 145);
  border: 1px solid oklch(0.85 0.08 145);
}
.ek-contact-flash.is-err {
  background: oklch(0.96 0.04 25); color: oklch(0.32 0.16 25);
  border: 1px solid oklch(0.85 0.08 25);
}
.ek-contact-flash > span:first-child { font-size: 17px; line-height: 1; }

/* Aside info */
.ek-contact-info { display: flex; flex-direction: column; gap: 16px; }
.ek-contact-info__panel {
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 10px;
  padding: 22px 24px;
}
.ek-contact-info__panel h3 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-soft, #6b6b66);
  margin: 0 0 14px;
}
.ek-hours {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.ek-hours li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft, #e5e5e0);
  font-size: 14px;
}
.ek-hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.ek-hours li > span:first-child { color: var(--text-strong, #1a1a18); font-weight: 500; }
.ek-hours li > span.mono { color: var(--text-soft, #6b6b66); font-size: 13px; }

.ek-meta-list { margin: 0; }
.ek-meta-list dt {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-soft, #6b6b66);
  margin-top: 12px;
}
.ek-meta-list dt:first-child { margin-top: 0; }
.ek-meta-list dd {
  margin: 4px 0 0; font-size: 14px;
  color: var(--text-strong, #1a1a18); line-height: 1.5;
}

/* ── Mapa ── */
.ek-contact-map {
  padding: 0 0 64px;
  background: oklch(0.98 0.008 250);
}
.ek-map-wrap {
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 10px; overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.08);
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .ek-contact-hero__inner { grid-template-columns: 1fr; gap: 24px; }
  .ek-contact-hero__deco { display: none; }
  .ek-contact-cards__grid { grid-template-columns: repeat(2, 1fr); }
  .ek-contact-body__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ek-contact-hero { padding: 36px 0 28px; }
  .ek-contact-hero__title { font-size: 36px !important; }
  .ek-contact-hero__lead { font-size: 16px; }
  .ek-contact-cards { padding: 28px 0; }
  .ek-contact-cards__grid { grid-template-columns: 1fr; }
  .ek-contact-body { padding: 28px 0; }
  .ek-contact-form-wrap { padding: 22px; }
  .ek-cf-row--two { grid-template-columns: 1fr; }
  .ek-contact-h2 { font-size: 22px; }
  .ek-map-wrap iframe { height: 320px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PÁGINA SOBRE NOSOTROS
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ek-about-hero {
  background: linear-gradient(180deg, #ffffff 0%, oklch(0.98 0.012 250) 100%);
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
}
.ek-about-hero__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: center;
}
.ek-about-hero__eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brand-blue, oklch(0.55 0.12 250));
  margin-bottom: 16px;
}
.ek-about-hero__title {
  font-size: 48px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 18px;
  color: var(--text-strong, #1a1a18);
}
.ek-about-hero__hl {
  color: var(--ek-gold);
  font-style: italic;
}
.ek-about-hero__lead {
  font-size: 17px; line-height: 1.6;
  color: var(--text, #2a2a26); margin: 0 0 28px;
  max-width: 540px;
}
.ek-about-hero__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.ek-about-hero__deco {
  color: var(--ek-blue, oklch(0.55 0.12 250));
  display: flex; align-items: center; justify-content: center;
}
.ek-about-hero__deco svg {
  width: 100%; max-width: 280px; height: auto;
  animation: ek-about-spin 60s linear infinite;
}
.ek-about-hero__deco svg rect[fill="currentColor"] { fill: var(--ek-gold); }
@keyframes ek-about-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Stats (FONDO NEGRO con dorado) ── */
.ek-about-stats {
  background: var(--ek-dark-bg);
  color: var(--ek-dark-ink);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.ek-about-stats::before {
  /* Línea decorativa dorada arriba */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--ek-gold) 50%, transparent 100%);
}
.ek-about-stats::after {
  /* Halo radial sutil */
  content: ''; position: absolute; top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, oklch(0.78 0.14 78 / 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.ek-about-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}
.ek-about-stat {
  text-align: center;
  padding: 0 16px;
  border-right: 1px solid var(--ek-dark-line);
}
.ek-about-stat:last-child { border-right: 0; }
.ek-about-stat__num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 56px; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--ek-gold);
  margin-bottom: 12px;
}
.ek-about-stat__num .suffix {
  font-size: 26px;
  color: var(--ek-blue);
  margin-left: 2px;
}
.ek-about-stat__label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ek-dark-ink);
  opacity: 0.75;
  font-weight: 500;
}

/* ── Story ── */
.ek-about-story {
  padding: 80px 0;
  background: oklch(0.98 0.008 250);
}
.ek-about-story__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.ek-about-story__intro h2 {
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 12px 0 0; color: var(--text-strong, #1a1a18);
}
.ek-about-story__body {
  font-size: 17px; line-height: 1.7;
  color: var(--text, #2a2a26);
}
.ek-about-story__body p { margin: 0 0 18px; }
.ek-about-story__body p:last-child { margin-bottom: 0; }
.ek-about-story__body strong {
  color: var(--text-strong, #1a1a18);
  font-weight: 600;
}
.ek-about-story__body em {
  color: oklch(0.55 0.16 78);
  font-style: italic;
  font-weight: 500;
}

/* ── Valores ── */
.ek-about-values {
  padding: 80px 0;
  background: #fff;
  border-top: 1px solid var(--border-soft, #e5e5e0);
}
.ek-about-values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ek-about-value {
  background: oklch(0.98 0.008 250);
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 12px;
  padding: 28px 28px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ek-about-value::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--ek-blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
/* Cards 2 y 4: barra superior dorada para alternar */
.ek-about-value:nth-child(even)::before {
  background: var(--ek-gold);
}
.ek-about-value:hover {
  transform: translateY(-3px);
  border-color: var(--ek-blue);
  box-shadow: 0 14px 36px -18px rgba(0,0,0,0.15);
}
.ek-about-value:nth-child(even):hover { border-color: var(--ek-gold); }
.ek-about-value:hover::before { transform: scaleX(1); }
.ek-about-value:nth-child(even) .ek-about-value__num { color: var(--ek-blue-deep); }

.ek-about-value__num {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ek-gold);
  margin-bottom: 14px;
  line-height: 1;
}
.ek-about-value h3 {
  font-size: 19px; font-weight: 500;
  margin: 0 0 8px;
  color: var(--text-strong, #1a1a18);
}
.ek-about-value p {
  font-size: 15px; line-height: 1.55;
  color: var(--text, #2a2a26);
  margin: 0;
}

/* ── Servicios (FONDO NEGRO con números dorados) ── */
.ek-about-services {
  padding: 80px 0;
  background: var(--ek-dark-bg);
  color: var(--ek-dark-ink);
  position: relative;
  overflow: hidden;
}
.ek-about-services::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--ek-blue) 30%, var(--ek-gold) 70%, transparent 100%);
}
.ek-about-services__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.ek-about-services__lead {
  position: sticky; top: 24px;
}
.ek-about-services__lead .eyebrow {
  color: var(--ek-gold) !important;
}
.ek-about-services__lead h2 {
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.15;
  margin: 12px 0 14px;
  color: var(--ek-dark-ink);
}
.ek-about-services__lead p {
  font-size: 15px; color: var(--ek-dark-ink); opacity: 0.7;
  line-height: 1.55; margin: 0;
}
.ek-about-services__list {
  list-style: none; padding: 0; margin: 0;
}
.ek-about-service-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--ek-dark-line);
  transition: padding-left .25s ease;
}
.ek-about-service-row:first-child { border-top: 0; padding-top: 0; }
.ek-about-service-row:hover { padding-left: 8px; }
.ek-about-service-row__n {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px; color: var(--ek-gold);
  letter-spacing: 0.1em; font-weight: 600;
  padding-top: 4px;
}
.ek-about-service-row__t {
  font-size: 17px; font-weight: 500;
  color: var(--ek-dark-ink);
  margin-bottom: 4px;
}
.ek-about-service-row__d {
  font-size: 15px; color: var(--ek-dark-ink); opacity: 0.7;
  line-height: 1.5;
}

/* ── CTA final (NEGRO con acento dorado) ── */
.ek-about-cta {
  padding: 64px 0;
  background: #fff;
  border-top: 1px solid var(--border-soft, #e5e5e0);
}
.ek-about-cta__inner {
  background: linear-gradient(135deg,
    var(--ek-dark-surface) 0%,
    var(--ek-dark-bg) 100%);
  color: #fff;
  border-radius: 14px;
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ek-dark-line);
}
.ek-about-cta__inner::before {
  /* Línea acento dorada en el lateral */
  content: ''; position: absolute;
  top: 0; left: 0; bottom: 0; width: 4px;
  background: var(--ek-gold);
}
.ek-about-cta__inner::after {
  content: ''; position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, oklch(0.78 0.14 78 / 0.2) 0%, transparent 60%);
  pointer-events: none;
}
.ek-about-cta__inner .eyebrow,
.ek-about-cta__inner .eyebrow--blue {
  color: var(--ek-gold) !important;
}
.ek-about-cta__inner h2 {
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.2;
  margin: 6px 0 8px; color: #fff;
}
.ek-about-cta__inner p {
  font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,0.7); margin: 0;
}
.ek-about-cta__buttons {
  display: flex; gap: 10px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.ek-about-cta .ek-btn--primary {
  background: #fff; color: var(--brand-blue, oklch(0.55 0.12 250));
}
.ek-about-cta .ek-btn--primary:hover {
  background: oklch(0.97 0.02 250); color: oklch(0.4 0.16 250);
}
.ek-about-cta .ek-btn--ghost {
  border-color: rgba(255,255,255,0.4); color: #fff;
}
.ek-about-cta .ek-btn--ghost:hover {
  border-color: #fff; background: rgba(255,255,255,0.08);
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .ek-about-hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .ek-about-hero__deco svg { max-width: 200px; }
  .ek-about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
  .ek-about-stat { padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--border-soft, #e5e5e0); }
  .ek-about-stat:nth-child(3),
  .ek-about-stat:nth-child(4) { border-bottom: 0; }
  .ek-about-stat:nth-child(odd) { border-right: 1px solid var(--border-soft, #e5e5e0); }
  .ek-about-story__grid,
  .ek-about-services__grid { grid-template-columns: 1fr; gap: 28px; }
  .ek-about-services__lead { position: static; }
  .ek-about-values__grid { grid-template-columns: 1fr; }
  .ek-about-cta__inner { grid-template-columns: 1fr; gap: 24px; padding: 32px; }
}
@media (max-width: 640px) {
  .ek-about-hero { padding: 36px 0 36px; }
  .ek-about-hero__title { font-size: 30px !important; }
  .ek-about-stats { padding: 28px 0; }
  .ek-about-stat__num { font-size: 36px; }
  .ek-about-stat__num .suffix { font-size: 19px; }
  .ek-about-story,
  .ek-about-values,
  .ek-about-services { padding: 40px 0; }
  .ek-about-story__intro h2,
  .ek-about-services__lead h2,
  .ek-about-cta__inner h2 { font-size: 22px !important; }
  .ek-about-value { padding: 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   DARK MODE (solo en home, vía body.ek-dark-mode)
   Recupera los tokens dark del handoff original. Los componentes ya
   usan var(--ek-dark-*) en sus estilos inline; aquí los redefinimos a
   sus valores oscuros reales para que la home se vea con el feel
   profesional del prototipo.
   ════════════════════════════════════════════════════════════════════ */

body.ek-dark-mode {
  --ek-dark-bg:      oklch(0.18 0.015 260);  /* fondo principal */
  --ek-dark-surface: oklch(0.22 0.018 260);  /* cards / paneles */
  --ek-dark-line:    oklch(0.3  0.018 260);  /* bordes / divisores */
  --ek-dark-ink:     oklch(0.96 0.005 260);  /* texto principal */
  --ek-dark-ink-2:   oklch(0.7  0.012 260);  /* texto secundario */

  background: var(--ek-dark-bg);
  color: var(--ek-dark-ink);
}

/* La nav/footer son globales y heredan tonos light. Los aislo del dark mode
   metiendo background propio para que se vean siempre claros como en otras
   páginas (consistencia entre páginas). */
body.ek-dark-mode .ek-nav,
body.ek-dark-mode .ek-footer {
  background: #fff;
  color: var(--ek-ink);
}
body.ek-dark-mode .ek-nav a,
body.ek-dark-mode .ek-footer a { color: var(--ek-ink); }
body.ek-dark-mode .ek-nav a:hover,
body.ek-dark-mode .ek-footer a:hover { color: var(--ek-blue); }

/* La barra decorativa superior (línea azul-oro fina) sigue como estaba */
body.ek-dark-mode .ek-bar { background: var(--ek-dark-bg); }

/* Algunos sitios tenían background:#fff hardcoded para destacar imágenes
   sobre fondo oscuro (galería del hero, tile de categoría, ofertas, blog).
   En dark mode esos placeholders sí siguen blancos (para que la imagen
   destaque). No tocamos esos #fff inline. */

/* Eyebrow azul: sobre fondo oscuro queda más legible un poquito más claro */
body.ek-dark-mode .eyebrow--blue { color: var(--ek-blue) !important; }

/* ════════════════════════════════════════════════════════════════════
   PÁGINAS LEGALES
   ════════════════════════════════════════════════════════════════════ */

.ek-legal h2 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25;
  margin: 36px 0 12px;
  color: var(--ek-dark-ink);
}
.ek-legal h2:first-child { margin-top: 0; }
.ek-legal h3 {
  font-size: 17px; font-weight: 600;
  margin: 22px 0 8px;
  color: var(--ek-dark-ink);
}
.ek-legal p {
  font-size: 16px; line-height: 1.7;
  color: var(--ek-dark-ink-2);
  margin: 0 0 14px;
}
.ek-legal ul, .ek-legal ol {
  font-size: 16px; line-height: 1.7;
  color: var(--ek-dark-ink-2);
  padding-left: 22px;
  margin: 0 0 14px;
}
.ek-legal li { margin-bottom: 6px; }
.ek-legal li::marker { color: var(--ek-blue-deep); }
.ek-legal strong {
  color: var(--ek-dark-ink);
  font-weight: 600;
}
.ek-legal a {
  color: var(--ek-blue-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--ek-blue-deep) 40%, transparent);
  text-underline-offset: 2px;
}
.ek-legal a:hover {
  color: var(--ek-gold);
  text-decoration-color: var(--ek-gold);
}

/* ════════════════════════════════════════════════════════════════════
   BLOG (contenido del post)
   ════════════════════════════════════════════════════════════════════ */

.ek-blog-content { font-size: 17px; }
.ek-blog-body { font-size: 17px; line-height: 1.75; color: var(--ek-dark-ink-2); }
.ek-blog-body h2, .ek-blog-body h3, .ek-blog-body h4 {
  color: var(--ek-dark-ink); font-weight: 600;
  margin-top: 32px; margin-bottom: 12px; line-height: 1.3;
}
.ek-blog-body h2 { font-size: 22px; }
.ek-blog-body h3 { font-size: 19px; }
.ek-blog-body p { margin: 0 0 16px; }
.ek-blog-body img { max-width: 100%; height: auto; border-radius: var(--ek-r); margin: 18px 0; }
.ek-blog-body ul, .ek-blog-body ol { padding-left: 24px; margin: 0 0 16px; }
.ek-blog-body li { margin-bottom: 6px; }
.ek-blog-body strong { color: var(--ek-dark-ink); font-weight: 600; }
.ek-blog-body a { color: var(--ek-blue-deep); }
.ek-blog-body a:hover { color: var(--ek-gold); }
.ek-blog-body blockquote {
  border-left: 3px solid var(--ek-gold);
  padding: 6px 18px;
  margin: 22px 0;
  font-style: italic;
  color: var(--ek-dark-ink);
  background: var(--ek-bg);
}
.ek-blog-body code {
  font-family: var(--ek-font-mono);
  background: var(--ek-bg); border: 1px solid var(--ek-line);
  padding: 2px 6px; border-radius: 3px; font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER · iconos de redes sociales
   ════════════════════════════════════════════════════════════════════ */

.ek-footer__social {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  gap: 10px;
  margin-top: 16px;
}
.ek-footer__social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ek-line);
  border-radius: 50%;
  color: var(--ek-dark-ink-2);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.ek-footer__social a:hover {
  color: var(--ek-gold);
  border-color: var(--ek-gold);
  background: color-mix(in oklch, var(--ek-gold) 8%, transparent);
  transform: translateY(-2px);
}
.ek-footer__social a svg { width: 16px; height: 16px; display: block; }

/* Responsive legal/blog */
@media (max-width: 640px) {
  .ek-legal h2 { font-size: 19px !important; }
  .ek-blog-body { font-size: 16px; }
  .ek-blog-body h2 { font-size: 20px; }
  .ek-blog-body h3 { font-size: 17px; }
}

/* ════════════════════════════════════════════════════════════════════
   Mini-cart popup (al añadir al carrito)
   ════════════════════════════════════════════════════════════════════ */
.ek-mini-cart {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
}
.ek-mini-cart[hidden] { display: none; }
.ek-mini-cart__backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 25, 40, 0.42);
  opacity: 0; transition: opacity .2s ease;
  pointer-events: auto;
}
.ek-mini-cart.is-open .ek-mini-cart__backdrop { opacity: 1; }
.ek-mini-cart__panel {
  position: absolute; top: 80px; right: 24px;
  width: min(380px, calc(100vw - 32px));
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border-soft, #e5e5e0);
  box-shadow: 0 24px 60px -20px rgba(20,30,60,0.32), 0 6px 16px rgba(0,0,0,0.08);
  padding: 16px;
  opacity: 0; transform: translateY(-8px) scale(0.98);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: auto;
}
.ek-mini-cart.is-open .ek-mini-cart__panel { opacity: 1; transform: translateY(0) scale(1); }
.ek-mini-cart__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border-soft, #e5e5e0);
  font-size: 15px;
}
.ek-mini-cart__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in oklch, oklch(0.7 0.18 145) 18%, white);
  color: oklch(0.45 0.18 145);
}
.ek-mini-cart__head strong { flex: 1; color: var(--text-strong, #1a1a18); }
.ek-mini-cart__close {
  background: transparent; border: 0;
  font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer;
  color: var(--text-soft, #6b6b66);
}
.ek-mini-cart__close:hover { color: var(--text-strong, #1a1a18); }
.ek-mini-cart__product {
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
  margin-bottom: 14px;
}
.ek-mini-cart__media {
  position: relative;
  width: 64px; height: 64px;
  background: #fff;
  border: 1px solid var(--border-soft, #e5e5e0);
  border-radius: 6px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ek-mini-cart__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ek-mini-cart__noimg {
  display: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 600; color: var(--border, #c0c0b8);
  text-align: center; line-height: 1.2;
}
.ek-mini-cart__media.is-noimg img { display: none; }
.ek-mini-cart__media.is-noimg .ek-mini-cart__noimg { display: block; }
.ek-mini-cart__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ek-mini-cart__name {
  font-size: 14px; font-weight: 600; color: var(--text-strong, #1a1a18);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ek-mini-cart__ref {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; color: var(--text-soft, #6b6b66);
}
.ek-mini-cart__price {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px; font-weight: 600; color: var(--ek-gold);
  margin-top: 4px;
}
.ek-mini-cart__summary {
  background: color-mix(in oklch, var(--ek-blue) 5%, transparent);
  border-radius: 6px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; margin-bottom: 14px;
}
.ek-mini-cart__summary > div { display: flex; justify-content: space-between; align-items: baseline; }
.ek-mini-cart__summary span { color: var(--text-soft, #6b6b66); }
.ek-mini-cart__summary strong {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-strong, #1a1a18);
}
.ek-mini-cart__actions { display: flex; gap: 8px; }
.ek-mini-cart__actions .ek-btn { flex: 1; padding: 10px 12px; font-size: 14px; text-align: center; }
.ek-mini-cart__go {
  background: var(--text-strong, #1a1a18);
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.ek-mini-cart__go:hover { background: var(--ek-blue); }

@media (max-width: 640px) {
  .ek-mini-cart__panel { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; }
}

/* ════════════════════════════════════════════════════════════════════
   Banner login en carrito / checkout
   ════════════════════════════════════════════════════════════════════ */
.ek-cart-login,
.ek-checkout__login {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: color-mix(in oklch, var(--ek-blue) 6%, transparent);
  border: 1px solid color-mix(in oklch, var(--ek-blue) 22%, transparent);
  border-radius: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ek-checkout__login { margin-bottom: 18px; }
.ek-cart-login__ico,
.ek-checkout__login-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff;
  border: 1px solid color-mix(in oklch, var(--ek-blue) 22%, transparent);
  color: var(--ek-blue);
  flex-shrink: 0;
}
.ek-cart-login__text,
.ek-checkout__login-text {
  flex: 1; min-width: 200px;
  font-size: 14px; line-height: 1.4; color: var(--text, #2a2a26);
}
.ek-cart-login__text strong,
.ek-checkout__login-text strong {
  display: block; color: var(--text-strong, #1a1a18); margin-bottom: 2px;
}
.ek-cart-login__register {
  font-size: 13px; color: var(--text-soft, #6b6b66);
  text-decoration: underline; text-decoration-color: var(--border, #d0d0c8);
}
.ek-cart-login__register:hover { color: var(--ek-blue); text-decoration-color: var(--ek-blue); }

/* Hint informativo en páginas de cuenta */
.ek-account__hint {
  background: color-mix(in oklch, var(--ek-blue) 6%, transparent);
  border: 1px solid color-mix(in oklch, var(--ek-blue) 22%, transparent);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 14px; line-height: 1.5; color: var(--text, #2a2a26);
}
.ek-account__hint strong {
  display: block; margin-bottom: 4px;
  color: var(--text-strong, #1a1a18);
}

/* Bloque de dirección de facturación en checkout */
.ek-checkout-billing {
  padding-top: 16px;
  border-top: 1px dashed var(--border-soft, #e5e5e0);
  margin-top: 8px;
}
.ek-checkout-billing[hidden] { display: none; }

/* ═══════════════════════════════════════════════════
   Sobre nosotros: hero responsive
   ═══════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .ek-about-hero { padding: 40px 20px 36px !important; }
  .ek-about-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ek-about-hero__grid h1 {
    font-size: 56px !important;
    line-height: 1 !important;
    letter-spacing: -1.6px !important;
  }
  .ek-about-hero__card {
    max-width: none !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 640px) {
  .ek-about-hero { padding: 28px 18px 28px !important; }
  .ek-about-hero__grid {
    gap: 24px !important;
  }
  .ek-about-hero__grid h1 {
    font-size: 40px !important;
    line-height: 1.05 !important;
    letter-spacing: -1.2px !important;
  }
  .ek-about-hero__card {
    padding: 18px !important;
  }
  .ek-about-hero__card .mono {
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════
   Logos de marcas (DISTRIBUIDOR OFICIAL): carrusel continuo
   El bucle funciona porque las dos copias de .ek-brands__list miden lo mismo:
   la pista se mueve -50% y la segunda copia cae donde empezaba la primera.
   ═══════════════════════════════════════════════════ */
.ek-brands__marquee {
  overflow: hidden;
  /* Difumina los extremos para que los logos entren y salgan suavemente */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ek-brands__track {
  display: flex; width: max-content; will-change: transform;
  animation: ek-brands-scroll var(--ek-brands-dur, 40s) linear infinite;
}
/* En móvil hay una regla general "* { max-width: 100% }": encogía la pista y las
   listas al ancho de la pantalla y el bucle daba saltos. */
.ek-brands__track, .ek-brands__list { max-width: none; }
.ek-brands__marquee:hover .ek-brands__track { animation-play-state: paused; }
.ek-brands__list {
  display: flex; align-items: center; gap: 48px;
  margin: 0; padding: 0 24px; list-style: none;
}
.ek-brands__cell {
  flex: 0 0 160px; width: 160px; height: 90px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ek-brands__img {
  display: block; width: auto; height: auto;
  /* Límites en px y no en %: Safari no aplicaba el max-width: 100% dentro del
     flex y los logos muy apaisados (Digitus) se montaban sobre los de al lado. */
  max-width: 160px; max-height: 72px; object-fit: contain;
  filter: grayscale(40%); opacity: 0.85; transition: filter .2s, opacity .2s;
}
.ek-brands__img:hover { filter: none; opacity: 1; }
@keyframes ek-brands-scroll { to { transform: translateX(-50%); } }

/* Con "reducir movimiento" activado en el sistema, logos quietos en filas. */
@media (prefers-reduced-motion: reduce) {
  .ek-brands__marquee { -webkit-mask-image: none; mask-image: none; }
  .ek-brands__track { animation: none; width: auto; justify-content: center; }
  .ek-brands__list { flex-wrap: wrap; justify-content: center; gap: 24px 40px; }
  .ek-brands__list[aria-hidden="true"] { display: none; }
}

@media (max-width: 980px) {
  .ek-brands { padding: 56px 20px !important; }
}

@media (max-width: 640px) {
  .ek-brands { padding: 48px 16px !important; }
  .ek-brands__list { gap: 32px; padding: 0 16px; }
  .ek-brands__cell { flex-basis: 120px; width: 120px; height: 72px; }
  .ek-brands__img { max-width: 120px; max-height: 56px; }
}

/* ═══════════════════════════════════════════════════
   Blog: listado en LISTA como el de Ekanet (imagen a la izquierda, texto a la derecha)
   ═══════════════════════════════════════════════════ */
.ek-blog-list { display: flex; flex-direction: column; max-width: 1040px; }
.ek-blog-item {
  display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--ek-dark-line);
  text-decoration: none; color: inherit;
}
.ek-blog-item:first-child { padding-top: 0; }
.ek-blog-item__img {
  position: relative; aspect-ratio: 11 / 4; overflow: hidden;
  border-radius: 6px; background: #fff;
}
.ek-blog-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.ek-blog-item:hover .ek-blog-item__img img { transform: scale(1.03); }
.ek-blog-item__noimg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, oklch(0.22 0.04 260), oklch(0.26 0.06 270));
  color: var(--ek-gold); font-family: var(--ek-font-mono); font-size: 13px; letter-spacing: .15em;
}
.ek-blog-item__title { margin: 0 0 6px; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ek-blue-deep); }
.ek-blog-item:hover .ek-blog-item__title { text-decoration: underline; }
.ek-blog-item__meta { margin-bottom: 8px; font-size: 14px; color: var(--ek-dark-ink-2); }
.ek-blog-item__cat::before { content: " · "; }
.ek-blog-item__excerpt {
  margin: 0; font-size: 16px; line-height: 1.55; color: var(--ek-dark-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 720px) {
  .ek-blog-item { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ═══════════════════════════════════════════════════
   Portada: opiniones de clientes (reseñas aprobadas y marcadas en el panel)
   Texto en color de tinta principal, no gris: el cliente pidió más contraste.
   ═══════════════════════════════════════════════════ */
.ek-home-reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ek-home-review {
  margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 12px;
  background: var(--ek-dark-surface); border: 1px solid var(--ek-dark-line); border-radius: var(--ek-r-lg);
}
.ek-home-review__stars { font-size: 20px; letter-spacing: 2px; line-height: 1; color: var(--ek-dark-line); }
.ek-home-review__stars .is-on { color: var(--ek-gold); }
.ek-home-review__title { font-size: 18px; font-weight: 600; color: var(--ek-dark-ink); }
.ek-home-review__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ek-dark-ink); overflow-wrap: anywhere; }
.ek-home-review__meta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ek-dark-line);
  display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--ek-dark-ink);
}
.ek-home-review__meta a { color: var(--ek-blue-deep); }
.ek-home-review__meta a:hover { text-decoration: underline; }
@media (max-width: 980px) { .ek-home-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ek-home-reviews__grid { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════
   USPs strip negro de /sobre-nosotros responsive
   ═══════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .ek-about-usps { padding: 28px 20px !important; }
  .ek-about-usps__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }
}

@media (max-width: 640px) {
  .ek-about-usps { padding: 24px 20px !important; }
  .ek-about-usps__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 14px !important;
  }
  /* Reducir el tamaño del título del USP en móvil */
  .ek-about-usps__grid .mono { font-size: 13px !important; letter-spacing: 0.08em !important; }
}

@media (max-width: 420px) {
  .ek-about-usps__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════
   Hero band + USPs responsive (tablet + móvil)
   ═══════════════════════════════════════════════════ */
@media (max-width: 980px) {
  /* Banda informativa: equilibrar separación arriba/abajo */
  .ek-hero-band {
    margin-top: 32px !important;
  }
  /* USPs: 4 columnas → 2 columnas en tablet */
  .ek-usps-section { padding: 28px 20px !important; }
  .ek-usps-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 22px !important;
  }
}

@media (max-width: 640px) {
  /* En móvil la banda queda más compacta y centrada en su zona */
  .ek-hero-band {
    margin-top: 24px !important;
    padding: 18px 18px !important;
    gap: 14px !important;
  }
  /* USPs: una columna por encima de la otra para que no se aprieten contra los bordes */
  .ek-usps-section { padding: 24px 20px !important; }
  .ek-usps-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 16px !important;
  }
}

@media (max-width: 420px) {
  /* En pantallas muy estrechas, las USPs en columna única para que ningún texto quede pegado al borde */
  .ek-usps-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════
   Newsletter responsive (tablet + móvil)
   ═══════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .ek-newsletter-section { padding: 0 20px 80px !important; }
  .ek-newsletter {
    grid-template-columns: 1fr !important;
    padding: 36px 28px !important;
    gap: 28px !important;
  }
  .ek-newsletter__title { font-size: 28px !important; }
}

@media (max-width: 640px) {
  .ek-newsletter-section { padding: 0 16px 64px !important; }
  .ek-newsletter {
    padding: 28px 20px !important;
    gap: 20px !important;
    border-radius: 14px !important;
  }
  .ek-newsletter__title { font-size: 24px !important; line-height: 1.15 !important; }
  /* Email + botón se apilan en vertical */
  .ek-newsletter__field {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px !important;
    gap: 8px;
  }
  .ek-newsletter__field span { padding: 0 4px !important; }
  .ek-newsletter__field input {
    padding: 10px 4px !important;
    width: 100%;
  }
  .ek-newsletter__submit {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════
   Botón flotante de WhatsApp
   ═══════════════════════════════════════════════════ */
.ek-wa-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 8000;
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px -4px rgba(37, 211, 102, 0.55),
              0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: ek-wa-float 4.5s ease-in-out infinite;
}
.ek-wa-fab:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 14px 32px -4px rgba(37, 211, 102, 0.7),
              0 6px 16px rgba(0, 0, 0, 0.18);
}
.ek-wa-fab:active { transform: translateY(0) scale(1.02); }
.ek-wa-fab svg { position: relative; z-index: 2; }
.ek-wa-fab__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: ek-wa-pulse 2.2s ease-out infinite;
  z-index: 1;
}

/* Pulso expansivo continuo */
@keyframes ek-wa-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* Pequeño "flotar" — sube y baja ligeramente, también se desplaza un poco */
@keyframes ek-wa-float {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, -6px); }
  50%      { transform: translate(0, -10px); }
  75%      { transform: translate(3px, -6px); }
}

@media (prefers-reduced-motion: reduce) {
  .ek-wa-fab, .ek-wa-fab__pulse { animation: none; }
}

@media (max-width: 640px) {
  .ek-wa-fab { width: 54px; height: 54px; bottom: 18px; right: 18px; }
  .ek-wa-fab svg { width: 24px; height: 24px; }
}

/* ───── Banner de consentimiento de cookies ───── */
.ek-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000; display: flex; justify-content: center; pointer-events: none; }
.ek-cookie[hidden] { display: none; }
.ek-cookie__box { pointer-events: auto; width: 100%; max-width: 560px; background: #fff; color: #1a1a26; border: 1px solid #e5e7ec; border-radius: 12px; box-shadow: 0 16px 48px -12px rgba(0,0,0,.3); padding: 18px 20px; }
.ek-cookie__text strong { display: block; font-size: 16px; margin-bottom: 4px; color: #1a1a26; }
.ek-cookie__text p { margin: 0; font-size: 14px; line-height: 1.5; color: #5a5f6b; }
.ek-cookie__text a { color: #5a6dba; }
.ek-cookie__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; justify-content: flex-end; }
.ek-btn--sm { padding: 8px 14px !important; font-size: 14px !important; }
.ek-cookie__opts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ek-cookie__opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #5a5f6b; cursor: pointer; }
.ek-cookie__opt input { margin-top: 2px; flex-shrink: 0; }
.ek-cookie__opt.is-locked { opacity: .75; cursor: default; }
.ek-cookie__opt strong { color: #1a1a26; }
.ek-cookie__config-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ───── FAQ (página /preguntas-frecuentes y bloque de la home) ───── */
.ek-faq { padding: 56px 40px 80px; position: relative; }
.ek-faq__head { max-width: 760px; margin: 0 auto 32px; }
.ek-faq__list { max-width: 760px; margin: 0 auto; }
.ek-faq__item { border: 1px solid var(--ek-dark-line); border-radius: var(--ek-r); margin-bottom: 12px; background: var(--ek-dark-surface); overflow: hidden; }
.ek-faq__item summary { list-style: none; cursor: pointer; padding: 18px 20px; font-size: 17px; font-weight: 500; color: var(--ek-dark-ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ek-faq__item summary::-webkit-details-marker { display: none; }
.ek-faq__item summary::after { content: '+'; font-size: 22px; color: var(--ek-gold); line-height: 1; flex-shrink: 0; }
.ek-faq__item[open] summary::after { content: '\2212'; }
.ek-faq__item p { margin: 0; padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--ek-dark-ink-2); }
@media (max-width: 640px) { .ek-faq { padding: 36px 20px 56px; } }
@media (max-width: 640px) {
  .ek-cookie { left: 8px; right: 8px; bottom: 8px; }
  .ek-cookie__actions, .ek-cookie__config-actions { justify-content: stretch; }
  .ek-cookie__actions .ek-btn, .ek-cookie__config-actions .ek-btn { flex: 1; }
}

/* Marca "Genérico" (producto sin fabricante): placeholder tenue, no una marca real */
.ek-prodcard__brand--generic, .ek-prod-info__brand--generic { opacity: .55; font-style: italic; }

/* ══════════════════════════════════════════════════════════════════
   Slider de portada (.ek-slider) — banners de ps_banner (hero_slider)
   Fundido entre diapositivas; el JS (front.js) alterna la clase
   .is-active en slides y puntos. El PRIMER slide queda en flujo para
   dar altura a la sección y el resto se superpone encima.
   ══════════════════════════════════════════════════════════════════ */
.ek-slider-section { padding: 0 40px; margin: 14px 0 0; }
.ek-slider {
  position: relative; overflow: hidden; line-height: 0;
  border-radius: var(--ek-r-lg, 14px); background: #0d111c;
}
/* Las diapositivas están apiladas. Antes las ocultas solo se volvían
   transparentes y la ÚLTIMA (ICT) quedaba encima de todas y se llevaba el clic:
   cualquier diapositiva llevaba a la página de ICT. Ahora las ocultas no reciben
   clics ni foco de teclado y la activa va por encima. La que sale se queda
   visible debajo hasta que la nueva termina de aparecer, así el fundido no
   oscurece la imagen a mitad de transición. */
.ek-slider__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0s linear .6s, visibility 0s linear .6s;
}
.ek-slider__slide:first-child { position: relative; }
.ek-slider__slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; z-index: 1;
  transition: opacity .6s ease, visibility 0s;
}
.ek-slider__link { display: block; }
.ek-slider__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ek-slider__slide:first-child .ek-slider__img { height: auto; }

.ek-slider__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.86); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.ek-slider__nav:hover { background: #fff; }
.ek-slider__nav::before {
  content: ''; width: 9px; height: 9px;
  border-top: 2px solid #1a1a26; border-right: 2px solid #1a1a26;
}
.ek-slider__nav--prev { left: 14px; }
.ek-slider__nav--next { right: 14px; }
.ek-slider__nav--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.ek-slider__nav--next::before { transform: rotate(45deg);  margin-right: 3px; }

.ek-slider__dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; justify-content: center; gap: 8px; line-height: 1;
}
.ek-slider__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.55); cursor: pointer; transition: width .2s, background .2s;
}
.ek-slider__dot.is-active { width: 24px; border-radius: 5px; background: #fff; }

@media (max-width: 720px) {
  .ek-slider-section { padding: 0 16px; }
  /* Las imágenes del slider llevan el texto INCRUSTADO en el JPG; en móvil se
     reducen tanto que las flechas tapaban las letras. En pantalla táctil sobran:
     el carrusel se desliza con el dedo (front.js) y tiene autoplay y puntos. */
  .ek-slider__nav { display: none; }
  .ek-slider__dots { bottom: 6px; gap: 5px; }
  .ek-slider__dot { width: 6px; height: 6px; }
  .ek-slider__dot.is-active { width: 14px; border-radius: 3px; }
}

/* ── Checkout: DIRECCIÓN DE ENTREGA bien visible ──
   Reunión 16-sep (José, «mi obsesión»): el 90 % de los clientes manda el pedido a otro
   sitio. Bloque propio en dorado (destaca sin parecer un error), pregunta clara y dos
   opciones grandes; y «Se entrega en» junto al botón de confirmar. */
.ek-sec__num--gold { background: var(--ek-gold, #e09a2e); color: oklch(0.16 0.015 260); }
.ek-delivery {
  margin-top: 26px; padding: 22px;
  border: 2px solid var(--ek-gold, #e09a2e); border-radius: var(--ek-r-lg, 14px);
  background: color-mix(in oklch, var(--ek-gold, #e09a2e) 9%, #fff);
}
.ek-delivery__title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px; font-size: 21px; font-weight: 700; line-height: 1.25;
  color: var(--text-strong, #1a1a18);
}
.ek-delivery__lead { margin: 0 0 16px; font-size: 15px; color: var(--text, #2a2a26); }
.ek-delivery__choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ek-delivery__opt {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 16px 18px; background: #fff;
  border: 1.5px solid var(--border, #d0d0c8); border-radius: var(--ek-r-lg, 14px);
  transition: border-color .15s, box-shadow .15s;
}
.ek-delivery__opt:hover { border-color: var(--ek-gold, #e09a2e); }
.ek-delivery__opt input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ek-gold, #e09a2e); }
.ek-delivery__opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ek-delivery__opt-body strong { font-size: 17px; font-weight: 700; color: var(--text-strong, #1a1a18); }
.ek-delivery__opt-body span { font-size: 14px; color: var(--text, #2a2a26); overflow-wrap: anywhere; }
.ek-delivery__opt:has(input:checked) {
  border: 2px solid var(--ek-gold, #e09a2e);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ek-gold, #e09a2e) 22%, transparent);
}
.ek-delivery__opt input:focus-visible { outline: 2px solid var(--ek-blue); outline-offset: 2px; }
.ek-delivery .ek-ship-block {
  margin-top: 14px; padding: 18px;
  border: 1px solid color-mix(in oklch, var(--ek-gold, #e09a2e) 45%, #fff); background: #fff;
}
.ek-delivery__subtitle {
  margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--font-mono, 'JetBrains Mono', monospace); color: var(--text-soft, #45453f);
}
.ek-delivery__notes { margin-top: 14px; }
.ek-delivery__notes textarea { background: #fff; }
@media (max-width: 640px) {
  .ek-delivery { padding: 16px; }
  .ek-delivery__choice { grid-template-columns: 1fr; }
}

/* «Se entrega en» en el resumen lateral */
.ek-checkout-summary__delivery {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px; padding: 12px 14px;
  border: 2px solid var(--ek-gold, #e09a2e); border-radius: 10px;
  background: color-mix(in oklch, var(--ek-gold, #e09a2e) 9%, #fff);
  font-size: 14px; line-height: 1.4; color: var(--text, #2a2a26);
}
.ek-checkout-summary__delivery-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-soft, #45453f);
}
.ek-checkout-summary__delivery strong { font-size: 15px; color: var(--text-strong, #1a1a18); }
.ek-checkout-summary__delivery strong:empty { display: none; }
.ek-checkout-summary__delivery.is-empty { border-style: dashed; background: #fff; }
.ek-checkout-summary__delivery.is-empty [data-summary-delivery-addr] { color: var(--text-soft, #45453f); font-style: italic; }

/* Checkout: lo que lleva el atributo hidden se oculta de verdad. Las reglas con display:flex de
   las filas del resumen y de las opciones de pago lo anulaban, y a todos los clientes les salían
   «Descuento − 0,00 €», «Recargo equivalencia (0,0 %)» y «Pago en tienda» con envío a domicilio
   (que el servidor rechaza al confirmar). */
.ek-checkout [hidden] { display: none !important; }

/* ── Aviso en la dirección anterior mientras conviven las dos (7-oct-2026). Brand::isLegacyHost() ── */
.ek-move { background: var(--ek-ink); color: #fff; font-size: 14px; line-height: 1.45; padding: 9px 16px; text-align: center; }
.ek-move__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; max-width: 1440px; margin: 0 auto; }
.ek-move strong { font-weight: 700; }
.ek-move__txt { color: rgba(255, 255, 255, .82); }
.ek-move__link { color: var(--ek-gold); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ek-move__link:hover, .ek-move__link:focus-visible { text-decoration: underline; }