/* =========================================================
   ABC School Supply — Rediseño a base de código
   Identidad real: amarillo + A roja / B azul / C verde.
   Cálido, editorial, con carácter — no genérico.
   ========================================================= */

:root {
  /* Colores de marca (del logo) */
  --yellow: #ffc61a;
  --yellow-deep: #f2a900;
  --yellow-soft: #fff2cc;
  --red: #e4231b;
  --red-soft: #fde3e1;
  --blue: #1f4fc4;
  --blue-soft: #e2e9fb;
  --green: #2fa93b;
  --green-soft: #e0f3e2;

  /* Anclas oscuras (del texto "School Supply") */
  --navy-900: #10193b;
  --navy-800: #16265c;
  --navy-700: #1e3579;
  --ink: #1a2340;
  --ink-soft: #55607a;
  --muted: #8a92a6;

  /* Neutros cálidos (crema, no gris frío) */
  --paper: #fffdf7;
  --cream: #fdf8ee;
  --cream-2: #f8f0df;
  --line: #efe6d4;
  --line-2: #e6dcc6;
  --white: #ffffff;

  /* Aliases de compatibilidad (admin/páginas internas) */
  --blue-600: var(--blue);
  --blue-500: var(--blue);
  --blue-400: #4d74d6;
  --blue-100: var(--blue-soft);
  --blue-50: #eef3fd;
  --gray-50: var(--cream);
  --gray-100: var(--cream-2);
  --line-strong: var(--line-2);

  /* Tipografía */
  --font-head: "Bricolage Grotesque", "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radios y sombras (más suaves, cálidas) */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --shadow-sm: 0 1px 2px rgba(30, 40, 80, .05), 0 2px 6px rgba(30, 40, 80, .04);
  --shadow-md: 0 10px 26px rgba(30, 40, 80, .09);
  --shadow-lg: 0 26px 60px rgba(20, 30, 70, .16);
  --shadow-yellow: 0 14px 30px rgba(242, 169, 0, .34);
  --shadow-navy: 0 16px 34px rgba(22, 38, 92, .26);

  --container: 1220px;
  --header-h: 88px;
  --ease: cubic-bezier(.22, .68, .16, 1);
  --ease-cine: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-draw: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
/* grano/textura sutil global */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 800; line-height: 1.08; color: var(--navy-800); letter-spacing: -.02em; }

/* ---------- Utilidades ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 26px; position: relative; z-index: 2; }
.section { padding: 90px 0; position: relative; }
.section--tight { padding: 58px 0; }
.section--paper { background: var(--paper); }
.section--cream { background: var(--cream-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--yellow); border-radius: 3px; }
.section-head { max-width: 660px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(28px, 3.8vw, 46px); margin: 16px 0 14px; }
.section-head p { color: var(--ink-soft); font-size: 17.5px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::before { display: none; }
.text-muted { color: var(--muted); }
.hide { display: none !important; }

/* Firma de marca: franja multicolor */
.ribbon { display: inline-flex; gap: 5px; }
.ribbon i { width: 30px; height: 7px; border-radius: 6px; display: block; }
.ribbon i:nth-child(1) { background: var(--red); }
.ribbon i:nth-child(2) { background: var(--yellow); }
.ribbon i:nth-child(3) { background: var(--green); }
.ribbon i:nth-child(4) { background: var(--blue); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 14px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--navy-800); color: #fff; box-shadow: var(--shadow-navy); }
.btn--primary:hover { background: var(--navy-900); transform: translateY(-3px); box-shadow: 0 20px 40px rgba(22,38,92,.32); }
.btn--yellow { background: var(--yellow); color: var(--navy-900); box-shadow: var(--shadow-yellow); }
.btn--yellow:hover { background: var(--yellow-deep); transform: translateY(-3px); box-shadow: 0 18px 38px rgba(242,169,0,.44); }
.btn--ghost { background: #fff; color: var(--navy-800); border: 2px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--navy-800); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn--light { background: rgba(255,255,255,.16); color: #fff; border: 2px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.btn--light:hover { background: rgba(255,255,255,.26); transform: translateY(-2px); }
.btn--sm { padding: 10px 18px; font-size: 13.5px; border-radius: 11px; }
.btn--block { width: 100%; }

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--white); border: 2px solid var(--line); color: var(--ink-soft);
  font-family: var(--font-head); transition: all .2s var(--ease); cursor: pointer;
}
.chip svg { width: 15px; height: 15px; }
.chip:hover { border-color: var(--yellow); color: var(--navy-800); }
.chip.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.badge {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px;
  font-size: 11px; font-weight: 800; font-family: var(--font-head);
  letter-spacing: .04em; text-transform: uppercase;
}
.badge--new { background: var(--blue); color: #fff; }
.badge--offer { background: var(--red); color: #fff; }
.badge--top { background: var(--yellow); color: var(--navy-900); }

/* =========================================================
   LOGO / BRAND MARK
   ========================================================= */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo { width: 72px; height: 72px; flex-shrink: 0; display: grid; place-content: center; transition: transform .3s var(--ease); }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.05); }
.brand-chip {
  display: grid; place-content: center; padding: 7px 11px; border-radius: 13px;
  background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-deep);
  font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: -.03em; line-height: 1;
}
.brand-chip b { display: inline; }
.brand-chip .r { color: var(--red); }
.brand-chip .b { color: var(--blue); }
.brand-chip .g { color: var(--green); }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-word .n { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy-800); letter-spacing: -.02em; }
.brand-word small { font-size: 9.5px; letter-spacing: .16em; font-weight: 700; color: var(--red); text-transform: uppercase; margin-top: 3px; }

.logo-circle { border-radius: 50%; box-shadow: var(--shadow-lg); background: #fff; }

/* =========================================================
   PRELOADER — show de entrada ABC
   ========================================================= */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-content: center; justify-items: center; gap: 24px;
  background: var(--navy-900); overflow: hidden;
}
#preloader.is-done { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; } /* legado (admin) */
.pre-glow { position: absolute; inset: 0; background: radial-gradient(900px 620px at 50% 30%, rgba(31,79,196,.5), transparent 70%), radial-gradient(760px 520px at 62% 85%, rgba(255,198,26,.14), transparent 62%); transition: opacity .4s; animation: glowPulse 3.4s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.pre-cols { position: absolute; inset: 0; display: flex; }
.pre-cols i { flex: 1; background: var(--navy-900); position: relative; transition: transform .68s cubic-bezier(.75,0,.15,1); }
.pre-cols i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; }
.pre-cols i:nth-child(1)::after { background: var(--red); }
.pre-cols i:nth-child(2)::after { background: var(--yellow); }
.pre-cols i:nth-child(3)::after { background: var(--green); }
.pre-cols i:nth-child(4)::after { background: var(--blue); }
.pre-scene { position: relative; z-index: 2; display: grid; justify-items: center; gap: 20px; }
.pre-scene > * { transition: transform .5s var(--ease), opacity .45s var(--ease); }
.pre-stage { position: relative; width: 250px; height: 250px; display: grid; place-content: center; }
.pre-ring { position: absolute; inset: 6px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.16); animation: spinRev 18s linear infinite; }
.pre-orbit { position: absolute; inset: 0; animation: spin 10s linear infinite; }
.pre-orbit .po { position: absolute; top: 50%; left: 50%; margin: -19px; transform: rotate(var(--a)) translateX(122px) rotate(calc(var(--a) * -1)); }
.pre-orbit .po i { display: grid; place-content: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 -3px 0 rgba(0,0,0,.2); animation: spinRev 10s linear infinite; }
.pre-orbit .po i svg { width: 18px; height: 18px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
.pre-logo { display: flex; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 36px; letter-spacing: -.03em; position: relative; z-index: 2; }
.pre-logo span { display: grid; place-content: center; width: 64px; height: 64px; border-radius: 18px; color: #fff; box-shadow: 0 18px 34px rgba(0,0,0,.38), inset 0 -5px 0 rgba(0,0,0,.22); transform-origin: 50% 100%; animation: preJump 1.7s cubic-bezier(.3,1.25,.45,1) infinite; }
.pre-logo span:nth-child(1) { background: var(--red); }
.pre-logo span:nth-child(2) { background: var(--blue); animation-delay: .13s; }
.pre-logo span:nth-child(3) { background: var(--green); animation-delay: .26s; }
@keyframes preJump {
  0%, 100% { transform: translateY(0) scale(1,1) rotate(0deg); }
  12% { transform: translateY(3px) scale(1.12,.84) rotate(0deg); }
  34% { transform: translateY(-32px) scale(.94,1.1) rotate(-6deg); }
  52% { transform: translateY(0) scale(1.1,.88) rotate(0deg); }
  68% { transform: translateY(-12px) scale(.98,1.05) rotate(4deg); }
  84% { transform: translateY(0) scale(1.03,.97) rotate(0deg); }
}
.pre-word { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .34em; text-transform: uppercase; text-align: center; padding-left: .34em; background: linear-gradient(90deg, rgba(255,255,255,.45), var(--yellow) 42%, #fff 50%, var(--yellow) 58%, rgba(255,255,255,.45)); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmerText 2.4s linear infinite; }
@keyframes shimmerText { to { background-position: -240% 0; } }
.pre-track { width: 220px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.pre-track i { display: block; height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, var(--red), var(--yellow), var(--green), var(--blue)); transition: width .2s ease-out; }
.pre-pct { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--yellow); margin-top: -6px; }
.pre-spark { position: absolute; z-index: 1; width: 8px; height: 8px; border-radius: 50%; animation: twinkle 1.9s ease-in-out infinite; }
@keyframes twinkle { 0%,100% { transform: scale(.25); opacity: .12; } 50% { transform: scale(1); opacity: .95; } }
/* fallback previo a JS */
.pre-bar { width: 200px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; }
.pre-bar i { display: block; height: 100%; width: 40%; border-radius: 5px; background: linear-gradient(90deg, var(--yellow), var(--yellow-deep)); animation: preBar 1.1s var(--ease) infinite; }
@keyframes preBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.pre-text { font-family: var(--font-head); font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--yellow); font-weight: 700; }
/* salida coreografiada */
#preloader.is-exit .pre-stage { transform: translateY(-46px) scale(.82); opacity: 0; }
#preloader.is-exit .pre-word { transform: translateY(-30px); opacity: 0; transition-delay: .05s; }
#preloader.is-exit .pre-track { transform: translateY(-24px) scaleX(.6); opacity: 0; transition-delay: .1s; }
#preloader.is-exit .pre-pct { transform: translateY(-20px); opacity: 0; transition-delay: .13s; }
#preloader.is-exit .pre-glow, #preloader.is-exit .pre-spark { opacity: 0; }
#preloader.is-away { background: transparent; }
#preloader.is-away .pre-cols i { transform: translateY(-102%); }
#preloader.is-away .pre-cols i:nth-child(2) { transition-delay: .07s; }
#preloader.is-away .pre-cols i:nth-child(3) { transition-delay: .14s; }
#preloader.is-away .pre-cols i:nth-child(4) { transition-delay: .21s; }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.topbar { background: var(--navy-900); color: rgba(255,255,255,.82); font-size: 13px; font-weight: 500; position: relative; z-index: 3; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.topbar a { color: rgba(255,255,255,.82); transition: color .2s; }
.topbar a:hover { color: var(--yellow); }
.topbar-left { display: flex; align-items: center; gap: 22px; }
.topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.topbar-item svg { width: 14px; height: 14px; color: var(--yellow); }
.topbar-right { display: flex; align-items: center; gap: 20px; }

#app-header { display: contents; } /* el sticky del header necesita al body como contenedor de scroll */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,253,247,.86); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); background: rgba(255,253,247,.94); }
/* Condensación cinemática al hacer scroll (solo transform/opacity: logo + hairline, sin animar height) */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--red), var(--yellow) 34%, var(--green) 67%, var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-cine); }
.site-header.is-scrolled::after { transform: scaleX(1); }
.nav { display: flex; align-items: center; gap: 26px; height: var(--header-h); }
.brand-logo { transition: transform .28s var(--ease-cine), box-shadow .3s var(--ease); }
.site-header.is-scrolled .brand-logo { transform: scale(.9); }

.nav-menu { display: flex; align-items: center; gap: 2px; margin-left: 10px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink-soft);
  padding: 10px 14px; border-radius: 11px; transition: color .2s, background .2s; position: relative;
}
.nav-link svg { width: 15px; height: 15px; transition: transform .25s; }
.nav-link:hover, .nav-link.is-active { color: var(--navy-800); background: var(--yellow-soft); }
.has-mega:hover .nav-link svg { transform: rotate(180deg); }

.nav-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn { position: relative; display: grid; place-content: center; width: 46px; height: 46px; border-radius: 13px; color: var(--navy-800); transition: background .2s, color .2s; }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn:hover { background: var(--yellow-soft); }
.icon-btn .count { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-content: center; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; border-radius: 999px; font-family: var(--font-head); border: 2px solid var(--cream); }
.nav-cta { margin-left: 6px; }
.burger { display: none; }

/* Mega menu */
.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(10px);
  width: 740px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 24px; opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 950;
}
.mega::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.has-mega:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mega-item { display: flex; gap: 13px; padding: 13px; border-radius: var(--r-md); transition: background .2s, transform .2s; }
.mega-item:hover { background: var(--cream); transform: translateY(-2px); }
.mega-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-content: center; color: #fff; }
.mega-ico svg { width: 22px; height: 22px; }
.mega-item h5 { font-family: var(--font-head); font-size: 14.5px; color: var(--navy-800); margin-bottom: 3px; }
.mega-item p { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.mega-foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.mega-foot span { font-size: 13.5px; color: var(--ink-soft); }

/* Mobile drawer */
.mobile-menu { position: fixed; inset: 0; z-index: 980; background: rgba(16,25,59,.5); opacity: 0; visibility: hidden; transition: opacity .3s; backdrop-filter: blur(2px); }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-panel { position: absolute; top: 0; right: 0; width: min(90%, 370px); height: 100%; background: var(--paper); padding: 22px; transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.mobile-menu.is-open .mobile-panel { transform: translateX(0); }
.mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mobile-link { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px; border-radius: 13px; font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--navy-800); border-bottom: 1px solid var(--line); }
.mobile-link:hover { background: var(--yellow-soft); }
.mobile-link svg { width: 18px; height: 18px; color: var(--muted); }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; padding: 70px 0 90px; overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -180px; right: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, var(--yellow-soft), transparent 68%); z-index: 0; }
.hero::after { content: ""; position: absolute; bottom: -140px; left: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, var(--blue-soft), transparent 70%); z-index: 0; opacity: .7; }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-flag { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 8px 7px 16px; box-shadow: var(--shadow-sm); margin-bottom: 24px; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--navy-800); }
.hero-flag .yr { display: inline-flex; align-items: center; gap: 6px; background: var(--navy-800); color: #fff; padding: 5px 12px; border-radius: 999px; font-size: 12px; }
.hero-flag .yr svg { width: 13px; height: 13px; color: var(--yellow); }
.hero h1 { font-size: clamp(38px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
.hero h1 .hl { position: relative; color: var(--red); display: inline-block; }
.hero h1 .hl svg { position: absolute; left: -2%; bottom: -14px; width: 104%; height: 16px; color: var(--yellow); z-index: -1; }
.hero h1 .hl.blue { color: var(--blue); }
.hero p.lead { font-size: 19px; color: var(--ink-soft); margin: 26px 0 32px; max-width: 508px; }
.hero-actions { display: flex; gap: 13px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 34px; margin-top: 42px; padding-top: 28px; border-top: 2px dashed var(--line-2); }
.hero-trust .num { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--navy-800); letter-spacing: -.02em; }
.hero-trust .num b { color: var(--red); }
.hero-trust .lbl { font-size: 13px; color: var(--muted); }

/* Hero visual: logo badge + bento tiles */
.hero-visual { position: relative; z-index: 2; display: grid; place-items: center; }
.hero-stage { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1/1; }
.hero-blob { position: absolute; inset: 8% 8% 8% 8%; border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; background: linear-gradient(150deg, var(--yellow), var(--yellow-deep)); box-shadow: var(--shadow-yellow); animation: blobMorph 9s ease-in-out infinite; }
@keyframes blobMorph { 0%,100% { border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%; } 50% { border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; } }
.hero-logo { position: absolute; inset: 0; margin: auto; width: 78%; height: 78%; z-index: 2; animation: floaty 6s ease-in-out infinite; }
.hero-logo img { width: 100%; height: 100%; }
.hero-tile { position: absolute; z-index: 3; background: #fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 13px 16px; display: flex; align-items: center; gap: 11px; }
.hero-tile .ti { width: 40px; height: 40px; border-radius: 11px; display: grid; place-content: center; color: #fff; flex-shrink: 0; }
.hero-tile .ti svg { width: 20px; height: 20px; }
.hero-tile small { display: block; font-size: 11px; color: var(--muted); }
.hero-tile strong { font-family: var(--font-head); font-size: 14.5px; color: var(--navy-800); }
.hero-tile--1 { top: 6%; left: -6%; animation: floaty 5s ease-in-out infinite; }
.hero-tile--2 { bottom: 14%; right: -8%; animation: floaty 6.5s ease-in-out infinite .5s; }
.hero-tile--3 { bottom: -2%; left: 6%; animation: floaty 5.6s ease-in-out infinite .3s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }

/* Marquee */
.marquee { border-top: 3px solid var(--navy-800); border-bottom: 3px solid var(--navy-800); background: var(--navy-800); overflow: hidden; }
.marquee-track { display: flex; gap: 46px; padding: 16px 0; width: max-content; animation: marquee 26s linear infinite; }
.marquee-item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; font-size: 17px; color: #fff; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.marquee-item svg { width: 18px; height: 18px; color: var(--yellow); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   CATEGORÍAS (bento)
   ========================================================= */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
#kitsGrid { grid-template-columns: repeat(3, 1fr); }
#steps { grid-template-columns: repeat(4, 1fr); }
.cat-card {
  position: relative; border-radius: var(--r-lg); padding: 28px; overflow: hidden;
  background: #fff; border: 1px solid var(--line); min-height: 210px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cat-card--wide { grid-column: span 2; }
.cat-card::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 180px; height: 180px; border-radius: 50%; background: var(--cc, var(--yellow)); opacity: .1; transition: transform .4s var(--ease), opacity .35s; }
.cat-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .3s; }
.cat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.cat-card:hover::after { transform: scale(1.35); opacity: .16; }
.cat-card:hover::before { border-color: var(--cc); }
.cat-ico { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 16px; display: grid; place-content: center; color: #fff; background: var(--cc); box-shadow: 0 8px 18px color-mix(in srgb, var(--cc) 40%, transparent); }
.cat-ico svg { width: 28px; height: 28px; }
.cat-card h3 { position: relative; z-index: 1; font-size: 19px; }
.cat-card--wide h3 { font-size: 24px; }
.cat-card p { position: relative; z-index: 1; font-size: 13.5px; color: var(--ink-soft); max-width: 340px; }
.cat-card .go { position: relative; z-index: 1; margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--cc); }
.cat-card .go svg { width: 16px; height: 16px; transition: transform .25s; }
.cat-card:hover .go svg { transform: translateX(5px); }
.cat-card .cnt-tag { position: absolute; top: 24px; right: 24px; z-index: 1; font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--muted); background: var(--cream); padding: 4px 11px; border-radius: 999px; }

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.prod-grid--3 { grid-template-columns: repeat(3, 1fr); }
.prod-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .32s var(--ease), box-shadow .32s var(--ease); }
.prod-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.prod-media { position: relative; aspect-ratio: 1/1.02; overflow: hidden; display: grid; place-content: center; }
.prod-media::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 22% 22%, rgba(255,255,255,.22) 0 2px, transparent 2px), radial-gradient(circle at 72% 62%, rgba(255,255,255,.14) 0 3px, transparent 3px); background-size: 30px 30px; }
.prod-media .art { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 24px; background: rgba(255,255,255,.16); display: grid; place-content: center; backdrop-filter: blur(2px); transition: transform .5s var(--ease); }
.prod-card:hover .prod-media .art { transform: scale(1.08) rotate(-3deg); }
.prod-media .art svg { width: 46px; height: 46px; color: #fff; }
.prod-badges { position: absolute; top: 13px; left: 13px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.prod-fav { position: absolute; top: 13px; right: 13px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-content: center; color: var(--ink-soft); box-shadow: var(--shadow-sm); transition: color .2s, transform .2s, background .2s; }
.prod-fav svg { width: 18px; height: 18px; }
.prod-fav:hover { transform: scale(1.12); color: var(--red); }
.prod-fav.is-fav { color: #fff; background: var(--red); }
.prod-fav.is-fav svg { fill: #fff; }
.prod-quick { position: absolute; left: 13px; right: 13px; bottom: 13px; z-index: 2; transform: translateY(14px); opacity: 0; transition: opacity .28s var(--ease), transform .28s var(--ease); }
.prod-card:hover .prod-quick { transform: translateY(0); opacity: 1; }
.prod-body { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.prod-cat { font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--red); }
.prod-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--navy-800); line-height: 1.28; }
.prod-name a:hover { color: var(--red); }
.prod-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.prod-stock { display: inline-flex; align-items: center; gap: 5px; }
.prod-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.prod-stock.out::before { background: var(--muted); }
.prod-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod-price { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--navy-800); }
.prod-price .old { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: line-through; margin-right: 6px; }
.prod-add { width: 44px; height: 44px; border-radius: 13px; background: var(--yellow-soft); color: var(--yellow-deep); display: grid; place-content: center; transition: background .2s, color .2s, transform .2s; }
.prod-add svg { width: 20px; height: 20px; }
.prod-add:hover { background: var(--yellow); color: var(--navy-900); transform: translateY(-2px); }
.stars { display: inline-flex; gap: 1px; color: var(--yellow-deep); }
.stars svg { width: 13px; height: 13px; fill: currentColor; }

/* Skeleton */
.skel { background: linear-gradient(90deg, var(--cream-2) 25%, #fff 37%, var(--cream-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.skel-card .sk-media { aspect-ratio: 1/1.02; }
.skel-card .sk-body { padding: 17px; display: grid; gap: 10px; }
.skel-card .sk-line { height: 12px; }

/* =========================================================
   BLOQUE COLEGIOS (B2B)
   ========================================================= */
.colegios { position: relative; background: linear-gradient(150deg, var(--navy-800), var(--navy-900)); color: #fff; border-radius: var(--r-xl); overflow: hidden; padding: 60px; }
.colegios::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 82% 18%, #000, transparent 72%); }
.colegios::after { content: ""; position: absolute; top: -60px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,198,26,.28), transparent 70%); }
.colegios-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.colegios .eyebrow { color: var(--yellow); }
.colegios .eyebrow::before { background: var(--yellow); }
.colegios h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); }
.colegios .lead { color: rgba(255,255,255,.8); font-size: 17.5px; margin: 16px 0 28px; }
.colegios-feats { display: grid; gap: 15px; margin-bottom: 32px; }
.colegios-feat { display: flex; gap: 13px; align-items: flex-start; }
.colegios-feat .ck { flex-shrink: 0; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,198,26,.18); color: var(--yellow); display: grid; place-content: center; }
.colegios-feat .ck svg { width: 16px; height: 16px; }
.colegios-feat b { font-family: var(--font-head); display: block; font-size: 15.5px; }
.colegios-feat span { font-size: 13.5px; color: rgba(255,255,255,.7); }
.colegios-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.colegios-stats .num { font-family: var(--font-head); font-weight: 800; font-size: 32px; color: var(--yellow); }
.colegios-stats .lbl { font-size: 12.5px; color: rgba(255,255,255,.66); }

