/* ============================================
   Kidilo · Paleta dorado elegante
   ============================================ */

:root {
  /* Paleta principal — dorado / marfil / champagne */
  --bg: oklch(0.985 0.008 88);            /* Marfil casi blanco */
  --cream: oklch(0.96 0.025 85);          /* Crema cálida */
  --cream-2: oklch(0.93 0.04 80);         /* Crema más saturada / arena */

  --rose: oklch(0.93 0.035 75);           /* Champagne claro */
  --rose-deep: oklch(0.76 0.085 70);      /* Bronce / oro viejo */
  --sky: oklch(0.94 0.02 95);             /* Beige neutro */
  --sky-deep: oklch(0.82 0.05 95);        /* Beige cálido */
  --mint: oklch(0.92 0.04 105);           /* Oliva muy claro */
  --butter: oklch(0.95 0.07 95);          /* Mantequilla */
  --lilac: oklch(0.93 0.035 70);          /* Nude rosado/dorado */

  --ink: oklch(0.22 0.02 70);             /* Marrón muy oscuro (casi negro cálido) */
  --ink-2: oklch(0.42 0.022 70);
  --ink-3: oklch(0.62 0.018 75);

  --line: oklch(0.9 0.015 80);
  --line-2: oklch(0.94 0.012 80);

  --accent: oklch(0.74 0.135 80);         /* Dorado principal */
  --accent-ink: oklch(0.45 0.105 75);     /* Dorado oscuro para texto */
  --accent-soft: oklch(0.95 0.045 85);    /* Dorado pastel para fondos suaves */

  --success: oklch(0.65 0.13 145);
  --warn: oklch(0.78 0.13 75);
  --danger: oklch(0.58 0.18 25);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(40, 30, 50, 0.04);
  --shadow: 0 8px 24px -12px rgba(40, 30, 50, 0.12);
  --shadow-lg: 0 20px 48px -20px rgba(40, 30, 50, 0.18);

  /* Compatibilidad con clases viejas */
  --color-bg: var(--bg);
  --color-bg-2: var(--cream);
  --color-surface: white;
  --color-surface-2: var(--cream);
  --color-border: var(--line-2);
  --color-text: var(--ink);
  --color-text-dim: var(--ink-2);
  --color-text-mute: var(--ink-3);
  --color-primary: var(--accent);
  --color-primary-2: var(--accent-ink);
  --color-accent: var(--accent);
  --color-warn: var(--warn);
  --color-danger: var(--danger);
  --color-success: var(--success);
  --color-cream: var(--cream);
  --color-peach: var(--rose);
  --color-mint: var(--mint);
  --color-blush: var(--accent-soft);
  --grad-primary: linear-gradient(135deg, var(--rose-deep) 0%, var(--accent) 100%);
  --grad-soft: linear-gradient(120deg, var(--rose) 0%, var(--cream) 100%);
  --grad-card: linear-gradient(135deg, var(--rose) 0%, var(--cream-2) 100%);
  --grad-bg: var(--bg);

  --transition: 0.2s ease;
  --container: 1280px;

  /* Tipografía */
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  font-synthesis: none;
}

/* Ocultar secciones cuando el admin las desactiva en Configuración */
html[data-hide-courses="1"]    .hide-when-no-courses   { display: none !important; }
html[data-hide-gift-lists="1"] .hide-when-no-giftlists { display: none !important; }

/* Si AMBOS banners de la "BANNERS PAREJA" están ocultos → ocultar la sección entera
   (evita el hueco en blanco en el home) */
html[data-hide-courses="1"][data-hide-gift-lists="1"] .banners-pair-section { display: none !important; }

/* Si solo UNO de los banners está oculto → el banner restante ocupa toda la fila */
html[data-hide-courses="1"]:not([data-hide-gift-lists="1"])    .banner-pair,
html[data-hide-gift-lists="1"]:not([data-hide-courses="1"]) .banner-pair {
  grid-template-columns: 1fr !important;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, .hero-title, .section-title, .brand-name {
  font-family: var(--font-display);
  font-feature-settings: 'ss01';
  letter-spacing: -0.01em;
}

main { overflow-x: hidden; }

a { color: inherit; text-decoration: none; transition: color 0.15s; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }
input, select, textarea { font-family: inherit; color: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ===========================================
   TOPBAR oscura
   =========================================== */
.topbar {
  background: var(--ink);
  color: oklch(0.92 0.005 80);
  font-size: 13px;
  letter-spacing: 0.02em;
  height: 38px;
  overflow: hidden;
  position: relative;
}

/* Marquee corredizo infinito */
.topbar-marquee {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  /* desvanecido suave en los bordes */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.topbar-marquee-track {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-left: 48px;
  white-space: nowrap;
  width: max-content;
  height: 100%;
  flex-shrink: 0;
  animation: topbar-scroll 30s linear infinite;
  will-change: transform;
}
.topbar-msg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.92;
  position: relative;
}
.topbar-msg + .topbar-msg::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  opacity: 0.7;
}

@keyframes topbar-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Velocidades responsive */
@media (min-width: 1280px) {
  .topbar-marquee-track { animation-duration: 40s; gap: 56px; }
  .topbar-msg + .topbar-msg::before { left: -32px; }
}
@media (max-width: 600px) {
  .topbar { height: 34px; font-size: 12px; }
  .topbar-marquee-track { animation-duration: 22s; gap: 36px; padding-left: 28px; }
  .topbar-msg + .topbar-msg::before { left: -22px; }
}

/* ===========================================
   HEADER + NAV
   =========================================== */
/* ===========================================
   CURSO · LAYOUT VENTA (single column centrado)
   Estructura: título → video grande → precio/CTA → instructor → features
   =========================================== */
.course-sell {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.course-sell .chip {
  align-self: center;
  background: rgba(255,255,255,0.7);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.course-sell h1.course-title {
  text-align: center;
  font-size: 44px;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}
.course-sell .course-tagline {
  text-align: center;
  font-size: 17px;
  color: var(--ink-3);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.55;
}
.course-sell .course-stats-top {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  color: var(--ink-3);
}
.course-sell .course-stats-top span { white-space: nowrap; }
.course-sell .course-video-wrap {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.25);
}
.course-buy-block {
  background: white;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 30px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.08);
}
.course-buy-block .price-block { text-align: center; }
.course-buy-block .price-block .price-big {
  font-size: 48px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
  white-space: nowrap;
}
.course-buy-block .price-block .price-old {
  font-size: 17px;
  color: var(--ink-3);
  text-decoration: line-through;
  white-space: nowrap;
  display: inline-block;
  margin-top: 6px;
}
.course-buy-block .price-block .savings {
  display: inline-block;
  background: oklch(0.94 0.06 145);
  color: oklch(0.45 0.16 145);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 10px;
}
.course-buy-block .cta-block { display: flex; flex-direction: column; gap: 10px; }
.course-buy-block .cta-block .btn { height: 54px; font-size: 15px; }
.course-instructor-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: white;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 18px 22px;
}
.course-instructor-card .avatar { flex-shrink: 0; width: 56px; height: 56px; font-size: 18px; }
.course-instructor-card .info { min-width: 0; flex: 1; }
.course-instructor-card .info h4 { margin: 0 0 4px; font-size: 16px; }
.course-instructor-card .info p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-features-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 22px;
  padding: 0;
  margin: 0;
}
.course-features-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
}
.course-features-grid li::before {
  content: '✓';
  width: 24px; height: 24px;
  background: oklch(0.94 0.06 145);
  color: oklch(0.45 0.16 145);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.course-coupon-block {
  background: #fdfaf3;
  border: 1px dashed #e2dccf;
  border-radius: 14px;
  padding: 18px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.course-coupon-block label {
  font-size: 11px;
  font-weight: 700;
  color: #6b6f80;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 10px;
}
.course-coupon-block .row { display: flex; gap: 8px; }
.course-coupon-block input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #e2dccf;
  border-radius: 10px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff;
}
.course-coupon-block button { flex-shrink: 0; padding: 0 22px; height: 46px; }
.course-coupon-block .msg { margin-top: 10px; font-size: 13px; line-height: 1.5; }

@media (max-width: 768px) {
  .course-sell { gap: 20px; }
  .course-sell h1.course-title { font-size: 30px; }
  .course-sell .course-tagline { font-size: 15px; }
  .course-buy-block {
    grid-template-columns: 1fr;
    padding: 22px 18px;
    gap: 18px;
    text-align: center;
  }
  .course-buy-block .price-block .price-big { font-size: 38px; }
  .course-buy-block .cta-block .btn { height: 50px; }
  .course-instructor-card { padding: 14px 16px; gap: 12px; }
  .course-instructor-card .avatar { width: 46px; height: 46px; font-size: 16px; }
}

/* ===========================================
   VIDEO LIGHTBOX (modal del trailer del curso)
   =========================================== */
#video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: vmFadeIn 0.18s ease-out;
}
@keyframes vmFadeIn { from { opacity: 0 } to { opacity: 1 } }
.vm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.vm-content {
  position: relative;
  width: min(94vw, 1200px);
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.vm-iframe-wrap {
  position: relative;
  padding-bottom: 56.25%;   /* 16:9 */
  height: 0;
}
.vm-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  z-index: 10;
  border: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background 0.15s, transform 0.15s;
}
.vm-close:hover { background: white; transform: scale(1.05); }

