/* ════════════════════════════════════════════════════════════════════
   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; }

/* 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.18 0.015 260);
  --ek-dark-ink-2: oklch(0.45 0.012 260);

  font-family: var(--ek-font-sans);
  color: var(--ek-dark-ink);
  background: var(--ek-dark-bg);
  font-size: 14px;
  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: 11px;
  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-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: 12px; }
.ek-btn--md { padding: 10px 18px; font-size: 14px; }
.ek-btn--lg { padding: 14px 22px; font-size: 15px; }

.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: 11px; 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: 12px;
  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);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ek-nav__inner {
  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: 20px; 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: 13px; color: var(--ek-dark-ink-2); }

/* ───── Megamenú compacto (dropdown anidado) ───── */
.ek-mega-item { position: relative; }
.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; }

/* Dropdown compacto · cascada lateral con CSS puro */
.ek-drop {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--ek-dark-surface);
  border: 1px solid var(--ek-dark-line);
  border-radius: var(--ek-r);
  box-shadow: 0 14px 36px -10px rgba(20, 30, 60, 0.16);
  min-width: 240px;
  position: absolute;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}

/* Nivel 1: aparece pegado al item del header (sin gap → no se pierde el hover) */
.ek-mega-item > .ek-drop {
  top: 100%;
  left: 0;
}

/* Niveles 2+: aparecen pegados al lado derecho del padre (sin gap) */
.ek-drop .ek-drop {
  top: -7px;
  left: 100%;
}

/* Mostrar al hover */
.ek-mega-item:hover > .ek-drop,
.ek-drop__item:hover > .ek-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s 0s;
}

.ek-drop__item { position: relative; }

.ek-drop__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ek-dark-ink);
  border-radius: var(--ek-r-sm);
  transition: background .15s, color .15s;
  line-height: 1.3;
}
.ek-drop__link:hover,
.ek-drop__item:hover > .ek-drop__link {
  background: var(--ek-blue-soft);
  color: var(--ek-blue-deep);
}
.ek-drop__arr {
  color: var(--ek-dark-ink-2);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  transition: color .15s;
}
.ek-drop__item:hover > .ek-drop__link .ek-drop__arr {
  color: var(--ek-blue);
}

/* En tablet/móvil escondemos el dropdown (drawer lateral en otro paso) */
@media (max-width: 980px) {
  .ek-drop { display: none !important; }
}
.ek-nav__links a { transition: color .15s; position: relative; }
.ek-nav__links a:hover { color: var(--ek-blue-deep); }
.ek-nav__links 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 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: 12px; 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: 13px;
  color: var(--ek-dark-ink-2);
  cursor: text;
  transition: border-color .15s;
}
.ek-search:hover { border-color: var(--ek-blue); }
.ek-search__shortcut {
  font-family: var(--ek-font-mono); font-size: 10px; letter-spacing: 0.1em;
  padding: 2px 6px; border: 1px solid var(--ek-dark-line); border-radius: 3px;
}