/* Formulario */
.quote-form { background: #fff; border-radius: var(--r-lg); padding: 30px; color: var(--ink); box-shadow: var(--shadow-lg); }
.quote-form h3 { font-size: 21px; margin-bottom: 5px; }
.quote-form .sub { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.field { margin-bottom: 15px; }
.field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 2px solid var(--line-2); border-radius: 12px; font-family: var(--font-body); font-size: 14.5px; color: var(--ink); background: var(--cream); transition: border-color .2s, box-shadow .2s, background .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--yellow); background: #fff; box-shadow: 0 0 0 4px var(--yellow-soft); }
.field textarea { resize: vertical; min-height: 86px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* =========================================================
   BENEFICIOS
   ========================================================= */
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.benefit { padding: 30px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); position: relative; overflow: hidden; }
.benefit::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--bc, var(--yellow)); }
.benefit:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.benefit .bi { width: 54px; height: 54px; border-radius: 15px; background: var(--bc, var(--yellow-soft)); color: #fff; display: grid; place-content: center; margin-bottom: 18px; }
.benefit .bi svg { width: 26px; height: 26px; }
.benefit h4 { font-size: 17px; margin-bottom: 7px; }
.benefit p { font-size: 14px; color: var(--ink-soft); }

/* =========================================================
   TEMPORADA / KITS
   ========================================================= */
.season { background: linear-gradient(120deg, var(--yellow), var(--yellow-deep)); border-radius: var(--r-xl); padding: 50px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; position: relative; overflow: hidden; }
.season::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.35) 0 3px, transparent 3px); background-size: 40px 40px; opacity: .5; }
.season .s-copy { position: relative; z-index: 1; }
.season .eyebrow { color: var(--navy-900); }
.season .eyebrow::before { background: var(--red); }
.season h2 { color: var(--navy-900); }
.season .s-copy p { color: rgba(16,25,59,.78); }
.season .kits { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.season .kit { display: flex; align-items: center; gap: 15px; background: #fff; border-radius: var(--r-md); padding: 15px 17px; transition: transform .25s var(--ease), box-shadow .25s; box-shadow: var(--shadow-sm); }
.season .kit:hover { transform: translateX(6px); box-shadow: var(--shadow-md); }
.season .kit .kn { width: 46px; height: 46px; border-radius: 13px; display: grid; place-content: center; font-family: var(--font-head); font-weight: 800; color: #fff; flex-shrink: 0; font-size: 18px; }
.season .kit b { font-family: var(--font-head); font-size: 15px; display: block; color: var(--navy-800); }
.season .kit span { font-size: 13px; color: var(--muted); }
.season .kit .kp { margin-left: auto; font-family: var(--font-head); font-weight: 800; color: var(--navy-800); }

/* =========================================================
   NEWSLETTER
   ========================================================= */
.newsletter { background: var(--navy-800); border-radius: var(--r-xl); padding: 56px; text-align: center; position: relative; overflow: hidden; color: #fff; }
.newsletter::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,198,26,.2), transparent 45%), radial-gradient(circle at 82% 70%, rgba(31,79,196,.35), transparent 50%); }
.newsletter .eyebrow { color: var(--yellow); position: relative; }
.newsletter h2 { font-size: clamp(26px, 3.2vw, 38px); color: #fff; margin-top: 14px; position: relative; }
.newsletter p { color: rgba(255,255,255,.8); max-width: 500px; margin: 14px auto 28px; position: relative; }
.newsletter-form { display: flex; gap: 10px; max-width: 500px; margin: 0 auto; position: relative; }
.newsletter-form input { flex: 1; padding: 15px 20px; border-radius: 13px; border: 2px solid transparent; background: rgba(255,255,255,.12); color: #fff; font-size: 15px; }
.newsletter-form input::placeholder { color: rgba(255,255,255,.6); }
.newsletter-form input:focus { outline: none; border-color: var(--yellow); background: rgba(255,255,255,.18); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.66); padding-top: 68px; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--blue) 75% 100%); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 52px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-brand .brand-word .n { color: #fff; }
.footer-brand p { font-size: 14px; max-width: 300px; margin-bottom: 22px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.08); display: grid; place-content: center; color: #fff; transition: background .2s, transform .2s; }
.footer-social a svg { width: 18px; height: 18px; }
.footer-social a:hover { background: var(--yellow); color: var(--navy-900); transform: translateY(-3px); }
.footer-col h5 { color: #fff; font-family: var(--font-head); font-size: 15px; margin-bottom: 17px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: 14px; transition: color .2s, padding .2s; display: inline-flex; align-items: center; gap: 8px; }
.footer-col a svg { width: 15px; height: 15px; color: var(--yellow); }
.footer-col a:hover { color: #fff; padding-left: 3px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.footer-bottom .pays { display: flex; gap: 8px; }
.footer-bottom .pays span { padding: 5px 11px; border-radius: 7px; background: rgba(255,255,255,.08); font-size: 11.5px; font-weight: 600; font-family: var(--font-head); color: rgba(255,255,255,.8); }

/* =========================================================
   FLOATING
   ========================================================= */
.floaters { position: fixed; right: 24px; bottom: 24px; z-index: 800; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.wa-btn { display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #fff; padding: 14px 20px 14px 16px; border-radius: 999px; box-shadow: 0 12px 30px rgba(37,211,102,.44); font-family: var(--font-head); font-weight: 700; font-size: 14.5px; transition: transform .25s var(--ease); }
.wa-btn svg { width: 24px; height: 24px; }
.wa-btn:hover { transform: translateY(-3px) scale(1.03); }
.to-top { width: 48px; height: 48px; border-radius: 14px; background: var(--navy-800); color: #fff; display: grid; place-content: center; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .3s, background .2s; }
.to-top svg { width: 20px; height: 20px; }
.to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top:hover { background: var(--red); }

/* =========================================================
   DRAWER + SEARCH + MODAL (mismos que antes, recolor)
   ========================================================= */
.drawer-scrim { position: fixed; inset: 0; z-index: 990; background: rgba(16,25,59,.5); opacity: 0; visibility: hidden; transition: opacity .3s; backdrop-filter: blur(2px); }
.drawer-scrim.is-open { opacity: 1; visibility: visible; }
.drawer { position: absolute; top: 0; right: 0; height: 100%; width: min(92%, 430px); background: var(--paper); transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; }
.drawer-scrim.is-open .drawer { transform: translateX(0); }
.drawer-head { padding: 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.drawer-head h3 { font-size: 19px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 20px 22px; background: #fff; }
.cart-line { display: flex; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-line .cl-media { width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; display: grid; place-content: center; }
.cart-line .cl-media svg { width: 26px; height: 26px; color: #fff; }
.cart-line .cl-info { flex: 1; }
.cart-line .cl-info b { font-family: var(--font-head); font-size: 14px; display: block; color: var(--navy-800); }
.cart-line .cl-info .cl-cat { font-size: 12px; color: var(--muted); }
.cart-qty { display: inline-flex; align-items: center; gap: 8px; margin-top: 7px; border: 2px solid var(--line-2); border-radius: 999px; padding: 3px; }
.cart-qty button { width: 24px; height: 24px; border-radius: 50%; display: grid; place-content: center; color: var(--ink-soft); }
.cart-qty button:hover { background: var(--cream-2); }
.cart-qty span { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; min-width: 16px; text-align: center; }
.cart-remove { margin-left: auto; align-self: flex-start; color: var(--muted); font-size: 12px; }
.cart-remove:hover { color: var(--red); }
.cart-empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.cart-empty svg { width: 56px; height: 56px; margin: 0 auto 14px; color: var(--line-2); }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 10px; color: var(--ink-soft); }
.summary-row.total { font-family: var(--font-head); font-weight: 800; font-size: 21px; color: var(--navy-800); }

.search-overlay { position: fixed; inset: 0; z-index: 995; background: rgba(16,25,59,.46); opacity: 0; visibility: hidden; transition: opacity .25s; backdrop-filter: blur(3px); }
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-panel { max-width: 660px; margin: 10vh auto 0; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; transform: translateY(-14px); transition: transform .3s var(--ease); }
.search-overlay.is-open .search-panel { transform: translateY(0); }
.search-input-wrap { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.search-input-wrap svg { width: 22px; height: 22px; color: var(--muted); }
.search-input-wrap input { flex: 1; border: none; font-size: 18px; font-family: var(--font-body); color: var(--ink); background: none; }
.search-input-wrap input:focus { outline: none; }
.search-input-wrap kbd { font-size: 11px; padding: 4px 8px; border-radius: 7px; background: var(--cream-2); color: var(--muted); font-family: var(--font-head); }
.search-results { max-height: 52vh; overflow-y: auto; padding: 10px; }
.search-hint { padding: 8px 14px; font-size: 12px; color: var(--muted); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; }
.search-item { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 13px; transition: background .15s; }
.search-item:hover { background: var(--cream); }
.search-item .si-media { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: grid; place-content: center; }
.search-item .si-media svg { width: 22px; height: 22px; color: #fff; }
.search-item b { font-family: var(--font-head); font-size: 14.5px; display: block; color: var(--navy-800); }
.search-item span { font-size: 12.5px; color: var(--muted); }
.search-item .si-price { margin-left: auto; font-family: var(--font-head); font-weight: 800; color: var(--navy-800); }
.search-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; }

.modal-scrim { position: fixed; inset: 0; z-index: 996; background: rgba(16,25,59,.56); opacity: 0; visibility: hidden; transition: opacity .25s; backdrop-filter: blur(3px); display: grid; place-content: center; padding: 20px; }
.modal-scrim.is-open { opacity: 1; visibility: visible; }
.modal { width: min(900px, 100%); max-height: 88vh; overflow: auto; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); transform: scale(.96); transition: transform .3s var(--ease); }
.modal-scrim.is-open .modal { transform: scale(1); }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal-media { aspect-ratio: 1/1; display: grid; place-content: center; position: relative; }
.modal-media > svg { width: 96px; height: 96px; color: #fff; }
.modal-close { position: absolute; top: 15px; right: 15px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-content: center; z-index: 3; }
.modal-close svg { width: 18px; height: 18px; color: var(--ink); }
/* la X de la vista rápida queda pegada arriba mientras se baja en el
   modal; el margen negativo la pone encima de la foto sin empujarla */
.modal > .modal-close { position: sticky; top: 12px; margin: 12px 12px -52px auto; box-shadow: 0 3px 12px rgba(16,25,59,.18); }
.modal-info { padding: 32px; }
.modal-info .prod-cat { margin-bottom: 8px; }
.modal-info h3 { font-size: 25px; margin-bottom: 10px; }
.modal-info .desc { font-size: 14.5px; color: var(--ink-soft); margin: 14px 0; }
.modal-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.modal-spec { background: var(--cream); border-radius: 12px; padding: 11px 13px; }
.modal-spec small { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.modal-spec b { font-family: var(--font-head); font-size: 14px; color: var(--navy-800); }

/* =========================================================
   PAGE HERO interiores — chasis cinemático oscuro
   ========================================================= */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 66px 0 92px; color: #fff;
  --hero-accent: #4d74d6;
  background: linear-gradient(158deg, var(--navy-900) 0%, #14224f 55%, var(--navy-800) 100%);
}
body[data-page="ofertas"]  .page-hero { --hero-accent: var(--yellow); }
body[data-page="contacto"] .page-hero { --hero-accent: #46d17a; }
body[data-page="colegios"] .page-hero { --hero-accent: #5b8bff; }
body[data-page="producto"] .page-hero { padding: 30px 0 40px; }
/* rejilla de cuaderno tenue que se desvanece hacia abajo */
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 100% 30px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), transparent 78%);
}
.page-hero .container { position: relative; z-index: 2; transform: translate3d(0, calc(var(--py, 0) * .07px), 0); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.62); margin-bottom: 18px; position: relative; }
.crumb a { color: rgba(255,255,255,.86); transition: color .2s var(--ease); }
.crumb a:hover { color: var(--yellow); } /* contraste AA sobre navy en todas las internas */
.crumb svg { width: 14px; height: 14px; }
.page-hero .eyebrow { color: rgba(255,255,255,.82); }
.page-hero .eyebrow::before { background: var(--hero-accent); }
.page-hero h1 { font-size: clamp(31px, 4.4vw, 48px); position: relative; color: #fff; }
.page-hero p { color: rgba(255,255,255,.74); margin-top: 14px; max-width: 580px; position: relative; }

/* =========================================================
   CATÁLOGO
   ========================================================= */
.catalog-layout { display: grid; grid-template-columns: 272px 1fr; gap: 36px; align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 18px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.filter-group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.filter-group:last-of-type { border-bottom: none; }
.filter-group h4 { font-size: 14.5px; margin-bottom: 14px; }
.filter-opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.filter-opt input { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; }
.filter-opt .cnt { margin-left: auto; font-size: 12px; color: var(--muted); background: var(--cream-2); padding: 1px 9px; border-radius: 999px; }
.filter-opt:hover { color: var(--navy-800); }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.catalog-count { font-size: 14px; color: var(--muted); }
.catalog-count b { color: var(--navy-800); font-family: var(--font-head); }
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.select-sort { padding: 11px 15px; border: 2px solid var(--line-2); border-radius: 12px; background: #fff; font-family: var(--font-head); font-size: 13.5px; font-weight: 600; color: var(--navy-800); }
.active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-toggle-mobile { display: none; }
.filters .mobile-head { display: none; }
.filters-scrim { position: fixed; inset: 0; z-index: 984; background: rgba(16,25,59,.5); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.filters-scrim.is-open { opacity: 1; pointer-events: auto; }

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; }
.pd-gallery .pd-main { aspect-ratio: 1/1; border-radius: var(--r-lg); display: grid; place-content: center; position: relative; overflow: hidden; }
.pd-gallery .pd-main::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 25% 25%, rgba(255,255,255,.2) 0 3px, transparent 3px); background-size: 34px 34px; }
.pd-gallery .pd-main > svg { position: relative; width: 130px; height: 130px; color: #fff; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.pd-thumb { aspect-ratio: 1/1; border-radius: 14px; display: grid; place-content: center; border: 3px solid transparent; cursor: pointer; transition: border-color .2s; }
.pd-thumb svg { width: 34px; height: 34px; color: #fff; }
.pd-thumb.is-active { border-color: var(--yellow); }
.pd-info .prod-cat { margin-bottom: 10px; }
.pd-info h1 { font-size: clamp(28px, 3.6vw, 38px); }
.pd-rating { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 13.5px; color: var(--muted); }
.pd-price { display: flex; align-items: baseline; gap: 12px; margin: 20px 0; }
.pd-price .now { font-family: var(--font-head); font-weight: 800; font-size: 36px; color: var(--navy-800); }
.pd-price .old { font-size: 18px; color: var(--muted); text-decoration: line-through; }
.pd-desc { color: var(--ink-soft); font-size: 15px; margin-bottom: 24px; }
.pd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.pd-spec { display: flex; gap: 12px; align-items: center; padding: 13px 15px; background: #fff; border: 1px solid var(--line); border-radius: 13px; }
.pd-spec .ps-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--yellow-soft); display: grid; place-content: center; color: var(--yellow-deep); flex-shrink: 0; }
.pd-spec .ps-ico svg { width: 17px; height: 17px; }
.pd-spec small { display: block; font-size: 11.5px; color: var(--muted); }
.pd-spec b { font-family: var(--font-head); font-size: 13.5px; color: var(--navy-800); }
.pd-qty-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.qty-stepper { display: inline-flex; align-items: center; border: 2px solid var(--line-2); border-radius: 13px; overflow: hidden; }
.qty-stepper button { width: 48px; height: 50px; font-size: 18px; color: var(--ink-soft); }
.qty-stepper button:hover { background: var(--cream-2); }
.qty-stepper span { min-width: 40px; text-align: center; font-family: var(--font-head); font-weight: 800; }
.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.pd-trust { display: flex; flex-direction: column; gap: 11px; padding-top: 22px; border-top: 1px solid var(--line); }
.pd-trust .t { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); }
.pd-trust .t svg { width: 18px; height: 18px; color: var(--green); }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 46px; align-items: start; }
.contact-cards { display: grid; gap: 14px; }
.contact-card { display: flex; gap: 15px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); transition: transform .25s var(--ease), box-shadow .25s; }
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact-card .ci { width: 48px; height: 48px; border-radius: 13px; display: grid; place-content: center; flex-shrink: 0; }
.contact-card .ci svg { width: 22px; height: 22px; }
.contact-card b { font-family: var(--font-head); font-size: 15px; display: block; color: var(--navy-800); }
.contact-card p { font-size: 13.5px; color: var(--ink-soft); }
.contact-card a, .contact-card .cc-val { color: var(--red); font-weight: 700; font-size: 14px; font-family: var(--font-head); }
.map-embed { margin-top: 22px; border-radius: var(--r-md); overflow: hidden; height: 220px; background: #fff; border: 1px solid var(--line); position: relative; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 18px; text-align: center; color: var(--muted); }
/* el svg no traía medidas y se estiraba a todo el ancho del recuadro */
.map-embed svg { width: 40px; height: 40px; opacity: .45; }
.map-embed span { font-size: 13.5px; line-height: 1.45; }

.faq { display: grid; gap: 12px; max-width: 780px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; font-family: var(--font-head); font-weight: 700; font-size: 15.5px; color: var(--navy-800); text-align: left; }
.faq-q svg { width: 22px; height: 22px; color: var(--red); transition: transform .3s; flex-shrink: 0; }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-a p { padding: 0 24px 22px; color: var(--ink-soft); font-size: 14.5px; }

/* =========================================================
   REVEAL + TOAST
   ========================================================= */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } }

.toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.toast { display: flex; align-items: center; gap: 11px; background: var(--navy-800); color: #fff; padding: 14px 22px; border-radius: 999px; box-shadow: var(--shadow-lg); font-size: 14px; font-family: var(--font-head); font-weight: 600; transform: translateY(20px); opacity: 0; transition: transform .3s var(--ease), opacity .3s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast svg { width: 20px; height: 20px; color: var(--yellow); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .nav-menu { display: none; }
  .burger { display: grid; }
  .nav-cta { display: none; }
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: -1; }
  .hero-stage { max-width: 380px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-card--wide { grid-column: span 2; }
  .prod-grid, .prod-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .colegios-grid, .season, .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .filters { position: fixed; top: 0; left: 0; height: 100%; width: min(88%, 350px); z-index: 990; border: none; border-radius: 0; padding: 0 20px 28px; transform: translateX(-100%); transition: transform .35s var(--ease); overflow-y: auto; overscroll-behavior: contain; }
  .filters.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  /* .container es relative con z-index:2, así que el panel quedaba bajo el header:
     mientras está abierto elevamos ese contenedor por encima del header (z 900) */
  .container:has(.filters.is-open) { z-index: 1000; }
  /* cabecera propia: sin ella no había manera de cerrar el panel */
  .filters .mobile-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; margin: 0 -20px 6px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line); }
  .filter-toggle-mobile { display: inline-flex; }
  .pd-grid, .modal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .nav-menu, .topbar-left .topbar-item:not(:first-child) { display: none; }
  .burger { display: grid; }
  .nav-cta { display: none; }
  .prod-grid, .prod-grid--3 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .cat-card--wide { grid-column: span 2; }
  .colegios, .season { padding: 34px 26px; }
  .newsletter { padding: 40px 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .field-row { grid-template-columns: 1fr; }
  .hero-trust { gap: 22px; flex-wrap: wrap; }
  .newsletter-form { flex-direction: column; }
  .container { padding: 0 18px; }
  .hero-tile--1 { left: 0; } .hero-tile--2 { right: 0; }
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-card--wide { grid-column: span 1; }
  .benefits { grid-template-columns: 1fr; }
  .modal-specs { grid-template-columns: 1fr; }
  .wa-btn span { display: none; }
  .wa-btn { padding: 15px; }
  .hero-tile { display: none; }
}

/* =========================================================
   WOW LAYER — brillos, órbitas, confetti y transiciones
   ========================================================= */
html.no-scroll { overflow: hidden; }

/* Barra de progreso de scroll (arcoíris de marca) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0%; z-index: 960; background: linear-gradient(90deg, var(--red), var(--yellow), var(--green), var(--blue)); }

/* Variantes de reveal */
[data-reveal="left"] { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="zoom"] { transform: scale(.92) translateY(16px); }

/* Shine sweep en botones */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-22deg); pointer-events: none; opacity: 0; }
.btn:hover::after { animation: btnShine .7s var(--ease); }
@keyframes btnShine { 0% { left: -80%; opacity: 1; } 100% { left: 140%; opacity: 1; } }

/* Shine en media de productos */
.prod-media::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); z-index: 2; pointer-events: none; opacity: 0; }
.prod-card:hover .prod-media::after { animation: btnShine .8s var(--ease); }

/* Entrada del hero: palabra por palabra + subrayado que se dibuja */
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(38px) rotate(4deg); }
body.is-loaded .hero h1 .w { animation: riseUp .65s var(--d, 0s) cubic-bezier(.2,1.2,.35,1) forwards; }
.rise { opacity: 0; transform: translateY(30px); }
body.is-loaded .rise { animation: riseUp .7s var(--d, 0s) cubic-bezier(.2,1,.35,1) forwards; }
@keyframes riseUp { to { opacity: 1; transform: translateY(0) rotate(0); } }
.hero h1 .hl svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
body.is-loaded .hero h1 .hl svg path { animation: drawLine .7s 1.05s var(--ease) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* Doodles flotantes del hero */
.hero-doodles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.doodle { position: absolute; opacity: .45; }
.doodle svg { width: 36px; height: 36px; }
.d-float { animation: doodleFloat 7s ease-in-out infinite; }
.d-spin { animation: doodleSpin 16s linear infinite; }
@keyframes doodleFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(8deg); } }
@keyframes doodleSpin { to { transform: rotate(360deg); } }
@keyframes doodleSpinRev { to { transform: rotate(-360deg); } }

/* Órbita de categorías alrededor del logo */
.hero-stage::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; border: 2px dashed rgba(242,169,0,.55); animation: doodleSpin 32s linear infinite; }
.hero-orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; animation: doodleSpin 26s linear infinite; }
.hero-orbit .po { position: absolute; top: 50%; left: 50%; margin: -22px; transform: rotate(var(--a)) translateX(clamp(150px, 23vw, 225px)) rotate(calc(var(--a) * -1)); }
.hero-orbit .po i { display: grid; place-content: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; border: 3px solid #fff; box-shadow: 0 10px 22px rgba(20,30,70,.28), inset 0 -3px 0 rgba(0,0,0,.15); animation: doodleSpinRev 26s linear infinite; }
.hero-orbit .po i svg { width: 20px; height: 20px; }

/* Marquee doble con diamantes de color */
.marquee-track { padding: 11px 0; }
.marquee-track + .marquee-track { border-top: 1px dashed rgba(255,255,255,.16); opacity: .92; }
.marquee-track--rev { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-size: 15px; }
.mi-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2.5px; transform: rotate(45deg); }

/* Confetti + vuelo al carrito */
.fly-dot { position: fixed; z-index: 1300; width: 16px; height: 16px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255,198,26,.35), 0 6px 14px rgba(0,0,0,.25); pointer-events: none; }
.confetti { position: fixed; z-index: 1300; border-radius: 2px; pointer-events: none; }
.cart-pop { animation: cartPop .5s var(--ease); }
@keyframes cartPop { 30% { transform: scale(1.3) rotate(-10deg); } 60% { transform: scale(.94) rotate(4deg); } }

/* Transición entre páginas (cortina) */
.page-wipe { position: fixed; inset: 0; z-index: 9990; display: flex; pointer-events: none; }
.page-wipe i { flex: 1; background: var(--navy-900); transform: translateY(102%); transition: transform .5s cubic-bezier(.72,0,.18,1); position: relative; }
.page-wipe i::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.page-wipe i:nth-child(1)::before { background: var(--red); }
.page-wipe i:nth-child(2)::before { background: var(--yellow); }
.page-wipe i:nth-child(3)::before { background: var(--green); }
.page-wipe i:nth-child(4)::before { background: var(--blue); }
.page-wipe i:nth-child(2) { transition-delay: .06s; }
.page-wipe i:nth-child(3) { transition-delay: .12s; }
.page-wipe i:nth-child(4) { transition-delay: .18s; }
.page-wipe.go i { transform: translateY(0); }

/* Toast con rebote */
.toast { transform: translateY(26px) scale(.85); transition: transform .5s cubic-bezier(.3,1.55,.5,1), opacity .3s; }
.toast.show { transform: translateY(0) scale(1); }

/* Micro-interacción del logo */
.brand:hover .brand-chip { animation: chipWiggle .55s var(--ease); }
@keyframes chipWiggle { 30% { transform: rotate(-5deg) scale(1.08); } 65% { transform: rotate(4deg); } }

/* Legado admin (brand-mark) */
.brand-mark { display: flex; gap: 3px; }
.brand-mark b { display: grid; place-content: center; width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: 14px; font-weight: 800; font-family: var(--font-head); }
.brand-mark b:nth-child(1) { background: var(--red); }
.brand-mark b:nth-child(2) { background: var(--blue); }
.brand-mark b:nth-child(3) { background: var(--green); }