/* Indicador "click para ampliar" sobre el video del card */
.course-video-wrap .vm-trigger-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 6;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s;
}
.course-video-wrap:hover .vm-trigger-hint { opacity: 1; transform: translateY(0); }

/* El wrapper #header-mount mide solo lo que el header ocupa (≈105 px), así
   que el sticky se "atascaba" dentro de él en lugar del viewport. Con
   display:contents el wrapper desaparece del layout y el header queda como
   hijo directo del body → sticky funciona contra todo el scroll de la página. */
#header-mount { display: contents; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow 0.2s ease;
}
/* Cuando el usuario hace scroll y el header queda pegado: sombra suave para
   despegarlo visualmente del contenido. */
.site-header.scrolled {
  box-shadow: 0 2px 12px -4px rgba(0,0,0,0.08);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  height: 80px;
  transition: height 0.2s ease;
}
/* Encogimiento sutil al scrollear (4 px). Casi imperceptible pero el header
   se siente más compacto. */
.site-header.scrolled .header-inner { height: 76px; }
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose) 0%, var(--sky) 100%);
  position: relative;
  flex-shrink: 0;
}
.logo-mark::after {
  content: '';
  position: absolute;
  inset: 8px;
  background: var(--bg);
  border-radius: 50%;
}
.logo-mark::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  top: 11px;
  left: 11px;
  z-index: 2;
}
.logo-text { display: flex; align-items: baseline; gap: 2px; }
.logo-text b, .logo-text span { color: var(--accent); font-weight: 700; }

/* SVG inline del logo · header */
.logo-svg {
  height: 44px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .logo-svg { height: 36px; }
}

/* SVG inline del logo · footer (más grande) */
.logo-footer { display: block; }
.logo-svg-footer {
  height: 64px;
  width: auto;
  display: block;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0 18px;
  height: 44px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  transition: border-color 0.2s, background 0.2s;
}
.search-bar:focus-within { border-color: var(--ink-3); background: var(--bg); }
.search-bar svg {
  color: var(--ink-3);
  flex-shrink: 0;
  position: static;
  transform: none;
}
.search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: var(--ink);
  padding: 0;
  width: 100%;
}
.search-bar input::placeholder { color: var(--ink-3); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--ink);
  background: transparent;
  border: none;
  transition: background 0.15s;
}
.icon-btn:hover { background: var(--cream); color: var(--accent); transform: none; border: none; }
.badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--bg);
}

/* Nav sticky bajo el header */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  /* Antes height:56px fijo: si las categorías son muchas y wrappean a 2 filas,
     la 2ª fila quedaba oculta detrás del hero. Ahora min-height: 56px deja
     que el nav crezca verticalmente cuando hace falta sin romper la altura
     mínima en condiciones normales. */
  min-height: 56px;
  width: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 80px;
  z-index: 49;
  flex: none;
  transition: top 0.2s ease;
}
/* Cuando el header está en estado .scrolled (encogido a 76 px), el nav debe
   subir también esos 4 px para quedar pegado debajo. Si no, se ve un gap de
   4 px por donde se cuela el contenido scrolleando. */
.site-header.scrolled + .main-nav { top: 76px; }
.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color 0.15s;
  padding: 0;
  border-radius: 0;
  background: none;
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.2s ease;
}
.main-nav a:hover { color: var(--ink); background: none; }
.main-nav a:hover::after { width: 100%; }
.main-nav a.active { color: var(--accent); font-weight: 600; }
.main-nav a.active::after { width: 100%; }
.main-nav a.featured { color: var(--accent); font-weight: 600; }

.menu-toggle { display: none; }

/* ===========================================
   BOTONES
   =========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--ink);
  color: white;
  box-shadow: none;
}
.btn-primary:hover { background: var(--accent); transform: translateY(-1px); box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: white; border-color: var(--ink); }

.btn-light { background: white; color: var(--ink); border: 1px solid var(--line); }
.btn-light:hover { background: var(--accent); color: white; border-color: var(--accent); }

.btn-outline {
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: white; }

.btn-danger {
  background: rgba(217, 117, 119, 0.1);
  color: var(--danger);
  border: 1px solid rgba(217, 117, 119, 0.3);
}
.btn-danger:hover { background: var(--danger); color: white; }

.btn-sm { height: 38px; padding: 0 18px; font-size: 13px; }
.btn-block { width: 100%; }

/* ===========================================
   HERO SLIDER
   =========================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 520px;
}
.hero-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.05, 1);
  will-change: transform;
}
.hero-slide {
  flex: 0 0 100%;
  min-height: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
}
.hero-slide.tone-rose { background: linear-gradient(120deg, var(--rose) 0%, oklch(0.95 0.025 30) 100%); }
.hero-slide.tone-sky  { background: linear-gradient(120deg, var(--sky)  0%, oklch(0.96 0.02 240) 100%); }
.hero-slide.tone-mint { background: linear-gradient(120deg, var(--mint) 0%, oklch(0.96 0.02 150) 100%); }
.hero-slide.tone-butter { background: linear-gradient(120deg, var(--butter) 0%, oklch(0.96 0.02 90) 100%); }

.hero-text {
  padding: 0 32px 0 80px;
  max-width: 600px;
}
.hero-eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.55);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
  border: none;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero-title,
.hero h1 {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  font-weight: 700;
  color: var(--ink);
}
/* El color de las palabras resaltadas se puede cambiar por slide desde
   Modo diseño (variable --hero-accent en el .hero-slide). */
.hero-title em,
.hero h1 span,
.hero h1 em {
  font-style: normal;
  color: var(--hero-accent, var(--accent));
  font-weight: 700;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.hero-desc, .hero p.lead {
  font-size: 17px;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 460px;
  text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* En móvil ocultamos el botón secundario del hero para evitar amontonamiento */
@media (max-width: 768px) {
  .hero-cta { margin-top: 8px; }
  .hero-cta .btn-ghost { display: none; }
  .hero-cta .btn-primary {
    width: 100%;
    /* `height: auto` neutraliza la regla global `.btn { height: 46px }` que
       se aplica en max-width: 480px y afecta a TODOS los botones del sitio.
       Sin esto, el padding 18px no podía expandir el botón y quedaba delgado. */
    height: auto;
    min-height: 56px;
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 22px rgba(20, 22, 38, 0.18);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .hero-cta .btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(20, 22, 38, 0.18);
  }
  .hero-cta .btn-primary svg { width: 18px; height: 18px; }
}

.hero-visual-niuvo {
  position: relative;
  height: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image-niuvo {
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}
.hero-image-niuvo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.4) 14px 16px);
}
.hero-image-niuvo .label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  z-index: 2;
  background: rgba(255,255,255,0.7);
  width: max-content;
  height: max-content;
  margin: auto;
  padding: 6px 12px;
  border-radius: 6px;
}
.hero-image-niuvo .emoji-large {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9rem;
  z-index: 2;
}

/* Imagen PNG dentro del círculo del slider */
.hero-image-niuvo .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* preserva la imagen sin recortar */
  object-position: center;
  z-index: 3;
  padding: 8%;               /* aire dentro del círculo */
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
}

/* Cuando hay imagen, oculta el patrón rayado del fondo */
.hero-image-niuvo.has-img::after {
  opacity: 0.4;              /* el patrón se ve más sutil */
}

.hero-float {
  position: absolute;
  background: white;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 12px 32px -12px rgba(40, 30, 50, 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  z-index: 3;
}
.hero-float .glyph {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
/* Imagen dentro del circulito de la tarjeta flotante. Hereda el tamaño del
   .glyph (36×36) para que cambiar el contenido no mueva nada de sitio. */
.hero-float .glyph img,
.hero-float .glyph .glyph-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.hero-float strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.hero-float small { color: var(--ink-3); font-size: 11px; }
.hero-float.f1 { top: 18%; left: 6%; }
.hero-float.f2 { bottom: 16%; right: 8%; }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15);
  color: var(--ink);
}
.hero-arrow:hover { background: white; }
.hero-arrow.prev { left: 28px; }
.hero-arrow.next { right: 28px; }

.hero-dots {
  position: absolute;
  bottom: 28px;
  left: 80px;
  display: flex;
  gap: 8px;
  z-index: 5;
}
.hero-dot {
  width: 28px; height: 4px;
  border-radius: 999px;
  background: rgba(40, 30, 50, 0.2);
  transition: background 0.2s, width 0.2s;
}
.hero-dot.active { background: var(--ink); width: 44px; }