/* ───── 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: 11px; 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: 10px; 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: 13px; 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: 11px;
}

/* ───── 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: 11px; }
  .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: 14px !important; max-width: 320px; }
  .ek-footer__col-title { font-size: 12px; margin-bottom: 12px; }
  .ek-footer__col a, .ek-footer__col span { font-size: 15px; 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: 12px; 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: 15px; line-height: 1.6; color: var(--text, #2a2a26);
  max-width: 720px; margin: 8px 0 12px;
}
.ek-cat-hero__meta {
  font-size: 13px; 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: 11px; 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: 15px; 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: 16px !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: 9px; 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: 11px; 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: 13px; 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: 11px; color: var(--text-soft, #6b6b66);
}
.ek-filters__list details summary {
  cursor: pointer; font-size: 12px; 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: 11px; 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: 14px; 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: 13px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-filters__clear {
  font-size: 12px; color: var(--text-soft, #6b6b66); text-decoration: underline;
  text-align: center; margin-top: -8px;
}

/* ── 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: 12px; color: var(--text-soft, #6b6b66); margin-right: 8px; }
.ek-cat-toolbar__sort select {
  padding: 6px 10px; font-size: 13px; border: 1px solid var(--border, #d0d0c8);
  border-radius: 4px; background: #fff;
}
.ek-cat-toolbar__count {
  font-size: 12px; 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;
}

/* ── 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: 12px; 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: 11px; }
}
/* 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: 11px; 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: 11px; 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; }

.ek-prodcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ek-prodcard__brand {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-soft, #6b6b66);
}
.ek-prodcard__title {
  font-size: 14px; 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: 11px; 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: 13px; color: var(--text-soft, #6b6b66);
}
.ek-prodcard__price-now {
  font-size: 18px; font-weight: 600; color: var(--text-strong, #1a1a18);
}
.ek-prodcard__price-tax {
  font-size: 10px; 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: 13px; 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: 13px; 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;
}
.ek-cat-empty h2 { font-size: 20px; 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: 13px; 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: 13px;
}
.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: 13px; }
  .ek-prodcard__price-now { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   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: 14px; 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)); }

/* ── 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: 11px; 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: 12px; 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: 15px; line-height: 1.6; color: var(--text, #2a2a26);
}
.ek-prod-info__short p { margin: 0 0 8px; }

/* ── 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: 16px; 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: 12px; color: var(--text-soft, #6b6b66);
}
.ek-prod-info__price-vat {
  font-size: 13px; 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: 13px; 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: 13px; color: var(--text-soft, #6b6b66); margin-left: 8px; }
.ek-stock-pill__txt { font-size: 12px; color: var(--text-soft, #6b6b66); margin-top: 2px; }

/* ── Combinaciones ── */
.ek-prod-info__sectitle {
  font-size: 13px; 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: 13px; 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: 12px; color: var(--brand-blue, oklch(0.55 0.12 250));
}
.ek-combo__stock {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px; 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: 16px; 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: 14px; -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: 13px; }
.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: 13px; 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: 16px; font-weight: 600; margin: 0 0 4px;
  color: var(--text-strong, #1a1a18);
}
.ek-prod-oos__sub { font-size: 13px; 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: 14px; 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: 13px; 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: 14px; color: var(--text-strong, #1a1a18); font-weight: 500; }
.ek-prod-techsheet__txt small {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px; letter-spacing: 0.1em; color: var(--text-soft, #6b6b66);
}
.ek-prod-techsheet__arrow {
  font-size: 18px; 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: 18px; 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: 12px; 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: 13px;
}
.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: 11px; 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: 11px; 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: 11px; 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: 14px;
  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: 13px;
}
.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: 14px; 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: 13px;
}
.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: 12px; font-weight: 600;
}
.ek-checkout-step__title {
  font-size: 16px; 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: 11px; 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: 12px; 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: 14px; 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: 13px; 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: 14px; }