@media (max-width: 760px) {
  .hero-orbit, .hero-stage::after, .hero-doodles { display: none; }
  .marquee-track + .marquee-track { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rise, .hero h1 .w { opacity: 1 !important; transform: none !important; }
  .scroll-progress, .doodle, .hero-orbit, .pre-orbit, .pre-spark { display: none !important; }
}

/* =========================================================
   SCRAPBOOK / COLLAGE — sello propio de ABC (no template)
   Washi tape, stickers, papel, garabatos y collage.
   ========================================================= */
:root { --font-hand: "Caveat", cursive; }

/* Garabato manuscrito (acento) */
.scribble { font-family: var(--font-hand); font-weight: 700; color: var(--red); font-size: 26px; line-height: 1; display: inline-block; }
.scribble--blue { color: var(--blue); } .scribble--green { color: var(--green); }
.arrow-hand { display: inline-block; }
.arrow-hand svg { width: 58px; height: 40px; color: var(--navy-700); }

/* Washi tape */
.tape { position: absolute; width: 92px; height: 27px; background: rgba(255,198,26,.72); box-shadow: 0 2px 6px rgba(20,30,70,.12); z-index: 5; }
.tape::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.tape--red { background: rgba(228,35,27,.55); } .tape--blue { background: rgba(31,79,196,.5); } .tape--green { background: rgba(47,169,59,.5); }
.tape--l { transform: rotate(-6deg); } .tape--r { transform: rotate(5deg); }

/* Sticker (badge recortado, borde punteado) */
.sticker { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; background: #fff; border: 2px dashed var(--navy-800); border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--navy-800); box-shadow: 0 6px 16px rgba(20,30,70,.14); }
.sticker svg { width: 15px; height: 15px; }
.sticker--yellow { background: var(--yellow); border-color: var(--navy-900); }
.sticker--red { background: var(--red); color: #fff; border-color: #fff; }
.sticker--rot { transform: rotate(-4deg); }

/* Papel / polaroid pegado */
.paper { background: #fff; border-radius: 4px; box-shadow: 0 12px 30px rgba(20,30,70,.16); padding: 12px 12px 14px; position: relative; }
.paper::before { content: ""; position: absolute; inset: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(20,30,70,.05); pointer-events: none; }
.polaroid { background: #fff; padding: 12px 12px 40px; border-radius: 3px; box-shadow: 0 16px 34px rgba(20,30,70,.2); }
.polaroid .pola-img { aspect-ratio: 1/1; border-radius: 2px; display: grid; place-content: center; position: relative; overflow: hidden; }
.polaroid .pola-img svg { width: 46px; height: 46px; color: #fff; z-index: 1; }
.polaroid .pola-cap { font-family: var(--font-hand); font-weight: 700; font-size: 20px; color: var(--navy-800); text-align: center; margin-top: 8px; }
.polaroid .pola-price { position: absolute; top: 18px; right: 18px; background: var(--yellow); color: var(--navy-900); font-family: var(--font-head); font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 8px; transform: rotate(6deg); box-shadow: 0 4px 10px rgba(20,30,70,.2); z-index: 3; }

/* Divisor de papel rasgado */
.torn { position: relative; }
.torn-top { position: absolute; top: -1px; left: 0; width: 100%; height: 22px; line-height: 0; transform: translateY(-99%); }
.torn-bottom { position: absolute; bottom: -1px; left: 0; width: 100%; height: 22px; line-height: 0; transform: translateY(99%) rotate(180deg); }

/* Título con washi tape debajo */
.tape-underline { position: relative; display: inline-block; }
.tape-underline::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: 2px; height: 12px; background: var(--yellow); opacity: .55; z-index: -1; transform: rotate(-1.2deg); border-radius: 2px; }

/* =========================================================
   HERO COLLAGE (board creativo)
   ========================================================= */
.hero-board { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1/1.02; margin: 0 auto; }
.hero-board .pin { position: absolute; }
.hero-board .hb-logo { top: 0; left: 50%; width: 150px; margin-left: -75px; z-index: 6; animation: floaty 6s ease-in-out infinite; }
.hero-board .hb-logo img { width: 100%; border-radius: 50%; box-shadow: 0 18px 40px rgba(20,30,70,.24); }
.hero-board .polaroid { width: 41%; }
.hero-board .p1 { top: 24%; left: 0; transform: rotate(-8deg); z-index: 2; animation: floaty 7s ease-in-out infinite; }
.hero-board .p2 { top: 42%; left: 29.5%; transform: rotate(3deg); z-index: 4; animation: floaty 6.4s ease-in-out infinite .5s; }
.hero-board .p3 { top: 22%; right: 0; transform: rotate(8deg); z-index: 3; animation: floaty 5.8s ease-in-out infinite .3s; }
.hero-board .st1 { top: 14%; right: 2%; z-index: 7; transform: rotate(8deg); animation: floaty 5.5s ease-in-out infinite .2s; }
.hero-board .st2 { bottom: 8%; left: -2%; z-index: 7; transform: rotate(-7deg); animation: floaty 6.8s ease-in-out infinite .7s; }
.hero-board .doodle-note { position: absolute; top: 8%; left: -2%; z-index: 7; font-family: var(--font-hand); font-weight: 700; color: var(--navy-700); font-size: 21px; transform: rotate(-8deg); text-align: center; line-height: 1.1; }
.hero-board .hb-ring { position: absolute; inset: 5% 6% 8%; border-radius: 50%; border: 2.5px dashed rgba(242,169,0,.5); z-index: 0; animation: doodleSpin 40s linear infinite; }
.hero-board .polaroid .pola-cap { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
  .hero-board { max-width: 380px; }
  .hero-board .doodle-note, .hero-board .hb-ring { display: none; }
}

/* =========================================================
   IMÁGENES DE PRODUCTO (fotos reales)
   ========================================================= */
.prod-media.has-photo { background: #fff; }
.prod-media.has-photo::before { display: none; }
.prod-photo { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .5s var(--ease); mix-blend-mode: multiply; }
.prod-card:hover .prod-photo { transform: scale(1.07) rotate(-1deg); }
.modal-media.has-photo { background: #fff; }
.modal-photo { width: 100%; height: 100%; object-fit: contain; padding: 26px; mix-blend-mode: multiply; }
.cl-media.has-photo { background: #fff; border: 1px solid var(--line); }
.cl-media.has-photo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; mix-blend-mode: multiply; }
.si-media.has-photo { background: #fff; border: 1px solid var(--line); }
.si-media.has-photo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
/* polaroid del hero con foto */
.polaroid .pola-img.has-photo { background: #fff !important; }
.polaroid .pola-img.has-photo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
/* ficha de producto */
.pd-main.has-photo { background: #fff !important; border: 1px solid var(--line); }
.pd-main.has-photo::before { display: none; }
.pd-photo { width: 100%; height: 100%; object-fit: contain; padding: 32px; mix-blend-mode: multiply; }
.pd-thumb.has-photo { background: #fff !important; border-color: var(--line); }
.pd-thumb.has-photo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
/* admin thumbnail */
.t-prod .tp-media.has-photo { background: #fff; border: 1px solid var(--line); }
.t-prod .tp-media.has-photo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; mix-blend-mode: multiply; }

/* =========================================================
   V3 — preloader logo, tabs, notas, postal, modal animado
   ========================================================= */

/* Preloader con logo real */
.pre-logo-img { width: 154px; height: 154px; border-radius: 50%; overflow: hidden; background: #fff; position: relative; z-index: 3;
  box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 0 14px rgba(255,255,255,.04), 0 22px 55px rgba(0,0,0,.45); animation: preLogoPulse 2.4s var(--ease) infinite; }
.pre-logo-img img { width: 100%; height: 100%; object-fit: cover; }
@keyframes preLogoPulse { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.06) rotate(2deg); } }

/* Feat header + tabs */
.feat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.feat-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.feat-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: 999px; border: 2px solid var(--line-2); background: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; transition: all .22s var(--ease); white-space: nowrap; }
.feat-tab svg { width: 15px; height: 15px; }
.feat-tab:hover { border-color: var(--tc); color: var(--tc); transform: translateY(-2px); }
.feat-tab.is-active { background: var(--tc); border-color: var(--tc); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--tc) 35%, transparent); }

/* Beneficios — notas de color pegadas */
.benefits-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-top: 14px; }
.bnote { position: relative; background: var(--bc); border-radius: 20px; padding: 30px 24px 26px; overflow: visible;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--bc) 30%, transparent), inset 0 -4px 0 rgba(0,0,0,.12);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.bnote--l { transform: rotate(-2.4deg); } .bnote--r { transform: rotate(2.4deg); }
.bnote:hover { transform: rotate(0) translateY(-8px) scale(1.02); box-shadow: 0 26px 50px color-mix(in srgb, var(--bc) 42%, transparent); }
.bnote-ico { display: grid; place-content: center; width: 54px; height: 54px; border-radius: 15px; background: rgba(255,255,255,.22); margin-bottom: 18px; }
.bnote-ico svg { width: 27px; height: 27px; color: currentColor; }
.bnote h4 { font-size: 19px; color: currentColor; margin-bottom: 8px; }
.bnote p { font-size: 14px; color: currentColor; opacity: .9; line-height: 1.5; }

/* Newsletter → postal creativa */
.postcard { position: relative; overflow: hidden; text-align: center; border-radius: var(--r-xl);
  background: linear-gradient(140deg, #fff, var(--yellow-soft) 130%); border: 2.5px dashed var(--yellow-deep);
  padding: 60px 48px; box-shadow: var(--shadow-lg); }
.postcard::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 18%, rgba(228,35,27,.06) 0 3px, transparent 3px), radial-gradient(circle at 84% 74%, rgba(31,79,196,.06) 0 3px, transparent 3px); background-size: 42px 42px; }
.postcard-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.postcard-deco .doodle { position: absolute; opacity: .7; }
.postcard-deco .doodle svg { width: 34px; height: 34px; }
.postcard-body { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }
.postcard .sticker { margin-bottom: 20px; }
.postcard h2 { font-size: clamp(28px, 3.6vw, 42px); color: var(--navy-800); }
.postcard h2 .scribble { font-size: .92em; }
.postcard p { color: var(--ink-soft); margin: 14px auto 28px; font-size: 16px; }
.postcard .newsletter-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto; }
.postcard .newsletter-form input { flex: 1; padding: 15px 20px; border-radius: 14px; border: 2px solid var(--line-2); background: #fff; font-size: 15px; }
.postcard .newsletter-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.postcard-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #128c4a; }
.postcard-wa svg { width: 18px; height: 18px; }
.postcard-wa:hover { text-decoration: underline; }

/* Modal quick view — entrada animada + estilo */
.modal-scrim.is-open .modal-media { animation: mediaIn .5s var(--ease) both; }
@keyframes mediaIn { from { transform: scale(1.08); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-info > * { opacity: 0; transform: translateY(14px); }
.modal-scrim.is-open .modal-info > * { animation: infoUp .5s var(--ease) forwards; }
.modal-scrim.is-open .modal-info > *:nth-child(1) { animation-delay: .12s; }
.modal-scrim.is-open .modal-info > *:nth-child(2) { animation-delay: .17s; }
.modal-scrim.is-open .modal-info > *:nth-child(3) { animation-delay: .22s; }
.modal-scrim.is-open .modal-info > *:nth-child(4) { animation-delay: .27s; }
.modal-scrim.is-open .modal-info > *:nth-child(5) { animation-delay: .32s; }
.modal-scrim.is-open .modal-info > *:nth-child(6) { animation-delay: .37s; }
.modal-scrim.is-open .modal-info > *:nth-child(7) { animation-delay: .42s; }
@keyframes infoUp { to { opacity: 1; transform: none; } }
.modal { border: 2px solid var(--line); }
.modal-info .prod-cat { color: var(--red); }

@media (max-width: 1024px) {
  .benefits-wall { grid-template-columns: repeat(2, 1fr); gap: 30px 22px; }
}
@media (max-width: 760px) {
  .benefits-wall { grid-template-columns: 1fr; }
  .bnote--l, .bnote--r { transform: rotate(0); }
  .postcard { padding: 40px 24px; }
  .postcard .newsletter-form { flex-direction: column; }
  .feat-head { align-items: flex-start; }
}

/* =========================================================
   V4 — páginas internas con estilo (doodles + detalles)
   ========================================================= */
.page-doodles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.page-doodles .doodle { position: absolute; opacity: .5; }
.page-doodles .doodle svg { width: 34px; height: 34px; }
.page-hero .container > * { position: relative; z-index: 1; }

/* Catálogo: toolbar y filtros más vivos */
.filters h4 { display: flex; align-items: center; gap: 8px; }
.filters .filter-group:first-of-type h4::before { content: ""; width: 14px; height: 3px; border-radius: 3px; background: var(--yellow); }
.catalog-count b { color: var(--red); }
.active-filters .chip.is-active:hover { background: var(--red); border-color: var(--red); }

/* Producto: galería con cinta y sello */
.pd-gallery { position: relative; }
.pd-gallery::before { content: ""; position: absolute; top: -10px; left: 26px; width: 96px; height: 26px; background: rgba(255,198,26,.72); box-shadow: 0 2px 6px rgba(20,30,70,.12); transform: rotate(-5deg); z-index: 3; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.pd-photo { transition: transform .4s var(--ease); }
.pd-main:hover .pd-photo { transform: scale(1.05) rotate(-1deg); }

/* Related / grids interiores: revelar en cascada ya cubierto */

/* Ofertas: tarjetas de kit con más vida (hover) */
.cat-card .btn { position: relative; z-index: 2; }

/* Contacto: tarjetas con acento de color arriba */
.contact-card { position: relative; overflow: hidden; }
.contact-card::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--yellow); opacity: 0; transition: opacity .25s; }
.contact-card:hover::before { opacity: 1; }

/* Reveal lateral extra para variedad */
[data-reveal="left"].is-in, [data-reveal="right"].is-in, [data-reveal="zoom"].is-in { transform: none; }

/* =========================================================
   V5 — banner promo, colecciones (círculos), historias
   ========================================================= */
/* Banner promocional */
.promo-banner { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md);
  border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.promo-banner img { width: 100%; height: auto; display: block; transition: transform .5s var(--ease); }
.promo-banner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.promo-banner:hover img { transform: scale(1.02); }
.promo-tag { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy-800); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-navy); }
.promo-tag svg { width: 16px; height: 16px; }
.promo-banner:hover .promo-tag { background: var(--red); }

/* Colecciones (círculos) */
/* --n lo pone la portada: cuántas colecciones hay (todas en una fila) */
.collections { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 18px; }
.collection { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.col-ring { width: 100%; max-width: 118px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background: #fff;
  border: 4px solid var(--cc); padding: 5px; box-shadow: 0 10px 24px color-mix(in srgb, var(--cc) 22%, transparent);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.col-ring img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: 50%; }
.collection:hover .col-ring { transform: translateY(-6px) rotate(-3deg) scale(1.05); box-shadow: 0 18px 34px color-mix(in srgb, var(--cc) 40%, transparent); }
.col-label { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; color: var(--navy-800); line-height: 1.2; }
.collection:hover .col-label { color: var(--cc); }

/* Historias / redes */
.social-links { display: flex; gap: 8px; }
.soc-btn { width: 44px; height: 44px; border-radius: 13px; display: grid; place-content: center; color: #fff; transition: transform .22s var(--ease); }
.soc-btn svg { width: 20px; height: 20px; }
.soc-btn:nth-child(1) { background: #e1306c; } /* IG */
.soc-btn:nth-child(2) { background: #1877f2; } /* FB */
.soc-btn:nth-child(3) { background: #111; }    /* TikTok */
.soc-btn:nth-child(4) { background: #ff0000; } /* YouTube */
.soc-btn:hover { transform: translateY(-4px) rotate(-4deg) scale(1.06); }
.stories { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.story { display: block; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease); }
.story:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.story-media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
.story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.story:hover .story-media img { transform: scale(1.06); }
.story-badge { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.92); display: grid; place-content: center; color: #e1306c; box-shadow: var(--shadow-sm); }
.story-badge svg { width: 18px; height: 18px; }
.story-cap { padding: 14px 15px 16px; }
.story-cap b { font-family: var(--font-head); font-size: 14.5px; color: var(--navy-800); display: block; margin-bottom: 3px; }
.story-cap span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

@media (max-width: 1024px) {
  .collections { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .stories { grid-template-columns: repeat(3, 1fr); }
  .promo-tag { font-size: 12.5px; padding: 9px 15px; }
}
@media (max-width: 640px) {
  .collections { grid-template-columns: repeat(3, 1fr); }
  .stories { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .story { flex: 0 0 68%; scroll-snap-align: start; }
  .social-links { margin-top: 8px; }
}

/* =========================================================
   V6 — Reels / videos (estilo redes)
   ========================================================= */
.reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 920px; margin: 0 auto; }
.reel { border-radius: var(--r-lg); overflow: hidden; background: #000; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); transition: transform .32s var(--ease), box-shadow .32s var(--ease); }
.reel:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.reel-media { position: relative; aspect-ratio: 9/16; overflow: hidden; background: #0b1220; }
.reel-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-live { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; z-index: 2; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.reel-live svg { width: 13px; height: 13px; }
.reel-sound { position: absolute; bottom: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; display: grid; place-content: center; z-index: 2; backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255,255,255,.35); transition: background .2s, transform .2s; }
.reel-sound svg { width: 18px; height: 18px; }
.reel-sound:hover { transform: scale(1.1); }
.reel-sound.on { background: var(--yellow); color: var(--navy-900); border-color: var(--yellow); }
.reel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 30%); pointer-events: none; z-index: 1; }
.reel-cap { padding: 14px 16px 16px; background: #fff; }
.reel-cap b { font-family: var(--font-head); font-size: 15px; color: var(--navy-800); display: block; margin-bottom: 3px; }
.reel-cap span { font-size: 12.5px; color: var(--muted); }

@media (max-width: 760px) {
  .reels { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; max-width: none; }
  .reel { flex: 0 0 72%; scroll-snap-align: center; }
}

/* Fix: quitar el fondo negro que asomaba bajo el caption de los reels */
.reel { background: #fff; display: flex; flex-direction: column; }
.reel-cap { flex: 1 0 auto; }

/* =========================================================
   V7 — PRELOADER espectacular (útiles vuelan + logo estalla)
   ========================================================= */
.pre-stage { width: 270px; height: 270px; }
.pre-glow { animation: glowPulse 3s ease-in-out infinite, glowSpin 26s linear infinite; }
@keyframes glowSpin { to { transform: rotate(360deg); } }

/* anillo punteado */
.pl-ring { position: absolute; inset: 40px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.2); opacity: 0; animation: ringFade .6s .55s forwards, plSpin 24s linear infinite; }
@keyframes ringFade { to { opacity: 1; } }
@keyframes plSpin { to { transform: rotate(360deg); } }
@keyframes plSpinRev { to { transform: rotate(-360deg); } }

/* útiles que vuelan desde todos lados */
.pl-supplies { position: absolute; inset: 0; z-index: 2; animation: plSpin 20s linear 1.35s infinite; }
.pl-fly { position: absolute; top: 50%; left: 50%; margin: -27px 0 0 -27px; transform: rotate(var(--a)) translateX(140px) rotate(calc(-1 * var(--a))); }
.pl-fi { display: block; animation: flyIn 1s var(--d) cubic-bezier(.16,1.2,.34,1) both; }
@keyframes flyIn {
  0% { transform: translate(var(--fx), var(--fy)) rotate(var(--spin)) scale(.1); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translate(0,0) rotate(0) scale(1); opacity: 1; }
}
.pl-fly i { display: grid; place-content: center; width: 54px; height: 54px; border-radius: 16px; color: #fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.4), inset 0 -4px 0 rgba(0,0,0,.22); animation: plSpinRev 20s linear 1.35s infinite; }
.pl-fly i svg { width: 26px; height: 26px; }

/* logo estalla al aparecer */
.pre-logo-img { z-index: 3; animation: logoPop .9s .35s cubic-bezier(.2,1.5,.38,1) both, preLogoPulse 2.6s 1.25s ease-in-out infinite; }
@keyframes logoPop { 0% { transform: scale(0) rotate(-50deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* anillos que se expanden (pop) */
.pl-pop { position: absolute; top: 50%; left: 50%; width: 156px; height: 156px; margin: -78px 0 0 -78px; border-radius: 50%; border: 3px solid var(--yellow); opacity: 0; z-index: 1; animation: popRing 1s .55s ease-out both; }
.pl-pop--2 { border-color: var(--red); animation-delay: .78s; }
@keyframes popRing { 0% { transform: scale(.4); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }

/* confeti al aterrizar */
.pre-confetti { position: absolute; top: 50%; left: 50%; border-radius: 2px; opacity: 0; z-index: 5;
  animation: confPop 1.2s ease-out forwards; }
@keyframes confPop {
  0% { transform: translate(-50%,-50%) scale(.4) rotate(0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--r)); opacity: 0; }
}

/* título letra por letra */
.pre-word { display: inline-flex; justify-content: center; gap: 0; font-family: var(--font-head); font-weight: 800;
  font-size: 22px; letter-spacing: .04em; color: #fff; -webkit-background-clip: initial; background: none; animation: none; }
.pre-word span { display: inline-block; opacity: 0; transform: translateY(18px) rotate(-10deg); animation: letterIn .55s calc(1.05s + var(--li) * .04s) cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes letterIn { to { opacity: 1; transform: none; } }
.pre-word span:nth-child(1) { color: var(--red); }
.pre-word span:nth-child(2) { color: #4d74d6; }
.pre-word span:nth-child(3) { color: var(--green); }

/* partículas con deriva */
.pre-spark { animation: sparkDrift 3s ease-in-out infinite; }
@keyframes sparkDrift { 0%,100% { transform: translateY(0) scale(.3); opacity: .15; } 50% { transform: translateY(-16px) scale(1); opacity: .95; } }

/* barra y % un pelín más grandes */
.pre-track { width: 240px; height: 7px; }
.pre-pct { font-size: 17px; animation: pctPulse 1.4s ease-in-out infinite; }
@keyframes pctPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* =========================================================
   FIX — Modal vista rápida: centrado perfecto + altura segura
   ========================================================= */
.modal-scrim { display: grid; place-items: center; overflow-y: auto; padding: 24px; -webkit-overflow-scrolling: touch; }
.modal { width: min(900px, 100%); max-height: min(90vh, 720px); overflow: hidden; margin: auto; }
.modal-grid { height: 100%; grid-template-columns: 1.05fr 1fr; }
.modal-media { aspect-ratio: auto; height: 100%; min-height: 340px; }
.modal-media.has-photo { background: #fff; }
.modal-photo { padding: 34px; }
.modal-info { overflow-y: auto; max-height: 100%; }
/* scrollbar sutil en la ficha */
.modal-info::-webkit-scrollbar { width: 7px; }
.modal-info::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; }

@media (max-width: 1024px) {
  .modal { max-height: 92vh; overflow-y: auto; }
  .modal-grid { grid-template-columns: 1fr; height: auto; }
  .modal-media { aspect-ratio: 16/11; height: auto; min-height: 0; }
  .modal-info { overflow-y: visible; }
}

/* =========================================================
   V8 — Kits (dark glow) + Por qué ABC (acordeón de imágenes)
   ========================================================= */
/* KITS oscuro con aurora animada */
.kits-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 54px;
  background: radial-gradient(130% 130% at 0% 0%, #1a2b63, #0a1024 62%); box-shadow: var(--shadow-lg); }
.kits-aurora { position: absolute; inset: -25%; z-index: 0; filter: blur(24px); opacity: .85;
  background:
    radial-gradient(300px 240px at 18% 28%, rgba(228,35,27,.55), transparent 60%),
    radial-gradient(330px 250px at 82% 18%, rgba(31,79,196,.6), transparent 60%),
    radial-gradient(300px 260px at 72% 88%, rgba(47,169,59,.5), transparent 60%),
    radial-gradient(280px 240px at 26% 84%, rgba(255,198,26,.45), transparent 60%);
  animation: auroraDrift 11s ease-in-out infinite; }
@keyframes auroraDrift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(24px,-18px) scale(1.08); } 66% { transform: translate(-18px,14px) scale(1.04); } }
.kits-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: radial-gradient(circle at 70% 40%, #000, transparent 78%); }
.kits-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.kits-copy h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); margin: 14px 0 14px; }
.kits-hl { color: var(--yellow); }
.kits-copy p { color: rgba(255,255,255,.78); font-size: 16.5px; margin-bottom: 26px; max-width: 440px; }
.kits-cards { display: flex; flex-direction: column; gap: 14px; }
.kit-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 22px 18px 20px; border-radius: 18px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(8px); overflow: hidden;
  transition: transform .3s var(--ease), background .3s, box-shadow .3s, border-color .3s; }
.kit-card::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--kc); }
.kit-card::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); opacity: 0; }
.kit-card:hover::after { animation: btnShine .8s var(--ease); }
.kit-card:hover { transform: translateX(8px); background: rgba(255,255,255,.13); box-shadow: 0 16px 34px rgba(0,0,0,.32); }
.kit-card.is-popular { background: rgba(255,198,26,.13); border-color: rgba(255,198,26,.42); }
.kit-pop { position: absolute; top: 0; right: 0; background: var(--yellow); color: var(--navy-900); font-family: var(--font-head); font-weight: 800; font-size: 10.5px; letter-spacing: .03em; padding: 4px 12px; border-bottom-left-radius: 12px; z-index: 2; }
.kit-letter { width: 52px; height: 52px; border-radius: 14px; background: var(--kc); color: #fff; display: grid; place-content: center; font-family: var(--font-head); font-weight: 800; font-size: 22px; flex-shrink: 0; box-shadow: 0 8px 18px color-mix(in srgb, var(--kc) 45%, transparent); }
.kit-info { flex: 1; min-width: 0; }
.kit-info b { font-family: var(--font-head); font-size: 17px; color: #fff; display: block; }
.kit-info span { font-size: 13px; color: rgba(255,255,255,.6); }
.kit-foot { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.kit-price { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--yellow); }
.kit-foot svg { width: 18px; height: 18px; color: rgba(255,255,255,.7); transition: transform .25s; }
.kit-card:hover .kit-foot svg { transform: translateX(4px); color: #fff; }

/* ACORDEÓN de imágenes (Por qué ABC) */
.accordion { display: flex; gap: 14px; height: 440px; }
.acc-panel { position: relative; flex: 1; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; min-width: 0;
  transition: flex .55s cubic-bezier(.5,.15,.15,1); box-shadow: var(--shadow-md); }
.acc-panel.is-active { flex: 3.4; }
.acc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.acc-panel.is-active .acc-img { transform: scale(1.06); }
.acc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,14,32,.92) 8%, rgba(9,14,32,.35) 55%, rgba(9,14,32,.55)); }
.acc-panel::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: var(--ac); z-index: 3; }
.acc-num { position: absolute; top: 16px; right: 18px; z-index: 3; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: rgba(255,255,255,.55); }
.acc-content { position: absolute; left: 0; bottom: 0; z-index: 3; padding: 22px; display: flex; align-items: center; gap: 15px; width: 100%; }
.acc-ico { width: 54px; height: 54px; border-radius: 15px; background: var(--ac); color: #fff; display: grid; place-content: center; flex-shrink: 0; box-shadow: 0 10px 22px rgba(0,0,0,.35); transition: transform .3s var(--ease); }
.acc-panel.is-active .acc-ico { transform: rotate(-6deg) scale(1.05); }
.acc-ico svg { width: 27px; height: 27px; }
.acc-text { color: #fff; overflow: hidden; }
.acc-text b { font-family: var(--font-head); font-size: 20px; display: block; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.acc-text span { display: block; font-size: 14.5px; color: rgba(255,255,255,.88); max-height: 0; opacity: 0; transition: max-height .45s var(--ease), opacity .4s .12s; }
.acc-panel.is-active .acc-text span { max-height: 70px; opacity: 1; margin-top: 4px; }

@media (max-width: 900px) {
  .kits-hero { padding: 34px 26px; }
  .kits-grid { grid-template-columns: 1fr; gap: 30px; }
  .accordion { flex-direction: column; height: auto; }
  .acc-panel { height: 92px; }
  .acc-panel.is-active { flex: 1; height: 240px; }
  .acc-text b { white-space: normal; }
}

/* =========================================================
   V9 — Preloader MÁS GRANDE + salida sin flash azul
   ========================================================= */
/* salida limpia: todo el preloader se desvanece de una */
#preloader { transition: opacity .55s var(--ease); }
#preloader.is-gone { opacity: 0; pointer-events: none; }

/* más grande */
.pre-scene { gap: 30px; }
.pre-stage { width: 360px; height: 360px; }
.pre-logo-img { width: 210px; height: 210px; box-shadow: 0 0 0 8px rgba(255,255,255,.08), 0 0 0 18px rgba(255,255,255,.04), 0 28px 70px rgba(0,0,0,.5); }
.pl-ring { inset: 52px; border-width: 2.5px; }
.pl-fly { margin: -34px 0 0 -34px; transform: rotate(var(--a)) translateX(190px) rotate(calc(-1 * var(--a))); }
.pl-fly i { width: 68px; height: 68px; border-radius: 19px; box-shadow: 0 14px 30px rgba(0,0,0,.42), inset 0 -5px 0 rgba(0,0,0,.22); }
.pl-fly i svg { width: 33px; height: 33px; }
.pl-pop { width: 214px; height: 214px; margin: -107px 0 0 -107px; border-width: 3.5px; }
.pre-word { font-size: 28px; letter-spacing: .05em; }
.pre-track { width: 310px; height: 8px; }
.pre-pct { font-size: 20px; }
.pre-glow { background: radial-gradient(1100px 760px at 50% 32%, rgba(31,79,196,.55), transparent 70%), radial-gradient(900px 620px at 62% 86%, rgba(255,198,26,.16), transparent 62%); }

@media (max-width: 600px) {
  .pre-stage { width: 300px; height: 300px; }
  .pre-logo-img { width: 172px; height: 172px; }
  .pl-fly { transform: rotate(var(--a)) translateX(150px) rotate(calc(-1 * var(--a))); }
  .pl-fly i { width: 56px; height: 56px; }
  .pre-word { font-size: 22px; }
}

/* =========================================================
   V10 — Fixes responsive (header móvil + sin overflow)
   ========================================================= */
html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 640px) {
  .brand-word { display: none; }               /* en móvil solo el logo (ya trae el texto) */
  .brand-logo { width: 60px; height: 60px; }
  .nav { gap: 10px; height: 64px; }
  .nav-actions { gap: 0; }
  .icon-btn { width: 42px; height: 42px; }
  .icon-btn svg { width: 20px; height: 20px; }
  :root { --header-h: 64px; }
}
@media (max-width: 380px) {
  #openFavs { display: none; }                 /* en pantallas muy chicas, ocultar favoritos del header */
}

/* =========================================================
   V11 — HERO cinematográfico (aurora + partículas + rotador + parallax)
   ========================================================= */
.hero { position: relative; }
.hero-aurora { position: absolute; inset: -12% -6%; z-index: 0; pointer-events: none; filter: blur(72px); opacity: .58;
  background:
    radial-gradient(430px 340px at 14% 24%, rgba(255,198,26,.55), transparent 62%),
    radial-gradient(480px 380px at 86% 18%, rgba(31,79,196,.4), transparent 62%),
    radial-gradient(440px 400px at 76% 88%, rgba(47,169,59,.34), transparent 62%),
    radial-gradient(400px 360px at 22% 92%, rgba(228,35,27,.3), transparent 62%);
  animation: heroAurora 15s ease-in-out infinite; }
@keyframes heroAurora { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(2%,-2.5%) scale(1.07); } 66% { transform: translate(-2%,1.8%) scale(1.03); } }
.hero-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; will-change: transform; }
.hero-particles i { position: absolute; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: heroTwinkle 5s ease-in-out infinite; }
@keyframes heroTwinkle { 0%,100% { transform: translateY(0) scale(.5); opacity: .18; } 50% { transform: translateY(-24px) scale(1); opacity: .8; } }
.hero-copy, .hero-visual { position: relative; z-index: 2; }
.hero-doodles { z-index: 1; will-change: transform; }
.hero-board { will-change: transform; transform-style: preserve-3d; }

/* Titular con palabra rotativa */
.hero-h1 { display: flex; flex-direction: column; gap: 4px; }
.hh-line { display: block; }
.rotator { position: relative; display: inline-block; width: fit-content; min-height: 1.05em; }
.rot-word { display: inline-block; transition: opacity .34s var(--ease), transform .34s var(--ease); will-change: transform, opacity; }
.rot-word.out { opacity: 0; transform: translateY(-20px) rotate(-6deg); }
.rot-line { position: absolute; left: -1%; right: -1%; bottom: -8px; width: 102%; height: 16px; color: var(--yellow); z-index: -1; }
.rot-line path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rotator.draw .rot-line path { animation: drawLine .55s var(--ease) forwards; }

/* Glow detrás del logo del collage */
.hero-board .hb-logo::before { content: ""; position: absolute; inset: -16%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,198,26,.6), transparent 66%); filter: blur(14px); animation: glowPulse 3.2s ease-in-out infinite; }

@media (max-width: 760px) {
  .hero-particles i { display: none; }
  .hero-aurora { opacity: .75; filter: blur(50px); }
  .hero-board { transform: none !important; }
}

/* =========================================================
   V12 — HERO OSCURO cinematográfico (impacto tipo preloader)
   ========================================================= */
.hero { background: radial-gradient(130% 130% at 18% -5%, #1a2b63 0%, #0c1330 52%, #080d20 100%); color: #fff; overflow: hidden; }
.hero::before, .hero::after { display: none; }               /* fuera los glows claros viejos */
.hero::after { content: ""; display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 46px 46px; mask-image: radial-gradient(circle at 72% 38%, #000, transparent 72%); }

/* aurora vibrante sobre oscuro */
.hero-aurora { opacity: .9; filter: blur(64px);
  background:
    radial-gradient(440px 360px at 12% 26%, rgba(255,198,26,.55), transparent 60%),
    radial-gradient(500px 400px at 88% 16%, rgba(45,110,255,.6), transparent 60%),
    radial-gradient(460px 420px at 78% 90%, rgba(47,169,59,.5), transparent 60%),
    radial-gradient(420px 380px at 20% 94%, rgba(228,35,27,.5), transparent 60%); }
.hero-particles i { box-shadow: 0 0 12px currentColor, 0 0 4px currentColor; }

/* textos claros */
.hero h1, .hero .hh-line { color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.hero .lead { color: rgba(255,255,255,.82); }
.hero .lead b { color: #ff7a5c; }
.hero .scribble--blue { color: #86b0ff; }
.rot-line { color: var(--yellow); filter: drop-shadow(0 0 10px rgba(255,198,26,.6)); }

/* badge "Desde 1992" y ribbon */
.hero-flag { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); backdrop-filter: blur(8px); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.hero-flag .yr { background: var(--yellow); color: var(--navy-900); }

/* CTAs que resaltan sobre oscuro */
.hero .btn--primary { background: #fff; color: var(--navy-900); box-shadow: 0 16px 34px rgba(0,0,0,.4); }
.hero .btn--primary:hover { background: var(--yellow); color: var(--navy-900); }

/* stats */
.hero-trust { border-top: 2px dashed rgba(255,255,255,.16); }
.hero-trust .num { color: #fff; }
.hero-trust .num b { color: var(--yellow); }
.hero-trust .lbl { color: rgba(255,255,255,.6); }

/* collage: los productos EXPLOTAN sobre oscuro */
.hero-board .polaroid { box-shadow: 0 26px 60px rgba(0,0,0,.5); }
.hero-board .hb-logo img { box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 4px rgba(255,255,255,.9); }
.hero-board .hb-logo::before { background: radial-gradient(circle, rgba(255,198,26,.75), transparent 66%); filter: blur(16px); }
.hero-board .hb-ring { border-color: rgba(255,198,26,.6); }
.hero-board .doodle-note { color: #fff; }
.hero-board .pola-cap { color: var(--navy-800); }

/* transición suave hacia el contenido claro (borde inferior degradado) */
.hero::before { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(8,13,32,0)); }

/* =========================================================
   V13 — Fix preloader en móvil (texto y tamaños)
   ========================================================= */
@media (max-width: 600px) {
  .pre-stage { width: 280px; height: 280px; }
  .pre-logo-img { width: 156px; height: 156px; }
  .pl-fly { margin: -25px 0 0 -25px; transform: rotate(var(--a)) translateX(126px) rotate(calc(-1 * var(--a))); }
  .pl-fly i { width: 50px; height: 50px; border-radius: 15px; }
  .pl-fly i svg { width: 25px; height: 25px; }
  .pl-ring { inset: 44px; }
  .pl-pop { width: 178px; height: 178px; margin: -89px 0 0 -89px; }
  .pre-word { font-size: 16px; letter-spacing: .015em; max-width: 90vw; flex-wrap: wrap; justify-content: center; row-gap: 2px; }
  .pre-track { width: 230px; }
  .pre-scene { gap: 24px; padding: 0 16px; }
}
@media (max-width: 380px) {
  .pre-stage { width: 250px; height: 250px; }
  .pre-logo-img { width: 138px; height: 138px; }
  .pl-fly { transform: rotate(var(--a)) translateX(112px) rotate(calc(-1 * var(--a))); }
  .pl-fly i { width: 44px; height: 44px; }
  .pl-fly i svg { width: 22px; height: 22px; }
  .pre-word { font-size: 15px; }
}

/* =========================================================
   V14 — Fix: quitar el "rectángulo" que rotaba en el preloader
   ========================================================= */
.pre-glow { inset: -45%; animation: glowPulse 3.4s ease-in-out infinite; }  /* sin glowSpin + más grande que la pantalla */

/* =========================================================
   V15 — Topbar beige y pase de mobile
   ========================================================= */
/* Topbar en color beige (como el header) */
.topbar { background: var(--cream); color: var(--ink-soft); border-bottom: 1px solid var(--line); font-weight: 500; }
.topbar a { color: var(--ink-soft); }
.topbar a:hover { color: var(--red); }
.topbar-item svg { color: var(--navy-700); }


/* ---------- MOBILE: topbar limpio ---------- */
@media (max-width: 640px) {
  .topbar { font-size: 11.5px; }
  .topbar .container { height: 38px; }
  .topbar-left, .topbar-right { gap: 12px; }
  .topbar-item { white-space: nowrap; }
  .topbar-item svg { width: 13px; height: 13px; }
  .topbar-right .topbar-item:first-child { display: none; } /* ocultar "Portal Colegios" */
}

/* ---------- MOBILE: hero mejor adaptado ---------- */
@media (max-width: 640px) {
  .hero { padding: 34px 0 44px; }
  .hero-grid { gap: 30px; }
  .hero-h1 { font-size: clamp(34px, 11vw, 48px); }
  .hero .lead { font-size: 16px; margin: 18px 0 24px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: 20px 14px; margin-top: 30px; padding-top: 22px; grid-template-columns: 1fr 1fr; display: grid; }
  .hero-trust > div:last-child { grid-column: 1 / -1; }
  .hero-trust .num { font-size: 26px; }
  .hero-stage, .hero-board { max-width: 340px; margin: 0 auto; }
}

/* ---------- MOBILE: secciones con mejor aire ---------- */
@media (max-width: 640px) {
  .section { padding: 52px 0; }
  .section--tight { padding: 40px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head h2 { font-size: clamp(24px, 7vw, 32px); }
  .feat-head { gap: 14px; }
  .feat-head .btn, .social-links { align-self: flex-start; }
  .kits-hero { padding: 30px 22px; }
  .kits-copy h2 { font-size: clamp(24px, 7vw, 32px); }
  .colegios, .postcard { padding: 30px 22px; }
  .colegios h2, .postcard h2 { font-size: clamp(23px, 6.6vw, 30px); }
  .colegios-stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .quote-form { padding: 22px; }
  .footer-grid { gap: 26px 24px; }
  .footer-bottom { font-size: 12px; }
}

/* =========================================================
   V16 — Fix acordeón en móvil (paneles colapsaban a 0)
   ========================================================= */
@media (max-width: 900px) {
  .accordion { gap: 12px; }
  .acc-panel { flex: 0 0 auto !important; height: 100px; }
  .acc-panel.is-active { flex: 0 0 auto !important; height: 250px; }
  .acc-text b { white-space: normal; }
  .acc-panel.is-active .acc-text span { max-height: 80px; }
}

/* =========================================================
   V17 — Footer bien adaptado en móvil
   ========================================================= */
@media (max-width: 640px) {
  .site-footer { padding-top: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 100%; font-size: 13.5px; }
  .footer-grid > .footer-col:last-child { grid-column: 1 / -1; }   /* Nuestras tiendas a todo el ancho */
  .footer-col h5 { margin-bottom: 12px; }
  .footer-col ul { gap: 10px; }
  .footer-col a { font-size: 13.5px; }
  .footer-col a b { font-size: 14px; }
  .footer-bottom { flex-direction: column; gap: 14px; text-align: center; padding: 20px 0; }
  .footer-bottom .pays { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 359px) {
  .footer-grid { grid-template-columns: 1fr; }   /* pantallas muy chicas: 1 columna */
  .footer-grid > .footer-col:last-child { grid-column: auto; }
}

/* =========================================================
   V18 — PRELOADER v2 "vergonsísimo"
   Explosión + cometas + doble órbita + anillo de progreso
   + cañón de confeti + salida en iris circular
   ========================================================= */
#preloader.pl2 {
  background: radial-gradient(120% 90% at 50% 28%, #16224f 0%, #0a1128 55%, #070c1e 100%);
  gap: 0; clip-path: circle(135% at 50% 44%);
}

/* ---- capas de fondo ---- */
.pl2-bg, .pl2-stars, .pl2-comets { position: absolute; inset: 0; pointer-events: none; }
.pl2-aurora { position: absolute; inset: -30%; filter: blur(70px); opacity: .8;
  background:
    radial-gradient(420px 340px at 20% 28%, rgba(45,110,255,.42), transparent 62%),
    radial-gradient(380px 300px at 82% 22%, rgba(255,198,26,.3), transparent 60%),
    radial-gradient(400px 340px at 74% 84%, rgba(228,35,27,.34), transparent 62%),
    radial-gradient(360px 300px at 22% 86%, rgba(47,169,59,.32), transparent 60%);
  animation: auroraDrift 12s ease-in-out infinite; }
.pl2-grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 42%, #000 18%, transparent 74%); }
.pl2-vignette { position: absolute; inset: 0; background: radial-gradient(125% 105% at 50% 45%, transparent 52%, rgba(0,0,0,.55) 100%); }

/* estrellas: destellos ✦, aritos y puntos con glow */
.pl2-stars b { position: absolute; display: block; line-height: 1; animation: pl2Twinkle 3s ease-in-out infinite; }
.st-star { text-shadow: 0 0 12px currentColor; }
.st-ring { width: 9px; height: 9px; border: 1.5px solid; border-radius: 50%; }
.st-dot { border-radius: 50%; box-shadow: 0 0 9px 1px rgba(255,255,255,.28); }
@keyframes pl2Twinkle { 0%,100% { opacity: .1; transform: scale(.5); } 50% { opacity: .95; transform: scale(1.15); } }

/* cometas cruzando el fondo */
.pl2-comets i { position: absolute; top: 14%; left: 104%; width: 190px; height: 2.5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0)); transform: rotate(160deg);
  opacity: 0; animation: pl2Comet 8.5s linear infinite; }
.pl2-comets i:nth-child(2) { top: 60%; width: 150px; animation-delay: 3.2s; }
.pl2-comets i:nth-child(3) { top: 34%; width: 230px; animation-delay: 5.9s; }
@keyframes pl2Comet {
  0% { opacity: 0; transform: rotate(160deg) translateX(0); }
  3% { opacity: .9; }
  12% { opacity: 0; transform: rotate(160deg) translateX(580px); }
  100% { opacity: 0; transform: rotate(160deg) translateX(580px); }
}

/* ---- escena ---- */
.pl2-scene { position: relative; z-index: 2; display: grid; justify-items: center; gap: 13px; padding: 0 18px; }
.pl2-stage { position: relative; width: 430px; height: 430px; display: grid; place-content: center;
  transition: transform .16s var(--ease); --R1: 158px; --R2: 202px; --chipA: 58px; --chipB: 42px; }

/* rayos de sol girando tras el logo */
.pl2-rays { position: absolute; inset: -6%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.075) 0deg 5deg, transparent 5deg 24deg);
  mask-image: radial-gradient(circle, #000 16%, transparent 60%);
  opacity: 0; animation: pl2Fade .9s .7s forwards, o360 30s linear infinite; }
@keyframes o360 { to { transform: rotate(360deg); } }
@keyframes o-360 { to { transform: rotate(-360deg); } }
@keyframes pl2Fade { to { opacity: 1; } }

/* ondas expansivas al aparecer el logo */
.pl2-shock { position: absolute; top: 50%; left: 50%; width: 230px; height: 230px; margin: -115px;
  border-radius: 50%; border: 3px solid var(--yellow); opacity: 0; animation: pl2Shock 1s .5s ease-out both; }
.pl2-shock--2 { border-color: #ff5148; animation-delay: .72s; }
.pl2-shock--3 { border-color: #5b8cff; animation-delay: .94s; }
@keyframes pl2Shock { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

/* anillo de progreso arcoíris con punta luminosa */
.pl2-progress { position: absolute; top: 50%; left: 50%; width: 284px; height: 284px; margin: -142px;
  opacity: 0; animation: pl2Fade .7s .6s forwards; }
.pl2-ring-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 2.6; }
.pl2-ring-fill { fill: none; stroke-width: 3.4; stroke-linecap: round;
  transform: rotate(-90deg); transform-box: view-box; transform-origin: 50% 50%;
  filter: drop-shadow(0 0 5px rgba(255,198,26,.65)); transition: stroke-dashoffset .18s linear; }
.pl2-tipg { transform-box: view-box; transform-origin: 50% 50%; transition: transform .18s linear; }
.pl2-tip { fill: #fff; filter: drop-shadow(0 0 6px #ffc61a) drop-shadow(0 0 13px rgba(255,198,26,.85)); }

/* doble órbita de útiles (sentidos opuestos) */
.pl2-orbit { position: absolute; inset: 0; }
.pl2-orbit--a { animation: o360 26s linear 1.7s infinite; }
.pl2-orbit--a .pl2-fly i { animation: o-360 26s linear 1.7s infinite; }
.pl2-orbit--b { animation: o-360 34s linear 1.7s infinite; }
.pl2-orbit--b .pl2-fly i { animation: o360 34s linear 1.7s infinite; }
.pl2-chip { position: absolute; top: 50%; left: 50%; }
.pl2-orbit--a .pl2-chip { width: var(--chipA); height: var(--chipA); margin: calc(var(--chipA) / -2);
  transform: rotate(var(--a)) translateX(var(--R1)) rotate(calc(-1 * var(--a))); }
.pl2-orbit--b .pl2-chip { width: var(--chipB); height: var(--chipB); margin: calc(var(--chipB) / -2);
  transform: rotate(var(--a)) translateX(var(--R2)) rotate(calc(-1 * var(--a))); }
.pl2-fly { position: absolute; inset: 0; animation: pl2FlyIn .92s var(--fd) cubic-bezier(.16,1.24,.3,1) both; }
@keyframes pl2FlyIn {
  0% { transform: translate(var(--fx), var(--fy)) scale(.2) rotate(220deg); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; }
}
/* estela de cometa al entrar */
.pl2-fly::before { content: ""; position: absolute; top: 50%; left: 50%; width: 150px; height: 3px; border-radius: 3px;
  transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255,255,255,.85), transparent);
  animation: pl2Streak .8s var(--fd) both; }
@keyframes pl2Streak {
  0% { transform: rotate(var(--sa)) scaleX(1); opacity: .8; }
  60% { opacity: .35; }
  100% { transform: rotate(var(--sa)) scaleX(0); opacity: 0; }
}
.pl2-fly i { position: absolute; inset: 0; display: grid; place-content: center; border-radius: 26%; color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.24), 0 0 0 2px rgba(255,255,255,.14); }
.pl2-orbit--a .pl2-fly i svg { width: 27px; height: 27px; }
.pl2-orbit--b .pl2-fly i svg { width: 20px; height: 20px; }

/* logo: pop con rebote + halo + brillo que lo recorre */
.pl2-logo { position: relative; width: 212px; height: 212px; border-radius: 50%; z-index: 4;
  animation: pl2LogoPop .95s .3s cubic-bezier(.2,1.45,.4,1) both; }
.pl2-logo img { width: 100%; height: 100%; border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255,255,255,.92), 0 0 0 10px rgba(255,198,26,.35), 0 24px 60px rgba(0,0,0,.55); }
.pl2-logo::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,198,26,.6), transparent 66%); filter: blur(16px);
  animation: glowPulse 2.8s 1.1s ease-in-out infinite; }
@keyframes pl2LogoPop { 0% { transform: scale(0) rotate(-60deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.pl2-shine { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.pl2-shine::after { content: ""; position: absolute; top: -30%; left: -80%; width: 45%; height: 160%;
  transform: rotate(22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: pl2LogoShine 3.6s 1.5s ease-in-out infinite; }
@keyframes pl2LogoShine { 0% { left: -80%; } 24% { left: 135%; } 100% { left: 135%; } }

/* título 3D letra por letra + barrido de brillo */
.pl2-title { position: relative; display: flex; perspective: 520px; font-family: var(--font-head); font-weight: 800;
  font-size: 30px; letter-spacing: .045em; color: #fff; margin-top: 14px; overflow: hidden; padding: 4px 8px; }
.pl2-title span { display: inline-block; opacity: 0; transform: translateY(30px) rotateX(78deg);
  animation: pl2Letter .6s calc(1.05s + var(--li) * .042s) cubic-bezier(.2,1.35,.4,1) forwards; }
.pl2-title span:nth-child(1) { color: #ff5148; font-size: 1.22em; }
.pl2-title span:nth-child(2) { color: #5b8cff; font-size: 1.22em; }
.pl2-title span:nth-child(3) { color: #45c455; font-size: 1.22em; }
@keyframes pl2Letter { to { opacity: 1; transform: translateY(0) rotateX(0); } }
.pl2-title::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%;
  transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  mix-blend-mode: overlay; animation: pl2TitleShine 1s 2.15s ease both; }
@keyframes pl2TitleShine { from { left: -40%; } to { left: 132%; } }

/* tagline manuscrita + estado + porcentaje */
.pl2-tag { font-family: var(--font-hand); font-weight: 700; font-size: 23px; color: #ffd873;
  opacity: 0; animation: pl2Up .7s 1.75s var(--ease) forwards; }
.pl2-status { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 8px;
  opacity: 0; animation: pl2Up .7s 1.95s var(--ease) forwards; transition: opacity .2s, transform .2s; }
.pl2-status svg { width: 15px; height: 15px; color: var(--yellow); }
.pl2-status.swap { opacity: 0 !important; transform: translateY(6px) !important; }
.pl2-pct { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--yellow);
  text-shadow: 0 0 18px rgba(255,198,26,.5); opacity: 0; animation: pl2Up .6s 1.2s var(--ease) forwards; }
@keyframes pl2Up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pl2-confetti { position: absolute; top: 50%; left: 50%; z-index: 9; pointer-events: none; line-height: 1; }

/* ---- SALIDA: carga → estallido → iris ---- */
#preloader.pl2.is-charge .pl2-stage { transform: scale(.93); }
#preloader.pl2.is-burst .pl2-stage { transform: scale(1.05); transition: transform .3s var(--ease); }
#preloader.pl2.is-burst .pl2-orbit { animation-play-state: paused; }
#preloader.pl2.is-burst .pl2-fly { animation: pl2FlyOut .55s cubic-bezier(.45,0,.8,.4) forwards; }
#preloader.pl2.is-burst .pl2-fly::before { display: none; }
@keyframes pl2FlyOut { to { transform: translate(calc(var(--fx) * 1.25), calc(var(--fy) * 1.25)) scale(.5) rotate(160deg); opacity: 0; } }
#preloader.pl2.is-burst .pl2-title,
#preloader.pl2.is-burst .pl2-tag,
#preloader.pl2.is-burst .pl2-status,
#preloader.pl2.is-burst .pl2-pct { transition: opacity .3s, transform .35s var(--ease); opacity: 0 !important; transform: translateY(-26px) !important; }
#preloader.pl2.is-burst .pl2-progress,
#preloader.pl2.is-burst .pl2-rays,
#preloader.pl2.is-burst .pl2-comets,
#preloader.pl2.is-burst .pl2-stars { transition: opacity .3s; opacity: 0 !important; }
#preloader.pl2.is-iris { clip-path: circle(0% at 50% 44%); transition: clip-path .64s cubic-bezier(.75,0,.18,1); }

/* ---- móvil ---- */
@media (max-width: 640px) {
  .pl2-scene { gap: 9px; }
  .pl2-stage { width: 300px; height: 300px; --R1: 112px; --R2: 144px; --chipA: 44px; --chipB: 33px; }
  .pl2-progress { width: 196px; height: 196px; margin: -98px; }
  .pl2-orbit--a .pl2-fly i svg { width: 21px; height: 21px; }
  .pl2-orbit--b .pl2-fly i svg { width: 16px; height: 16px; }
  .pl2-logo { width: 146px; height: 146px; }
  .pl2-shock { width: 160px; height: 160px; margin: -80px; }
  .pl2-title { font-size: 19px; letter-spacing: .03em; }
  .pl2-tag { font-size: 19px; }
  .pl2-pct { font-size: 24px; }
  .pl2-fly::before { width: 90px; }
}

/* =========================================================
   V19 — PRELOADER v3 "CUADERNO VIVO"
   Página de cuaderno dibujada a lápiz → detonación de color
   → calificación 100/100 → la página se arranca
   ========================================================= */
#preloader.pl3 { background: transparent; display: block; clip-path: none; gap: 0; }

/* ---- la hoja ---- */
.pl3-sheet { position: absolute; inset: -2% -2% -8% -2%; overflow: hidden;
  background: linear-gradient(180deg, #fefaf1, #fdf5e4);
  transform: rotate(.4deg); transform-origin: 50% 30%;
  box-shadow: 0 34px 90px rgba(0,0,0,.5);
  clip-path: polygon(0 0, 100% 0, 100% 96.5%, 96% 98.3%, 92% 96.8%, 88% 98.6%, 84% 97%, 80% 98.4%, 76% 96.9%, 72% 98.5%, 68% 97.1%, 64% 98.6%, 60% 96.8%, 56% 98.3%, 52% 97%, 48% 98.5%, 44% 96.9%, 40% 98.4%, 36% 97.1%, 32% 98.6%, 28% 96.9%, 24% 98.3%, 20% 97%, 16% 98.5%, 12% 96.8%, 8% 98.4%, 4% 97.1%, 0 98.5%);
  animation: pl3SheetIn .4s ease-out both; }
@keyframes pl3SheetIn { from { opacity: 0; } to { opacity: 1; } }
.pl3-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 60%, rgba(160,120,60,.1) 100%); }

/* renglones que se dibujan + margen + agujeros */
.pl3-rules i { position: absolute; left: 4%; right: 3%; height: 2px; background: rgba(122,168,214,.5);
  transform: scaleX(0); transform-origin: left center; animation: pl3Rule .5s var(--ld) ease-out forwards; }
@keyframes pl3Rule { to { transform: scaleX(1); } }
.pl3-marginline { position: absolute; top: 0; bottom: 0; left: 9vw; width: 2.5px; background: rgba(228,35,27,.4);
  transform: scaleY(0); transform-origin: top center; animation: pl3Rule .45s .12s ease-out forwards; }
.pl3-holes i { position: absolute; left: 4vw; width: 26px; height: 26px; border-radius: 50%;
  background: #0b1226; box-shadow: inset 0 2px 5px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.7);
  transform: scale(0); animation: pl3Hole .4s .3s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes pl3Hole { to { transform: scale(1); } }

/* ---- capas boceto (mono) y color ---- */
.pl3-mono, .pl3-color { position: absolute; inset: 0; }
.pl3-color { clip-path: circle(0% at 50% 52%); transition: clip-path .8s cubic-bezier(.25,.75,.25,1); will-change: clip-path; }

/* palabra "abc" manuscrita */
.pl3-word { position: absolute; left: 50%; top: 20vh; transform: translateX(-52%); width: min(480px, 74vw); }
.pl3-word svg { width: 100%; height: auto; display: block; }
.pl3-mono .wp { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pl3-mono .wp1 { animation: pl3Draw .34s .6s ease-in-out forwards; }
.pl3-mono .wp2 { animation: pl3Draw .34s .88s ease-in-out forwards; }
.pl3-mono .wp3 { animation: pl3Draw .3s 1.14s ease-in-out forwards; }
@keyframes pl3Draw { to { stroke-dashoffset: 0; } }

/* garabatos */
.pl3-doodle { position: absolute; display: block; transform: rotate(var(--dr)); }
.pl3-doodle svg { width: 100%; height: auto; display: block; }
.pl3-mono .pl3-doodle svg * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pl3Draw .55s var(--dd) ease-in-out forwards; }

/* tagline manuscrita + punto final */
.pl3-tagline { position: absolute; left: 50%; top: 51vh; transform: translateX(-50%);
  font-family: var(--font-hand); font-weight: 700; font-size: clamp(24px, 4.4vw, 40px); white-space: nowrap;
  display: flex; align-items: baseline; gap: 12px; }
.pl3-mono .pl3-tagline span { clip-path: inset(0 100% 0 0); animation: pl3Write .6s 2.02s linear forwards; }
@keyframes pl3Write { to { clip-path: inset(0 -2% 0 0); } }
.pl3-dot { width: 11px; height: 11px; border-radius: 50%; align-self: center; margin-top: .5em;
  transform: scale(0); }
.pl3-mono .pl3-dot { animation: pl3DotPop .3s 2.7s cubic-bezier(.2,1.6,.4,1) forwards; }
.pl3-color .pl3-dot { transform: scale(1); }
@keyframes pl3DotPop { to { transform: scale(1); } }

/* extras SOLO en la capa color */
.pl3-under { position: absolute; left: 50%; top: calc(20vh + min(480px, 74vw) * .5); transform: translateX(-52%) scaleX(0);
  transform-origin: left center; width: min(480px, 74vw); transition: transform .5s .25s var(--ease); }
.pl3-washi { position: absolute; width: 120px; height: 30px; background: rgba(255,198,26,.75);
  box-shadow: 0 2px 6px rgba(20,30,70,.15); opacity: 0; transition: opacity .3s .3s; }
.pl3-washi::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 7px, transparent 7px 14px); }
.pl3-washi--tl { top: 5vh; left: 12vw; transform: rotate(-8deg); }
.pl3-washi--br { bottom: 8vh; right: 10vw; transform: rotate(6deg); background: rgba(47,169,59,.55); }
.pl3-sticker { position: absolute; top: 16vh; right: 12vw; width: clamp(84px, 12vw, 140px); border-radius: 50%;
  box-shadow: 0 0 0 4px #fff, 0 14px 34px rgba(20,30,70,.35); opacity: 0; transform: rotate(10deg) scale(1.7); }
#preloader.pl3.is-color .pl3-under { transform: translateX(-52%) scaleX(1); }
#preloader.pl3.is-color .pl3-washi { opacity: 1; }
#preloader.pl3.is-color .pl3-sticker { animation: pl3Sticker .5s .3s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes pl3Sticker { to { opacity: 1; transform: rotate(8deg) scale(1); } }

/* ---- la calificación de la maestra (progreso diegético) ---- */
.pl3-grade { position: absolute; top: 5vh; right: 5vw; transform: rotate(-7deg);
  font-family: var(--font-hand); font-weight: 700; color: #d92c22; text-align: center;
  opacity: 0; animation: pl3Up .5s .5s ease-out forwards; }
.pl3-grade-num { font-size: clamp(46px, 7vw, 72px); line-height: 1; display: inline-block; }
.pl3-grade-den { font-size: clamp(24px, 3.4vw, 36px); opacity: .85; }
.pl3-grade-ring { position: absolute; top: 50%; left: 50%; width: 150%; height: 130%;
  transform: translate(-50%, -54%); overflow: visible; pointer-events: none; }
.pl3-grade-ring ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pl3-grade-yay { display: block; font-size: clamp(19px, 2.6vw, 27px); margin-top: 4px; opacity: 0; transform: translateY(6px); transition: all .35s .45s var(--ease); }
#preloader.pl3.is-graded .pl3-grade-ring ellipse { animation: pl3Draw .5s ease-in-out forwards; }
#preloader.pl3.is-graded .pl3-grade-yay { opacity: 1; transform: none; }
@keyframes pl3Up { from { opacity: 0; transform: rotate(-7deg) translateY(10px); } to { opacity: 1; transform: rotate(-7deg) translateY(0); } }

/* ---- el lápiz que dibuja ---- */
.pl3-pencil { position: fixed; top: 0; left: 0; width: 46px; z-index: 6; pointer-events: none;
  transform-origin: 50% 100%; animation: pl3Pencil 2.6s .3s cubic-bezier(.35,.6,.3,1) both; }
.pl3-pencil svg { width: 100%; height: auto; display: block; filter: drop-shadow(3px 6px 5px rgba(0,0,0,.25)); }
.pl3-pencil .pj { display: block; animation: pl3Jitter .13s linear infinite alternate; }
@keyframes pl3Jitter { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes pl3Pencil {
  0%   { transform: translate(108vw, 4vh) rotate(42deg); }
  9%   { transform: translate(calc(50vw - 168px), calc(38vh - 192px)) rotate(-30deg); }
  15%  { transform: translate(calc(50vw - 105px), calc(33vh - 192px)) rotate(-26deg); }
  21%  { transform: translate(calc(50vw - 40px), calc(40vh - 192px)) rotate(-32deg); }
  27%  { transform: translate(calc(50vw + 40px), calc(33vh - 192px)) rotate(-26deg); }
  32%  { transform: translate(calc(50vw + 128px), calc(39vh - 192px)) rotate(-30deg); }
  38%  { transform: translate(calc(76vw + 8px), calc(24vh - 192px)) rotate(-24deg); }
  48%  { transform: translate(calc(15vw + 8px), calc(31vh - 192px)) rotate(-34deg); }
  58%  { transform: translate(calc(19vw + 8px), calc(67vh - 192px)) rotate(-28deg); }
  65%  { transform: translate(calc(80vw + 8px), calc(66vh - 192px)) rotate(-24deg); }
  71%  { transform: translate(calc(50vw - 190px), calc(54vh - 192px)) rotate(-30deg); }
  86%  { transform: translate(calc(50vw + 150px), calc(55vh - 192px)) rotate(-26deg); }
  91%  { transform: translate(calc(50vw + 190px), calc(50vh - 192px)) rotate(-24deg); }
  95%  { transform: translate(calc(50vw + 190px), calc(54.5vh - 192px)) rotate(-26deg); }
  100% { transform: translate(calc(50vw + 196px), calc(47vh - 192px)) rotate(-22deg); }
}
#preloader.pl3.is-still .pl3-pencil .pj { animation-play-state: paused; }
#preloader.pl3.is-color .pl3-pencil { animation: pl3PencilOut .55s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes pl3PencilOut {
  from { transform: translate(calc(50vw + 196px), calc(47vh - 192px)) rotate(-22deg); }
  to   { transform: translate(118vw, -30vh) rotate(30deg); opacity: 0; }
}

/* chispas y pedacitos de papel */
.pl3-spark { position: fixed; z-index: 8; pointer-events: none; }
.pl3-scrap { position: fixed; z-index: 7; pointer-events: none; background: #fdf6e7;
  box-shadow: 0 3px 8px rgba(0,0,0,.3); border-radius: 2px; }

/* ---- salida: la página se arranca ---- */
#preloader.pl3.is-tear { pointer-events: none; }
#preloader.pl3.is-tear .pl3-sheet { transition: transform .85s cubic-bezier(.62,0,.3,1); transform: translateY(-122%) rotate(-4.5deg); }
#preloader.pl3.is-tear .pl3-pencil { display: none; }

/* ---- móvil ---- */
@media (max-width: 640px) {
  .pl3-word { top: 17vh; width: 78vw; }
  .pl3-tagline { top: 46vh; font-size: 22px; }
  .pl3-under { top: calc(17vh + 78vw * .5); width: 78vw; }
  .pl3-doodle { transform: rotate(var(--dr)) scale(.78); }
  .pl3-grade { top: 4vh; right: 4vw; }
  .pl3-sticker { top: 32vh; right: 5vw; }
  .pl3-washi--tl { top: 4vh; left: 6vw; width: 90px; }
  .pl3-washi--br { bottom: 6vh; right: 6vw; width: 90px; }
  .pl3-pencil { width: 34px; }
  .pl3-holes i { width: 18px; height: 18px; left: 3vw; }
  .pl3-marginline { left: 11vw; }
  @keyframes pl3Pencil {
    0%   { transform: translate(110vw, 4vh) rotate(42deg); }
    9%   { transform: translate(calc(50vw - 120px), calc(32vh - 142px)) rotate(-30deg); }
    32%  { transform: translate(calc(50vw + 95px), calc(33vh - 142px)) rotate(-26deg); }
    38%  { transform: translate(calc(74vw + 6px), calc(20vh - 142px)) rotate(-24deg); }
    48%  { transform: translate(calc(13vw + 6px), calc(28vh - 142px)) rotate(-34deg); }
    58%  { transform: translate(calc(17vw + 6px), calc(64vh - 142px)) rotate(-28deg); }
    65%  { transform: translate(calc(78vw + 6px), calc(63vh - 142px)) rotate(-24deg); }
    71%  { transform: translate(calc(50vw - 130px), calc(48vh - 142px)) rotate(-30deg); }
    86%  { transform: translate(calc(50vw + 105px), calc(49vh - 142px)) rotate(-26deg); }
    95%  { transform: translate(calc(50vw + 135px), calc(48.5vh - 142px)) rotate(-26deg); }
    100% { transform: translate(calc(50vw + 140px), calc(42vh - 142px)) rotate(-22deg); }
  }
  @keyframes pl3PencilOut {
    from { transform: translate(calc(50vw + 140px), calc(42vh - 142px)) rotate(-22deg); }
    to   { transform: translate(120vw, -30vh) rotate(30deg); opacity: 0; }
  }
}

/* =========================================================
   V20 — Cuaderno vivo: más contenido + fix "¡Excelente!"
   ========================================================= */
/* FIX calificación: el círculo rodea solo el número; "¡Excelente!" queda debajo y libre */
.pl3-grade-top { position: relative; display: inline-block; line-height: 1; }
.pl3-grade-ring { top: 50% !important; left: 50% !important; width: 138% !important; height: 128% !important;
  transform: translate(-50%,-50%) !important; }
.pl3-grade-yay { display: block; margin-top: 16px; }

/* Línea "Tarea:" arriba (se escribe) + check que se marca al final */
.pl3-tarea { position: absolute; top: 8.5vh; left: 12vw; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-hand); font-weight: 700; font-size: clamp(18px, 2.6vw, 27px); white-space: nowrap; }
.pl3-tarea .pl3-check { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.pl3-mono .pl3-tarea span { clip-path: inset(0 100% 0 0); animation: pl3Write .55s .45s linear forwards; }
.pl3-mono .pl3-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
#preloader.pl3.is-graded .pl3-check path { animation: pl3Draw .4s ease-out forwards; }

/* Línea de caligrafía "Aa Bb Cc · 1 2 3" */
.pl3-practice { position: absolute; top: 39vh; left: 50%; transform: translateX(-50%);
  font-family: var(--font-hand); font-weight: 700; font-size: clamp(24px, 4vw, 40px); letter-spacing: .06em; white-space: nowrap; }
.pl3-practice b { display: inline-block; opacity: 0; transform: translateY(10px); }
.pl3-mono .pl3-practice b { animation: pl3PopIn .4s calc(1.5s + var(--x,0) * 1ms) forwards; }
.pl3-practice b:nth-child(odd) { --x: 40; } .pl3-practice b:nth-child(3n) { --x: 90; } .pl3-practice b:nth-child(4n) { --x: 140; } .pl3-practice b:nth-child(5n) { --x: 200; }
@keyframes pl3PopIn { to { opacity: 1; transform: none; } }

/* Vuelo punteado + avioncito de papel */
.pl3-flight { position: absolute; top: 30vh; right: 6vw; width: clamp(150px, 20vw, 220px); height: auto; }
.pl3-mono .pl3-flight path { stroke-dasharray: 1 11; opacity: 0; animation: pl3Fade .5s 1.5s forwards; }
.pl3-plane { position: absolute; top: calc(30vh - 6px); right: 5vw; width: 30px; height: 30px; }
.pl3-mono .pl3-plane path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pl3Draw .5s 1.65s ease-out forwards; }
.pl3-color .pl3-plane { animation: pl3PlaneBob 3s ease-in-out infinite; }
@keyframes pl3PlaneBob { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-6deg); } }

/* Flechita hecha a mano */
.pl3-arrow { position: absolute; top: 61vh; left: 42vw; width: clamp(70px, 9vw, 120px); height: auto; transform: rotate(6deg); }
.pl3-mono .pl3-arrow path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pl3Draw .55s 2.1s ease-out forwards; }

/* Círculo garabateado extra (capa color) */
.pl3-scribble { position: absolute; top: 15vh; right: 11vw; width: clamp(120px, 15vw, 190px); height: auto; opacity: 0; }
.pl3-color .pl3-scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; }
#preloader.pl3.is-graded .pl3-scribble { opacity: 1; }
#preloader.pl3.is-graded .pl3-scribble path { animation: pl3Draw .6s ease-out forwards; }

/* =========================================================
   V21 — Chasis cinemático de páginas internas + El Subrayado
   ========================================================= */
.hero-cine { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* escopado a .hero-cine: el home tiene su PROPIA .hero-aurora que no debe tocarse */
.hero-cine .hero-aurora {
  position: absolute; top: -30%; right: -12%; width: 70%; height: 155%;
  background: radial-gradient(closest-side, var(--hero-accent), transparent 72%);
  filter: blur(60px); opacity: .55; mix-blend-mode: screen;
  transform: translate3d(var(--ax, 0px), calc(var(--py, 0) * .22px + var(--ay, 0px)), 0);
  transition: transform .5s var(--ease-cine);
  animation: auroraDrift 14s ease-in-out infinite;
}
@keyframes auroraDrift { 0%, 100% { opacity: .48; } 50% { opacity: .68; } }
.hero-cine .hero-dot {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, var(--hero-accent), transparent);
  opacity: var(--o, .2); filter: blur(2px);
  transform: translate3d(0, calc(var(--py, 0) * .45px), 0);
  animation: dotPulse var(--sp, 9s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: calc(var(--o, .2) * .55); } 50% { opacity: var(--o, .2); } }
.hero-spot {
  /* círculo fijo movido con transform: el gradiente se rasteriza una vez, no en cada frame */
  position: absolute; left: 0; top: 0; width: 460px; height: 460px; border-radius: 50%;
  opacity: 0; transition: opacity .4s var(--ease); will-change: transform;
  background: radial-gradient(closest-side, rgba(255,255,255,.15), transparent 68%);
  transform: translate3d(calc(var(--mx, -999px) - 230px), calc(var(--my, -999px) - 230px), 0);
}
.page-hero .page-doodles { z-index: 1; }
.page-hero .page-doodles .doodle { opacity: .58; filter: drop-shadow(0 3px 10px rgba(0,0,0,.28)); }
/* Costura de papel rasgado: el hero oscuro se disuelve en el crema */
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px; z-index: 3; pointer-events: none;
  background: bottom / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath fill='%23fdf8ee' d='M0,30 L0,14 L28,17 L60,9 L96,15 L134,7 L168,16 L210,10 L250,18 L292,9 L332,15 L372,8 L410,17 L452,10 L492,16 L534,8 L576,15 L618,10 L660,18 L702,9 L742,15 L784,8 L826,16 L868,10 L908,17 L950,9 L992,15 L1034,8 L1074,16 L1116,10 L1158,15 L1200,12 L1200,30 Z'/%3E%3C/svg%3E"); }
body[data-page="producto"] .page-hero::after { height: 20px; }

/* Word-reveal del H1 (máscara por palabra) */
.page-hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.page-hero h1 .w > span { display: inline-block; transform: translateY(115%); transition: transform .62s var(--ease-cine) calc(var(--i) * .06s); }
body.is-loaded .page-hero h1.ready .w > span { transform: none; }

/* El Subrayado: tinta que se dibuja bajo cada título */
.ink-host { position: relative; display: block; width: fit-content; } /* línea propia + subrayado al ancho del texto */
.section-head.center .ink-host { margin-inline: auto; }
.ink-underline { position: absolute; left: 0; bottom: -.18em; width: 100%; height: .42em; overflow: visible; pointer-events: none; color: var(--hero-accent); }
.ink-host.ink-body .ink-underline { color: var(--yellow-deep); }
.ink-underline path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ink-host.ink-go .ink-underline path { animation: inkDraw .62s var(--ease-draw) .16s forwards; }
/* riel transparente de ancho completo: se mueve con transform y su ::before es el punto (60fps) */
.ink-tip { position: absolute; left: 0; bottom: -.26em; width: 100%; height: 9px; opacity: 0; pointer-events: none; color: var(--hero-accent); }
.ink-host.ink-body .ink-tip { color: var(--yellow-deep); }
.ink-tip::before { content: ""; position: absolute; left: -4px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ink-host.ink-go .ink-tip { animation: inkTip .62s var(--ease-draw) .16s forwards; }
@keyframes inkDraw { to { stroke-dashoffset: 0; } }
@keyframes inkTip { 0% { transform: translateX(0); opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }

/* Onda + morph al agregar a cotización */
[data-add] { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.2)); pointer-events: none; z-index: 3; }
.prod-add.is-added { background: var(--green); color: #fff; }
.btn--primary.is-added { background: var(--green); }
.is-added svg { animation: stampPop .4s var(--ease-spring); }
@keyframes stampPop { 0% { transform: scale(0) rotate(-14deg); } 60% { transform: scale(1.25) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }

/* ---- Catálogo: ola escalonada + toolbar pegajosa + contador que tickea ---- */
.prod-grid [data-reveal] { transition-delay: calc(var(--ri, 0) * 45ms); }
.catalog-toolbar { position: sticky; top: calc(var(--header-h) + 8px); z-index: 6; background: rgba(253,248,238,.9); backdrop-filter: blur(8px); padding: 12px 14px; margin-bottom: 18px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
#resCount { display: inline-block; }
#resCount.tick { animation: countPop .42s var(--ease-spring); }
@keyframes countPop { 0% { transform: scale(1.4); color: var(--red); } 100% { transform: scale(1); } }

/* ---- Producto: escenario museo + columna de compra fija + specs en cascada ---- */
@media (min-width: 900px) {
  .pd-info { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
}
.pd-gallery .pd-main { box-shadow: inset 0 0 0 1px rgba(20,30,70,.05), inset 0 -70px 90px -46px rgba(16,25,59,.32); }
.pd-gallery .pd-main::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.5) 48%, transparent 64%); transform: translateX(-130%); }
body.is-loaded .pd-gallery .pd-main::after { animation: pdSheen 1.5s 1.1s var(--ease-cine) forwards; }
@keyframes pdSheen { to { transform: translateX(130%); } }
.pd-specs .pd-spec { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-cine), transform .5s var(--ease-cine); }
.pd-info.is-in .pd-specs .pd-spec { opacity: 1; transform: none; }
.pd-info.is-in .pd-specs .pd-spec:nth-child(1) { transition-delay: .12s; }
.pd-info.is-in .pd-specs .pd-spec:nth-child(2) { transition-delay: .2s; }
.pd-info.is-in .pd-specs .pd-spec:nth-child(3) { transition-delay: .28s; }
.pd-info.is-in .pd-specs .pd-spec:nth-child(4) { transition-delay: .36s; }

/* ---- Ofertas: sello de descuento que se estampa ---- */
.offer-stamp { position: absolute; top: 22px; right: max(24px, 5vw); z-index: 4; display: grid; place-items: center; gap: 1px; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #ff3a30, #b81c15); color: #fff; box-shadow: 0 22px 44px rgba(180,28,21,.45), inset 0 0 0 4px rgba(255,255,255,.3), inset 0 0 0 9px rgba(255,255,255,.14); transform: rotate(-8deg) scale(0); font-family: var(--font-head); text-align: center; pointer-events: none; }
.offer-stamp span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .2em; opacity: .85; }
.offer-stamp b { display: block; font-size: 36px; font-weight: 800; line-height: .9; letter-spacing: -.02em; }
body.is-loaded .offer-stamp { animation: stampDrop .62s .45s var(--ease-spring) forwards; }
@keyframes stampDrop { 0% { transform: rotate(-26deg) scale(2.5); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotate(-8deg) scale(1); opacity: 1; } }
/* reservar el hueco del sello para que no pise el título */
@media (min-width: 721px) { body[data-page="ofertas"] .page-hero .container { padding-right: 184px; } }
@media (max-width: 720px) { .offer-stamp { width: 82px; height: 82px; top: auto; bottom: 16px; right: 14px; } .offer-stamp b { font-size: 23px; } }

/* ---- Formularios: foco premium (etiqueta acentuada + subrayado que se dibuja) ---- */
.field { position: relative; }
.field label { transition: color .2s var(--ease); }
.field:focus-within label { color: var(--blue); } /* contraste AA sobre blanco (el amarillo queda en el subrayado) */
.field::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: var(--yellow-deep); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-cine); pointer-events: none; }
.field:focus-within::after { transform: scaleX(1); }

/* ---- El Resaltador (home): la banda amarilla se dibuja de izq a der al revelarse ---- */
[data-reveal] .tape-underline::after { transform: scaleX(0) rotate(-1.2deg); transform-origin: 0 50%; transition: transform .55s var(--ease-cine) .18s; }
[data-reveal].is-in .tape-underline::after { transform: scaleX(1) rotate(-1.2deg); }

/* ---- El Círculo que Lazo: elipse roja a mano alrededor del número clave ---- */
.lasso-wrap { position: relative; display: inline-block; }
.lasso-svg { position: absolute; left: -12%; top: -18%; width: 124%; height: 136%; overflow: visible; pointer-events: none; z-index: 2; }
.lasso-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.lasso-go .lasso-svg path { animation: inkDraw .7s var(--ease-draw) .5s forwards; }

/* ---- Colegios: secuencia de pasos pineada ---- */
.steps-pin.is-pinned { min-height: 235vh; }
.steps-pin.is-pinned .steps-stage { position: sticky; top: calc(var(--header-h) + 34px); }
.steps-stage { position: relative; }
.steps-big { position: absolute; top: -30px; right: -8px; z-index: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(150px, 19vw, 250px); line-height: 1; color: transparent; -webkit-text-stroke: 2.5px rgba(31,79,196,.16); pointer-events: none; user-select: none; }
.steps-big.pop { animation: stepNumPop .45s var(--ease-spring); }
@keyframes stepNumPop { 0% { transform: scale(1.25); -webkit-text-stroke-color: rgba(228,35,27,.4); } 100% { transform: scale(1); } }
.steps-rail { height: 5px; border-radius: 5px; background: var(--line-2); margin: 4px 0 30px; overflow: hidden; position: relative; z-index: 1; }
.steps-rail i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--yellow) 34%, var(--green) 67%, var(--blue)); transform: scaleX(0); transform-origin: left; }
.steps-pin.is-pinned #steps { position: relative; z-index: 1; }
.steps-pin.is-pinned .cat-card { opacity: .22; transform: translateY(26px) scale(.97); transition: opacity .5s var(--ease-cine), transform .5s var(--ease-cine); }
.steps-pin.is-pinned .cat-card.is-on { opacity: 1; transform: none; }

/* ---- Contacto: nota manuscrita en el hero ---- */
.hero-note { position: absolute; right: max(30px, 6vw); bottom: 54px; z-index: 4; color: var(--yellow); font-family: var(--font-hand); font-weight: 700; font-size: clamp(20px, 2.2vw, 27px); transform: rotate(-5deg); pointer-events: none; opacity: 0; }
.hero-note svg { position: absolute; right: 100%; top: -34px; width: 58px; height: auto; margin-right: 6px; transform: scaleX(-1) rotate(-12deg); }
.hero-note svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
body.is-loaded .hero-note { animation: noteIn .5s 1s var(--ease-cine) forwards; }
body.is-loaded .hero-note svg path { animation: inkDraw .55s 1.35s var(--ease-draw) forwards; }
@keyframes noteIn { from { opacity: 0; transform: rotate(-5deg) translateY(10px); } to { opacity: 1; transform: rotate(-5deg) translateY(0); } }
@media (max-width: 720px) { .hero-note { display: none; } }

/* ---- Ofertas: los kits entran en abanico ---- */
body[data-page="ofertas"] #kitsGrid .cat-card[data-reveal] { transform: translateY(30px) rotate(-2.5deg); }
body[data-page="ofertas"] #kitsGrid .cat-card[data-reveal]:nth-child(2) { transform: translateY(34px); }
body[data-page="ofertas"] #kitsGrid .cat-card[data-reveal]:nth-child(3) { transform: translateY(30px) rotate(2.5deg); }
body[data-page="ofertas"] #kitsGrid .cat-card[data-reveal].is-in { transform: none; }

/* ---- Sellos que se estampan al revelarse (íconos de tarjeta + badges) ---- */
[data-reveal].is-in .cat-ico { animation: stampPop .5s var(--ease-spring) .12s both; }
[data-reveal].is-in .prod-badges .badge { animation: stampPop .45s var(--ease-spring) .18s both; }

/* ---- Catálogo: skeletons que se desvanecen ---- */
.skel-card.is-fading { opacity: 0; transform: scale(.985); transition: opacity .22s var(--ease), transform .22s var(--ease); }

/* ---- Producto: la cinta washi se desenrolla al cargar ---- */
body.is-loaded .pd-gallery::before { animation: tapeUnroll .5s .85s var(--ease-cine) backwards; }
@keyframes tapeUnroll { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .hero-cine { display: none !important; } /* solo el chasis interno; la aurora propia del home no se toca */
  .page-hero h1 .w > span { transform: none !important; }
  .ink-tip { display: none !important; }
  .ink-underline path { stroke-dashoffset: 0 !important; }
  .page-hero .container { transform: none !important; }
  .site-header .nav, .site-header.is-scrolled .brand-logo { transition: none !important; }
  .prod-grid [data-reveal] { transition-delay: 0s !important; }
  .pd-specs .pd-spec { opacity: 1 !important; transform: none !important; }
  .pd-gallery .pd-main::after { display: none !important; }
  .offer-stamp { transform: rotate(-8deg) scale(1) !important; animation: none !important; }
  .lasso-svg path { stroke-dashoffset: 0 !important; }
  .hero-note { opacity: 1 !important; animation: none !important; }
  .hero-note svg path { stroke-dashoffset: 0 !important; }
  body[data-page="ofertas"] #kitsGrid .cat-card[data-reveal] { transform: none !important; }
}

/* doodles extra + estelas */
.pl3-fade { opacity: 0; }
@keyframes pl3Fade { to { opacity: 1; } }

@media (max-width: 640px) {
  .pl3-dm { display: none; }
  .pl3-tarea { top: 7vh; left: 13vw; font-size: 16px; }
  .pl3-practice { top: 36vh; font-size: 23px; }
  .pl3-flight { top: 27vh; right: 4vw; width: 130px; }
  .pl3-plane { top: calc(27vh - 6px); right: 3vw; }
  .pl3-arrow { top: 58vh; left: 40vw; width: 66px; }
  .pl3-scribble { top: 13vh; right: 7vw; width: 110px; }
}

/* V20.1 — quitar el círculo garabateado vacío (se veía sin propósito) */
.pl3-scribble { display: none !important; }
/* práctica: que resalte en color en la capa a color */
.pl3-color .pl3-practice b { text-shadow: 0 1px 0 rgba(255,255,255,.4); }


/* =========================================================
   V25 — "RECREO" · explosión kinética de color
   ========================================================= */
/* ---- HERO amarillo a sangre ---- */
.recreo { position: relative; overflow: hidden; padding: 64px 0 110px; min-height: 88svh; display: flex; align-items: center;
  background:
    linear-gradient(rgba(31,79,196,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,79,196,.055) 1px, transparent 1px),
    linear-gradient(168deg, #fffdf7 0%, #fdf4dd 62%, #ffedc2 100%);
  background-size: 36px 36px, 36px 36px, 100% 100%; }
.recreo::before { content: ""; position: absolute; left: 74px; top: 0; bottom: 0; width: 2px; background: rgba(228,35,27,.18); }
.rec-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rec-bg .rshape { position: absolute; opacity: .5; }
.rec-bg svg { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .rec-bg .rs-m { display: none; } .recreo::before { left: 22px; } }
@media (prefers-reduced-motion: reduce) { .rec-bg .rshape { animation: none !important; } }
.rec-curtains { position: absolute; inset: 0; z-index: 30; display: flex; pointer-events: none; }
.rec-curtains i { flex: 1; transform: translateY(0); }
.rec-curtains i:nth-child(1) { background: var(--red); }
.rec-curtains i:nth-child(2) { background: var(--blue); transition-delay: .07s; }
.rec-curtains i:nth-child(3) { background: var(--green); }
body.is-loaded .rec-curtains i { animation: recSweep .55s var(--ease-cine) forwards; }
body.is-loaded .rec-curtains i:nth-child(2) { animation-delay: .08s; }
body.is-loaded .rec-curtains i:nth-child(3) { animation-delay: .16s; }
@keyframes recSweep { to { transform: translateY(-102%); } }
.rec-note { position: absolute; top: 26px; right: max(26px, 4vw); z-index: 4; font-family: var(--font-hand); font-weight: 700; font-size: clamp(20px, 2vw, 27px); color: var(--navy-900); transform: rotate(-4deg); opacity: 0; }
body.is-loaded .rec-note { animation: noteIn .5s var(--ease-cine) .9s forwards; }
.rec-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.06fr .94fr; gap: 34px; align-items: center; width: 100%; }
.rec-flag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy-900); background: var(--yellow-soft); border: 1px solid rgba(16,25,59,.22); border-radius: 999px; padding: 7px 14px; margin-bottom: 18px; }
.rec-flag b { display: inline-flex; align-items: center; gap: 6px; }
.rec-flag svg { width: 14px; height: 14px; }
.rec-h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(44px, 6.6vw, 100px); line-height: .98; letter-spacing: -.03em; text-transform: uppercase; color: var(--navy-900); }
.rec-h1 .rl { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.rec-h1 .rlm { display: inline-block; transform: translateY(112%); }
body.is-loaded .rec-h1 .rlm { animation: recLineUp .62s var(--ease-cine) var(--d, 0s) forwards; }
@keyframes recLineUp { to { transform: translateY(0); } }
.recreo .rotator { position: relative; display: inline-block; background: var(--rc, var(--red)); padding: .02em .18em .06em; transform: rotate(-1.5deg); transition: background .4s var(--ease); }
.recreo .rot-word { color: var(--paper) !important; display: inline-block; text-transform: lowercase; transition: opacity .3s, transform .3s var(--ease); }
.recreo .rot-word.out { opacity: 0; transform: translateY(16px); }
.recreo .rot-line { display: none; }
.recreo .lead { color: rgba(16,25,59,.82); font-size: 18px; max-width: 480px; margin: 20px 0 26px; }
.recreo .lead b { color: var(--red); }
.recreo .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--light { background: #fffdf7; color: var(--navy-900); border: 2px solid var(--navy-900); }
.btn--light:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,25,59,.22); }
.recreo .hero-trust { display: flex; gap: 30px; margin-top: 30px; border-top: 2px solid rgba(16,25,59,.28); padding-top: 18px; }
.recreo .hero-trust .num, .recreo .hero-trust .num b { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--navy-900); letter-spacing: -.02em; }
.recreo .hero-trust .lbl { font-size: 12.5px; color: rgba(16,25,59,.72); }

/* la baraja */
.rec-deck { position: relative; height: clamp(380px, 42vw, 560px); z-index: 2; }
.rec-deck::before { content: ""; position: absolute; inset: -10% -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,198,26,.6), rgba(255,198,26,0) 72%); z-index: -1; }
.rcard { position: absolute; inset: 0; margin: auto; width: min(80%, 340px); height: 86%; background: var(--dc, var(--red)); border: 5px solid #fffdf7; box-shadow: 0 26px 60px rgba(16,25,59,.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; transition: transform .55s var(--ease-spring), opacity .4s var(--ease); }
.rcard.pos0 { transform: rotate(2deg); z-index: 3; }
.rcard.pos1 { transform: rotate(-8deg) translate(-30px, 12px); z-index: 2; }
.rcard.pos2 { transform: rotate(9deg) translate(30px, 18px); z-index: 1; }
.rcard.pos3 { transform: rotate(-15deg) translate(-56px, 26px); z-index: 3; opacity: .96; }
.rcard.pos4 { transform: rotate(16deg) translate(56px, 32px); z-index: 2; opacity: .93; }
.rcard.pos5 { transform: rotate(-4deg) translate(0, 40px); z-index: 1; opacity: .9; }
.rcard.pos0 { z-index: 6; } .rcard.pos1 { z-index: 5; } .rcard.pos2 { z-index: 4; }
.rec-deck:hover .rcard.pos1 { transform: rotate(-13deg) translate(-92px, 14px); }
.rec-deck:hover .rcard.pos2 { transform: rotate(14deg) translate(92px, 22px); }
.rec-deck:hover .rcard.pos3 { transform: rotate(-24deg) translate(-158px, 40px); }
.rec-deck:hover .rcard.pos4 { transform: rotate(25deg) translate(158px, 48px); }
.rec-deck:hover .rcard.pos5 { transform: rotate(-2deg) translate(0, 66px); }
.rcard.fly { transform: translateX(130%) rotate(22deg) !important; opacity: 0; }
.rc-letter { position: absolute; top: 4px; left: 14px; font-family: var(--font-head); font-weight: 800; font-size: 74px; line-height: 1; color: transparent; -webkit-text-stroke: 3px rgba(255,253,247,.85); }
.rcard img { width: 74%; aspect-ratio: 1/1.05; object-fit: contain; background: #fffdf7; border-radius: 10px; padding: 12px; box-shadow: inset 0 0 0 1px rgba(16,25,59,.12); }
.rc-price { position: absolute; top: 14px; right: -13px; background: #fffdf7; color: var(--navy-900); font-family: var(--font-head); font-weight: 800; font-size: 19px; padding: 7px 14px; transform: rotate(4deg); box-shadow: 0 8px 20px rgba(16,25,59,.25); }
.rc-name { font-family: var(--font-hand); font-weight: 700; font-size: 20px; color: #fffdf7; text-align: center; line-height: 1.05; }

/* costura rasgada + cintas diagonales */
.rec-torn { position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; z-index: 3; background: bottom / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath fill='%23fdf8ee' d='M0,30 L0,14 L28,17 L60,9 L96,15 L134,7 L168,16 L210,10 L250,18 L292,9 L332,15 L372,8 L410,17 L452,10 L492,16 L534,8 L576,15 L618,10 L660,18 L702,9 L742,15 L784,8 L826,16 L868,10 L908,17 L950,9 L992,15 L1034,8 L1074,16 L1116,10 L1158,15 L1200,12 L1200,30 Z'/%3E%3C/svg%3E"); }
body[data-page="index"] .marquee { margin: 0; position: relative; z-index: 6; border-block: 4px solid var(--navy-900); box-shadow: 0 18px 40px rgba(16,25,59,.16); }
body[data-page="index"] .marquee-track { padding: 16px 0; }
body[data-page="index"] a.marquee-item { color: #fff; font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 3vw, 42px); text-transform: uppercase; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 14px; transition: color .25s var(--ease), transform .25s var(--ease-spring); }
body[data-page="index"] a.marquee-item:hover { color: var(--mc, var(--yellow)); transform: scale(1.05) rotate(-1.2deg); }
body[data-page="index"] .mi-dot { width: 12px; height: 12px; }
body[data-page="index"] .marquee-track + .marquee-track { border-top: 1px dashed rgba(255,255,255,.2); }
body[data-page="index"] .marquee-track + .marquee-track .marquee-item { font-family: var(--font-hand); text-transform: none; letter-spacing: 0; font-weight: 700; font-size: clamp(19px, 1.9vw, 27px); color: #ffd35a; }

/* ---- kits: telón amarillo de entrada + letrones ---- */
.kits-hero { position: relative; overflow: hidden; }
.kits-hero::before { content: ""; position: absolute; inset: 0; background: var(--yellow); z-index: 8; clip-path: inset(0 0 0 0); pointer-events: none; }
.kits-hero.is-in::before { animation: curtainUp .65s var(--ease-cine) .1s forwards; }
@keyframes curtainUp { to { clip-path: inset(0 0 100% 0); } }
#kitsList .kit-letter { font-size: clamp(44px, 4vw, 64px); }

/* ---- colegios: ficha con sello COTIZACIÓN ---- */
body[data-page="index"] .colegios .quote-form { position: relative; transform: rotate(-1.2deg); }
body[data-page="index"] .colegios .quote-form::before { content: "COTIZACIÓN"; position: absolute; top: -14px; right: 16px; z-index: 2; font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .22em; color: var(--red); border: 3px solid var(--red); border-radius: 6px; padding: 5px 10px; background: rgba(255,253,247,.9); transform: rotate(3deg); }

/* ---- newsletter: telón de 4 barras ---- */
body[data-page="index"] .postcard { background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--blue) 75% 100%); border: none; position: relative; overflow: hidden; }
body[data-page="index"] .postcard::before { content: ""; position: absolute; inset: 0; background: var(--navy-900); z-index: 8; clip-path: inset(0 0 0 0); pointer-events: none; }
body[data-page="index"] .postcard.is-in::before { animation: curtainUp .65s var(--ease-cine) .15s forwards; }
body[data-page="index"] .postcard-body { background: var(--paper); border: 3px solid var(--navy-900); margin: 34px; padding: 44px 30px; position: relative; z-index: 1; }
body[data-page="index"] .postcard h2 { color: var(--navy-900); }

/* ---- responsive + reduce ---- */
@media (max-width: 900px) {
  .recreo { padding: 44px 0 92px; min-height: auto; }
  .rec-grid { grid-template-columns: 1fr; gap: 26px; }
  .rec-h1 { font-size: clamp(38px, 10.4vw, 64px); }
  .rec-deck { height: 340px; max-width: 340px; margin-inline: auto; }
  .rec-note { top: 12px; font-size: 18px; }
  body[data-page="index"] .marquee { margin-top: -22px; }
  body[data-page="index"] .postcard-body { margin: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-curtains { display: none !important; }
  .rec-h1 .rlm, .rec-note { transform: none !important; opacity: 1 !important; animation: none !important; }
  .rcard { transition: none !important; }
  #catGrid [data-reveal] { clip-path: none !important; }
  .kits-hero::before, body[data-page="index"] .postcard::before { display: none !important; }
}

/* =========================================================
   V26 — cinco secciones, cinco personalidades
   ========================================================= */
/* ---- 1 · MÁS BUSCADOS = la vitrina (carrusel snap con fichas de folder) ---- */
.sec-feat { background: var(--cream); }
#featGrid { display: flex; overflow-x: auto; gap: 24px; padding: 30px 8px 38px; scroll-snap-type: x mandatory; scrollbar-width: none; }
#featGrid::-webkit-scrollbar { display: none; }
#featGrid .prod-card { flex: 0 0 274px; scroll-snap-align: start; border: 2px solid var(--navy-900); border-radius: 18px; overflow: visible; position: relative; }
#featGrid .prod-card .prod-media { border-radius: 16px 16px 0 0; overflow: hidden; }
#featGrid .prod-card:nth-child(odd) { transform: rotate(-1.3deg); }
#featGrid .prod-card:nth-child(even) { transform: rotate(1.1deg); }
#featGrid .prod-card:hover { transform: rotate(0deg) translateY(-10px); box-shadow: 0 22px 44px rgba(16,25,59,.16); }
#featGrid .prod-card::before { content: ""; position: absolute; top: -11px; left: 20px; width: 52px; height: 14px; border-radius: 6px 6px 0 0; border: 2px solid var(--navy-900); border-bottom: none; z-index: 1; }
#featGrid .prod-card:nth-child(4n+1)::before { background: var(--red); }
#featGrid .prod-card:nth-child(4n+2)::before { background: var(--yellow); }
#featGrid .prod-card:nth-child(4n+3)::before { background: var(--green); }
#featGrid .prod-card:nth-child(4n+4)::before { background: var(--blue); }
.sec-feat .prod-grid::after { content: "⟵ deslizá para ver más"; display: block; text-align: right; font-family: var(--font-hand); font-weight: 700; font-size: 18px; color: var(--muted); padding-right: 10px; }

/* ---- 2 · REELS = CINE ABC (sala oscura con cinta de película) ---- */
.sec-reels { background: linear-gradient(160deg, #0c1330, var(--navy-900)); position: relative; padding: 84px 0; overflow: hidden; }
.sec-reels::before, .sec-reels::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,.85) 16px 30px); }
.sec-reels::before { top: 10px; } .sec-reels::after { bottom: 10px; }
.sec-reels .container { position: relative; }
.sec-reels .container::before { content: "ACCIÓN"; position: absolute; right: -3%; top: -30px; font-family: var(--font-head); font-weight: 800; font-size: clamp(80px, 12vw, 180px); letter-spacing: .02em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.1); pointer-events: none; }
.sec-reels .section-head h2 { color: #fff; }
.sec-reels .section-head h2 .tape-underline::after { background: var(--red); opacity: .75; }
.sec-reels .eyebrow { color: var(--yellow); }
.sec-reels .eyebrow::before { background: var(--yellow); }
.sec-reels .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.sec-reels .btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); }
#reels .reel { border: 4px solid #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 26px 60px rgba(0,0,0,.45); background: #fff; }
#reels .reel:hover { transform: translateY(-6px) scale(1.01); }
#reels .reel-live { background: var(--red); }

/* ---- 3 · HISTORIAS = el mural (polaroids pegadas con washi) ---- */
.sec-stories { background: var(--cream-2); position: relative; }
#stories .story { border: 1px solid var(--line-2); border-radius: 6px; padding: 10px 10px 0; background: #fff; box-shadow: 0 14px 30px rgba(30,40,80,.12); position: relative; overflow: visible; }
#stories .story::before { content: ""; position: absolute; top: -12px; left: calc(50% - 44px); width: 88px; height: 24px; background: rgba(255,198,26,.75); box-shadow: 0 2px 6px rgba(20,30,70,.14); background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); transform: rotate(-3deg); z-index: 2; }
#stories .story:nth-child(2)::before { background-color: rgba(228,35,27,.55); transform: rotate(2.5deg); }
#stories .story:nth-child(3)::before { background-color: rgba(31,79,196,.5); transform: rotate(-2deg); }
#stories .story:nth-child(4)::before { background-color: rgba(47,169,59,.5); transform: rotate(3deg); }
#stories .story:nth-child(odd) { transform: rotate(-1.6deg); }
#stories .story:nth-child(even) { transform: rotate(1.4deg); }
#stories .story:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 0 24px 50px rgba(30,40,80,.2); }
#stories .story-media { border-radius: 4px; }
#stories .story-cap { padding: 12px 6px 14px; }
#stories .story-cap b { font-family: var(--font-hand); font-weight: 700; font-size: 20px; color: var(--navy-800); }

/* ---- 4 · CATEGORÍAS = la escalera de color (bandas apiladas) ---- */
#catGrid { display: flex; flex-direction: column; gap: 10px; }
#catGrid .cat-card { display: flex; flex-direction: row; align-items: center; gap: 20px; width: 100%; min-height: 96px; padding: 16px 26px; background: var(--cc, var(--navy-800)); border: 2px solid var(--navy-900); border-radius: 16px; overflow: hidden; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
#catGrid .cat-card h3 { color: #fff; font-size: clamp(22px, 2.8vw, 38px); letter-spacing: -.02em; margin: 0; flex: 0 0 auto; }
#catGrid .cat-card p { color: rgba(255,255,255,.85); font-size: 14px; margin: 0; flex: 1; max-width: none; }
#catGrid .cat-card .cat-ico { order: -1; width: 52px; height: 52px; background: rgba(255,255,255,.22); color: #fff; flex: none; }
#catGrid .cat-card .cnt-tag { position: static; margin-left: auto; background: #fffdf7; color: var(--navy-900); border: none; flex: none; }
#catGrid .cat-card .go { color: #fff; flex: none; }
#catGrid .cat-card::after { display: none; }
#catGrid .cat-card:hover { transform: translateX(12px); box-shadow: -10px 10px 0 rgba(16,25,59,.16); }
#catGrid [data-reveal] { opacity: 0; transform: translateX(-44px); }
#catGrid [data-reveal].is-in { opacity: 1; transform: none; }


/* En el celular la banda no alcanza para todo en una fila: "Explorar" se
   cortaba y "Material didáctico" se salía. Queda ícono · nombre con el
   número debajo · flecha; el nombre puede ir en dos líneas. */
@media (max-width: 640px) {
  #catGrid { gap: 8px; }
  #catGrid .cat-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico name go" "ico cnt go"; column-gap: 14px; row-gap: 3px; align-items: center; min-height: 0; padding: 14px 16px; border-radius: 14px; }
  #catGrid .cat-card .cat-ico { grid-area: ico; width: 46px; height: 46px; border-radius: 13px; }
  #catGrid .cat-card .cat-ico svg { width: 22px; height: 22px; }
  #catGrid .cat-card h3 { grid-area: name; align-self: end; font-size: 21px; line-height: 1.12; }
  #catGrid .cat-card .cnt-tag { grid-area: cnt; justify-self: start; align-self: start; margin: 0; padding: 0; background: none; color: rgba(255,255,255,.82); font-size: 13px; }
  #catGrid .cat-card .go { grid-area: go; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 0; gap: 0; }
  #catGrid .cat-card .go svg { width: 18px; height: 18px; }
  #catGrid .cat-card:hover { transform: none; box-shadow: none; }
  /* "Los más buscados": las categorías en una fila que se desliza, no en
     cinco renglones antes de los productos */
  .feat-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 22px; padding: 4px 18px 12px; scroll-padding-inline: 18px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .feat-tabs::-webkit-scrollbar { display: none; }
  .feat-tab { flex: none; scroll-snap-align: start; padding: 9px 15px; }
  /* la sombra se cortaba en un rectángulo dentro de la fila que se desliza */
  .feat-tab.is-active { box-shadow: none; }
}

@media (max-width: 760px) {
  #featGrid .prod-card { flex-basis: 240px; }
  .sec-reels .container::before { display: none; }
  #catGrid .cat-card p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #featGrid .prod-card, #stories .story { transform: none !important; }
  #catGrid [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---- colecciones: stickers troquelados vivos ---- */
#collections .collection { position: relative; --tilt: -2.2deg; }
#collections .collection:nth-child(even) { --tilt: 2.2deg; }
#collections .collection[data-reveal] { opacity: 0; transform: scale(.4) rotate(-12deg); transition: opacity .45s var(--ease), transform .55s var(--ease-spring); }
#collections .collection[data-reveal].is-in { opacity: 1; transform: rotate(var(--tilt)); }
#collections .collection:hover { transform: rotate(0deg) translateY(-10px); }
#collections .col-ring { border-width: 4px; box-shadow: 0 10px 22px rgba(16,25,59,.16), inset 0 0 0 4px #fff; transition: outline-color .2s; }
#collections .collection:hover .col-ring { outline: 3px dashed var(--cc); outline-offset: 7px; }
#collections .collection:hover { animation: chipWiggle .55s var(--ease); }
#collections .col-ring img { transition: transform .4s var(--ease-spring); }
#collections .collection:hover .col-ring img { transform: scale(1.14) rotate(3deg); }
#collections .col-count { position: absolute; top: -2px; right: 10%; z-index: 2; min-width: 27px; height: 27px; padding: 0 7px; display: grid; place-content: center; background: var(--cc); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 13px; border-radius: 999px; border: 2.5px solid #fffdf7; box-shadow: 0 5px 12px rgba(16,25,59,.22); }
#collections .col-label { position: relative; font-weight: 800; }
#collections .col-label::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: 1px; height: 9px; background: var(--yellow); opacity: .55; z-index: -1; border-radius: 2px; transform: scaleX(0) rotate(-1.2deg); transform-origin: left; transition: transform .35s var(--ease-cine); }
#collections .collection:hover .col-label::after { transform: scaleX(1) rotate(-1.2deg); }
@media (prefers-reduced-motion: reduce) { #collections .collection { animation: none !important; transform: none !important; opacity: 1 !important; } }

/* ---- vitrina: fotos con fondo tintado, precio-etiqueta y flechas ---- */
#featGrid .prod-card .prod-media { min-height: 250px; }
#featGrid .prod-card:nth-child(4n+1) .prod-media.has-photo { background: var(--red-soft); }
#featGrid .prod-card:nth-child(4n+2) .prod-media.has-photo { background: var(--yellow-soft); }
#featGrid .prod-card:nth-child(4n+3) .prod-media.has-photo { background: var(--green-soft); }
#featGrid .prod-card:nth-child(4n+4) .prod-media.has-photo { background: var(--blue-soft); }
#featGrid .prod-photo { transition: transform .45s var(--ease-spring); }
#featGrid .prod-card:hover .prod-photo { transform: scale(1.12) rotate(-2.5deg); }
#featGrid .prod-card::before { transition: height .25s var(--ease), top .25s var(--ease); }
#featGrid .prod-card:hover::before { height: 20px; top: -17px; }
#featGrid .prod-price { background: var(--yellow); color: var(--navy-900); padding: 5px 12px; border-radius: 9px; transform: rotate(-2deg); box-shadow: 0 6px 14px rgba(242,169,0,.35); font-size: 21px; }
#featGrid .prod-price .old { color: rgba(16,25,59,.55); }
.vit-nav { display: flex; gap: 10px; justify-content: flex-end; margin-bottom: -6px; }
.vit-btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--navy-900); background: #fffdf7; color: var(--navy-900); display: grid; place-content: center; cursor: pointer; transition: background .2s, transform .25s var(--ease-spring), box-shadow .25s; }
.vit-btn:hover { background: var(--yellow); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(242,169,0,.4); }
.vit-btn svg { width: 20px; height: 20px; }
.vit-btn:first-child svg { transform: scaleX(-1); }

/* =========================================================
   V27 — buscador del catálogo
   ========================================================= */
.catalog-toolbar { gap: 14px; }
.cat-search { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 220px; max-width: 520px; }
.cat-search input[type="search"] {
  width: 100%; height: 52px; padding: 0 46px 0 50px; margin: 0;
  border: 2px solid var(--line-2); border-radius: 16px; background: #fff;
  font-family: var(--font-body); font-size: 15.5px; color: var(--ink);
  outline: none; -webkit-appearance: none; appearance: none;
  box-shadow: 0 1px 2px rgba(30,40,80,.05);
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.cat-search input::placeholder { color: var(--muted); font-size: 15px; }
.cat-search input:hover { border-color: var(--line-strong); }
.cat-search input:focus,
.cat-search input:focus-visible {
  outline: none; border-color: var(--yellow);
  box-shadow: 0 0 0 4px var(--yellow-soft), 0 4px 14px rgba(242,169,0,.14);
}
.cat-search input::-webkit-search-cancel-button,
.cat-search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.cs-ico {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  display: grid; place-content: center; color: var(--muted);
  pointer-events: none; transition: color .2s var(--ease);
}
.cs-ico svg { width: 19px; height: 19px; display: block; }
.cat-search:focus-within .cs-ico { color: var(--yellow-deep); }

.cs-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: grid; place-content: center;
  border: none; border-radius: 50%; background: var(--cream-2);
  color: var(--ink-soft); font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s, transform .2s var(--ease-spring);
}
.cs-clear:hover { background: var(--red); color: #fff; transform: translateY(-50%) scale(1.1); }

@media (max-width: 760px) {
  .cat-search { flex-basis: 100%; max-width: none; }
  .cat-search input[type="search"] { height: 48px; font-size: 16px; }
}

/* =========================================================
   V28 — ajustes de teléfono
   ========================================================= */
@media (max-width: 760px) {
  /* --- HERO --- */
  .recreo { padding: 26px 0 74px; min-height: auto; display: block; }
  /* el hero es flex y su contenido se encogía a la mitad del ancho */
  .recreo .container { width: 100%; flex: 1 1 100%; margin-inline: auto; }
  /* la baraja quedaba en cero: sus cartas son absolutas y no dan ancho */
  .rec-deck { width: 100%; max-width: 320px; height: 320px; margin: 4px auto 0; }
  /* el abanico se cierra un poco para que ninguna carta se salga */
  .rcard { width: min(74%, 250px); border-width: 4px; }
  .rcard.pos1 { transform: rotate(-7deg) translate(-18px, 8px); }
  .rcard.pos2 { transform: rotate(8deg) translate(18px, 12px); }
  .rcard.pos3 { transform: rotate(-12deg) translate(-32px, 16px); }
  .rcard.pos4 { transform: rotate(13deg) translate(32px, 20px); }
  .rcard.pos5 { transform: rotate(-3deg) translate(0, 24px); }
  .rc-letter { font-size: 52px; }
  .rc-name { font-size: 16px; }
  .rc-price { font-size: 16px; padding: 5px 11px; }
  .rec-grid { gap: 22px; }
  .rec-h1 { font-size: clamp(34px, 9.6vw, 48px); }
  .recreo .lead { font-size: 16px; margin: 14px 0 20px; }
  .rec-flag { font-size: 11px; letter-spacing: .08em; padding: 6px 12px; margin-bottom: 14px; }
  /* la nota manuscrita ya no choca con el chip: se muestra sobre la baraja */
  .rec-note { top: auto; bottom: 30px; right: auto; left: 50%; transform: translateX(-50%) rotate(-2deg); text-align: center; font-size: 18px; white-space: nowrap; }
  /* los tres datos en una fila: "2 tiendas" solo en un tercer renglón
     se veía desbalanceado y alargaba la portada */
  .recreo .hero-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; padding-top: 16px; }
  .recreo .hero-trust > div:last-child { grid-column: auto; }
  .recreo .hero-trust .num, .recreo .hero-trust .num b { font-size: clamp(18px, 5.4vw, 25px); white-space: nowrap; }
  .recreo .hero-trust .lbl { font-size: 11px; line-height: 1.3; }
  .recreo .hero-actions .btn { width: 100%; justify-content: center; }

  /* --- postal del final: el texto del enlace se partía y descuadraba el ícono --- */
  .postcard-wa { font-size: 13px; }
  .postcard-wa svg { width: 16px; height: 16px; flex-shrink: 0; }
  .postcard p { font-size: 15px; }
  .postcard .newsletter-form { flex-direction: column; }

  /* --- kits del home: el nombre se partía en tres líneas --- */
  .kits-hero { padding: 28px 18px; }
  .kit-card { padding: 14px 14px 14px 16px; gap: 12px; }
  .kit-letter { width: 44px; height: 44px; border-radius: 12px; font-size: 19px; }
  .kit-info b { font-size: 15.5px; line-height: 1.25; }
  .kit-info span { font-size: 12px; }
  .kit-price { font-size: 17px; }
  .kit-foot svg { display: none; }
  .kit-pop { font-size: 9.5px; padding: 3px 9px; }

  /* --- buscador: el chip ESC no aplica en teléfono y robaba ancho --- */
  .search-input-wrap kbd { display: none; }
  .search-panel { margin-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  /* iOS hace zoom al enfocar cualquier campo con menos de 16px */
  .search-input-wrap input, .field input, .field select, .field textarea,
  .newsletter-form input, #catSearch, .cs-input, #sortSel, .sort-select select { font-size: 16px; }
  /* enlaces del pie: más área para el dedo */
  .footer-col a, .footer-bottom a { display: inline-block; padding-block: 5px; }

  /* --- los flotantes tapaban texto: más chicos y más al borde --- */
  .floaters { bottom: 12px; right: 12px; gap: 8px; }
  .wa-btn { padding: 13px; font-size: 13.5px; }
  .wa-btn svg { width: 22px; height: 22px; }
  .to-top { width: 42px; height: 42px; border-radius: 12px; }
  .to-top svg { width: 17px; height: 17px; }
  main { padding-bottom: 72px; }

  /* --- secciones --- */
  .section, .section--tight { padding: 46px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head h2 { font-size: clamp(26px, 7.4vw, 34px); }
  .container { padding-inline: 18px; }

  /* --- encabezado de páginas internas --- */
  .page-hero { padding: 30px 0 44px; }
  .page-hero h1 { font-size: clamp(25px, 7.6vw, 34px); }
  .page-hero p { font-size: 14.5px; margin-top: 10px; }
  .crumb { font-size: 11.5px; gap: 5px; margin-bottom: 12px; flex-wrap: nowrap; overflow: hidden; }
  .crumb a, .crumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 38%; }
  .crumb svg { width: 11px; height: 11px; flex-shrink: 0; }
  .page-hero .page-doodles { display: none; }

  /* --- catálogo --- */
  .catalog-layout { grid-template-columns: 1fr; gap: 20px; }
  .catalog-toolbar { position: static; flex-direction: column; align-items: stretch; gap: 10px; }
  .catalog-toolbar .toolbar-right { display: flex; gap: 8px; }
  .catalog-toolbar .select-sort { flex: 1; }
  .catalog-count { text-align: center; }
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .prod-name { font-size: 14px; }
  .prod-price { font-size: 17px; }
  .prod-media { min-height: 150px; }

  /* --- ficha de producto --- */
  .pd-grid { grid-template-columns: 1fr; gap: 22px; }
  /* la foto ocupaba toda la pantalla y el precio quedaba muy abajo */
  .pd-gallery .pd-main { aspect-ratio: 4/3; }
  .pd-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .pd-thumb { aspect-ratio: 1/1; }
  .pd-gallery::before { width: 74px; height: 20px; left: 18px; }
  .pd-actions .btn { font-size: 14.5px; padding-inline: 14px; }
  .qty-stepper { flex: 0 0 116px; }
  .pd-info h1 { font-size: 26px; }
  .pd-qty-row { flex-wrap: wrap; gap: 10px; }
  .pd-qty-row .btn { flex: 1; justify-content: center; }
  .pd-actions { flex-direction: column; }
  .pd-actions .btn { width: 100%; justify-content: center; }
  .pd-specs { grid-template-columns: 1fr 1fr; }

  /* --- escuelas y contacto --- */
  .colegios { padding: 30px 20px; border-radius: var(--r-lg); }
  .cat-grid, #kitsGrid { grid-template-columns: 1fr; }
  #steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .colegios-grid { grid-template-columns: 1fr; gap: 26px; }
  /* los items de grid traen min-width:auto y el form se desbordaba 24px */
  .colegios-grid > *, .contact-grid > *, .pd-grid > *, .catalog-layout > *, .field-row > * { min-width: 0; }
  .field input, .field select, .field textarea { min-width: 0; }
  .colegios-stats { grid-template-columns: 1fr 1fr !important; }
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
  .quote-form { padding: 22px 18px; }
  .field-row { grid-template-columns: 1fr; }

  /* --- vitrinas y tarjetas --- */
  #featGrid { gap: 14px; padding: 18px 4px 26px; }
  #featGrid .prod-card { flex-basis: 210px; }
  .vit-nav { justify-content: center; }
  .kits-hero { padding: 30px 20px; }
  .kits-grid { grid-template-columns: 1fr; gap: 24px; }
  .postcard-body { margin: 14px; padding: 30px 18px; }
}

/* pantallas muy angostas */
@media (max-width: 380px) {
  .rec-h1 { font-size: 31px; }
  .prod-grid { gap: 10px; }
  .brand-word .n { font-size: 16px; }
  /* en 320px el abanico de cartas se salía por la derecha */
  .rec-deck { max-width: 276px; height: 286px; }
  .rcard { width: min(72%, 208px); border-width: 3px; }
  .rcard.pos1 { transform: rotate(-6deg) translate(-16px, 8px); }
  .rcard.pos2 { transform: rotate(7deg) translate(16px, 11px); }
  .rcard.pos3 { transform: rotate(-10deg) translate(-27px, 14px); }
  .rcard.pos4 { transform: rotate(11deg) translate(27px, 17px); }
  .rcard.pos5 { transform: rotate(-3deg) translate(0, 20px); }
  .rec-note { font-size: 16px; bottom: 34px; }
  .pd-actions { flex-wrap: wrap; }
  .pd-actions .btn { flex: 1 1 100%; }
  .qty-stepper { flex: 0 0 auto; }
}

/* =========================================================
   V29 — CHECKOUT y PEDIDO (PixelPay)
   ========================================================= */
.page-hero--slim { padding: 34px 0 40px; }

.checkout-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 30px; align-items: start; }
.co-form { box-shadow: var(--shadow-md); }

.co-error { margin: 6px 0 12px; padding: 12px 14px; border-radius: 12px; background: #fdeceb; border: 1px solid #f3c3bf; color: #9a1f17; font-size: 14px; line-height: 1.5; }
.co-legal { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.co-legal svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--green); }

/* resumen pegajoso al costado */
.co-resumen { position: sticky; top: calc(var(--header-h) + 18px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-md); }
.co-resumen h3 { font-size: 19px; margin-bottom: 16px; }
.co-lineas { display: flex; flex-direction: column; gap: 14px; max-height: 340px; overflow-y: auto; margin: 0 -6px; padding: 0 6px 4px; }
.co-vacio { color: var(--muted); font-size: 14px; }

.co-linea { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.co-der { text-align: right; }
.co-pasos { display: inline-flex; align-items: center; gap: 2px; margin-top: 5px; border: 1.5px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.co-pasos button { width: 26px; height: 24px; border: 0; background: #fff; color: var(--ink-soft); display: grid; place-content: center; cursor: pointer; transition: background .15s, color .15s; }
.co-pasos button:hover { background: var(--yellow-soft); color: var(--navy-800); }
.co-pasos span { min-width: 24px; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; }
.co-quitar { display: block; margin-left: auto; margin-top: 5px; background: none; border: 0; padding: 2px 0; font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.co-quitar:hover { color: var(--red); }
.co-thumb { position: relative; width: 52px; height: 52px; border-radius: 12px; background: var(--cream-2); border: 1px solid var(--line); display: grid; place-content: center; color: var(--muted); }
.co-thumb.has-photo { background: #fff; }
.co-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; mix-blend-mode: multiply; }
.co-qty { display: none; position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: var(--navy-800); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 11.5px; display: grid; place-content: center; border: 2px solid #fff; }
.co-info { min-width: 0; }
.co-info b { display: block; font-family: var(--font-head); font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.co-info span { font-size: 12px; color: var(--muted); }
.co-monto { font-family: var(--font-head); font-weight: 700; font-size: 14px; white-space: nowrap; }

.co-totales { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.co-envio { font-size: 13px; color: var(--muted); font-weight: 500; }
.co-volver { display: block; text-align: center; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--blue); }

/* --- página de retorno --- */
.pedido-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 46px 38px; text-align: center; box-shadow: var(--shadow-lg); }
.pedido-card h1 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 10px; }
.pedido-sub { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; max-width: 400px; margin: 0 auto; }

.pedido-ico { width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; margin: 0 auto 22px; }
.pedido-ico--ok { background: #e6f6e9; color: var(--green); }
.pedido-ico--espera { background: var(--yellow-soft); color: var(--yellow-deep); }
.pedido-ico--neutro { background: var(--cream-2); color: var(--muted); }
body.is-loaded .pedido-ico--ok { animation: stampPop .6s var(--ease-spring) .1s both; }

.pedido-code { margin: 24px auto 0; padding: 14px 20px; border-radius: 14px; background: var(--cream); border: 2px dashed var(--line-2); display: inline-flex; flex-direction: column; gap: 3px; }
.pedido-code span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pedido-code b { font-family: var(--font-head); font-size: 24px; letter-spacing: .04em; color: var(--navy-800); }

.pedido-detalle { margin-top: 24px; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.pedido-linea { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; color: var(--ink-soft); }
.pedido-linea b { color: var(--ink); white-space: nowrap; }
.pedido-linea--total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-family: var(--font-head); font-size: 16px; color: var(--ink); }

.pedido-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.pedido-ayuda { margin-top: 20px; font-size: 13px; color: var(--muted); }
.pedido-ayuda a { color: var(--blue); font-weight: 600; }

.pedido-cargando { padding: 30px 0; color: var(--muted); }
.pedido-cargando .spin { display: block; width: 34px; height: 34px; margin: 0 auto 16px; border: 3px solid var(--line-2); border-top-color: var(--yellow-deep); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1024px) {
  .checkout-grid { grid-template-columns: 1fr; gap: 24px; }
  /* en pantallas chicas el resumen va primero: el cliente ve qué paga */
  .co-resumen { position: static; order: -1; }
  .co-lineas { max-height: 260px; }
}
@media (max-width: 760px) {
  .co-resumen, .co-form { padding: 20px 18px; }
  .pedido-card { padding: 34px 20px; border-radius: var(--r-lg); }
  .pedido-ico { width: 64px; height: 64px; }
  .pedido-code b { font-size: 21px; }
  .checkout-grid > * { min-width: 0; }
}

/* =========================================================
   V30 — aviso al agregar a la cotización
   ========================================================= */
.toast--cart { flex-direction: column; align-items: stretch; gap: 0; width: min(94vw, 360px); padding: 0; border-radius: 18px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); overflow: hidden; }
.toast--cart .tc-top { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; }
.tc-thumb { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--cream-2); border: 1px solid var(--line); display: grid; place-content: center; color: var(--muted); overflow: hidden; }
.tc-thumb.has-photo { background: #fff; }
.tc-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; }
.tc-info { flex: 1; min-width: 0; }
.tc-info b { display: block; font-family: var(--font-head); font-size: 13.5px; color: var(--green); }
.tc-info span { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-x { flex-shrink: 0; align-self: flex-start; background: none; border: 0; padding: 2px; color: var(--muted); cursor: pointer; line-height: 0; }
.tc-x:hover { color: var(--ink); }
.tc-pregunta { padding: 0 14px 10px; font-size: 13px; color: var(--ink-soft); font-weight: 500; font-family: var(--font-body); }
.tc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; background: var(--cream); border-top: 1px solid var(--line); }
.tc-btns .btn { justify-content: center; font-size: 13px; padding-inline: 10px; }
.toast--cart svg { color: currentColor; }

@media (max-width: 760px) {
  .toast-wrap { left: 12px; right: 12px; bottom: 84px; transform: none; }
  .toast--cart { width: 100%; }
  .toast { max-width: 100%; }
}

/* --- cupón y envío en el checkout --- */
.co-hint { font-size: 12.5px; color: var(--green); font-weight: 600; margin-top: 6px; min-height: 1em; }
.co-cupon { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.co-cupon-in { display: flex; gap: 8px; }
.co-cupon-in input { flex: 1; min-width: 0; padding: 11px 14px; border: 2px dashed var(--line-2); border-radius: 12px; font: inherit; font-size: 14px; background: var(--cream); text-transform: uppercase; }
.co-cupon-in input::placeholder { text-transform: none; }
.co-cupon-in input:focus { outline: none; border-color: var(--yellow-deep); border-style: solid; background: #fff; }
.co-cupon-in input:disabled { background: var(--green-soft, #e0f3e2); border-color: var(--green); color: var(--green); font-weight: 700; }
.co-cupon-in .btn { flex-shrink: 0; }
.co-cupon-msg { font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.co-cupon-msg.ok { color: var(--green); }
.co-cupon-msg.mal { color: var(--red); }
.summary-row.co-desc span:last-child { color: var(--green); font-weight: 700; }
.co-gratis { color: var(--green); font-weight: 800; }
.co-error-wa { display: block; margin-top: 8px; font-weight: 700; color: #128c4a; }
.co-hint--ojo { color: var(--yellow-deep); }
.co-flete { font-size: 12px; color: var(--yellow-deep); font-weight: 600; padding: 2px 0 6px; }

/* =========================================================
   V31 — NEWTON, a sangre

   La portada venía siendo tarjeta tras tarjeta: mismo ancho, mismo
   radio, mismo aire. Nada resaltaba. Esta va de borde a borde para
   cortar esa fila — y de paso la foto deja de verse chiquita dentro
   de una cajita.
   ========================================================= */
/* Newton recortado frente a un arco crema con borde amarillo, saliéndose
   por arriba; a la derecha "Conoce a / Newton" en grande (diseño de
   Ricardo, 22 de octubre). */
.newton-banda {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 3vw;
  padding: 64px max(26px, calc((100vw - var(--container)) / 2 + 26px)) 0;
  background:
    radial-gradient(60% 80% at 92% 8%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(255,255,255,.05), transparent 60%),
    var(--navy-900);
  color: #fff; margin-block: 96px;
}
.newton-banda .newton-foto { margin: 0; position: relative; align-self: end; height: 560px; display: flex; justify-content: center; }
.nw-arco { position: absolute; left: 50%; bottom: 0; width: min(88%, 470px); height: 82%; transform: translateX(-50%);
  background: #fff4d9; border: 14px solid var(--yellow); border-bottom: 0; border-radius: 999px 999px 0 0; }
.newton-foto picture { position: relative; z-index: 1; height: 100%; }
.newton-foto img { display: block; height: 100%; width: auto; filter: drop-shadow(0 18px 30px rgba(16,25,59,.28)); }
/* las rayitas amarillas junto a la cabeza */
.nw-rayas { position: absolute; z-index: 2; width: 40px; height: 40px; }
.nw-rayas::before, .nw-rayas::after { content: ""; position: absolute; width: 7px; height: 24px; border-radius: 4px; background: var(--yellow); }
.nw-rayas--der { top: 15%; right: max(4%, calc(50% - 250px)); }
.nw-rayas--der::before { left: 4px; top: 0; transform: rotate(28deg); }
.nw-rayas--der::after { left: 22px; top: 14px; transform: rotate(62deg); }
.nw-rayas--izq { top: 36%; left: max(4%, calc(50% - 250px)); }
.nw-rayas--izq::before { left: 20px; top: 0; transform: rotate(-30deg); }
.nw-rayas--izq::after { left: 6px; top: 16px; transform: rotate(-62deg); }

.newton-texto { padding: 0 0 64px; }
.newton-texto-in { max-width: 560px; }
.newton-texto .eyebrow { color: var(--yellow); }
.newton-texto .eyebrow::before { background: var(--yellow); }
.newton-texto h2 { color: #fff; font-size: clamp(46px, 6.4vw, 104px); margin: 14px 0 22px; line-height: .94; letter-spacing: -.03em; }
.nw-nombre { display: block; color: var(--yellow); }
.newton-texto p { color: rgba(255,255,255,.86); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.55; margin-bottom: 14px; }
.newton-texto p.nw-saludo { margin-bottom: 30px; }
.newton-texto .btn--primary { background: var(--yellow); color: var(--navy-900); font-size: clamp(16px, 1.5vw, 21px); padding: 18px 34px; border-radius: 14px; }
.newton-texto .btn--primary svg { width: 24px; height: 24px; }
.newton-texto .btn--primary:hover { background: #fff; }

@media (max-width: 1024px) {
  .newton-banda { margin-block: 64px; padding-top: 48px; }
  .newton-banda .newton-foto { height: 440px; }
}
/* en el celular: el texto arriba y Newton abajo, saliendo del borde */
@media (max-width: 760px) {
  .newton-banda { grid-template-columns: 1fr; margin-block: 46px; padding: 38px 20px 0; }
  .newton-texto { padding: 0 0 30px; }
  .newton-texto-in { min-width: 0; }
  /* Newton abajo: el arco se apoya en el borde de la franja */
  .newton-banda .newton-foto { order: 2; }
  .newton-texto h2 { font-size: clamp(42px, 13vw, 58px); }
  .newton-texto p { font-size: 15.5px; }
  .newton-texto p.nw-saludo { margin-bottom: 22px; }
  .newton-texto .btn { width: 100%; justify-content: center; font-size: 16px; padding: 15px 14px; }
  .newton-banda .newton-foto { height: 340px; }
  .nw-arco { border-width: 10px; }
}


/* =========================================================
   V32 — Escuelas a sangre (solo en la portada)

   Segunda banda ancha, después de Newton. Son las dos que
   cortan la fila de tarjetas; si todas fueran así el problema
   volvería al revés y ninguna resaltaría.
   ========================================================= */
.colegios--banda {
  border-radius: 0;
  padding: 88px 0;
  margin-block: 40px 0;
}
.colegios--banda .container { position: relative; z-index: 2; }
.colegios--banda .colegios-grid { gap: 56px; }

@media (max-width: 1024px) {
  .colegios--banda { padding: 56px 0; }
}
@media (max-width: 760px) {
  .colegios--banda { padding: 40px 0; }
  .colegios--banda .colegios-grid { gap: 26px; }
}

/* =========================================================
   V33 — las fotos salían recortadas

   Las cajas de foto se miden con aspect-ratio. Una imagen con
   height:100% adentro no tiene contra qué resolver ese 100%,
   así que el navegador la dibujaba a su alto natural y la caja
   la recortaba: un pliego de stickers salía sin cabeza ni pies.
   Anclando la foto a la caja, object-fit vuelve a hacer su
   trabajo y la foto entra entera.
   ========================================================= */
.prod-media, .modal-media, .pd-main, .pd-thumb, .polaroid .pola-img { position: relative; }
.prod-photo,
.modal-photo,
.pd-photo,
.pd-thumb.has-photo img,
.polaroid .pola-img.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Las miniaturas, además, tomaban el ancho de la foto: cuatro fotos
   grandes se salían de la columna y se montaban encima del texto de
   la derecha. Un grid las deja crecer si no se le dice que no. */
.pd-thumb { min-width: 0; min-height: 0; overflow: hidden; }
.modal-media { overflow: hidden; }

/* =========================================================
   V34 — ¿desde qué tienda comprás?

   El catálogo es el mismo en todo el país, la existencia no.
   Mientras el cliente no diga desde dónde compra, el botón se
   ve en amarillo para que se note que falta elegir.
   ========================================================= */
.topbar-ciudad {
  color: rgba(255,255,255,.82);
  font: inherit;
  cursor: pointer;
  transition: color .2s;
}
.topbar-ciudad:hover { color: var(--yellow); }
.topbar-ciudad.sin-elegir { color: var(--yellow); font-weight: 600; }
.topbar-ciudad svg:last-child { width: 11px; height: 11px; color: currentColor; opacity: .7; }

.modal--chico { width: min(440px, 100%); }

.ciudad-box { padding: 34px 30px 30px; text-align: center; }
.ciudad-box .ciudad-ico {
  display: inline-grid; place-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--yellow-soft); color: var(--yellow-deep);
  margin-bottom: 14px;
}
.ciudad-box h3 { font-size: 21px; margin-bottom: 6px; }
.ciudad-box > p { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

.ciudad-lista { display: grid; gap: 10px; }
.ciudad-op {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 15px 18px; cursor: pointer;
  background: #fff; border: 2px solid var(--line-2); border-radius: 14px;
  font-family: var(--font-head); font-size: 15px; color: var(--navy-800);
  transition: border-color .2s, background .2s, transform .2s;
}
.ciudad-op svg { width: 19px; height: 19px; color: var(--blue-600); flex-shrink: 0; }
.ciudad-op:hover { border-color: var(--yellow); background: var(--cream-2); transform: translateY(-1px); }
.ciudad-op.is-sel { border-color: var(--green); background: var(--green-soft); }

.ciudad-cancelar {
  margin-top: 16px; cursor: pointer;
  font-size: 13px; color: var(--muted); text-decoration: underline;
}
.ciudad-cancelar:hover { color: var(--ink-soft); }

@media (max-width: 760px) {
  /* en el celular la barra de arriba va apretada: la tienda manda */
  .topbar-left .topbar-item:not(.topbar-ciudad) { display: none; }
  .ciudad-box { padding: 28px 20px 24px; }
}

/* =========================================================
   V35 — Talleres

   Un taller no se envía: la persona tiene que llegar a la tienda.
   Por eso la ciudad va en la vitrina y no escondida en la ficha.
   ========================================================= */
.badge--taller { background: #0f8b8d; color: #fff; }

/* =========================================================
   V36 — Catálogo para compartir (/lista)

   Un link que ABC manda por WhatsApp: "mire, tenemos los libros
   en línea". Foto grande, código a la vista y un botón para
   pedir. Nada de filtros ni barra lateral: quien abre esto ya
   sabe qué está buscando.
   ========================================================= */
.lista-hero { padding: 46px 0 26px; background: var(--cream-2); border-bottom: 1px solid var(--line); }
.lista-hero h1 { font-size: clamp(26px, 4vw, 40px); margin: 8px 0 6px; }
.lista-sub { color: var(--muted); font-size: 15px; }
.lista-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.lista-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.lista-grid > * { min-width: 0; }

.lc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.lc:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* la foto manda: es un catálogo, se compra por la portada */
.lc-foto { position: relative; display: block; aspect-ratio: 1/1.15; background: var(--cream-2); overflow: hidden; }
.lc-foto.has-photo { background: #fff; }
.lc-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; mix-blend-mode: multiply; }
.lc-foto > svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--line-2); }

.lc-info { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lc-info h3 { font-size: 14.5px; line-height: 1.35; font-weight: 700; }
.lc-info h3 a { color: var(--navy-800); }
.lc-info h3 a:hover { color: var(--red); }
.lc-sku { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--muted); }
.lc-precio { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy-800); }
.lc-pie { margin-top: auto; padding-top: 10px; }
.lc-pie .btn { width: 100%; justify-content: center; }
.lc-agotado { display: block; text-align: center; font-size: 13px; color: var(--muted); padding: 9px; border: 1px dashed var(--line-2); border-radius: 10px; }

.lista-vacia { grid-column: 1/-1; text-align: center; padding: 70px 20px; color: var(--muted); }
.lista-vacia svg { color: var(--line-2); margin-bottom: 12px; }
.lista-vacia h3 { color: var(--navy-800); margin-bottom: 6px; }
.lista-vacia p { margin-bottom: 20px; }

@media (max-width: 760px) {
  .lista-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lc-info { padding: 11px 12px 12px; }
  .lc-info h3 { font-size: 13px; }
  .lista-hero { padding: 30px 0 20px; }
}

/* Impreso: muchas escuelas lo imprimen para pasarlo en reunión de padres */
@media print {
  #app-header, #app-footer, .no-print, .fab, .wa-float, #preloader { display: none !important; }
  .lista-hero { background: none; border: 0; padding: 0 0 14px; }
  .lc { break-inside: avoid; box-shadow: none; }
  .lista-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   V37 — "Ver todos los resultados" en la lupa

   Antes la lupa mostraba 6 y el cliente se quedaba creyendo
   que eso era todo lo que había.
   ========================================================= */
.search-todos {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px; margin-top: 6px;
  border-top: 1px solid var(--line);
  font-family: var(--font-head); font-weight: 700; font-size: 14.5px;
  color: var(--blue-600);
  transition: background .2s;
}
.search-todos:hover { background: var(--cream-2); }
.search-todos svg { width: 15px; height: 15px; }

/* =========================================================
   V38 — el selector de tienda era invisible

   Más abajo en esta misma hoja la barra de arriba pasó a fondo
   claro, pero este botón se había quedado con el texto en
   blanco fijo: blanco sobre crema. Que siga el color de la
   barra, sea cual sea el fondo que tenga.
   ========================================================= */
.topbar-ciudad { color: inherit; }
.topbar-ciudad:hover { color: var(--red); }
.topbar-ciudad.sin-elegir { color: var(--red); font-weight: 700; }
.topbar-ciudad svg:first-child { color: var(--red); }

/* =========================================================
   V39 — contenido editable desde el panel

   Contacto: donde decía "(Google Maps en producción)" ahora hay un
   botón para llegar a cada tienda. La caja tenía la regla de ícono
   grande; los íconos de los botones vuelven a su tamaño.
   Ficha de taller: la nota que ABC escribe una vez para todos.
   ========================================================= */
.map-embed { height: auto; min-height: 220px; }
.map-llegar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
.map-embed .map-llegar svg { width: 16px; height: 16px; opacity: 1; }

.pd-nota { display: flex; gap: 12px; align-items: flex-start; background: var(--yellow-soft); border-radius: 14px; padding: 14px 16px; margin: -8px 0 24px; }
.pd-nota svg { flex: none; width: 20px; height: 20px; color: var(--red); margin-top: 1px; }
.pd-nota p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

/* =========================================================
   V40 — videos de la portada editables desde el panel

   La cuadrícula era de 3 columnas fijas: con uno o dos videos
   quedaban pegados a la izquierda. En compu se centran con el
   mismo ancho de siempre; en el celular ya se deslizan de lado.
   ========================================================= */
@media (min-width: 761px) {
  .reels[data-n="1"] { grid-template-columns: minmax(0, 290px); justify-content: center; }
  .reels[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 290px)); justify-content: center; }
}

/* =========================================================
   V41 — Club ABC

   La página del club usa las tarjetas de beneficios, que son de 4
   columnas: con 3 (si ABC no escribió cómo se usan los puntos) van
   en 3 columnas, sin hueco. En la compra, el enlace del campo de
   identidad no va en verde como los avisos de envío.
   ========================================================= */
@media (min-width: 1025px) {
  .benefits[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
}
.club-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 36px; }
.co-hint--club { color: var(--muted); font-weight: 500; }
.co-hint--club a { color: var(--blue); font-weight: 600; }

/* =========================================================
   V42 — compra: envío a domicilio o recoger en tienda
   ========================================================= */
.co-entrega { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-op { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font: 600 14px/1.25 var(--font-head); color: var(--ink); cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.co-op:hover { border-color: var(--navy-800); }
.co-op.is-sel { border-color: var(--navy-800); background: var(--yellow-soft); }
.co-op small { font-family: var(--font-body, inherit); font-weight: 500; font-size: 12px; color: var(--green); }
.co-op-ico { display: inline-grid; color: var(--red); }
@media (max-width: 480px) { .co-entrega { grid-template-columns: 1fr; } }

/* =========================================================
   V43 — resumen de la compra: el precio por unidad y los botones
   de cantidad salían en la misma línea, pegados. El selector era
   inline-flex y se acomodaba junto al "c/u"; ahora va debajo.
   ========================================================= */
.co-info > span { display: block; }
.co-info .co-pasos { display: flex; width: max-content; margin-top: 6px; }
/* el subrayado amarillo de foco es para cajas de texto: debajo de los
   dos botones de entrega quedaba una línea suelta */
.field--opciones::after { display: none; }

/* =========================================================
   V44 — pedidos de ABC del 15 de octubre

   Menú de Catálogo: el recuadro se abre 16px debajo del enlace y, al
   bajar el mouse por ese hueco, se perdía el hover y se cerraba. Un
   puente invisible cubre el hueco, y al salir espera un instante.

   Filtros del catálogo: el panel queda fijo al costado y era más alto
   que la pantalla; las marcas, abajo, no se alcanzaban hasta terminar
   de bajar todos los productos. Ahora tiene su propio scroll.
   ========================================================= */
.mega::after { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; }
.has-mega .mega { transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .18s; }
.has-mega:hover .mega { transition-delay: 0s; }

@media (min-width: 1025px) {
  .filters { max-height: calc(100vh - var(--header-h) - 36px); overflow-y: auto; overscroll-behavior: contain; }
}
.filter-mas { display: block; margin-top: 6px; padding: 4px 0; border: 0; background: none; color: var(--blue); font: 600 13px/1.3 var(--font-body); cursor: pointer; }
.filter-mas:hover { text-decoration: underline; }

/* Ficha: disponibilidad por tienda */
.pd-tiendas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.pd-tienda { position: relative; padding: 11px 13px 11px 30px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13.5px; line-height: 1.35; }
.pd-tienda i { position: absolute; left: 13px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.pd-tienda.no i { background: var(--red); }
.pd-tienda b { display: block; font-family: var(--font-head); color: var(--navy-800); }
.pd-tienda b em { font-style: normal; font-weight: 600; font-size: 11px; color: var(--muted); margin-left: 4px; }
.pd-tienda span { color: var(--ink-soft); }
.pd-tienda.no span { color: var(--red); font-weight: 600; }
.pd-tienda small { display: block; margin-top: 3px; color: var(--green); font-weight: 600; font-size: 12px; }
@media (max-width: 480px) { .pd-tiendas { grid-template-columns: 1fr; } }

/* Compra: productos que están en la otra tienda, y quitar los que ya no se venden */
.co-otra { display: inline-block !important; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--yellow-soft); color: var(--navy-800) !important; font-size: 11.5px !important; font-weight: 600; }
.co-aviso-tienda { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--yellow-soft); font-size: 13px; line-height: 1.45; color: var(--ink); }
.co-aviso-tienda svg { flex: none; margin-top: 2px; color: var(--yellow-deep); }
.co-error-btn { display: block; margin-top: 10px; }

/* =========================================================
   Banner principal de la portada (lo cambia ABC desde el panel)
   Compu: 8:3 (ej. 1600×600). Celular: si hay foto propia, 4:5; si
   no, la de compu completa.
   ========================================================= */
/* va después de las colecciones (los círculos), antes de "Los más buscados" */
.banner-abc { padding: 8px 0 0; }
.ba-marco { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--cream-2, #f8f0df); box-shadow: var(--shadow-md); touch-action: pan-y; }
.ba-pista { display: flex; transition: transform .6s var(--ease); }
.ba-slide { flex: 0 0 100%; }
.ba-slide a, .ba-slide picture { display: block; }
.ba-slide img { display: block; width: 100%; aspect-ratio: 8 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); user-select: none; -webkit-user-drag: none; }
@media (max-width: 640px) { .ba-slide img { object-position: var(--pos-m, var(--pos, 50% 50%)); } }
@media (max-width: 640px) { .ba-slide.con-movil img { aspect-ratio: 4 / 5; } }
.ba-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--navy-800); display: grid; place-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: background .2s, transform .2s; }
.ba-flecha:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.ba-ant { left: 14px; } .ba-sig { right: 14px; }
.ba-puntos { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; }
.ba-puntos button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.65); box-shadow: 0 0 0 1px rgba(16,25,59,.15); cursor: pointer; transition: width .25s, background .25s; }
.ba-puntos button.on { width: 26px; background: #fff; }
.ba-una .ba-flecha, .ba-una .ba-puntos { display: none; }
@media (max-width: 640px) { .ba-flecha { display: none; } .banner-abc { padding-top: 28px; } }
@media (prefers-reduced-motion: reduce) { .ba-pista { transition: none; } }
.pedido-banco { margin-top: 16px; text-align: left; padding: 14px 18px; border-radius: 14px; background: var(--yellow-soft); }
.pedido-banco > b { display: block; font-family: var(--font-head); margin-bottom: 4px; color: var(--navy-800); }
.pedido-banco p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* ---- Portada en celular: el abanico de cuadernos más chico ----
   Con el tamaño de antes empezaba justo en el borde de la pantalla y se
   veía cortado. Es el mismo abanico, solo más pequeño. */
@media (max-width: 760px) {
  .recreo .rec-deck { max-width: 250px; height: 250px; margin-top: 0; }
  .recreo .rcard { width: min(72%, 180px); padding: 12px; gap: 8px; border-width: 3px; }
  .recreo .rcard.pos1 { transform: rotate(-7deg) translate(-14px, 6px); }
  .recreo .rcard.pos2 { transform: rotate(8deg) translate(14px, 9px); }
  .recreo .rcard.pos3 { transform: rotate(-12deg) translate(-25px, 12px); }
  .recreo .rcard.pos4 { transform: rotate(13deg) translate(25px, 15px); }
  .recreo .rcard.pos5 { transform: rotate(-3deg) translate(0, 18px); }
  .recreo .rc-letter { font-size: 40px; top: 2px; left: 10px; -webkit-text-stroke-width: 2px; }
  .recreo .rc-name { font-size: 14px; }
  .recreo .rc-price { font-size: 13px; padding: 4px 9px; top: 10px; right: -10px; }
  .recreo .rec-note { font-size: 16px; bottom: 34px; }
}

/* ---- Banner: texto encima de la foto (opcional, se escribe en el panel) ----
   Un degradado azul a la izquierda (abajo en el celular) para que se lea
   sobre cualquier foto. Sin texto, la foto sale sola como antes. */
.ba-slide { position: relative; }
.ba-texto { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 0 6% 0 max(6%, 86px); color: #fff; background: linear-gradient(90deg, rgba(16,25,59,.8) 0%, rgba(16,25,59,.5) 36%, rgba(16,25,59,0) 64%); pointer-events: none; }
.ba-texto b { font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -.02em; max-width: 48%; text-wrap: balance; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.ba-texto span { font-size: clamp(14px, 1.35vw, 19px); line-height: 1.35; max-width: 42%; opacity: .94; }
.ba-boton { margin-top: 6px; font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: 15px; background: var(--yellow); color: var(--navy-900); padding: 10px 20px; border-radius: 999px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.ba-slide a:hover .ba-boton { background: #fff; }
@media (max-width: 640px) {
  /* con texto, la tira delgada no alcanza: un poco más alta */
  .ba-slide.con-texto:not(.con-movil) img { aspect-ratio: 16 / 10; }
  .ba-texto { justify-content: flex-end; gap: 6px; padding: 0 18px 34px; background: linear-gradient(0deg, rgba(16,25,59,.85) 0%, rgba(16,25,59,.45) 48%, rgba(16,25,59,0) 78%); }
  .ba-texto b { font-size: 23px; max-width: 100%; }
  .ba-texto span { font-size: 13.5px; max-width: 100%; }
  .ba-boton { font-size: 13px; padding: 7px 14px; margin-top: 4px; }
}

/* ---- Categorías en compu y tableta: el nombre con su descripción abajo ----
   La descripción arrancaba donde terminaba cada nombre (cada banda en
   otro lugar) y "Explorar" quedaba pegado abajo. Ahora ícono · número ·
   nombre con la descripción debajo · Explorar, todo alineado y centrado.
   En el celular (hasta 640 px) sigue su propio diseño. */
@media (min-width: 641px) {
  #catGrid .cat-card { display: grid; grid-template-columns: 52px 130px minmax(0, 1fr) auto; grid-template-areas: "ico cnt name go" "ico cnt desc go"; column-gap: 24px; row-gap: 4px; align-items: center; }
  #catGrid .cat-card .cat-ico { grid-area: ico; }
  #catGrid .cat-card .cnt-tag { grid-area: cnt; margin: 0; justify-self: start; }
  #catGrid .cat-card h3 { grid-area: name; align-self: end; line-height: 1.05; }
  #catGrid .cat-card p { grid-area: desc; align-self: start; display: block; margin: 0; }
  #catGrid .cat-card .go { grid-area: go; margin: 0; justify-self: end; }
}

/* ---- Novedades: suscripción y WhatsApp (diseño de Ricardo) ----
   A la izquierda el texto y el formulario; a la derecha la foto. Abajo
   la franja de los cuatro colores de ABC. Reemplaza a la postal. */
.novedades { position: relative; display: grid; grid-template-columns: 1.12fr 1fr; overflow: hidden; border-radius: var(--r-xl); background: #fffdf7; box-shadow: var(--shadow-lg); }
.novedades::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 2; background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--green) 50% 75%, var(--blue) 75%); }
.nv-texto { padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) calc(clamp(28px, 4vw, 52px) + 8px); }
.nv-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--yellow); color: var(--navy-900); font-family: var(--font-head); font-weight: 700; font-size: 15px; padding: 8px 18px; border-radius: 999px; }
.nv-pill svg { width: 18px; height: 18px; }
.novedades h2 { color: var(--navy-900); font-size: clamp(36px, 4.6vw, 66px); line-height: .98; letter-spacing: -.03em; margin: 20px 0 16px; }
.novedades h2 em { display: block; font-style: italic; color: #1f5be6; }
.nv-texto > p { color: var(--ink-soft); font-size: clamp(15px, 1.3vw, 18.5px); line-height: 1.5; max-width: 520px; margin: 0 0 24px; }
.nv-form { display: flex; gap: 12px; }
.nv-campo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 18px; background: #fff; border: 2px solid var(--line-2); border-radius: 14px; cursor: text; transition: border-color .2s, box-shadow .2s; }
.nv-campo:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.nv-campo svg { width: 22px; height: 22px; flex: none; color: var(--muted); }
.nv-campo input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 15px 0; font-size: 16px; color: var(--ink); }
.nv-form .btn { flex: none; padding: 15px 26px; border-radius: 14px; font-size: 17px; }
.nv-form .btn svg { width: 18px; height: 18px; }
.nv-ayuda { display: grid; justify-items: start; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.nv-ayuda b { font-family: var(--font-head); font-size: 16.5px; color: var(--navy-900); }
.nv-wa { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #1e9e4a; }
.nv-wa svg { width: 18px; height: 18px; }
.nv-wa svg:first-child { width: 30px; height: 30px; }
.nv-wa:hover { text-decoration: underline; }
.nv-foto { position: relative; margin: 0; min-height: 320px; }
.nv-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .novedades { grid-template-columns: 1fr; }
  /* la foto arriba, más bajita */
  .nv-foto { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .nv-form { flex-direction: column; }
  .nv-form .btn { width: 100%; justify-content: center; }
  .nv-wa { font-size: 16.5px; }
}

/* ---- Por qué ABC: la boleta de calificaciones (diseño de Ricardo) ----
   A la izquierda el título; a la derecha la boleta en hoja rayada, con
   la nota de cada motivo en círculo rojo y la sombra amarilla. */
.why-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.why-texto h2 { color: var(--navy-900); font-size: clamp(36px, 4vw, 62px); line-height: 1.02; letter-spacing: -.03em; margin: 16px 0 22px; }
.why-texto p { color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; max-width: 470px; margin: 0; }
.why-colores { display: block; width: 260px; max-width: 70%; height: 5px; margin-top: 30px; border-radius: 3px; background: linear-gradient(90deg, var(--red) 0 25%, var(--blue) 25% 50%, var(--green) 50% 75%, var(--yellow) 75%); }

.boleta { position: relative; padding: 30px clamp(18px, 2.6vw, 34px) 24px; border: 2.5px solid var(--navy-900); border-radius: 22px; box-shadow: 14px 14px 0 #ffd35a;
  background:
    linear-gradient(90deg, transparent 28px, rgba(228,35,27,.18) 28px 29.5px, transparent 29.5px),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(31,79,196,.07) 33px 34px),
    #fffdf7; }
.bo-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 16px 22px; border-bottom: 2px solid var(--navy-900); }
.bo-cabeza b { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(18px, 1.9vw, 26px); letter-spacing: .14em; text-transform: uppercase; color: var(--navy-900); }
.bo-cabeza small { display: block; margin-top: 6px; font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--navy-800); }
.bo-check svg { width: 52px; height: 52px; color: #1f4fc4; stroke-width: 3; transform: rotate(-6deg); }
.bo-filas { list-style: none; margin: 0; padding: 0; }
.bo-fila { display: grid; grid-template-columns: 30px 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 8px 16px 22px; border-bottom: 1px solid rgba(16,25,59,.1); background: color-mix(in srgb, var(--ac) 5%, transparent); }
.bo-num { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy-700, #3a4a7a); }
.bo-ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-content: center; color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, #fff); }
.bo-ico svg { width: 30px; height: 30px; }
.bo-texto b { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 1.6vw, 22px); color: var(--navy-900); }
.bo-texto span { display: block; margin-top: 4px; font-size: clamp(14px, 1.1vw, 16px); color: var(--ink-soft); }
.bo-nota { width: 64px; height: 64px; border: 3px solid var(--red); border-radius: 50%; display: grid; place-content: center; font-family: var(--font-hand); font-weight: 700; font-size: 34px; line-height: 1; color: var(--red); transform: rotate(-6deg); }
.bo-nota svg { width: 34px; height: 34px; fill: var(--red); stroke: var(--red); }
.bo-pie { margin: 0; padding: 16px 0 0 22px; border-top: 2px solid var(--navy-900); font-size: 14px; letter-spacing: .14em; color: var(--navy-800); }
.bo-filas + .bo-pie { margin-top: 18px; }
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .boleta { padding: 22px 14px 18px; box-shadow: 8px 8px 0 #ffd35a; background-position: -14px 0, 0 0, 0 0; }
  .bo-cabeza { padding-left: 10px; }
  .bo-cabeza small { font-size: 10.5px; letter-spacing: .16em; }
  .bo-check svg { width: 40px; height: 40px; }
  .bo-fila { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 14px 4px 14px 10px; }
  .bo-num { display: none; }
  .bo-ico { width: 44px; height: 44px; border-radius: 12px; }
  .bo-ico svg { width: 24px; height: 24px; }
  .bo-nota { width: 50px; height: 50px; font-size: 25px; border-width: 2.5px; }
  .bo-nota svg { width: 24px; height: 24px; }
  .bo-pie { padding-left: 10px; font-size: 12.5px; }
}

/* ---- Colegios en la portada (diseño de Ricardo) ----
   Títulos más grandes, "escuelas" en amarillo, cada servicio con su
   ícono, "Solicitar asesoría" como botón de contorno, los números con
   separadores y la ficha de cotización derecha, crema, sin el sello. */
.colegios--banda h2 { color: #fff; font-size: clamp(36px, 3.5vw, 56px); line-height: 1.02; letter-spacing: -.03em; margin: 16px 0 18px; }
.col-amarillo { color: var(--yellow); }
.colegios--banda .lead { color: rgba(255,255,255,.82); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.5; margin: 0 0 26px; }
.colegios--banda .colegios-feats { gap: 18px; margin-bottom: 26px; }
.colegios--banda .colegios-feat { gap: 20px; align-items: center; }
.colegios--banda .colegios-feat .ck { width: 64px; height: 64px; border-radius: 14px; background: rgba(255,255,255,.07); color: var(--yellow); display: grid; place-content: center; }
.colegios--banda .colegios-feat .ck svg { width: 30px; height: 30px; }
.colegios--banda .colegios-feat b { font-size: clamp(17px, 1.5vw, 21px); color: #fff; }
.colegios--banda .colegios-feat span { font-size: clamp(14px, 1.15vw, 16.5px); color: rgba(255,255,255,.76); }
.col-asesoria { display: inline-flex; align-items: center; gap: 12px; padding: 12px 30px; border: 2px solid rgba(255,255,255,.85); border-radius: 999px; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 17px; transition: background .2s, border-color .2s; }
.col-asesoria svg { width: 22px; height: 22px; }
.col-asesoria:hover { background: rgba(255,255,255,.08); border-color: var(--yellow); }
.colegios--banda .colegios-stats { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); gap: 0; }
.colegios--banda .colegios-stats > div + div { border-left: 1px solid rgba(255,255,255,.2); padding-left: clamp(16px, 2vw, 30px); }
.colegios--banda .colegios-stats .num { font-size: clamp(30px, 2.8vw, 42px); color: var(--yellow); }
.colegios--banda .colegios-stats .lbl { font-size: clamp(13px, 1.1vw, 16px); color: rgba(255,255,255,.82); }
body[data-page="index"] .colegios--banda .quote-form { transform: none; background: #fffaf0; border-radius: 22px; padding: clamp(24px, 3vw, 44px); }
body[data-page="index"] .colegios--banda .quote-form::before { display: none; }
.qf-eti { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 800; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--navy-900); }
.qf-eti svg { width: 28px; height: 28px; color: #f2a900; }
.colegios--banda .quote-form h3 { font-size: clamp(28px, 2.6vw, 40px); color: var(--navy-900); letter-spacing: -.02em; margin: 10px 0 6px; }
.colegios--banda .quote-form .sub { font-size: clamp(15px, 1.2vw, 17.5px); color: var(--ink-soft); margin-bottom: 24px; }
.colegios--banda .field { margin-bottom: 18px; }
.colegios--banda .field label { font-weight: 700; font-size: 15.5px; color: var(--navy-900); }
.colegios--banda .field input, .colegios--banda .field select { background: #fff; border: 1.5px solid #ddd6c6; padding: 15px 18px; font-size: 16px; }
.colegios--banda .field-row { gap: 18px; }
.qf-enviar { justify-content: center; gap: 12px; margin-top: 6px; padding: 17px; border-radius: 12px; background: var(--yellow); color: var(--navy-900); font-size: clamp(17px, 1.5vw, 20px); }
.qf-enviar svg { width: 22px; height: 22px; }
.qf-enviar:hover { background: #ffd54d; }
@media (max-width: 640px) {
  .colegios--banda .colegios-feat .ck { width: 52px; height: 52px; }
  .colegios--banda .colegios-feat .ck svg { width: 26px; height: 26px; }
  .colegios--banda .colegios-stats { grid-template-columns: repeat(3, 1fr) !important; }
  .colegios--banda .colegios-stats > div + div { padding-left: 12px; }
  .colegios--banda .colegios-stats .num { font-size: 24px; }
  .colegios--banda .colegios-stats .lbl { font-size: 12px; }
  .col-asesoria { width: 100%; justify-content: center; }
}