/* ===========================================
   SECTION BASE
   =========================================== */
section { padding: 88px 0; }
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 32px;
  flex-wrap: wrap;
}
.section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}
.section-head h2,
.section-title {
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  font-weight: 700;
  max-width: 600px;
  color: var(--ink);
}
.section-head p,
.section-sub {
  font-size: 16px;
  color: var(--ink-2);
  margin: 12px 0 0;
  max-width: 520px;
  text-wrap: pretty;
}
.section-head .link,
.section-link {
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.section-head .link:hover,
.section-link:hover { color: var(--accent); border-color: var(--accent); }

/* ===========================================
   CHIPS, EYEBROWS, ETC
   =========================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 600;
  border: none;
}

/* ===========================================
   CATEGORÍAS (cat cards)
   =========================================== */
.cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.cat-card {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 20px;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid transparent;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.cat-card:hover { transform: translateY(-4px); border-color: var(--line); background: white; }
.cat-card .emoji,
.cat-thumb {
  width: 108px; height: 108px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  position: relative;
  overflow: hidden;
  font-size: 3rem;
}
.cat-card:nth-child(6n+1) .emoji,
.cat-card:nth-child(6n+1) .cat-thumb { background: var(--rose); }
.cat-card:nth-child(6n+2) .emoji,
.cat-card:nth-child(6n+2) .cat-thumb { background: var(--sky); }
.cat-card:nth-child(6n+3) .emoji,
.cat-card:nth-child(6n+3) .cat-thumb { background: var(--mint); }
.cat-card:nth-child(6n+4) .emoji,
.cat-card:nth-child(6n+4) .cat-thumb { background: var(--butter); }
.cat-card:nth-child(6n+5) .emoji,
.cat-card:nth-child(6n+5) .cat-thumb { background: var(--cream-2); }
.cat-card:nth-child(6n+0) .emoji,
.cat-card:nth-child(6n+0) .cat-thumb { background: var(--lilac); }

.cat-card .emoji::after,
.cat-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255,255,255,0.45) 8px 9px);
}

/* Imagen subida desde el admin en lugar del emoji. Rellena el círculo
   completo; el patrón de rayas se atenúa para que no ensucie la foto. */
.cat-thumb .cat-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
}
.cat-thumb.has-img::after { opacity: 0.18; }

/* Imagen dentro del círculo de los "valores" (Envío 24h, Garantía…) */
.value-icon .value-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ===========================================
   MODO DISEÑO
   La home se carga con ?design=1 dentro del panel admin. Solo añade el
   resaltado de las zonas editables; el sitio público nunca ve estas reglas.
   =========================================== */
.hd-design-mode .vp-modal,
.hd-design-mode .vp-trigger { display: none !important; }

.hd-design-mode [data-hd-sel] {
  outline: 1px dashed transparent;
  outline-offset: -2px;
  transition: outline-color 0.15s, background-color 0.15s;
  cursor: pointer;
}
.hd-design-mode [data-hd-sel]:hover { outline-color: oklch(0.72 0.16 350); }
.hd-design-mode [data-hd-sel].hd-active {
  outline: 2px solid oklch(0.72 0.16 350);
  outline-offset: -3px;
}

.cat-card h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.cat-card .count { font-size: 13px; color: var(--ink-3); margin-top: 5px; }

/* ===========================================
   PRODUCT GRID & CARD
   =========================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: inherit;
}
.product-card:hover {
  border-color: var(--line);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -20px rgba(40, 30, 50, 0.18);
}
.product-image {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
}
.product-card:nth-child(6n+1) .product-image { background: var(--rose); }
.product-card:nth-child(6n+2) .product-image { background: var(--sky); }
.product-card:nth-child(6n+3) .product-image { background: var(--mint); }
.product-card:nth-child(6n+4) .product-image { background: var(--cream-2); }
.product-card:nth-child(6n+5) .product-image { background: var(--butter); }
.product-card:nth-child(6n+0) .product-image { background: var(--lilac); }

.product-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.35) 12px 13px);
  pointer-events: none;
  z-index: 1;
}
.product-image > * { position: relative; z-index: 2; }
.product-image .emoji-img { font-size: inherit; line-height: 1; }
.product-image > img { width: 100%; height: 100%; object-fit: cover; }

.product-tags {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 3;
}
.tag {
  font-size: 11px;
  font-weight: 700;
  background: white;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tag-sale { background: var(--accent); color: white; }
.tag-new  { background: var(--ink); color: white; }
.tag-hot  { background: var(--warn); color: var(--ink); }

.wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  color: var(--ink-2);
  border: none;
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm);
}
.wishlist-btn:hover { background: white; transform: scale(1.05); color: var(--accent); }
.wishlist-btn.active { color: var(--accent); }
.wishlist-btn.active svg { fill: var(--accent); }

.product-info {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.product-cat,
.product-brand {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-weight: 600;
}
.product-info h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-info h3 a:hover { color: var(--accent); }

.product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 2px;
}
.stars { display: inline-flex; gap: 1px; color: var(--accent); }

.product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  /* Si los dos precios no caben en una línea (típico en móvil con `oldPrice`),
     dejamos que el precio antiguo caiga a la siguiente línea en vez de
     forzar al precio nuevo a partirse en "S/" + "549.00". */
  flex-wrap: wrap;
}
.price-now {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  /* Mantener la moneda y el número siempre juntos */
  white-space: nowrap;
}
.price-old {
  font-size: 15px;
  color: var(--ink-3);
  text-decoration: line-through;
  font-weight: 500;
  white-space: nowrap;
}

.product-actions {
  display: flex;
  gap: 8px;
  padding: 0 18px 18px;
}
.product-actions .btn { flex: 1; }

/* ===========================================
   BANNERS PAREJA
   =========================================== */
.banner-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.banner {
  border-radius: var(--radius-lg);
  padding: 56px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.banner.tone-rose { background: var(--rose); }
.banner.tone-sky  { background: var(--sky); }
.banner.tone-mint { background: var(--mint); }
.banner.tone-butter { background: var(--butter); }
.banner h3 {
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 12px;
  font-weight: 700;
  max-width: 360px;
  color: var(--ink);
}
.banner p { color: var(--ink-2); margin: 0 0 22px; max-width: 320px; }
.banner-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
}
.banner.tone-rose .banner-shape { background: var(--rose-deep); width: 200px; height: 200px; right: -60px; bottom: -60px; }
.banner.tone-sky  .banner-shape { background: var(--sky-deep);  width: 180px; height: 180px; right: 40px; top: -50px; }
.banner.tone-mint .banner-shape { background: oklch(0.78 0.07 160); width: 160px; height: 160px; left: -40px; top: 40px; }

/* ===========================================
   VALORES (4 cols)
   =========================================== */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--line-2);
}
.value-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 22px;
}
.value h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.value p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* ===========================================
   NEWSLETTER (oscura)
   =========================================== */
.newsletter {
  background: var(--ink);
  color: white;
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.newsletter h3 {
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 12px;
  font-weight: 700;
  color: white;
}
.newsletter p { color: oklch(0.78 0.005 80); margin: 0; max-width: 380px; }
.nl-form {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.12);
}
.nl-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: white;
  padding: 0 22px;
  height: 50px;
  min-width: 0;
}
.nl-form input::placeholder { color: oklch(0.7 0.005 80); }
.nl-form button {
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s;
  border: none;
}
.nl-form button:hover { background: oklch(0.65 0.13 25); }
.nl-shape {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.18;
  filter: blur(40px);
  right: -60px; bottom: -100px;
}

/* ===========================================
   FOOTER
   =========================================== */
.site-footer {
  background: var(--cream);
  padding: 80px 0 32px;
  border-top: 1px solid var(--line-2);
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 56px;
}
.footer-col p { color: var(--ink-2); font-size: 14px; max-width: 280px; margin: 16px 0 24px; }
.footer-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 18px;
  font-weight: 700;
  color: var(--ink);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--ink-2); transition: color 0.15s; }
.footer-col a:hover { color: var(--accent); }

.social-links { display: flex; gap: 8px; margin-top: 16px; }
.social-links a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  transition: background 0.15s, color 0.15s;
}
.social-links a:hover { background: var(--ink); color: white; transform: none; border-color: var(--ink); }

.newsletter-form {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.newsletter-form input {
  flex: 1;
  padding: 0 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  height: 44px;
  outline: none;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}

/* ===========================================
   FORMS
   =========================================== */
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 18px;
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
  color: var(--ink);
  outline: none;
  font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--ink-3);
  background: white;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ===========================================
   AUTH (login/registro)
   =========================================== */