.ek-shipping-opt__body span, .ek-payment-opt__body span { font-size: 12px; color: var(--text-soft, #6b6b66); }
.ek-shipping-opt__price {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 500; font-size: 14px;
}
.ek-payment-options { display: flex; flex-direction: column; gap: 8px; }

.ek-checkout__terms {
  display: flex; gap: 10px; margin-top: 18px;
  font-size: 13px; color: var(--text, #2a2a26); line-height: 1.5;
  cursor: pointer;
}
.ek-checkout__terms input { margin-top: 3px; flex-shrink: 0; }
.ek-checkout__terms a { color: var(--text-strong, #1a1a18); }

/* 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: 13px;
  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: 12px;
}
.ek-checkout-summary__name { line-height: 1.35; }
.ek-checkout-summary__price {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px; white-space: nowrap;
}

.ek-checkout-summary__row {
  display: flex; justify-content: space-between;
  font-size: 13px; 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: 18px; 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: 11px; 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: 12px; 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: 15px; 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: 17px; 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: 13px; line-height: 1.5; color: var(--text, #2a2a26);
}
.ek-checkout__hello-ico { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.ek-checkout__hello strong { display: block; margin-bottom: 2px; color: var(--text-strong, #1a1a18); }

/* ── 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: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-soft, #6b6b66);
}
.ek-addr-picker__chip {
  font-family: inherit; font-size: 13px;
  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: 13px; 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: 13px; 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: 12px; 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: 13px;
  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: 18px;
  color: oklch(0.40 0.15 145); padding: 0 4px;
}
.ek-coupon-applied small { font-size: 11px; color: var(--text-soft, #6b6b66); }
.ek-coupon-msg { padding: 8px 12px; border-radius: 6px; font-size: 12px; 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: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ek-gold);
}
.ek-addr-card__body { font-size: 13px; 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: 12px; 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;
}
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) {
  .ek-hero__grid { grid-template-columns: 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: 15px !important; margin-top: 18px !important; }
  .ek-hero .ek-btn--lg { padding: 12px 18px !important; font-size: 13px !important; }
  /* Banda informativa (typer) en móvil */
  .ek-hero #ek-typer { font-size: 13px !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: 10px; 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: 10px; 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: 9px; padding: 3px 8px; bottom: 6px; right: 6px; }
  .ek-pack-collage__save  { font-size: 9px; 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: 13px; 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; }

/* ════════ 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: 13px; 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: 13px; 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: 15px; line-height: 1.6; margin: -6px 0 22px; }
.ek-cart-line__variant { font-size: 12px; color: var(--ek-blue, #2f6df6); margin-top: 2px; }
.ek-qr-loggedin { font-size: 13px; 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: 12px; 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: 14px; 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: 12px; font-style: normal; margin-top: 3px; }
.ek-qr-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; 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: 12px; 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: 15px; margin: 0 0 16px; }
.ek-qr-thanks p { color: var(--ek-ink-2, #5a5a54); line-height: 1.6; }
.ek-qr-thanks__hint { font-size: 13px; }
.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: 16px; 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: 13px; color: var(--text-soft, #6b6b66); }
.ek-reviews__stars { display: inline-flex; font-size: 16px; 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: 18px; font-weight: 500; color: var(--text-strong, #1a1a18);
}
.ek-reviews__count { color: var(--text-soft, #6b6b66); }
.ek-reviews__empty { font-size: 13px; 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: 16px; 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: 14px; 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: 14px; }
.ek-review small { color: var(--text-soft, #6b6b66); font-size: 12px; }

/* ════════════════════════════════════════════════════════════════════
   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: 14px; 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: 13px;
  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: 13px; margin-bottom: 14px;
}
.ek-auth__error {
  background: #fee; color: #8a2230;
  border-left: 3px solid #e84;
  padding: 10px 14px; border-radius: 6px; font-size: 13px; 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: 18px; font-weight: 500; margin: 0; color: #fff; }
.ek-auth__aside p { font-size: 14px; 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: 12px; 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: 13px; 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: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-account__user small { font-size: 11px; 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: 14px;
  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: 14px;
  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: 13px; 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: 13px; 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: 10px; 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: 14px; 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: 11px; 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: 13px;
}
.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: 10px; 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: 13px; 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: 11px; 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: 13px; 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: 13px;
}
.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: 16px; 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: 15px; 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: 10px; letter-spacing: 0.18em; color: rgba(255,255,255,0.55);
}
.ek-thanks__val { font-size: 14px; }
.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: 14px; line-height: 1.5; }
.ek-thanks__bank small { display: block; margin-top: 8px; color: var(--text-soft, #6b6b66); font-size: 12px; }
.ek-thanks__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Productos relacionados (cross-sell + up-sell) ── */
.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: 11px; 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: 13px; 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: 11px; 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: 13px; 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: 14px; 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: 12px;
}

/* ════════════════════════════════════════════════════════════════════
   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: 11px; 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: 9px; 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: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-soft, #6b6b66);
}
.ek-cart-line__name {
  display: block; font-size: 14px; 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: 11px; color: var(--text-soft, #6b6b66);
}
.ek-cart-line__warn {
  font-size: 12px; 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: 12px; color: var(--text-soft, #6b6b66);
}
.ek-cart-line__price-now { font-size: 15px; font-weight: 600; }
.ek-cart-line__price-tax { font-size: 10px; color: var(--text-soft, #6b6b66); }

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

.ek-cart-line__total {
  text-align: right; font-size: 16px; 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: 18px; 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: 13px; 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: 14px; 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: 13px; color: var(--text, #2a2a26);
}
.ek-cart-summary__soft { color: var(--text-soft, #6b6b66); font-style: italic; font-size: 12px; }
.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: 18px; font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ek-btn--block { display: block; width: 100%; padding: 14px 0; font-size: 14px; }

/* ── 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: 15px; 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: 17px; 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: 12px; 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: 10px; 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: 13px; 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: 980px) {
  .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: 11px; 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: 15px; 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: 18px; 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: 12px; 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: 13px;
  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: 13px; 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)
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {
  .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: 6px; align-items: center; }
}
/* Desktop: el icono de usuario se oculta y queda solo el texto/nombre */
@media (min-width: 981px) {
  .ek-nav__access-icon { display: none; }
}

@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: 11px; 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: 17px; 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: 10px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--text-soft, #6b6b66);
  margin-bottom: 6px;
}
.ek-c-card__value {
  font-size: 16px; font-weight: 500; color: var(--text-strong, #1a1a18);
  line-height: 1.3; margin-bottom: 4px;
}
.ek-c-card__sub {
  font-size: 12px; 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: 14px;
  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: 14px; 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: 13px; 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: 10px;
  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: 11px; 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: 13px; 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: 14px;
  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: 14px;
}
.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: 16px; 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: 12px; 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: 13px;
}
.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: 12px; }

.ek-meta-list { margin: 0; }
.ek-meta-list dt {
  font-size: 11px; 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: 13px;
  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: 15px; }
  .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: 11px; 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: 16px; 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: 11px;
  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: 16px; 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: 18px; font-weight: 500;
  margin: 0 0 8px;
  color: var(--text-strong, #1a1a18);
}
.ek-about-value p {
  font-size: 14px; 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: 14px; 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: 13px; color: var(--ek-gold);
  letter-spacing: 0.1em; font-weight: 600;
  padding-top: 4px;
}
.ek-about-service-row__t {
  font-size: 16px; font-weight: 500;
  color: var(--ek-dark-ink);
  margin-bottom: 4px;
}
.ek-about-service-row__d {
  font-size: 14px; 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: 15px; 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: 18px; }
  .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: 16px; font-weight: 600;
  margin: 22px 0 8px;
  color: var(--ek-dark-ink);
}
.ek-legal p {
  font-size: 15px; line-height: 1.7;
  color: var(--ek-dark-ink-2);
  margin: 0 0 14px;
}
.ek-legal ul, .ek-legal ol {
  font-size: 15px; 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: 16px; }
.ek-blog-body { font-size: 16px; 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: 18px; }
.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: 13px;
}