.auth-page {
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
  padding: 60px 20px;
  background: var(--cream);
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow);
}
.auth-card h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.auth-card .sub {
  color: var(--ink-2);
  margin-bottom: 28px;
  font-size: 14px;
}
.auth-card .btn { width: 100%; margin-top: 6px; }
.auth-switch {
  text-align: center;
  margin-top: 20px;
  color: var(--ink-2);
  font-size: 13px;
}
.auth-switch a {
  color: var(--accent);
  font-weight: 600;
}
.divider {
  text-align: center;
  margin: 24px 0;
  position: relative;
  color: var(--ink-3);
  font-size: 12px;
}
.divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--line-2);
  z-index: 0;
}
.divider span {
  position: relative;
  background: var(--bg);
  padding: 0 12px;
  z-index: 1;
}
.auth-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ===========================================
   CATALOG (filtros + grid)
   =========================================== */
.catalog-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  align-items: start;
}
.filter-panel {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 160px;
}
/* Header del drawer (oculto en desktop) */
.filter-panel-head {
  display: none;
}
.filter-close {
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-2);
}
/* Botón Filtros (oculto en desktop) */
.filter-toggle-btn { display: none; }
.filter-toggle-btn .filter-count {
  display: inline-grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
  padding: 0 6px;
}
/* Backdrop oscurecido (sólo móvil) */
.filter-backdrop {
  display: none;
}
/* Acciones del drawer */
.filter-actions {
  margin-top: 8px;
}
.filter-group {
  margin-bottom: 22px;
}
.filter-group h4 {
  font-size: 13px;
  margin-bottom: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}
.filter-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: 14px;
  padding: 6px 0;
  transition: color 0.15s;
}
.filter-list label:hover { color: var(--ink); }
.filter-list label:hover .icon-svg { color: var(--accent); }
.filter-list input { accent-color: var(--ink); flex-shrink: 0; }
.filter-list .icon-svg {
  color: var(--ink-2);
  transition: color 0.15s;
}
.filter-list .filter-name { flex: 1; }
.filter-list .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
}
.price-range {
  display: flex;
  gap: 8px;
  align-items: center;
}
.price-range input {
  width: 100%;
  padding: 8px 12px;
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-size: 13px;
  outline: none;
}

.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-2);
}
.catalog-toolbar .results-count {
  color: var(--ink-2);
  font-size: 14px;
}
.catalog-toolbar select {
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  outline: none;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-2);
}
.empty-state .emoji {
  font-size: 4rem;
  margin-bottom: 16px;
}
.empty-state h3 { color: var(--ink); margin-bottom: 6px; }

/* ===========================================
   PRODUCT DETAIL
   =========================================== */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.product-gallery { position: sticky; top: 160px; }
.gallery-main {
  background: var(--rose);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12rem;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.gallery-main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.4) 14px 16px);
  pointer-events: none;
}
.gallery-main > img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main > * { position: relative; z-index: 2; }

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gallery-thumbs .thumb {
  background: var(--cream-2);
  border: 2px solid transparent;
  border-radius: var(--radius);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  cursor: pointer;
  transition: border-color 0.15s;
  overflow: hidden;
  position: relative;
}
/* La imagen llena completamente el cuadrado y se recorta con object-fit:cover.
   Usamos `position:absolute; inset:0` porque dentro del grid del thumb el img
   con height:100% no se respetaba bien — las imágenes en portrait se hacían
   más altas que el cuadrado. Con inset:0 la fijamos exactamente al box. */
.gallery-thumbs .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: calc(var(--radius) - 2px);
}
.gallery-thumbs .thumb.active,
.gallery-thumbs .thumb:hover { border-color: var(--ink); }

.product-detail-info .breadcrumb {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.product-detail-info .breadcrumb a:hover { color: var(--ink); }

.product-detail-info h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--ink);
}
.detail-rating {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  color: var(--ink-2);
  font-size: 13px;
  flex-wrap: wrap;
}
.detail-rating .stars { color: var(--accent); }
.detail-rating a { color: var(--accent); }

.detail-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.detail-price .price-now { font-size: 36px; }
.detail-price .discount {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: white;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.detail-description {
  color: var(--ink-2);
  margin-bottom: 28px;
  line-height: 1.7;
  font-size: 15px;
}

.option-group { margin-bottom: 22px; }
.option-group label {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.option-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.option-pills button {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}
.option-pills button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.qty-add {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.qty-control {
  display: flex;
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  height: 50px;
}
.qty-control button {
  width: 44px;
  height: 50px;
  font-size: 1.2rem;
  color: var(--ink-2);
  transition: color 0.15s;
}
.qty-control button:hover { color: var(--accent); }
.qty-control input {
  width: 50px;
  height: 50px;
  text-align: center;
  background: transparent;
  border: none;
  font-weight: 600;
  font-size: 14px;
  outline: none;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-add .btn { flex: 1; }

.detail-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 22px;
  background: var(--cream);
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.meta-item svg { color: var(--accent); flex-shrink: 0; }

/* ===========================================
   TABS
   =========================================== */
.tabs { margin-top: 60px; }
.tab-headers {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 30px;
  overflow-x: auto;
}
.tab-headers button {
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
  background: none;
}
/* Activo: solo color + peso, SIN la raya inferior — la "rayita coral"
   parecía un tirador suelto bajo el texto. */
.tab-headers button.active {
  color: var(--accent);
  font-weight: 700;
}
/* Feedback de tap: la raya aparece SOLO mientras el dedo está sobre el botón.
   Cubre el caso "quiero ver que toque si tocan" sin dejarla permanente. */
.tab-headers button:active {
  border-bottom-color: var(--accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s; }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--line-2); }
.spec-table td { padding: 14px 16px; font-size: 14px; }
.spec-table td:first-child { color: var(--ink-3); font-weight: 600; width: 240px; }

/* ===========================================
   REVIEWS
   =========================================== */
.reviews-overview {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-2);
}
.rating-big { text-align: center; }
.rating-big .num {
  font-size: 56px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.04em;
}
.rating-big .stars { font-size: 20px; margin: 4px 0; color: var(--accent); }
.rating-big .total { font-size: 13px; color: var(--ink-3); }

.rating-bars { display: flex; flex-direction: column; gap: 8px; }
.rating-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.rating-bar .bar {
  flex: 1;
  height: 8px;
  background: var(--cream);
  border-radius: 999px;
  overflow: hidden;
}
.rating-bar .fill {
  height: 100%;
  background: var(--accent);
}

.review-list { display: flex; flex-direction: column; gap: 18px; }
.review {
  padding: 22px;
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
}
.review-head .author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
  font-size: 13px;
}
.review-head .date { color: var(--ink-3); font-size: 12px; }
.review .stars { margin-bottom: 8px; font-size: 14px; color: var(--accent); }
.review p { color: var(--ink-2); line-height: 1.6; font-size: 14px; }

.review-form {
  margin-top: 30px;
  padding: 28px;
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.review-form h4 { margin-bottom: 16px; font-size: 18px; }
.star-pick {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  font-size: 1.4rem;
}
.star-pick span {
  cursor: pointer;
  color: var(--ink-3);
  transition: color 0.15s;
}
.star-pick span.active,
.star-pick span:hover { color: var(--accent); }

/* ===========================================
   CART
   =========================================== */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  align-items: start;
}
.cart-items {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto auto;
  gap: 20px;
  padding: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line-2);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-image {
  width: 100px;
  height: 100px;
  border-radius: var(--radius);
  background: var(--rose);
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  overflow: hidden;
}
.cart-item-image > img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info h4 { font-size: 15px; margin-bottom: 4px; font-weight: 600; }
.cart-item-info .meta { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; }
.cart-item-info .price { font-weight: 700; color: var(--ink); }
.cart-item-total { font-weight: 700; font-size: 17px; color: var(--ink); }
.cart-item .remove-btn {
  color: var(--ink-3);
  padding: 8px;
  border-radius: 999px;
  transition: all 0.15s;
}
.cart-item .remove-btn:hover { color: var(--accent); background: var(--cream); }

.cart-summary {
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 28px;
  position: sticky;
  top: 160px;
}
.cart-summary h3 {
  margin-bottom: 18px;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  color: var(--ink-2);
  font-size: 14px;
}
.summary-row.total {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 18px;
  color: var(--ink);
  font-weight: 700;
  font-size: 18px;
}
.summary-row.total .num {
  color: var(--ink);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.coupon-row {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.coupon-row input {
  flex: 1;
  padding: 0 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  height: 40px;
  outline: none;
}
.cart-summary .btn { width: 100%; margin-top: 18px; }

/* ===========================================
   CHECKOUT
   =========================================== */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  align-items: start;
}
.checkout-section {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 20px;
}
.checkout-section h3 {
  font-size: 17px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
  color: white;
  font-size: 13px;
  font-weight: 700;
}

.payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.pay-method {
  padding: 18px;
  background: var(--cream);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.pay-method.active {
  border-color: var(--ink);
  background: white;
}
.pay-method .icon { font-size: 1.6rem; margin-bottom: 6px; }
.pay-method .name { font-size: 13px; font-weight: 600; }

/* ===========================================
   ACCOUNT
   =========================================== */
.account-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  align-items: start;
}
/* min-width:0 evita que un hijo con contenido no-wrap (botón largo, tabla, etc.)
   fuerce a la columna del grid a crecer más allá del viewport. Sin esto, en
   móvil el "Acceder a {curso largo}" desbordaba el panel y arrastraba todo. */
.account-layout > * { min-width: 0; }
.account-content { max-width: 100%; }
.account-sidebar {
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 160px;
}
.account-user {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.account-user .avatar {
  width: 70px;
  height: 70px;
  font-size: 22px;
  margin: 0 auto 10px;
}
.account-user .name { font-weight: 700; margin-bottom: 2px; font-size: 15px; }
.account-user .email { font-size: 12px; color: var(--ink-3); }

.account-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}
.account-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}
.account-nav a:hover,
.account-nav a.active {
  background: var(--bg);
  color: var(--accent);
}

.account-content {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 32px;
}
.account-content h2 { margin-bottom: 24px; font-size: 24px; letter-spacing: -0.02em; }

.order-card {
  padding: 20px;
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}
.order-head .id { font-weight: 700; font-size: 14px; }
.order-head .date { color: var(--ink-3); font-size: 13px; }

.status-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-pending { background: rgba(217, 162, 65, 0.15); color: var(--warn); }
.status-shipped { background: rgba(124, 92, 255, 0.15); color: var(--ink); }
.status-delivered { background: rgba(116, 175, 116, 0.15); color: var(--success); }

.order-items-mini {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.order-thumb {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--rose);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  overflow: hidden;
}
.order-thumb > img { width: 100%; height: 100%; object-fit: cover; }
.order-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 10px;
}
.order-foot .total { font-size: 17px; font-weight: 700; }

/* ===========================================
   ADMIN
   =========================================== */
.admin-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 80px);
}
.admin-sidebar {
  background: var(--cream);
  border-right: 1px solid var(--line-2);
  padding: 30px 20px;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}
.admin-nav { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}
.admin-nav a:hover,
.admin-nav a.active { background: var(--bg); color: var(--accent); }

.admin-main { padding: 32px; }
.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
  flex-wrap: wrap;
  gap: 16px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}
.stat-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 24px;
}
.stat-card .lbl {
  color: var(--ink-3);
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stat-card .num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-card .delta { font-size: 12px; margin-top: 6px; }
.stat-card .delta.up { color: var(--success); }
.stat-card .delta.down { color: var(--accent); }

.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bg);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
}
.data-table th {
  background: var(--cream);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 700;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--cream); }

.data-table .actions {
  display: flex;
  gap: 6px;
}
.data-table .actions button {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
  border: none;
}
.data-table .actions .edit-btn:hover { color: var(--accent); background: var(--accent-soft); }
.data-table .actions .delete-btn:hover { color: white; background: var(--accent); }

.admin-dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.admin-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ===========================================
   CURSOS
   =========================================== */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.course-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--line);
}
.course-image {
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  position: relative;
  overflow: hidden;
}
.course-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.35) 12px 13px);
  pointer-events: none;
}
.course-image > * { position: relative; z-index: 2; }
.course-image > img { width: 100%; height: 100%; object-fit: cover; }
.course-image.cat-tech, .course-image.cat-marketing, .course-card:nth-child(1) .course-image { background: var(--rose); }
.course-image.cat-design, .course-card:nth-child(2) .course-image { background: var(--mint); }
.course-image.cat-photo, .course-card:nth-child(3) .course-image { background: var(--butter); }
.course-image.cat-business, .course-card:nth-child(4) .course-image { background: var(--lilac); }
.course-card:nth-child(5) .course-image { background: var(--sky); }
.course-card:nth-child(6) .course-image { background: var(--cream-2); }

.course-level {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  background: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  z-index: 3;
}

.course-info {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.course-cat {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.course-info h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.course-instructor {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.course-instructor .avatar { width: 28px; height: 28px; font-size: 11px; }

.course-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-3);
  flex-wrap: wrap;
}

.course-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  margin-top: auto;
}
.course-foot .price { font-size: 22px; font-weight: 700; color: var(--ink); }
.course-foot .price-old {
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: line-through;
  margin-left: 6px;
  font-weight: 500;
}

/* Course detail */
.course-hero {
  background: var(--rose);
  padding: 60px;
  border-radius: var(--radius-lg);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
/* CRÍTICO: forzar min-width:0 en los hijos del grid para que palabras largas
   no expandan las celdas y rebasen el viewport en mobile.
   También permitir wrap de palabras largas como "complementaria". */
.course-hero > * {
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.course-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
}
.course-hero .desc {
  color: var(--ink-2);
  font-size: 16px;
  margin-bottom: 24px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.course-stats {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 18px;
}
.course-stats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.course-buy-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 160px;
}
.course-buy-card .price-big {
  font-size: 40px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  /* "S/ 199.00" se rompía en el espacio entre la moneda y el número en
     viewports estrechos (≤360 px). Forzamos a que se mantengan juntos. */
  white-space: nowrap;
}
.course-buy-card .price-old { white-space: nowrap; }
.course-buy-card .features {
  list-style: none;
  margin: 22px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.course-buy-card .features li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.course-buy-card .features li::before {
  content: '✓';
  color: var(--success);
  font-weight: 700;
}

.course-detail-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  margin-top: 40px;
}
.course-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  list-style: none;
  margin-bottom: 40px;
}
.course-bullets li {
  display: flex;
  gap: 10px;
  color: var(--ink-2);
  font-size: 14px;
}
.bullet-tick { color: var(--success); font-weight: 700; }

.module-list { display: flex; flex-direction: column; gap: 12px; }
.module {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.module-head {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  font-size: 14px;
}
.module-head .num {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  text-align: center;
  line-height: 28px;
  font-size: 12px;
  margin-right: 12px;
}
.module-head .meta { font-size: 12px; color: var(--ink-3); font-weight: 500; }

.module-lessons {
  padding: 0 22px 18px 62px;
  display: none;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
}
.module.open .module-lessons { display: flex; }
.module-lessons .lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line-2);
}
.module-lessons .lesson:first-child { border-top: none; }
.module-lessons .lesson .duration {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12px;
}

.instructor-card {
  background: var(--cream);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.instructor-avatar {
  width: 80px; height: 80px;
  font-size: 24px;
  flex-shrink: 0;
}
.instructor-stats {
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--ink-2);
  flex-wrap: wrap;
}

/* ===========================================
   GIFT LISTS
   =========================================== */
.giftlist-hero {
  background: var(--rose);
  border-radius: var(--radius-lg);
  padding: 64px;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  overflow: hidden;
}
.giftlist-hero::before {
  content: '🎀';
  position: absolute;
  top: -20px;
  right: 30px;
  font-size: 8rem;
  opacity: 0.25;
}
.giftlist-hero::after {
  content: '🎁';
  position: absolute;
  bottom: -10px;
  left: 20px;
  font-size: 6rem;
  opacity: 0.2;
}
.giftlist-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  color: var(--ink);
}
.giftlist-hero p {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 580px;
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
  line-height: 1.6;
}
.giftlist-hero .actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.feature {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.feature h4 { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.feature p { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }

.giftlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 24px;
}
.giftlist-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.giftlist-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); }

.giftlist-cover {
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  position: relative;
  overflow: hidden;
}
.giftlist-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.35) 12px 13px);
  pointer-events: none;
}
.giftlist-cover > * { position: relative; z-index: 2; }
.giftlist-cover.evt-baby { background: var(--rose); }
.giftlist-cover.evt-wedding { background: var(--cream-2); }
.giftlist-cover.evt-birthday { background: var(--mint); }
.giftlist-cover.evt-other { background: var(--lilac); }
.giftlist-cover.evt-housewarming { background: var(--butter); }