/* ════════════════════════════════════════════════════════════════════
   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: 18px !important; }
  .ek-blog-body { font-size: 15px; }
  .ek-blog-body h2 { font-size: 19px; }
  .ek-blog-body h3 { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   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: 14px;
}
.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: 8px; 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: 13px; 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: 10px; color: var(--text-soft, #6b6b66);
}
.ek-mini-cart__price {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px; 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: 12px; 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: 13px; 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: 13px; 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: 12px; 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: 13px; 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: 9px !important;
  }
}

/* ═══════════════════════════════════════════════════
   Logos de marcas (DISTRIBUIDOR OFICIAL) responsive
   ═══════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .ek-brands { padding: 56px 20px !important; }
  .ek-brands__cell {
    flex: 0 1 calc(33.33% - 32px) !important; /* 3 por fila en tablet */
    min-height: 110px !important;
  }
  .ek-brands__img {
    max-height: 90px !important;
  }
}

@media (max-width: 640px) {
  .ek-brands { padding: 48px 16px !important; }
  .ek-brands__grid {
    gap: 28px 24px !important;
  }
  .ek-brands__cell {
    flex: 0 1 calc(50% - 24px) !important;  /* 2 por fila en móvil */
    min-height: 120px !important;
    padding: 16px 8px !important;
  }
  .ek-brands__img {
    max-height: 96px !important;
  }
}

/* ═══════════════════════════════════════════════════
   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: 11px !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: 15px; margin-bottom: 4px; color: #1a1a26; }
.ek-cookie__text p { margin: 0; font-size: 13px; 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: 13px !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: 13px; 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: 16px; 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: 15px; 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; }
}