.giftlist-cover .badge-evt {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: white;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.giftlist-info { padding: 22px; }
.giftlist-info h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.giftlist-info .owner {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.giftlist-info .stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-3);
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.progress-track {
  height: 6px;
  background: var(--cream-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 14px;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.giftlist-detail-hero {
  background: var(--rose);
  border-radius: var(--radius-lg);
  padding: 56px;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.giftlist-detail-hero h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
  color: var(--ink);
}
.giftlist-detail-hero .owner {
  font-size: 16px;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.giftlist-detail-hero .message {
  max-width: 580px;
  margin: 0 auto 24px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.7;
}
.giftlist-detail-hero .progress-block {
  max-width: 480px;
  margin: 0 auto;
}
.giftlist-detail-hero .progress-track { background: rgba(255,255,255,0.7); }

.giftlist-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 30px;
  align-items: start;
}

.gift-item {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 18px;
  align-items: center;
  transition: all 0.15s;
}
.gift-item.gifted {
  opacity: 0.55;
  background: var(--cream);
}
.gift-item .img {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  background: var(--rose);
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  overflow: hidden;
}
.gift-item .img > img { width: 100%; height: 100%; object-fit: cover; }
.gift-item h4 { font-size: 15px; margin-bottom: 4px; font-weight: 600; }
.gift-item .qty { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.gift-item .price { font-weight: 700; color: var(--ink); }

.gifted-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--mint);
  color: var(--success);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===========================================
   MODAL
   =========================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 24, 0.45);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  animation: fadeIn 0.2s;
}
.modal-backdrop.active { display: flex; }
.modal {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.3s;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.modal-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.modal-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  transition: all 0.15s;
}
.modal-close:hover { background: var(--cream); color: var(--ink); }

/* ===========================================
   TOAST
   =========================================== */
.toast-container {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 20px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 380px;
  animation: slideInRight 0.3s;
  pointer-events: all;
  border-left: 4px solid var(--success);
}
.toast.error { border-left-color: var(--accent); }
.toast.warn  { border-left-color: var(--warn); }
.toast.info  { border-left-color: var(--ink); }
.toast .icon { font-size: 1.2rem; }
.toast.success .icon { color: var(--success); }
.toast.error .icon { color: var(--accent); }
.toast.warn .icon { color: var(--warn); }
.toast.info .icon { color: var(--ink); }
.toast .msg { font-size: 14px; flex: 1; color: var(--ink); }

/* ===========================================
   ANIMACIONES
   =========================================== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.float { animation: pulse 3s ease-in-out infinite; }

/* ===========================================
   UTILS
   =========================================== */
.text-center { text-align: center; }
.text-dim { color: var(--ink-2); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 20px; }
.mb-2 { margin-bottom: 20px; }
.mt-4 { margin-top: 40px; }
.hidden { display: none !important; }

.section-soft {
  background: var(--rose);
  border-radius: var(--radius-lg);
  padding: 56px;
  margin: 30px 0;
}

/* ============================================
   TESTIMONIOS · responsive
   ============================================ */
.testimonials-block {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 64px;
  margin: 0;
}
.testimonials-head {
  margin-bottom: 32px;
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial-card {
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(20, 20, 30, 0.04);
}
.testimonial-card .t-stars {
  color: var(--accent);
  font-size: 14px;
  letter-spacing: 1px;
}
.testimonial-card .t-quote {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
}
.testimonial-card .t-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-card .t-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.testimonial-card .t-meta {
  font-size: 11px;
  color: var(--ink-3);
}

/* Tablet: 2 columnas */
@media (max-width: 900px) {
  .testimonials-block { padding: 40px 28px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .testimonial-card { padding: 20px; }
}

/* Móvil: carrusel horizontal con snap (más bonito que stack vertical) */
@media (max-width: 640px) {
  .testimonials-block {
    padding: 32px 0 28px;
    border-radius: 22px;
  }
  .testimonials-head {
    margin-bottom: 20px;
    padding: 0 22px;
  }
  .testimonials-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    padding: 4px 22px 22px;
    margin: 0 -1px;          /* compensa el padding interno */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--rose) transparent;
  }
  .testimonials-grid::-webkit-scrollbar { height: 6px; }
  .testimonials-grid::-webkit-scrollbar-thumb { background: var(--rose); border-radius: 3px; }
  .testimonial-card {
    flex: 0 0 86%;            /* cada tarjeta ocupa 86% del ancho */
    scroll-snap-align: start;
    padding: 22px;
  }
  .testimonial-card .t-quote { font-size: 14px; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .values { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  .hero-slide { grid-template-columns: 1fr; min-height: 500px; }
  .hero-text { padding: 64px 32px 0; max-width: 100%; }
  .hero-visual-niuvo { min-height: 320px; }
  .hero-image-niuvo { width: 240px; }
  .hero-float { display: none; }
  .hero-dots { left: 32px; }

  .product-detail { grid-template-columns: 1fr; gap: 30px; }
  .product-gallery { position: static; }
  .gallery-main { font-size: 8rem; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .catalog-layout { grid-template-columns: 1fr; position: relative; }

  /* Botón Filtros visible en móvil */
  .filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line-2);
    background: var(--bg);
    color: var(--ink);
    font-weight: 600;
    padding: 10px 16px;
  }
  .filter-toggle-btn:hover { background: var(--cream); }

  /* Filter panel se convierte en drawer lateral */
  .filter-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 88vw);
    z-index: 200;
    border-radius: 0;
    border: 0;
    border-right: 1px solid var(--line-2);
    padding: 0;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
  }
  .filter-panel.open { transform: translateX(0); }

  /* Header del drawer (visible en móvil) */
  .filter-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-2);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .filter-panel-head h3 {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 700;
  }
  .filter-close:hover { background: var(--cream); }

  /* Padding para los filtros dentro del drawer */
  .filter-panel > .filter-group { padding: 0 22px; margin-top: 22px; }
  .filter-panel > .filter-group:first-of-type { margin-top: 22px; }
  .filter-panel > .filter-actions {
    padding: 18px 22px;
    border-top: 1px solid var(--line-2);
    background: var(--bg);
    position: sticky;
    bottom: 0;
    margin-top: auto;
  }

  /* Backdrop */
  .filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(45, 37, 32, 0.45);
    backdrop-filter: blur(4px);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  .filter-backdrop.active {
    opacity: 1;
    pointer-events: all;
  }

  /* Toolbar del catálogo */
  .catalog-toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }
  .catalog-toolbar .results-count { flex: 1; min-width: 0; font-size: 0.88rem; }
  .account-layout { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .course-hero { grid-template-columns: 1fr; gap: 30px; padding: 24px; }
  .course-buy-card { position: static; }
  .course-detail-grid { grid-template-columns: 1fr; }
  .giftlist-detail-grid { grid-template-columns: 1fr; }
  .banner-pair { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; padding: 48px 32px; }
  .admin-dash-grid, .admin-stats-grid { grid-template-columns: 1fr; }

  section { padding: 64px 0; }
}

@media (max-width: 900px) {
  /* Header móvil */
  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    border: none;
    position: relative;
  }
  .menu-toggle:hover { background: var(--cream); }
  /* Hamburger ↔ X: muestra solo uno según el estado del menú */
  .menu-toggle .icon-menu,
  .menu-toggle .icon-x { transition: opacity 0.18s, transform 0.18s; }
  .menu-toggle .icon-x { display: none; }
  .menu-toggle.open .icon-menu { display: none; }
  .menu-toggle.open .icon-x { display: block; }
  .menu-toggle.open { background: var(--cream); }

  .header-inner { grid-template-columns: auto auto 1fr auto; gap: 12px; }
  .search-bar { display: none; }

  .main-nav {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line-2);
    padding: 6px 24px 14px;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    /* Compensa el `top: 80px`: con solo -110% el último item del menú
       (Outlet) se asomaba 40 px en el viewport. Ahora se desliza también
       los 80 px del offset, quedando 100% fuera de pantalla. */
    transform: translateY(calc(-100% - 80px));
    transition: transform 0.25s ease-out;
    box-shadow: var(--shadow);
    z-index: 50;
  }
  .main-nav.open { transform: translateY(0); }
  /* El container del nav tiene gap:36px inline (para desktop horizontal).
     En móvil al colapsar a columna ese gap se aplicaba en vertical y dejaba
     enormes huecos entre items. Lo sobrescribimos para que queden pegados. */
  .main-nav > .container { gap: 0 !important; }
  .main-nav a {
    height: auto;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-2);
    justify-content: flex-start;
    width: 100%;
    font-size: 15px;
  }
  .main-nav a::after { display: none; }
  .main-nav a:last-child { border-bottom: none; }

  /* Backdrop: oscurece el resto cuando el menú está abierto.
     Tap fuera = cerrar (manejado en components.js). */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    top: 80px;
    background: rgba(20, 18, 28, 0.35);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 40;
  }
  .nav-backdrop.active { opacity: 1; pointer-events: auto; }
}
/* En desktop el backdrop no existe */
.nav-backdrop { display: none; }
@media (max-width: 900px) {
  .nav-backdrop { display: block; }
}

@media (max-width: 768px) {
  .container { padding: 0 16px; }
  section { padding: 48px 0; }

  .topbar-inner { height: auto; padding: 8px 0; flex-direction: column; gap: 4px; }
  .topbar-ticker { gap: 14px; font-size: 11px; }
  .topbar-right { display: none; }

  .header-inner { height: 70px; gap: 8px; }
  .logo { font-size: 22px; }

  /* Hero */
  .hero, .hero-slide { min-height: 460px; }
  .hero-text { padding: 48px 24px 0; }
  /* Antes había aquí una regla que aplastaba el CTA del hero a 46px de alto y
     font-size 13px, anulando el bloque "principal" del CTA móvil definido más
     arriba (líneas ~500-509). Ese bloque ya da el botón gordo y prominente
     que queremos en móvil; eliminamos la sobreescritura. */
  /* Círculo del hero más grande en móvil para que el producto se vea con más
     presencia. Sin desbordar — el viewport mínimo (~360 px) sigue cabiendo. */
  .hero-visual-niuvo { min-height: 360px; padding-bottom: 30px; }
  .hero-image-niuvo { width: 280px; }
  /* Slider del hero: en móvil hacemos las flechas un poco más grandes para
     que sean cómodas al toque y los dots indicadores más gruesos (antes eran
     finitos de 4 px de alto, casi imposibles de tocar). */
  .hero-arrow { width: 44px; height: 44px; }
  .hero-arrow.prev { left: 12px; }
  .hero-arrow.next { right: 12px; }
  .hero-dots { left: 24px; bottom: 20px; gap: 10px; }
  .hero-dot { width: 26px; height: 8px; }
  .hero-dot.active { width: 40px; height: 8px; }

  /* Sections */
  .section-head h2,
  .section-title { font-size: 28px; }
  .section-head { margin-bottom: 24px; }
  .section-soft { padding: 32px 24px; border-radius: var(--radius-lg); margin: 20px 0; }

  /* Heroes interiores */
  .course-hero, .giftlist-hero, .giftlist-detail-hero { padding: 22px 18px; border-radius: var(--radius-lg); }
  .course-hero h1 { font-size: 24px; }
  .giftlist-hero h1, .giftlist-detail-hero h1 { font-size: 26px; }

  /* Banners */
  .banner { padding: 36px; min-height: 280px; }
  .banner h3 { font-size: 26px; }

  /* Newsletter */
  .newsletter { padding: 32px 24px; gap: 24px; }
  .newsletter h3 { font-size: 26px; }
  /* Sin esto, los hijos del grid (con `min-width: auto` por defecto) hacían
     que el track se inflara más allá del padding del card y el contenido se
     salía 40 px por la derecha. */
  .newsletter > * { min-width: 0; max-width: 100%; }
  .newsletter p { max-width: 100%; }
  /* Si la fila "input + Suscribirme" sigue apretada, dejamos que el botón
     pueda envolver y el form ocupe todo el ancho disponible. */
  .nl-form { width: 100%; }
  .nl-form input { padding: 0 16px; }
  .nl-form button { padding: 0 20px; white-space: nowrap; }

  /* Cards */
  .values { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .course-grid { grid-template-columns: 1fr; gap: 16px; }
  .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card { padding: 18px 8px; }
  .cat-card .emoji, .cat-thumb { width: 64px; height: 64px; font-size: 1.8rem; margin-bottom: 12px; }
  .cat-card h4 { font-size: 14px; }

  .product-info { padding: 14px; gap: 6px; }
  .product-info h3 { font-size: 13px; }
  .price-now { font-size: 16px; }
  .product-actions { padding: 0 14px 14px; gap: 6px; }

  /* Reviews */
  .reviews-overview { grid-template-columns: 1fr; gap: 24px; }

  /* Detalle */
  .product-detail-info h1 { font-size: 26px; }
  .detail-price .price-now { font-size: 28px; }
  /* Layout en móvil de la fila de compra. Antes eran dos filas porque estaba
     el selector de cantidad ("qty fav" arriba y el botón abajo). Al quitarlo,
     el corazón se quedaba solo arriba con un hueco enorme debajo. Ahora van
     los dos en la misma línea: el botón se estira y el corazón es un círculo. */
  .qty-add {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "cart fav";
    align-items: center;
    gap: 10px;
  }
  .qty-add #addToCartBtn { grid-area: cart; flex: none; width: 100%; }
  .qty-add #wishBtn {
    grid-area: fav;
    flex: none;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    aspect-ratio: 1;
  }
  .detail-meta { grid-template-columns: 1fr; gap: 10px; padding: 16px; }

  /* Cart */
  .cart-item { grid-template-columns: 70px 1fr; grid-template-rows: auto auto; padding: 14px; gap: 14px; position: relative; }
  .cart-item-image { grid-row: 1 / 3; width: 70px; height: 70px; }
  .cart-item-total { grid-column: 2; font-size: 15px; }
  .cart-item .remove-btn { position: absolute; top: 8px; right: 8px; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }

  /* Tablas */
  .data-table { min-width: 580px; font-size: 13px; }
  .data-table th, .data-table td { padding: 10px 12px; white-space: nowrap; }

  /* Account */
  .account-content { padding: 22px; }
  .account-content h2 { font-size: 20px; }

  /* Admin */
  .admin-main { padding: 22px 16px; }
  .stat-grid { gap: 12px; margin-bottom: 22px; }
  .stat-card { padding: 18px; }
  .stat-card .num { font-size: 22px; }

  /* Filtros catálogo */
  .catalog-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .catalog-toolbar select { width: 100%; }

  /* Auth */
  .auth-card { padding: 32px 24px; }

  /* Modal */
  .modal { padding: 24px; }

  /* Curso detalle */
  .course-bullets { grid-template-columns: 1fr; }
  .instructor-card { padding: 22px; gap: 16px; flex-direction: column; align-items: stretch; }
  .instructor-avatar { width: 60px; height: 60px; font-size: 18px; }

  /* Lista regalo detalle */
  .gift-item { grid-template-columns: 60px 1fr; gap: 12px; padding: 14px; }
  .gift-item .img { width: 60px; height: 60px; font-size: 1.6rem; }
  .gift-item .actions-col { grid-column: 1 / -1; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer { padding: 56px 0 24px; }
}

@media (max-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-main { font-size: 6rem; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .tab-headers button { padding: 12px 16px; font-size: 13px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .section-head h2, .section-title { font-size: 22px; }
  .section-head { flex-direction: column; align-items: flex-start; }

  .hero, .hero-slide { min-height: 420px; }
  .hero-text { padding: 40px 16px 0; }
  .hero-title, .hero h1 { font-size: 28px; }
  .hero-desc, .hero p.lead { font-size: 14px; }
  .hero-cta { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-cta .btn { width: 100%; }

  .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  .course-hero h1, .giftlist-hero h1, .giftlist-detail-hero h1 { font-size: 22px; }

  .product-actions { flex-direction: column; }
  .product-actions .btn { width: 100%; }

  .modal { padding: 20px; border-radius: var(--radius-lg); }

  .gift-item { grid-template-columns: 50px 1fr; padding: 12px; gap: 10px; }
  .gift-item .img { width: 50px; height: 50px; font-size: 1.4rem; }
  .gift-item h4 { font-size: 13px; }

  .btn { height: 46px; padding: 0 20px; font-size: 13px; }

  .eyebrow, .chip { font-size: 11px; padding: 5px 12px; }

  .auth-social { grid-template-columns: 1fr; }

  .banner { padding: 28px; }
  .banner h3 { font-size: 22px; }
}

@media (max-width: 360px) {
  .header-inner { gap: 6px; }
  .icon-btn { width: 38px; height: 38px; }
  .logo-text { display: none; }
  .hero-title, .hero h1 { font-size: 24px; }
  .section-head h2, .section-title { font-size: 20px; }
}

/* ===================================================================
   RESPONSIVE FIX · Páginas de curso
   ----------------------------------------------------
   DOS bugs separados que arreglar en mobile:

   BUG 1 — .course-buy-card desbordaba 64px:
     padding:32px con box-sizing:content-box (default) hacía que el
     width:100% se sumara los 64px de padding. Solución: box-sizing
     border-box + padding horizontal pequeño.

   BUG 2 — .course-hero (grid) desbordaba ~47px:
     Las celdas de un display:grid tienen min-width:auto por defecto,
     que NO encoge debajo del contenido natural. Con palabras largas
     como "complementaria", la celda se expande y rebasa el viewport.
     Solución: min-width:0 en las celdas del grid + box-sizing.
   =================================================================== */
@media (max-width: 1024px) {
  /* BUG 1: la tarjeta de compra */
  .course-buy-card,
  .course-buy-card * {
    box-sizing: border-box;
  }
  .course-buy-card {
    padding: 24px 18px;        /* era 32px en todos los lados; 18px horizontal da aire sin desbordar */
  }

  /* BUG 2: el hero del curso (grid) */
  .course-hero {
    box-sizing: border-box;
  }
  .course-hero > * {
    min-width: 0;              /* clave: que las celdas del grid encojan */
    box-sizing: border-box;
  }
  /* El H1 con "complementaria" debe poder romper la palabra si no entra */
  .course-hero h1,
  .course-hero .desc {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* Ajustes finos para iPhone 12 Pro y similares */
@media (max-width: 768px) {
  /* Card de compra del curso: más aire, tipografía grande y jerarquía clara.
     Antes los items aparecían apretados con tipografía pequeña en móvil. */
  .course-buy-card { padding: 26px 20px; border-radius: 18px; }
  .course-buy-card .price-big { font-size: 38px; line-height: 1.1; }
  .course-buy-card .price-old { font-size: 15px; }
  .course-buy-card .features  {
    margin: 22px 0 24px;
    font-size: 15px;
    gap: 14px;
    line-height: 1.4;
  }
  .course-buy-card .features li { gap: 12px; align-items: flex-start; }
  .course-buy-card .features li::before {
    /* Check verde en círculo para mejor jerarquía visual y más legibilidad */
    content: '✓';
    width: 22px; height: 22px;
    background: oklch(0.94 0.06 145);
    color: oklch(0.55 0.16 145);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
  }
  /* Espacio entre los 2 botones (carrito + acceder) */
  .course-buy-card .btn-block { margin-top: 10px; }
  .course-buy-card .btn-block:first-of-type { margin-top: 4px; }

  /* Caja del cupón: más respiración, label más visible, botón Aplicar
     proporcional al input. */
  .course-buy-card #couponBox { padding: 16px !important; margin-top: 18px !important; border-radius: 14px !important; }
  .course-buy-card #couponBox label { font-size: 12px !important; margin-bottom: 10px !important; }
  .course-buy-card #couponBox input {
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    /* Sin esto el input retiene su min-width: auto (≈197 px = 20 chars implícitos
       del atributo `size`) y empuja al botón "Aplicar" fuera del card. */
    min-width: 0 !important;
    width: 100% !important;
  }
  .course-buy-card #couponBox > div { gap: 8px !important; }
  .course-buy-card #couponBox button {
    padding: 0 22px !important;
    height: 44px;
    flex-shrink: 0;
  }

  .course-stats { gap: 12px; font-size: 12px; margin-top: 14px; }

  .module-head { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .module-head > div:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
  .module-head .num  { width: 26px; height: 26px; font-size: 13px; flex-shrink: 0; }
  .module-head .meta { font-size: 11px; flex-shrink: 0; }
  .module-lessons { padding: 0 16px 14px 16px; }
  .module-lessons .lesson { flex-wrap: wrap; gap: 8px; font-size: 13px; }
  .module-lessons .lesson .duration { margin-left: auto; font-size: 11px; }
}

/* ===== curso-contenido.html · Visor de lecciones ===== */
@media (max-width: 980px) {
  .lesson-side  { position: static; max-height: none; margin-top: 18px; }
  .lesson-shell { padding: 16px 14px; gap: 16px; }
}
@media (max-width: 640px) {
  .lesson-info h1 { font-size: 1.25rem; }
  .lesson-info .meta { font-size: 0.85rem; }
  /* En móvil apilamos los botones de navegación de lección verticalmente:
     full-width, con texto que envuelve y altura auto. Antes intentaban
     compartir línea con `flex: 1` y los títulos largos se cortaban fuera
     del viewport por culpa del `white-space: nowrap` global de `.btn`. */
  .lesson-nav { flex-direction: column; gap: 8px; }
  .lesson-nav .btn {
    width: 100%;
    flex: none;
    height: auto;
    min-height: 46px;
    padding: 12px 18px;
    white-space: normal;
    line-height: 1.3;
    text-align: left;
    font-size: 13px;
    overflow-wrap: anywhere;
    justify-content: flex-start;
  }
  /* El botón "Marcar como vista" sí queda centrado (es una acción, no nav) */
  .lesson-nav #markWatchedBtn { text-align: center; justify-content: center; }
  .lesson-row { padding: 9px 10px; font-size: 0.85rem; }
  .lesson-row .ico { width: 26px; height: 26px; font-size: 12px; }
  .lesson-empty .emoji { font-size: 3rem; }
  .lesson-empty h3 { font-size: 1.1rem; }
}

/* ===========================================
   BOLITAS DE COLOR EN LA TARJETA DE PRODUCTO
   El círculo se ve de 18 px pero el área que se puede pulsar es de 24 px
   (padding transparente), que es el mínimo cómodo con el dedo.
   =========================================== */
.color-dots {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 2px 0 6px;
  flex-wrap: wrap;
}
.color-dot {
  width: 24px;
  height: 24px;
  padding: 3px;              /* 18 px visibles + 3 px de margen pulsable */
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  background-clip: content-box !important;
  outline: 1.5px solid transparent;
  outline-offset: -2px;
  transition: outline-color .15s, transform .15s;
}
.color-dot:hover { transform: scale(1.12); }
.color-dot.active { outline-color: var(--ink); }

.color-dot-more {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  padding: 0 5px;
  line-height: 24px;
  white-space: nowrap;
}
.color-dot-more:hover { color: var(--accent); }

/* Con el dedo no hay "hover": el círculo activo se marca solo al pulsar */
@media (hover: none) {
  .color-dot:hover { transform: none; }
}

/* ===========================================
   CARRUSEL DE PRODUCTOS EN MÓVIL
   En pantallas pequeñas, las filas de productos de la portada dejan de ser
   una rejilla de 2 columnas (donde las fotos salen diminutas) y pasan a
   deslizarse hacia la derecha. Cada tarjeta ocupa el 84% del ancho, así el
   trocito de la siguiente que asoma indica que hay más.

   Solo afecta a las rejillas marcadas con .is-carousel (las de la portada).
   El catálogo de /productos sigue en rejilla: ahí interesa ver muchos de un
   vistazo, no pasarlos de uno en uno.
   =========================================== */
@media (max-width: 768px) {
  .product-grid.is-carousel {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--rose) transparent;
  }
  .product-grid.is-carousel::-webkit-scrollbar { height: 6px; }
  .product-grid.is-carousel::-webkit-scrollbar-track { background: transparent; }
  .product-grid.is-carousel::-webkit-scrollbar-thumb {
    background: var(--rose);
    border-radius: 3px;
  }
  .product-grid.is-carousel .product-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  /* Con la tarjeta casi a pantalla completa hay sitio para textos normales */
  .product-grid.is-carousel .product-info h3 { font-size: 15px; }
  .product-grid.is-carousel .price-now { font-size: 18px; }
}

/* ===========================================
   MÓVIL · TARJETAS SIN BOTONES
   Quitamos "Añadir" y "Ver" de las tarjetas en pantallas pequeñas: ocupaban
   la mitad de la tarjeta y ensuciaban la fila. Se sigue llegando al producto
   tocando la foto o el nombre, y desde su ficha se añade al carrito.
   =========================================== */
@media (max-width: 768px) {
  .product-card .product-actions { display: none; }
  /* Sin los botones, el bloque de texto necesita su propio aire abajo */
  .product-card .product-info { padding-bottom: 14px; }
}

/* ===========================================
   FICHA DE PRODUCTO · FILA DE COMPRA
   Al quitar el selector de cantidad quedaron solo dos elementos, y como
   `.qty-add .btn { flex: 1 }` alcanzaba también al botón de favorito, el
   corazón se iba solo a otra línea dejando un hueco enorme.
   Ahora: el botón de comprar ocupa todo el ancho y el corazón es un
   círculo fijo a su lado.
   =========================================== */
.qty-add {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.qty-add #wishBtn {
  flex: 0 0 50px;
  width: 50px;
  padding: 0;
  border-radius: 50%;
}
.qty-add #addToCartBtn { flex: 1 1 auto; min-width: 0; }

/* ===========================================
   BARRA DE COMPRA FIJA (ficha de producto, móvil)
   Aparece al bajar el 70% de la página, cuando el botón de comprar de
   arriba ya se perdió de vista. Solo en móvil: en escritorio el botón
   sigue visible en la columna de la derecha.
   =========================================== */
.buy-bar { display: none; }

@media (max-width: 768px) {
  .buy-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    /* Respeta la franja de gestos del iPhone */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -18px 28px -22px rgba(32, 30, 29, .55);
    /* Escondida por defecto: baja fuera de pantalla sin ocupar sitio */
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), visibility .35s;
  }
  .buy-bar.visible { transform: translateY(0); visibility: visible; }

  .buy-bar-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 54px;
    min-height: 52px;
    flex: none;
    border: none;
    background: none;
    color: var(--ink-2);
    font-family: inherit;
    cursor: pointer;
    padding: 0;
  }
  .buy-bar-icon span { font-size: 10px; letter-spacing: .04em; }
  .buy-bar-icon:active { color: var(--accent); }

  .buy-bar-cta {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    border-radius: 999px;
  }

  .buy-bar-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: #25d366;
    text-decoration: none;
  }
  .buy-bar-wa:active { background: #1fb855; }

  /* Que la barra no tape el final de la página */
  body:has(.buy-bar) { padding-bottom: 76px; }
}