/* ==========================================================================
   Jessicas y Jessica E.I.R.L. — styles.css  (multipage, self-contained)
   ========================================================================== */

:root{
  --ink:#12151c; --ink-2:#1a1f29; --ink-3:#232a36;
  --paper:#ffffff; --cream:#f7f4ee; --cream-2:#efe9df;
  --line:rgba(18,21,28,.10); --text:#20242c; --muted:#6b7180;
  --gold:#c9a24b; --gold-2:#b58a34; --gold-soft:#e7d3a1;
  --navy:#011F6B; --navy-2:#0b2f8f;

  --g:#1b3fb0; --g-2:#2f6fe0; --g-soft:#eaf0ff;   /* Gophers */
  --b:#14213f; --b-2:#2c3f6b; --b-soft:#eef1f6;   /* Benavides */
  --d:#b5735d; --d-2:#cf9583; --d-soft:#f6e8e2;   /* Dialia */

  --radius:16px; --radius-s:11px;
  --shadow:0 10px 40px -12px rgba(18,21,28,.18);
  --shadow-lg:0 30px 70px -24px rgba(18,21,28,.34);
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-d:"Fraunces",Georgia,"Times New Roman",serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nav-h:86px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); -webkit-text-size-adjust:100%; overflow-x:clip; }
body{ font-family:var(--font-b); color:var(--text); background:var(--paper); line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.ic{ width:1.1em; height:1.1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:inline-block; vertical-align:-.16em; }

/* page fade-in */
@keyframes pageIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
main{ animation:pageIn .5s var(--ease) both; }

/* reveal */
.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none; } main{ animation:none; } }

/* ================= TOP BAR ================= */
.topbar{ background:var(--navy); color:#d8d3c4; font-size:.78rem; letter-spacing:.02em; }
.topbar-in{ display:flex; align-items:center; justify-content:center; gap:14px; height:36px; flex-wrap:wrap; }
.topbar-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar-item .ic{ color:var(--gold); width:14px; height:14px; }
.topbar-dot{ color:rgba(255,255,255,.3); }

/* ================= NAV ================= */
.nav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.86); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.nav.scrolled{ box-shadow:0 8px 30px -18px rgba(18,21,28,.4); border-color:var(--line); }
.nav-in{ position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:16px; transition:height .3s var(--ease); }
.nav.scrolled .nav-in{ height:72px; }
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand-logo{ height:60px; width:auto; display:block; transition:height .3s var(--ease); }
.nav.scrolled .brand-logo{ height:52px; }
/* expandable header search (icon → grows on click) */
.nav-search{ position:relative; display:flex; align-items:center; height:44px; border:1px solid transparent; border-radius:100px; background:transparent; transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
/* live suggestions dropdown */
.nav-search-suggest{ position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:82vw; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:6px; z-index:80; max-height:66vh; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.nav-search-suggest.show{ opacity:1; visibility:visible; transform:none; }
.suggest-item{ display:flex; align-items:center; gap:12px; width:100%; padding:8px 10px; border-radius:10px; text-align:left; background:none; border:none; cursor:pointer; transition:background .15s var(--ease); }
.suggest-item:hover, .suggest-item.active{ background:var(--cream); }
.suggest-thumb{ width:46px; height:46px; border-radius:9px; object-fit:cover; background:#f2f2f4; flex:none; }
.suggest-tx{ min-width:0; }
.suggest-tx b{ display:block; font-size:.9rem; color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.suggest-tx small{ color:var(--muted); font-size:.76rem; }
.suggest-empty{ padding:14px 12px; text-align:center; color:var(--muted); font-size:.84rem; }
.nav-search-input{ width:0; min-width:0; padding:0; border:none; background:transparent; font:inherit; font-size:.9rem; color:var(--ink); opacity:0; transition:width .3s var(--ease), padding .3s var(--ease), opacity .2s var(--ease); }
.nav-search-input:focus{ outline:none; }
.nav-search-input::placeholder{ color:#9aa0ab; }
.nav-search-toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:50%; color:var(--ink); transition:background .2s var(--ease); }
.nav-search-toggle:hover{ background:rgba(1,31,107,.07); }
.nav-search-toggle .ic{ width:20px; height:20px; }
.nav.search-open .nav-search{ background:#f2f3f5; border-color:var(--line); box-shadow:inset 0 1px 2px rgba(0,0,0,.03); }
.nav.search-open .nav-search-input{ width:220px; padding:0 6px 0 16px; opacity:1; }
.nav.search-open .nav-search-toggle{ color:var(--navy); }
.foot-logo{ height:62px; filter:brightness(0) invert(1); opacity:.95; margin-bottom:16px; }
/* Marcas dropdown */
.menu-drop{ position:relative; }
.menu-drop::after{ content:""; position:absolute; top:100%; left:-8px; right:-8px; height:16px; }
.menu-drop-btn{ display:inline-flex; align-items:center; gap:5px; padding:9px 12px; font-size:.9rem; font-weight:500; color:#3a4150; border-radius:8px; position:relative; }
.menu-drop-btn .chev{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease); }
.menu-drop:hover .menu-drop-btn .chev, .menu-drop.open .menu-drop-btn .chev{ transform:rotate(180deg); }
.menu-drop-btn::after{ content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.menu-drop:hover .menu-drop-btn, .menu-drop.active .menu-drop-btn{ color:var(--ink); }
.menu-drop:hover .menu-drop-btn::after, .menu-drop.active .menu-drop-btn::after{ transform:scaleX(1); }
.menu-drop-panel{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px); width:310px; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:10px; opacity:0; visibility:hidden; transition:opacity .25s var(--ease), transform .25s var(--ease); z-index:70; }
.menu-drop:hover .menu-drop-panel, .menu-drop.open .menu-drop-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mdrop{ display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:11px; transition:background .2s; }
.mdrop:hover{ background:var(--cream); }
.mdrop-dot{ width:44px; height:44px; border-radius:11px; flex:none; display:grid; place-items:center; overflow:hidden; }
.mdrop-dot img{ width:34px; height:34px; object-fit:contain; }
.mdrop-g .mdrop-dot{ background:radial-gradient(circle at 30% 20%,#2f6fe0,#14265f); }
.mdrop-b .mdrop-dot{ background:radial-gradient(circle at 30% 20%,#27375f,#0c1428); }
.mdrop-d .mdrop-dot{ background:radial-gradient(circle at 30% 20%,#f0c9bb,#c98a76); }
.mdrop-b .mdrop-dot::after{ content:"B"; font-family:var(--font-d); color:#cfd4de; font-size:1.2rem; }
.mdrop-d .mdrop-dot::after{ content:"D"; font-family:var(--font-d); color:#6b3b2c; font-size:1.2rem; }
.mdrop-tx b{ display:block; color:var(--ink); font-size:.96rem; font-weight:600; font-family:var(--font-d); }
.mdrop-tx small{ color:var(--muted); font-size:.78rem; }
.mdrop-dot-all{ background:linear-gradient(135deg,var(--navy),#0a1330); color:var(--gold); }
.mdrop-dot-all .ic{ width:22px; height:22px; }
.mdrop-all{ border-bottom:1px solid var(--line); border-radius:11px 11px 0 0; margin-bottom:4px; padding-bottom:12px; }
@media (max-width:860px){
  .menu-drop{ width:100%; }
  .menu-drop::after{ display:none; }
  .menu-drop-btn{ width:100%; justify-content:space-between; padding:14px 12px; font-size:1.02rem; border-bottom:1px solid var(--line); border-radius:0; }
  .menu-drop-btn::after{ display:none; }
  .menu-drop-panel{ position:static; transform:none; width:100%; box-shadow:none; border:none; padding:6px 0 12px; background:transparent; display:none; opacity:1; visibility:visible; }
  .menu-drop.open .menu-drop-panel{ display:block; transform:none; }
}
@media (max-width:640px){ .brand-logo{ height:52px; } }
.brand-mono{ width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--ink); color:var(--gold); font-family:var(--font-d); font-weight:600; font-size:1.15rem; box-shadow:inset 0 0 0 1px rgba(201,162,75,.35); }
.brand-txt{ display:flex; flex-direction:column; line-height:1; font-family:var(--font-d); }
.brand-txt b{ font-size:1.16rem; font-weight:600; color:var(--ink); }
.brand-txt b span{ font-weight:400; font-style:italic; color:var(--muted); font-size:.98rem; }
.brand-txt small{ font-family:var(--font-b); font-size:.58rem; letter-spacing:.32em; color:var(--gold-2); margin-top:3px; text-transform:uppercase; }
.menu{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:6px; }
.menu a{ position:relative; padding:9px 12px; font-size:.9rem; font-weight:500; color:#3a4150; border-radius:8px; transition:color .2s; white-space:nowrap; }
.menu a::after{ content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.menu a:hover{ color:var(--ink); }
.menu a:hover::after, .menu a.active::after{ transform:scaleX(1); }
.menu a.active{ color:var(--ink); }
.menu a.nav-prov{ display:inline-flex; align-items:center; gap:6px; }
.prov-tag{ font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#8a6d00; background:#fff4cf; border:1px solid #ecd98a; padding:2px 6px; border-radius:999px; line-height:1; }
@media(max-width:900px){ .menu a.nav-prov{ justify-content:flex-start; } }
.nav-actions{ display:flex; align-items:center; gap:8px; }
.cart-btn{ position:relative; width:44px; height:44px; border-radius:50%; background:transparent; color:var(--ink); display:grid; place-items:center; transition:background .2s var(--ease), color .2s var(--ease); }
.cart-btn .ic{ width:22px; height:22px; }
.cart-btn:hover{ background:rgba(1,31,107,.08); color:var(--navy); }
.cart-count{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; background:var(--gold); color:var(--ink); border-radius:11px; font-size:.72rem; font-weight:700; display:grid; place-items:center; border:2px solid var(--paper); transform:scale(0); transition:transform .3s var(--ease); }
.cart-count.show{ transform:scale(1); }
.cart-count.bump{ animation:bump .4s var(--ease); }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }
.burger{ display:none; width:44px; height:44px; border-radius:11px; flex-direction:column; gap:5px; align-items:center; justify-content:center; border:1px solid var(--line); }
.burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ================= BUTTONS ================= */
.btn{ display:inline-flex; align-items:center; gap:9px; justify-content:center; padding:14px 26px; border-radius:100px; font-weight:600; font-size:.95rem; transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s; white-space:nowrap; }
.btn .ic{ width:1.05em; height:1.05em; }
.btn-gold{ background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:var(--ink); box-shadow:0 12px 26px -12px rgba(201,162,75,.75); }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -12px rgba(201,162,75,.85); }
.btn-line{ background:rgba(255,255,255,.05); color:#f3efe6; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
.btn-line:hover{ background:rgba(255,255,255,.14); transform:translateY(-3px); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ background:var(--navy-2); transform:translateY(-3px); }
.btn-wa{ background:#25d366; color:#08331b; box-shadow:0 12px 26px -12px rgba(37,211,102,.7); }
.btn-wa:hover{ background:#20c15c; transform:translateY(-3px); }
.btn-block{ width:100%; }

/* ================= HERO SLIDER (home) ================= */
.hero-slider{ position:relative; height:calc(100vh - var(--nav-h) - 36px); min-height:560px; max-height:860px; overflow:hidden; background:var(--ink); }
.slides{ position:absolute; inset:0; }
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s var(--ease); display:flex; align-items:center; }
.slide.active{ opacity:1; visibility:visible; }
.slide-bg{ position:absolute; inset:0; z-index:0; transform:scale(1.06); }
.slide.active .slide-bg{ animation:kenburns 8s ease-out forwards; }
@keyframes kenburns{ from{transform:scale(1.12)} to{transform:scale(1)} }
.slide-bg::after{ content:""; position:absolute; inset:0; 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)'/%3E%3C/svg%3E"); opacity:.05; mix-blend-mode:overlay; }
.slide-g .slide-bg{ background:#0e1b4f url("assets/img/bg-slide-1.webp") center/cover no-repeat; }
.slide-b .slide-bg{ background:#0d1730 url("assets/img/bg-slide-2.webp") center/cover no-repeat; }
.slide-d .slide-bg{ background:#e7c6b6 url("assets/img/bg-slide-3.webp") center/cover no-repeat; }
.slide-a .slide-bg{ background:#eef1f4 url("assets/img/bg-colegio.webp") center/cover no-repeat; }
.slide-a .slide-scrim{ background:linear-gradient(95deg, rgba(238,241,246,.94) 0%, rgba(238,241,246,.72) 26%, rgba(238,241,246,.22) 48%, transparent 68%); }
.slide-a .slide-in{ color:var(--ink); }
.slide-a .slide-title{ color:#1e3a6b; }
.slide-a .slide-num{ color:#1e3a6b; }
.slide-a .slide-num i{ background:var(--gold); }
.slide-a .slide-tag{ color:#1e3a6b; }
.slide-a .slide-desc{ color:#3a4150; }
.slide-a .slide-index{ color:rgba(30,58,107,.10); }
.slide-a .slide-rule{ background:linear-gradient(90deg,#1e3a6b,transparent); }
.slide-a .slide-deco{ background-image:radial-gradient(rgba(30,58,107,.4) 1.3px, transparent 1.5px); }
.slide-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(95deg, rgba(8,12,26,.95) 0%, rgba(8,12,26,.82) 26%, rgba(8,12,26,.45) 48%, rgba(8,12,26,.08) 70%, transparent 84%); }
.slide-d .slide-scrim{ background:linear-gradient(95deg, rgba(245,232,226,.96) 0%, rgba(245,232,226,.82) 28%, rgba(245,232,226,.32) 54%, transparent 78%); }
.slide-deco{ position:absolute; z-index:2; width:78px; height:64px; opacity:.7; pointer-events:none; background-image:radial-gradient(rgba(201,162,75,.65) 1.3px, transparent 1.5px); background-size:13px 13px; }
.slide-deco.tl{ top:16%; left:2.5%; } .slide-deco.bl{ bottom:16%; left:6%; }
.slide-d .slide-deco{ background-image:radial-gradient(rgba(150,90,60,.5) 1.3px, transparent 1.5px); }
@media (max-width:860px){ .slide-deco{ display:none; } }
.slide-in{ position:relative; z-index:2; color:#fff; max-width:560px; }
.slide-num{ font-family:var(--font-d); font-size:.9rem; letter-spacing:.3em; color:rgba(255,255,255,.7); }
.slide-plaque{ display:inline-flex; background:#fff; border-radius:14px; padding:14px 20px; box-shadow:var(--shadow-lg); margin:16px 0 6px; }
.slide-plaque img{ height:64px; width:auto; }
.slide-plaque.g img{ height:96px; border-radius:8px; }
.slide-title{ font-family:var(--font-d); font-weight:400; font-size:clamp(2.6rem,6vw,4.8rem); line-height:1; margin-top:10px; }
.slide-tag{ font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; margin-top:12px; color:rgba(255,255,255,.9); }
.slide-desc{ margin-top:14px; font-size:clamp(1rem,1.5vw,1.15rem); color:rgba(255,255,255,.92); max-width:46ch; }
.slide-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.slide-badge{ position:absolute; right:6%; bottom:14%; z-index:2; writing-mode:vertical-rl; font-family:var(--font-d); font-style:italic; font-size:clamp(2rem,6vw,4rem); color:rgba(255,255,255,.10); letter-spacing:.05em; user-select:none; }
@media (max-width:760px){ .slide-badge{ display:none; } .slide-scrim{ background:linear-gradient(180deg, rgba(6,8,14,.35), rgba(6,8,14,.55)); } }

.slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.12); backdrop-filter:blur(6px); color:#fff; display:grid; place-items:center; font-size:1.6rem; transition:background .2s, transform .2s; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.slider-arrow:hover{ background:rgba(255,255,255,.24); }
.slider-arrow.prev{ left:20px; } .slider-arrow.next{ right:20px; }
.slider-arrow:hover.prev{ transform:translateY(-50%) translateX(-3px); }
.slider-arrow:hover.next{ transform:translateY(-50%) translateX(3px); }
.slider-dots{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px; }
.slider-dots button{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.4); transition:transform .2s, background .2s; }
.slider-dots button.active{ background:#fff; transform:scale(1.3); }
.slider-progress{ position:absolute; left:0; bottom:0; z-index:5; height:3px; width:100%; background:rgba(255,255,255,.15); }
.slider-progress span{ display:block; height:100%; width:0; background:var(--gold); }
.slider-progress span.run{ transition:width linear; }
@media (max-width:640px){ .slider-arrow{ display:none; } }

/* ---- Slider elegance ---- */
.slide-index{ display:none; }
.slide-num{ display:flex; align-items:center; gap:14px; font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.slide-num i{ display:inline-block; width:40px; height:1px; background:var(--gold); }
.slide-plaque{ background:linear-gradient(180deg,#fff,#f4f0ea); box-shadow:0 26px 54px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(201,162,75,.28); }
.slide-rule{ display:block; width:66px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin:18px 0 2px; }
.slide-tag{ margin-top:12px; }
/* staggered entrance keyed to active slide */
.slide-in > *{ opacity:0; transform:translateY(26px); }
.slide.active .slide-in > *{ animation:slideUp .9s var(--ease) forwards; }
.slide.active .slide-in > *:nth-child(1){ animation-delay:.20s }
.slide.active .slide-in > *:nth-child(2){ animation-delay:.32s }
.slide.active .slide-in > *:nth-child(3){ animation-delay:.44s }
.slide.active .slide-in > *:nth-child(4){ animation-delay:.52s }
.slide.active .slide-in > *:nth-child(5){ animation-delay:.60s }
.slide.active .slide-in > *:nth-child(6){ animation-delay:.70s }
.slide.active .slide-in > *:nth-child(7){ animation-delay:.80s }
@keyframes slideUp{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .slide-in > *{ opacity:1 !important; transform:none !important; animation:none !important; } }

/* ---- Slider split layout + photo ---- */
.slide-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:center; height:100%; }
.slide-logo{ display:inline-flex; align-items:center; margin:16px 0 2px; }
.slide-logo img{ height:48px; width:auto; }
.slide-logo.chip{ background:#fff; padding:12px 16px; border-radius:12px; box-shadow:0 22px 46px -18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(201,162,75,.28); }
.slide-logo.chip img{ height:74px; border-radius:6px; }
.slide-logo.light img{ height:44px; }        /* benavides-sin-fondo (light) on dark */
.slide-logo.dark img{ height:52px; }          /* dialia (dark) on light slide */
.slide-photo{ position:relative; display:flex; align-items:center; justify-content:center; height:100%; }
.slide-photo img{ position:relative; z-index:1; max-height:86%; max-width:100%; width:auto; border-radius:18px; background:#fff; box-shadow:0 34px 70px -24px rgba(0,0,0,.6); }
.slide-photo-glow{ position:absolute; z-index:0; width:78%; height:78%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.28), transparent 68%); filter:blur(26px); }
.slide.active .slide-photo{ animation:slideUp 1s var(--ease) .35s both; }

/* Dialia = light, elegant slide (dark text) */
.slide-d .slide-in{ color:var(--ink); }
.slide-d .slide-title{ color:var(--ink); }
.slide-d .slide-num{ color:#8a5a49; }
.slide-d .slide-num i{ background:var(--d); }
.slide-d .slide-tag{ color:#8a5a49; }
.slide-d .slide-desc{ color:#5b4a44; }
.slide-d .slide-index{ color:rgba(60,25,12,.10); }
.slide-d .slide-rule{ background:linear-gradient(90deg,var(--d),transparent); }
.btn-line-dark{ background:rgba(20,14,12,.04); color:#3a2620; box-shadow:inset 0 0 0 1px rgba(60,25,12,.28); }
.btn-line-dark:hover{ background:rgba(20,14,12,.09); transform:translateY(-3px); }

@media (max-width:860px){
  .slide-grid{ grid-template-columns:1fr; gap:10px; }
  .slide-photo{ display:none; }
}

/* ================= INFINITE MARQUEE ================= */
.marquee{ background:var(--ink); border-top:1px solid rgba(201,162,75,.28); border-bottom:1px solid rgba(201,162,75,.28); overflow:hidden; display:flex; padding:16px 0; }
.marquee-track{ display:flex; align-items:center; flex:0 0 auto; white-space:nowrap; will-change:transform; animation:marquee 40s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee span{ font-family:var(--font-d); font-style:italic; font-weight:400; font-size:clamp(1.1rem,2.1vw,1.55rem); color:var(--cream); padding:0 30px; }
.marquee i{ color:var(--gold); font-style:normal; font-size:.6rem; line-height:1; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-100%) } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ================= PAGE HERO (inner pages) ================= */
.page-hero{ position:relative; overflow:hidden; background:linear-gradient(160deg,#0f1218,#171d29 60%,#1d2534); color:#f3efe6; padding:clamp(52px,8vw,88px) 0; text-align:center; }
.page-hero .hero-mesh{ position:absolute; inset:-30% -10% auto -10%; height:120%; z-index:0; pointer-events:none; background:radial-gradient(40% 55% at 20% 25%, rgba(201,162,75,.28) 0, transparent 60%), radial-gradient(45% 55% at 80% 30%, rgba(47,111,224,.22) 0, transparent 62%); filter:blur(30px); animation:meshDrift 22s ease-in-out infinite alternate; }
@keyframes meshDrift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(0,-4%,0) scale(1.12)} }
.page-hero-in{ position:relative; z-index:2; }
.breadcrumb{ font-size:.8rem; color:#a9a498; margin-bottom:16px; letter-spacing:.02em; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb span{ color:var(--gold-soft); }
.page-hero h1{ font-family:var(--font-d); font-weight:400; font-size:clamp(2.2rem,5.5vw,3.8rem); line-height:1.05; }
.page-hero h1 em{ font-style:italic; color:var(--gold); }
.page-hero p{ max-width:62ch; margin:16px auto 0; color:#cfc9bc; font-size:clamp(1rem,1.5vw,1.15rem); }
/* themed inner hero */
.ph-g{ background:radial-gradient(120% 130% at 80% 10%, #2f6fe0 0%, #1b3fb0 45%, #0e1b4f 100%); }
.ph-b{ background:radial-gradient(120% 130% at 80% 10%, #34477a 0%, #1c2c52 50%, #0d1730 100%); }
.ph-d{ background:radial-gradient(120% 130% at 80% 10%, #d7a08d 0%, #b5735d 50%, #7c4130 100%); }
.ph-brand-in{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; text-align:left; }
.ph-plaque{ background:#fff; border-radius:14px; padding:14px 20px; box-shadow:var(--shadow-lg); flex:none; }
.ph-plaque img{ height:74px; width:auto; }
.ph-plaque.g img{ height:104px; border-radius:8px; }
.ph-brand-txt{ max-width:52ch; }
.ph-brand-txt h1{ text-align:left; }
.ph-brand-txt p{ margin:12px 0 0; text-align:left; color:rgba(255,255,255,.9); }
@media (max-width:640px){ .ph-brand-in{ flex-direction:column; text-align:center; } .ph-brand-txt h1, .ph-brand-txt p{ text-align:center; } }

/* ================= BRAND HERO (photo) ================= */
.brand-hero{ position:relative; overflow:hidden; padding:clamp(56px,8vw,104px) 0; min-height:340px; display:flex; align-items:center; }
.bh-bg{ position:absolute; inset:0; z-index:0; background-position:center right; background-size:cover; background-repeat:no-repeat; }
.bh-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(95deg, rgba(3,12,46,.96) 0%, rgba(3,12,46,.82) 34%, rgba(3,12,46,.38) 58%, transparent 82%); }
.bh-deco{ position:absolute; z-index:1; width:92px; height:72px; opacity:.5; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.5) 1.2px, transparent 1.4px); background-size:13px 13px; top:16%; left:2.5%; }
.bh-in{ position:relative; z-index:2; display:flex; align-items:center; gap:clamp(26px,4vw,56px); color:#fff; width:100%; }
.bh-frame{ flex:none; width:224px; height:224px; border-radius:22px; border:1.5px solid rgba(255,255,255,.34); display:grid; place-items:center; background:rgba(255,255,255,.05); box-shadow:inset 0 0 46px rgba(0,0,0,.28), 0 24px 50px -26px rgba(0,0,0,.6); }
.bh-frame img{ width:auto; height:auto; max-width:76%; max-height:66%; object-fit:contain; }
.bh-frame.lp-gophers img{ max-width:none; max-height:none; width:74%; height:auto; border-radius:10px; }
.bh-txt{ max-width:56ch; }
.bh-txt .breadcrumb{ margin-bottom:12px; }
.bh-txt h1{ font-family:var(--font-d); font-weight:400; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; color:#fff; }
.bh-rule{ display:block; width:66px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin:16px 0; }
.bh-txt p{ color:#cfd6e6; font-size:clamp(1rem,1.5vw,1.16rem); max-width:46ch; }
@media (max-width:760px){
  .brand-hero{ min-height:0; }
  .bh-in{ flex-direction:column; align-items:flex-start; gap:22px; }
  .bh-frame{ width:150px; height:150px; } .bh-frame img{ width:110px; } .bh-frame.lp-gophers img{ width:118px; }
  .bh-scrim{ background:linear-gradient(180deg, rgba(3,12,46,.66), rgba(3,12,46,.9)); }
}

/* Dialia = light hero (dark text) */
.brand-hero.ph-d .bh-scrim{ background:linear-gradient(95deg, rgba(246,233,227,.95) 0%, rgba(246,233,227,.82) 32%, rgba(246,233,227,.32) 56%, transparent 80%); }
.brand-hero.ph-d .bh-txt, .brand-hero.ph-d .bh-txt h1{ color:var(--ink); }
.brand-hero.ph-d .bh-txt p{ color:#5b4a44; }
.brand-hero.ph-d .breadcrumb{ color:#8a5a49; }
.brand-hero.ph-d .breadcrumb a:hover, .brand-hero.ph-d .breadcrumb span{ color:var(--d); }
.brand-hero.ph-d .bh-rule{ background:linear-gradient(90deg,var(--d),transparent); }
.brand-hero.ph-d .bh-frame{ border-color:rgba(90,45,30,.28); background:rgba(255,255,255,.5); box-shadow:0 24px 50px -26px rgba(120,60,40,.4); }
.brand-hero.ph-d .bh-deco{ background-image:radial-gradient(rgba(150,90,60,.5) 1.2px, transparent 1.4px); }

/* ================= FEATURES STRIP ================= */
.features-strip{ background:var(--paper); border-bottom:1px solid var(--line); }
.feat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:26px 0; }
.feat{ display:flex; align-items:center; gap:14px; }
.feat-ic{ width:50px; height:50px; flex:none; border-radius:13px; background:var(--cream); border:1px solid rgba(201,162,75,.25); display:grid; place-items:center; }
.feat-ic .ic{ width:24px; height:24px; color:var(--gold-2); }
.feat b{ display:block; color:var(--ink); font-size:.96rem; }
.feat span{ color:var(--muted); font-size:.82rem; }
@media (max-width:860px){ .feat-row{ grid-template-columns:1fr 1fr; gap:18px; } }
@media (max-width:480px){ .feat-row{ grid-template-columns:1fr; } }

/* ================= STORE CATALOG ================= */
.card.is-hidden{ display:none; }
.catalog.shop .head{ margin-bottom:clamp(24px,3vw,34px); }
/* toolbar */
.shop-bar{ display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.sb-toggle{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border-radius:12px; background:var(--ink); color:#fff; font-weight:600; font-size:.9rem; transition:background .2s, transform .2s; }
.sb-toggle .ic{ width:16px; height:16px; }
.sb-toggle:hover{ background:var(--navy); transform:translateY(-1px); }
.result-count{ font-size:.88rem; color:var(--muted); font-weight:600; white-space:nowrap; }
.result-count::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent,var(--gold)); margin-right:8px; vertical-align:middle; }
.shop-bar-right{ display:flex; align-items:center; gap:16px; margin-left:auto; }
/* store search */
.shop-search-wrap{ position:relative; display:flex; align-items:center; flex:1 1 240px; max-width:400px; min-width:190px; }
.shop-search-ic{ position:absolute; left:14px; width:17px; height:17px; color:var(--muted); pointer-events:none; }
.shop-search{ width:100%; padding:11px 16px 11px 40px; border:1px solid var(--line); border-radius:100px; background:var(--paper); font:inherit; font-size:.9rem; color:var(--ink); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.shop-search:focus{ outline:none; border-color:var(--accent,var(--gold)); box-shadow:0 0 0 3px rgba(201,162,75,.16); }
.shop-search::placeholder{ color:#9aa0ab; }
@media (max-width:640px){ .shop-search-wrap{ flex-basis:100%; max-width:none; order:1; } }
/* featured blocks (Industriales / Caballeros / Damas) */
.feat-block{ margin-top:46px; }
.feat-block:first-of-type{ margin-top:6px; }
.feat-block-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.feat-block-head h3{ display:inline-flex; align-items:center; gap:11px; font-family:var(--font-d); font-weight:600; font-size:clamp(1.2rem,2.2vw,1.55rem); color:var(--ink); white-space:nowrap; }
.feat-block-head h3 .ic{ width:24px; height:24px; color:var(--gold); }
.feat-block-head::after{ content:""; flex:1; height:1px; background:var(--line); }
.feat-block-cta{ display:flex; justify-content:center; margin-top:26px; }
.btn-cta-sm{ display:inline-flex; align-items:center; gap:8px; padding:10px 24px; border:1.5px solid var(--navy); color:var(--navy); border-radius:100px; font-weight:600; font-size:.85rem; letter-spacing:.01em; transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); }
.btn-cta-sm:hover{ background:var(--navy); color:#fff; transform:translateY(-2px); }
.btn-cta-sm .ic{ width:15px; height:15px; transition:transform .25s var(--ease); }
.btn-cta-sm:hover .ic{ transform:translateX(4px); }
.sort{ display:inline-flex; align-items:center; gap:9px; font-size:.85rem; color:var(--muted); white-space:nowrap; }
.sort-select{ font-family:inherit; font-size:.85rem; padding:10px 34px 10px 16px; border:1px solid var(--line); border-radius:100px; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7180' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/15px; color:var(--ink); font-weight:600; cursor:pointer; -webkit-appearance:none; appearance:none; }
.sort-select:focus{ outline:none; border-color:var(--accent,var(--gold)); }
.view-toggle{ display:flex; gap:4px; padding:4px; background:var(--cream); border-radius:11px; }
.vt-btn{ width:36px; height:36px; border-radius:8px; display:grid; place-items:center; color:var(--muted); transition:background .2s, color .2s; }
.vt-btn .ic{ width:18px; height:18px; }
.vt-btn.active{ background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
/* layout */
.shop-layout{ display:grid; grid-template-columns:264px 1fr; gap:clamp(20px,3vw,34px); align-items:start; }
.shop-layout.collapsed{ grid-template-columns:1fr; }
.shop-layout.collapsed .shop-sidebar{ display:none; }
/* sidebar */
.shop-sidebar{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow); position:sticky; top:96px; }
.sb-head{ display:none; }
/* select-style filters (custom compact dropdowns) */
.fsel-group{ margin-bottom:16px; }
.fsel-label{ display:block; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); font-weight:700; margin-bottom:8px; }
.fsel-wrap{ position:relative; }
/* native select kept for logic/fallback, hidden once enhanced */
.fsel-wrap[data-csel] select.fsel, .fsel-wrap[data-csel] > .fsel-chev{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden; clip:rect(0 0 0 0); }
/* fallback (no-JS): style the native select minimally */
.fsel{ width:100%; appearance:none; -webkit-appearance:none; padding:11px 38px 11px 14px; border:1px solid var(--line); border-radius:11px; background:var(--paper); font:inherit; font-size:.9rem; color:var(--ink); cursor:pointer; }
.fsel-wrap > .fsel-chev{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; pointer-events:none; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* custom trigger */
.csel-trigger{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:11px; background:var(--paper); font:inherit; font-size:.9rem; color:var(--ink); cursor:pointer; text-align:left; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.csel-trigger:hover{ border-color:rgba(1,31,107,.35); }
.csel-trigger:focus-visible{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(1,31,107,.12); }
.fsel-wrap.open .csel-trigger{ border-color:var(--navy); box-shadow:0 0 0 3px rgba(1,31,107,.1); }
.csel-val{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.csel-chev{ width:18px; height:18px; flex:none; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease); }
.fsel-wrap.open .csel-chev{ transform:rotate(180deg); color:var(--navy); stroke:var(--navy); }
/* custom panel */
.csel-panel{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40; background:var(--paper); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-lg); padding:6px; max-height:290px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.fsel-wrap.open .csel-panel{ opacity:1; visibility:visible; transform:none; }
.csel-opt{ display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px; border-radius:9px; background:none; border:none; text-align:left; font:inherit; font-size:.88rem; color:var(--ink); cursor:pointer; transition:background .15s var(--ease); }
.csel-opt.hidden{ display:none; }
.csel-opt:hover, .csel-opt:focus-visible{ background:var(--cream); outline:none; }
.csel-opt.sel{ background:rgba(1,31,107,.06); font-weight:600; color:var(--navy); }
.csel-opt.sel::after{ content:""; margin-left:auto; width:15px; height:8px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg) translateY(-2px); }
.filter-group{ padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.fg-head{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:10px; padding:2px 0; background:none; border:none; cursor:pointer; text-align:left; }
.filter-group h4{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:700; margin:0; }
.fg-chev{ width:18px; height:18px; flex:none; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .28s var(--ease); }
.filter-group.collapsed .fg-chev{ transform:rotate(-90deg); }
.fg-body{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .28s var(--ease); }
.filter-group.collapsed .fg-body{ grid-template-rows:0fr; }
.fg-inner{ overflow:hidden; min-height:0; padding-top:14px; }
.filter-group.collapsed .fg-inner{ padding-top:0; }
.fradio, .fcheck{ display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; font-size:.9rem; color:#3a4150; }
.fradio input, .fcheck input{ position:absolute; opacity:0; width:0; height:0; }
.fr-mark{ width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line); flex:none; display:grid; place-items:center; transition:border-color .2s; }
.fradio input:checked + .fr-mark{ border-color:var(--accent,var(--gold)); }
.fradio input:checked + .fr-mark::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--accent,var(--gold)); }
.fc-mark{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--line); flex:none; display:grid; place-items:center; transition:all .2s; }
.fc-mark svg{ width:12px; height:12px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.fcheck input:checked + .fc-mark{ background:var(--accent,var(--gold)); border-color:var(--accent,var(--gold)); }
.fcheck input:checked + .fc-mark svg{ opacity:1; }
.fr-label, .fc-label{ flex:1; }
.fradio:hover .fr-label, .fcheck:hover .fc-label{ color:var(--ink); }
.fr-count{ font-size:.78rem; color:var(--muted); font-weight:600; }
/* price slider */
.pr-vals{ display:flex; justify-content:space-between; font-size:.86rem; color:var(--ink); font-weight:600; margin-bottom:14px; }
.pr-track{ position:relative; height:4px; background:var(--line); border-radius:4px; }
.pr-fill{ position:absolute; height:100%; background:var(--accent,var(--gold)); border-radius:4px; }
.pr-input{ position:absolute; top:50%; left:0; width:100%; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; transform:translateY(-50%); height:4px; }
.pr-input::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; background:var(--paper); border:2px solid var(--accent,var(--gold)); box-shadow:var(--shadow); cursor:pointer; }
.pr-input::-moz-range-thumb{ pointer-events:auto; width:18px; height:18px; border-radius:50%; background:var(--paper); border:2px solid var(--accent,var(--gold)); box-shadow:var(--shadow); cursor:pointer; }
.pr-input::-webkit-slider-runnable-track{ background:none; }
.filter-group:last-of-type{ border-bottom:none; margin-bottom:16px; }
.clear-filters{ display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:12px; border:1px solid var(--line); border-radius:100px; color:#3a4150; font-weight:600; font-size:.86rem; transition:background .2s, border-color .2s; }
.clear-filters .ic{ width:16px; height:16px; }
.clear-filters:hover{ background:var(--cream); border-color:var(--accent,var(--gold)); color:var(--ink); }
.shop-overlay{ display:none; }
/* pagination */
.pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:clamp(30px,4vw,44px); }
.pg-num, .pg-arrow{ min-width:42px; height:42px; padding:0 8px; border-radius:11px; border:1px solid var(--line); background:var(--paper); color:#3a4150; font-weight:600; font-size:.92rem; transition:all .2s; }
.pg-num:hover:not(.active), .pg-arrow:hover:not([disabled]){ border-color:var(--accent,var(--gold)); color:var(--accent,var(--ink)); }
.pg-num.active{ background:var(--accent,var(--ink)); color:#fff; border-color:var(--accent,var(--ink)); box-shadow:0 8px 18px -10px var(--accent,var(--ink)); }
.pg-arrow{ font-size:1.3rem; line-height:1; }
.pg-arrow[disabled]{ opacity:.4; cursor:default; }
/* list view */
.prod-grid.list-view{ grid-template-columns:1fr; }
.prod-grid.list-view .card{ flex-direction:row; }
.prod-grid.list-view .card-fig{ width:200px; flex:none; aspect-ratio:auto; border-bottom:none; border-right:1px solid var(--line); }
.prod-grid.list-view .card-fig.has-photo{ aspect-ratio:auto; }
.prod-grid.list-view .card-b{ justify-content:center; }
/* bottom CTA bar */
.shop-cta{ display:flex; align-items:center; gap:20px 28px; flex-wrap:wrap; margin-top:clamp(34px,4vw,50px); padding:24px clamp(22px,3vw,34px); background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); }
.sc-msg{ display:flex; align-items:center; gap:15px; }
.sc-ic{ width:50px; height:50px; flex:none; border-radius:50%; background:linear-gradient(180deg,var(--gold),var(--gold-2)); display:grid; place-items:center; }
.sc-ic .ic{ width:24px; height:24px; color:#fff; }
.sc-msg b{ display:block; font-family:var(--font-d); font-size:1.14rem; color:var(--ink); }
.sc-msg span{ color:var(--muted); font-size:.9rem; }
.shop-cta .btn-wa{ margin-left:auto; }
.sc-feats{ display:flex; gap:24px; flex-wrap:wrap; width:100%; padding-top:20px; margin-top:4px; border-top:1px solid var(--line); }
.sc-feats span{ display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:var(--muted); font-weight:600; }
.sc-feats .ic{ width:18px; height:18px; color:var(--gold-2); }
@media (max-width:960px){
  .shop-layout{ grid-template-columns:1fr; }
  .shop-sidebar{ position:fixed; top:0; left:0; bottom:0; width:min(330px,86%); z-index:80; border-radius:0; overflow-y:auto; transform:translateX(-100%); transition:transform .4s var(--ease); box-shadow:20px 0 60px -20px rgba(0,0,0,.4); }
  .shop-sidebar.open{ transform:none; }
  .sb-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
  .sb-head h3{ font-family:var(--font-d); font-size:1.3rem; color:var(--ink); }
  .sb-close{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--ink); }
  .shop-overlay{ display:block; position:fixed; inset:0; z-index:79; background:rgba(10,12,16,.5); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
  .shop-overlay.open{ opacity:1; visibility:visible; }
}
@media (max-width:640px){
  .shop-bar{ gap:12px; }
  .shop-bar-right{ width:100%; margin-left:0; justify-content:space-between; }
  .shop-cta .btn-wa{ margin-left:0; width:100%; }
  .sc-feats{ gap:14px; }
  .prod-grid.list-view .card{ flex-direction:column; }
  .prod-grid.list-view .card-fig{ width:100%; border-right:none; border-bottom:1px solid var(--line); }
}

/* ================= SECTION SHELL ================= */
.section{ padding:clamp(60px,8vw,100px) 0; }
.head{ max-width:720px; margin:0 auto clamp(38px,5vw,56px); text-align:center; }
.kicker{ font-size:.76rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2); font-weight:600; margin-bottom:14px; }
.h2{ font-family:var(--font-d); font-weight:400; font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.08; color:var(--ink); }
.lead{ margin-top:16px; color:var(--muted); font-size:1.06rem; }

/* intro strip (home) */
.intro{ background:var(--cream); }
.intro-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,60px); align-items:center; }
.intro-grid .kicker, .intro-grid .h2{ text-align:left; }
.intro-grid .lead{ margin-left:0; }
.intro-stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.istat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:24px; box-shadow:var(--shadow); }
.istat b{ display:block; font-family:var(--font-d); font-size:clamp(1.8rem,3.6vw,2.6rem); color:var(--ink); line-height:1; }
.istat span{ font-size:.86rem; color:var(--muted); }

/* ================= MARCAS CARDS ================= */
.brands{ background:var(--paper); }
.brand-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.brand-card{ display:flex; flex-direction:column; background:var(--paper); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.brand-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.bc-logo{ height:170px; display:grid; place-items:center; padding:26px; position:relative; overflow:hidden; }
.bc-logo img{ max-height:100%; width:auto; object-fit:contain; position:relative; z-index:1; }
.bc-gophers .bc-logo{ background:radial-gradient(120% 120% at 50% 0%, #24347a 0%, #16255f 100%); }
.bc-gophers .bc-logo img{ border-radius:12px; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); max-height:118px; }
.bc-logo-dark{ background:linear-gradient(135deg,#182a52,#0f1c3a); }
.bc-logo-dark img{ max-height:70px; }
.bc-logo-blush{ background:linear-gradient(135deg,#f6e8e2,#efd9d0); }
.bc-logo-blush img{ max-height:96px; }
.bc-body{ padding:24px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.bc-body h3{ font-family:var(--font-d); font-size:1.6rem; font-weight:500; color:var(--ink); }
.bc-tag{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.bc-gophers .bc-tag{ color:var(--g); } .bc-benavides .bc-tag{ color:var(--b-2); } .bc-dialia .bc-tag{ color:var(--d); }
.bc-body>p{ color:var(--muted); font-size:.96rem; }
.bc-link{ margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--ink); }
.bc-link .ic{ transition:transform .25s var(--ease); }
.brand-card:hover .bc-link .ic{ transform:translateX(5px); }
.bc-gophers:hover .bc-link{ color:var(--g); } .bc-benavides:hover .bc-link{ color:var(--b-2); } .bc-dialia:hover .bc-link{ color:var(--d); }

/* ================= NOSOTROS ================= */
.nosotros{ background:radial-gradient(120% 120% at 85% 5%, #faf6ef 0%, #f2ece0 55%, #eee6d7 100%); }
.nos-grid{ display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(30px,5vw,58px); align-items:center; }
.nos-text .kicker, .nos-text .h2{ text-align:left; }
.nos-text .h2 em{ font-style:normal; color:var(--gold); }
.nos-text .lead{ margin-left:0; margin-top:20px; }
.nos-rule{ display:block; width:64px; height:2px; background:var(--gold); margin-top:14px; }
/* Misión / Visión cards */
.mv2{ display:grid; gap:16px; margin:26px 0; }
.mv2-card{ display:flex; gap:16px; align-items:center; padding:18px 20px; background:rgba(255,255,255,.7); border:1px solid rgba(201,162,75,.22); border-radius:var(--radius-s); box-shadow:0 14px 34px -22px rgba(120,90,40,.4); }
.mv2-ic{ width:58px; height:58px; flex:none; border-radius:50%; border:1px solid rgba(201,162,75,.5); display:grid; place-items:center; }
.mv2-ic .ic{ width:26px; height:26px; color:var(--gold-2); }
.mv2-card h4{ font-family:var(--font-d); font-size:1.14rem; font-weight:600; color:var(--navy); letter-spacing:.02em; text-transform:uppercase; margin-bottom:4px; }
.mv2-card p{ color:var(--muted); font-size:.9rem; }
/* Diferenciales cards */
.diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.diff-card{ background:rgba(255,255,255,.78); border:1px solid rgba(201,162,75,.2); border-radius:16px; padding:26px 20px; text-align:center; box-shadow:0 18px 40px -24px rgba(120,90,40,.4); display:flex; flex-direction:column; align-items:center; gap:8px; transition:transform .3s var(--ease); }
.diff-card:hover{ transform:translateY(-5px); }
.diff-ic{ width:60px; height:60px; border-radius:50%; border:1px solid rgba(201,162,75,.5); display:grid; place-items:center; margin-bottom:4px; }
.diff-ic .ic{ width:28px; height:28px; color:var(--gold-2); }
.diff-card b{ color:var(--ink); font-size:1.02rem; font-weight:700; }
.diff-card p{ color:var(--muted); font-size:.86rem; }
.diff-rule{ width:30px; height:2px; background:var(--gold); margin-top:6px; }
.mv{ display:grid; gap:20px; margin-top:28px; }
.mv-item{ padding:20px 22px; background:var(--cream); border-radius:var(--radius-s); border-left:3px solid var(--gold); }
.mv-item h4{ font-family:var(--font-d); font-size:1.2rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.mv-item p{ color:var(--muted); font-size:.95rem; }
.nos-diff{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.diff{ display:flex; gap:14px; padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:var(--shadow); transition:transform .3s var(--ease); }
.diff:hover{ transform:translateY(-4px); }
.diff .ic{ width:26px; height:26px; color:var(--gold-2); flex:none; margin-top:2px; }
.diff b{ display:block; color:var(--ink); font-size:.98rem; }
.diff span{ color:var(--muted); font-size:.85rem; }

/* ================= CATALOG ================= */
.catalog{ background:var(--paper); }
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.card{ display:flex; flex-direction:column; background:var(--paper); border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.card-fig{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; background:var(--accent-soft,#f2f2f4); border-bottom:1px solid var(--line); overflow:hidden; }
.card-fig::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 15%, rgba(255,255,255,.5), transparent 60%); pointer-events:none; }
.prod-ic{ width:74px; height:74px; fill:none; stroke:var(--accent,#333); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease); }
.card:hover .prod-ic{ transform:scale(1.09) rotate(-2deg); }
.card-b{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:7px; flex:1; }
.card-cat{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent,#666); }
.card-b h3{ font-family:var(--font-d); font-size:1.18rem; font-weight:600; color:var(--ink); line-height:1.2; }
.card-b>p{ color:var(--muted); font-size:.86rem; flex:1; }
.card-f{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.price{ font-size:.82rem; color:var(--muted); }
.price b{ font-size:1.12rem; color:var(--ink); font-family:var(--font-d); font-weight:600; }
.price-quote{ font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent,var(--gold-2)); }
.card-badge{ position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:var(--ink); font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:100px; box-shadow:0 8px 18px -8px rgba(201,162,75,.85); }
.card-badge .ic{ width:12px; height:12px; }
.add{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:100px; background:var(--accent,#222); color:#fff; font-weight:600; font-size:.82rem; transition:transform .2s var(--ease), filter .2s; box-shadow:0 8px 18px -10px var(--accent,#222); }
.add .ic{ width:15px; height:15px; }
.add:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.add:active{ transform:scale(.95); }
.theme-gophers{ --accent:var(--g); --accent-soft:var(--g-soft); }
.theme-benavides{ --accent:var(--b-2); --accent-soft:var(--b-soft); }
.theme-dialia{ --accent:var(--d); --accent-soft:var(--d-soft); }
.theme-escolar{ --accent:#2f6fe0; --accent-soft:#eaf1fc; }
.theme-academia{ --accent:#1e3a6b; --accent-soft:#e8edf6; }
.theme-benavides .price b, .theme-benavides .card-b h3{ color:var(--b); }

/* ================= HOW / STEPS ================= */
.how{ background:linear-gradient(160deg, var(--navy) 0%, #041449 100%); color:#e9e4d8; }
.how .h2{ color:#fff; } .how .kicker{ color:var(--gold); } .how .lead{ color:#b3ad9f; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.step{ padding:28px 22px; background:linear-gradient(180deg,#1a1f2a,#151a24); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); }
.step-n{ font-family:var(--font-d); font-size:2.6rem; font-weight:300; color:var(--gold); opacity:.55; line-height:1; }
.step h3{ font-family:var(--font-d); font-weight:600; font-size:1.2rem; color:#fff; margin:10px 0 8px; }
.step p{ color:#a7a294; font-size:.9rem; }
.how-cta{ text-align:center; margin-top:44px; }

/* ================= TESTIMONIOS ================= */
.testi{ background:var(--cream); }
.sectors{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:clamp(36px,5vw,52px); }
.sectors span{ display:inline-flex; align-items:center; gap:9px; padding:10px 20px 10px 15px; background:var(--paper); border:1px solid var(--line); border-radius:100px; font-weight:600; font-size:.9rem; color:#3a4150; box-shadow:var(--shadow); transition:transform .25s var(--ease), border-color .25s var(--ease); }
.sectors span .ic{ width:19px; height:19px; color:var(--gold); stroke-width:1.7; flex:none; }
.sectors span:hover{ transform:translateY(-2px); border-color:rgba(201,162,75,.5); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.quote{ background:var(--paper); padding:28px 26px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line); }
.stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:14px; }
.stars .ic{ width:18px; height:18px; }
.quote blockquote{ font-family:var(--font-d); font-size:1.12rem; line-height:1.5; color:var(--ink); font-style:italic; }
.quote figcaption{ margin-top:16px; color:var(--muted); font-size:.88rem; font-weight:600; }

/* ================= FAQ ================= */
.faq{ background:var(--paper); }
.faq-wrap{ max-width:820px; }
.acc{ display:grid; gap:12px; }
.ac{ border:1px solid var(--line); border-radius:var(--radius-s); background:var(--cream); overflow:hidden; transition:box-shadow .35s var(--ease), background .35s var(--ease); }
.ac.open{ box-shadow:var(--shadow); background:var(--paper); }
.ac-sum{ width:100%; text-align:left; cursor:pointer; padding:20px 24px; font-weight:600; color:var(--ink); font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.ac-sum > span:first-child{ flex:1; }
.ac-plus{ position:relative; width:18px; height:18px; flex:none; }
.ac-plus::before, .ac-plus::after{ content:""; position:absolute; background:var(--gold-2); border-radius:2px; }
.ac-plus::before{ top:8px; left:0; right:0; height:2px; }
.ac-plus::after{ left:8px; top:0; bottom:0; width:2px; transition:transform .35s var(--ease); }
.ac.open .ac-plus::after{ transform:scaleY(0); }
.ac-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease); }
.ac.open .ac-panel{ grid-template-rows:1fr; }
.ac-b{ overflow:hidden; color:var(--muted); }
.ac-b p{ padding:0 24px 22px; opacity:0; transform:translateY(-4px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.ac.open .ac-b p{ opacity:1; transform:none; transition-delay:.1s; }
html:not(.js) .ac-panel{ grid-template-rows:1fr; }
html:not(.js) .ac-b p{ opacity:1; transform:none; }

/* ================= CTA BAND ================= */
.cta-band{ position:relative; overflow:hidden; text-align:center; padding:clamp(72px,10vw,124px) 0; color:#fff; background:#04123f; }
.cta-bg{ position:absolute; inset:0; z-index:0; background-color:#04123f; background-position:center; background-size:cover; background-repeat:no-repeat; }
.cta-scrim{ position:absolute; inset:0; z-index:1; background:radial-gradient(125% 120% at 50% 45%, rgba(4,18,63,.5) 0%, rgba(2,12,45,.85) 68%, rgba(1,8,26,.95) 100%); }
.cta-deco{ position:absolute; z-index:1; width:92px; height:72px; opacity:.55; pointer-events:none; background-image:radial-gradient(rgba(201,162,75,.65) 1.3px, transparent 1.5px); background-size:13px 13px; }
.cta-deco.tl{ top:13%; left:4%; } .cta-deco.br{ bottom:13%; right:4%; }
.cta-inner{ position:relative; z-index:2; }
.cta-band .kicker{ color:var(--gold-soft); }
.cta-band .h2{ color:#fff; }
.cta-lead{ color:#cdc7b8; max-width:56ch; margin:14px auto 30px; font-size:1.06rem; }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){ .cta-deco{ display:none; } .cta-actions .btn{ width:100%; } }

/* Featured product cards — per-card brand accent */
.tc-gophers{ --accent:var(--g); --accent-soft:var(--g-soft); }
.tc-benavides{ --accent:var(--b-2); --accent-soft:var(--b-soft); }
.tc-dialia{ --accent:var(--d); --accent-soft:var(--d-soft); }

/* ================= CONTACTO ================= */
.contacto{ background:var(--cream); }
.con-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,60px); align-items:start; }
.con-info .kicker, .con-info .h2{ text-align:left; }
.con-info .lead{ margin-left:0; }
.con-list{ list-style:none; margin-top:28px; display:grid; gap:16px; }
.con-list li{ display:flex; gap:15px; align-items:flex-start; }
.con-list .ic{ width:22px; height:22px; color:var(--gold-2); flex:none; margin-top:3px; }
.con-list b{ display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.con-list a, .con-list span{ color:var(--ink); font-size:1.04rem; font-weight:500; }
.con-list a:hover{ color:var(--gold-2); }
.con-form{ background:var(--paper); padding:clamp(24px,3vw,34px); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line); }
.fld{ margin-bottom:16px; display:flex; flex-direction:column; gap:7px; }
.fld label{ font-size:.82rem; font-weight:600; color:#3a4150; }
.fld input, .fld select, .fld textarea{ font-family:inherit; font-size:.95rem; color:var(--text); padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--cream); transition:border-color .2s, box-shadow .2s; resize:vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,75,.18); background:#fff; }
.form-note{ margin-top:12px; font-size:.8rem; color:var(--muted); text-align:center; }

/* ================= FOOTER ================= */
.footer{ background:linear-gradient(160deg, #021044 0%, #01071a 100%); color:#c9c4b6; padding:clamp(48px,6vw,72px) 0 30px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-brand .brand{ margin-bottom:16px; }
.foot-brand .brand-mono{ background:#0c0f15; }
.foot-brand .brand-txt b{ color:#fff; }
.foot-brand .brand-txt b span{ color:#9a9587; }
.foot-brand p{ font-size:.9rem; color:#9a9587; max-width:38ch; }
.foot-col h5{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; font-weight:600; }
.foot-col a, .foot-muted{ display:block; color:#c9c4b6; font-size:.92rem; padding:5px 0; transition:color .2s; }
.foot-col a:hover{ color:#fff; }
.foot-muted{ color:#7a766b; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:.82rem; color:#7a766b; flex-wrap:wrap; gap:10px; }

/* ================= WHATSAPP FLOAT ================= */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:55; width:58px; height:58px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -8px rgba(37,211,102,.6); transition:transform .25s var(--ease); animation:waPulse 2.6s ease-in-out infinite; }
.wa-float .ic{ width:30px; height:30px; }
.wa-float:hover{ transform:scale(1.1); }
@keyframes waPulse{ 0%,100%{ box-shadow:0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); } 50%{ box-shadow:0 14px 30px -8px rgba(37,211,102,.6), 0 0 0 14px rgba(37,211,102,0); } }

/* ================= CART DRAWER ================= */
.cart-overlay{ position:fixed; inset:0; z-index:70; background:rgba(10,12,16,.5); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s; }
.cart-overlay.open{ opacity:1; visibility:visible; }
.cart{ position:fixed; top:0; right:0; z-index:80; height:100%; width:min(420px,100%); background:var(--paper); box-shadow:-20px 0 60px -20px rgba(0,0,0,.4); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s var(--ease); }
.cart.open{ transform:none; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.cart-head h3{ font-family:var(--font-d); font-size:1.3rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:10px; }
.cart-head .ic{ color:var(--gold-2); width:22px; height:22px; }
.cart-close{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:var(--ink); transition:background .2s; }
.cart-close:hover{ background:var(--cream); }
.cart-items{ flex:1; overflow-y:auto; padding:12px 22px; }
.ci{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); align-items:center; animation:fadeIn .3s var(--ease); }
.ci-ic{ width:52px; height:52px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--cream); }
.ci-ic svg{ width:30px; height:30px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ci-photo{ padding:0; overflow:hidden; background:#f2f2f4; }
.ci-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; }
.ci-ic.b-Gophers{ background:var(--g-soft); } .ci-ic.b-Gophers svg{ stroke:var(--g); }
.ci-ic.b-Benavides{ background:var(--b-soft); } .ci-ic.b-Benavides svg{ stroke:var(--b-2); }
.ci-ic.b-Dialia{ background:var(--d-soft); } .ci-ic.b-Dialia svg{ stroke:var(--d); }
.ci-info{ flex:1; min-width:0; }
.ci-info h4{ font-size:.95rem; font-weight:600; color:var(--ink); }
.ci-info .ci-brand{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.ci-info .ci-price{ font-size:.88rem; color:var(--muted); margin-top:2px; }
.ci-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:100px; overflow:hidden; }
.qty button{ width:28px; height:28px; display:grid; place-items:center; color:var(--ink); font-weight:700; font-size:1rem; transition:background .15s; }
.qty button:hover{ background:var(--cream); }
.qty span{ min-width:26px; text-align:center; font-weight:600; font-size:.9rem; }
.ci-remove{ font-size:.74rem; color:#b0574f; font-weight:600; }
.ci-remove:hover{ text-decoration:underline; }
.cart-empty{ flex:1; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; gap:8px; }
.cart-empty .prod-ic{ width:60px; height:60px; stroke:var(--line); stroke-width:1.6; }
.cart-empty p{ font-family:var(--font-d); font-size:1.2rem; color:var(--ink); }
.cart-empty span{ color:var(--muted); font-size:.9rem; max-width:26ch; }
.cart.empty .cart-items{ display:none; } .cart.empty .cart-empty{ display:flex; } .cart.empty .cart-foot{ display:none; }
.cart-foot{ padding:20px 22px; border-top:1px solid var(--line); background:var(--cream); }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-total span{ color:var(--muted); font-weight:600; }
.cart-total b{ font-family:var(--font-d); font-size:1.7rem; color:var(--ink); }
.cart-note{ font-size:.74rem; color:var(--muted); margin-bottom:14px; line-height:1.5; }
.cart-clear{ display:block; width:100%; text-align:center; margin-top:10px; color:var(--muted); font-size:.84rem; font-weight:600; padding:6px; }
.cart-clear:hover{ color:#b0574f; }

/* ================= TOAST ================= */
.toast{ position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); z-index:90; background:var(--ink); color:#fff; padding:13px 22px; border-radius:100px; font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:9px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.toast.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.toast .ic{ color:#25d366; }

/* ================= NUMERIC PAGER ================= */
.slider-nums{ gap:26px; }
.slider-nums button{ width:auto; height:auto; border-radius:0; background:none; font-family:var(--font-d); font-size:1.05rem; letter-spacing:.12em; color:rgba(255,255,255,.55); position:relative; padding:4px 2px; text-shadow:0 1px 8px rgba(0,0,0,.45); transition:color .25s; }
.slider-nums button.active{ color:#fff; transform:none; background:none; }
.slider-nums button.active::before{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:var(--gold); }

/* ================= INTRO / STATS (cream) ================= */
.intro{ background:radial-gradient(120% 130% at 82% 0%, #faf6ef 0%, #f2ece0 60%, #efe7d8 100%); }
.intro-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,5vw,70px); align-items:center; }
.intro-text .kicker, .intro-text .h2{ text-align:left; }
.intro-text .h2{ font-size:clamp(2rem,4.4vw,3.3rem); }
.intro-text .lead{ margin-left:0; }
.divider{ display:flex; align-items:center; gap:10px; margin:22px 0; }
.divider i{ height:1px; width:70px; background:linear-gradient(90deg,var(--gold),transparent); }
.divider i:first-child{ max-width:46px; background:linear-gradient(90deg,transparent,var(--gold)); }
.divider b{ color:var(--gold); font-size:.68rem; }
.intro-stats{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.istat{ background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:1px solid rgba(201,162,75,.22); border-radius:16px; padding:30px 20px; text-align:center; box-shadow:0 20px 44px -24px rgba(120,90,40,.45); display:flex; flex-direction:column; align-items:center; gap:6px; transition:transform .3s var(--ease); }
.istat:hover{ transform:translateY(-5px); }
.istat-ic{ width:56px; height:56px; border-radius:50%; border:1px solid rgba(201,162,75,.5); display:grid; place-items:center; margin-bottom:6px; }
.istat-ic .ic{ width:26px; height:26px; color:var(--gold-2); }
.istat b{ font-family:var(--font-d); font-size:clamp(2.4rem,5vw,3.4rem); color:var(--ink); line-height:.9; font-weight:500; }
.istat-rule{ width:34px; height:2px; background:var(--gold); margin:4px 0; }
.istat-lbl{ font-size:.85rem; color:var(--muted); }

/* ================= MARCAS SWATCH CARDS (cream) ================= */
.brands{ background:#f4efe4 url("assets/img/bg-nuestras-marcas.webp") center/cover no-repeat; }
.bc-swatch{ height:200px; display:grid; place-items:center; position:relative; overflow:hidden; }
.bc-swatch img{ position:relative; z-index:1; width:auto; }
.bc-swatch::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(115deg, transparent 54%, rgba(201,162,75,.16) 56%, transparent 60%); }
.sw-gophers{ background:radial-gradient(130% 130% at 28% 18%, #24499c, #14265f 68%, #0f1c46); }
.sw-gophers img{ width:132px; border-radius:12px; box-shadow:0 16px 32px -14px rgba(0,0,0,.6); }
.sw-benavides{ background:radial-gradient(130% 130% at 28% 18%, #27375f, #14213f 64%, #0c1428); }
.sw-benavides img{ height:66px; }
.sw-dialia{ background:#ffffff; }
.sw-dialia img{ width:auto; height:auto; max-width:82%; max-height:160px; object-fit:contain; }
.bc-rule{ display:block; width:52px; height:2px; background:var(--gold); margin:2px 0 12px; }
.tg-gophers{ color:var(--g); } .tg-benavides{ color:var(--b-2); } .tg-dialia{ color:var(--d); } .tg-escolar{ color:#2f6fe0; } .tg-academia{ color:#1e3a6b; }
.sw-academia{ background:radial-gradient(130% 130% at 28% 18%, #f1f4fa, #d3ddef 62%, #1e3a6b); }
.sw-academia img{ width:auto; height:auto; max-width:90%; max-height:150px; object-fit:contain; }
.mdrop-dot-a{ background:#eef1f7; }
.mdrop-dot-a img{ height:38px; width:auto; }
/* the marcas grid holds 4 brands */
.brand-grid-sw{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .brand-grid-sw{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .brand-grid-sw{ grid-template-columns:1fr; } }
.sw-escolar{ background:radial-gradient(130% 130% at 28% 18%, #cfe0fb, #a9c8f5 66%, #2f6fe0); }
.bc-swatch-ic{ width:88px; height:88px; color:#fff; position:relative; z-index:1; filter:drop-shadow(0 8px 16px rgba(1,31,107,.35)); }
.mdrop-dot-e{ background:linear-gradient(135deg,#3f7fe6,#1e3f86); color:#fff; }
.mdrop-dot-e .ic{ width:22px; height:22px; }
/* brand plaque icon (line without its own logo image) */
.ph-plaque .plaque-ic, .bh-frame .plaque-ic{ width:88px; height:88px; color:var(--accent,#2f6fe0); }
.ph-plaque.lp-escolar{ background:#eaf1fc; } .ph-plaque.lp-escolar .plaque-ic{ color:#2f6fe0; }
/* regalos / detalles infantiles (home) */
.regalos-home{ background:linear-gradient(180deg,#ffffff,#fdeff1); }
.regalos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.regalo-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.regalo-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(224,138,160,.5); }
.regalo-fig{ aspect-ratio:4/3; background:#fff8f9; overflow:hidden; }
.regalo-fig img{ width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .5s var(--ease); }
.regalo-card:hover .regalo-fig img{ transform:scale(1.04); }
.regalo-tx{ padding:22px 24px 26px; text-align:center; }
.regalo-card h3{ font-family:var(--font-d); font-weight:600; font-size:1.18rem; color:var(--ink); margin-bottom:9px; }
.regalo-card p{ color:var(--muted); font-size:.9rem; line-height:1.55; }
.regalo-link{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-weight:600; font-size:.88rem; color:#c25b78; }
.regalo-link .ic{ width:15px; height:15px; transition:transform .25s var(--ease); }
.regalo-card:hover .regalo-link .ic{ transform:translateX(4px); }
@media (max-width:800px){ .regalos-grid{ grid-template-columns:1fr; } }
/* provisional PRODUCTOS list (numbered) */
.prodlist-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.prodlist-note{ font-size:.82rem; color:var(--muted); }
.prodlist-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 20px; }
.prodlist-item{ position:relative; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.prodlist-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pl-num{ position:absolute; top:12px; left:12px; min-width:34px; height:34px; padding:0 10px; display:grid; place-items:center; background:var(--navy); color:#fff; font-weight:700; font-size:.95rem; border-radius:100px; border:2px solid var(--paper); box-shadow:0 6px 16px -6px rgba(1,31,107,.6); z-index:1; }
.pl-fig{ width:100%; aspect-ratio:3/4; background:#f4f4f6; display:grid; place-items:center; overflow:hidden; }
.pl-fig img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.pl-fig.is-full img{ object-fit:contain; object-position:center; padding:10px; }
.pl-ic{ width:56px; height:56px; color:var(--muted); }
.pl-tx{ padding:14px 16px 16px; }
.pl-tx b{ display:block; font-size:.98rem; color:var(--ink); font-weight:600; line-height:1.35; }
.pl-tx small{ display:block; margin-top:4px; color:var(--muted); font-size:.8rem; }
.pl-desc{ margin-top:8px; color:#556; font-size:.82rem; line-height:1.45; }
@media (max-width:1000px){ .prodlist-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px){ .prodlist-grid{ grid-template-columns:repeat(2,1fr); gap:18px 14px; } }
/* clients / logo wall */
.clients-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.client-tile{ display:grid; place-items:center; text-align:center; min-height:96px; padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.client-tile:hover{ transform:translateY(-4px); border-color:rgba(201,162,75,.5); box-shadow:0 16px 34px -18px rgba(1,31,107,.25); }
.client-tile span{ font-family:var(--font-d); font-weight:600; font-size:.92rem; color:#5a6270; letter-spacing:.01em; line-height:1.25; }
@media (max-width:900px){ .clients-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .clients-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } .client-tile{ min-height:80px; } }
/* Logo carousel (marquee) */
.logo-marquee{ overflow:hidden; width:100%; margin-top:34px; padding:10px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.logo-track{ display:flex; align-items:center; gap:20px; width:max-content; animation:logoscroll 70s linear infinite; }
.logo-marquee:hover .logo-track{ animation-play-state:paused; }
.logo-item{ flex:none; width:186px; height:100px; display:grid; place-items:center; padding:0 20px; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 26px -18px rgba(18,21,28,.28); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.logo-item:hover{ transform:translateY(-4px); box-shadow:0 16px 32px -16px rgba(18,21,28,.32); }
.logo-item.is-dark{ background:#122145; border-color:#2a3d6e; }
.logo-item img{ max-height:68px; max-width:150px; width:auto; height:auto; object-fit:contain; }
@keyframes logoscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .logo-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; } }
@media (max-width:640px){ .logo-track{ gap:14px; } .logo-item{ width:152px; height:84px; padding:0 16px; } .logo-item img{ max-height:56px; max-width:124px; } }

/* ================= PRODUCT PHOTO CARDS ================= */
.card-fig.has-photo{ aspect-ratio:4/5; background:#f2f2f4; }
.card-fig.has-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.card-fig.has-photo.is-full img{ object-fit:contain; object-position:center; padding:10px; }
.card-fig.has-photo::after{ display:none; }

/* Wide product shots (caps, etc.) — show the whole product, don't crop */
.card[data-cat="Gorras"] .card-fig.has-photo{ background:#f4f4f6; }
.card[data-cat="Gorras"] .card-fig.has-photo img{ object-fit:contain; object-position:center; padding:16px; }

/* Front/back product photo — hover flips to the reverse */
.card-fig.has-flip .img-back{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.card-fig.has-flip .img-front{ transition:opacity .45s ease; }
.card:hover .card-fig.has-flip .img-back{ opacity:1; }
.card:hover .card-fig.has-flip .img-front{ opacity:0; }
.flip-hint{ position:absolute; left:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:#fff; background:rgba(1,31,107,.82); backdrop-filter:blur(4px); box-shadow:0 4px 14px rgba(0,0,0,.18);
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; pointer-events:none; }
.flip-hint .ic{ width:14px; height:14px; }
.card-fig.has-flip:hover .flip-hint, .card:hover .flip-hint{ opacity:1; transform:translateY(0); }
@media (hover:none){ .flip-hint{ display:none; } .card-fig.has-flip .img-back{ display:none; } }

/* ================= MARCAS PHOTO CARDS ================= */
.bc-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.bc-photo>img{ width:100%; height:100%; object-fit:cover; object-position:center 16%; transition:transform .6s var(--ease); }
.brand-card:hover .bc-photo>img{ transform:scale(1.06); }
.bc-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.12)); }
.bc-badge{ position:absolute; left:16px; bottom:16px; z-index:2; display:inline-flex; align-items:center; border-radius:10px; padding:8px 12px; box-shadow:0 12px 26px -10px rgba(0,0,0,.55); }
.bc-badge img{ height:30px; width:auto; display:block; }
.lp-gophers{ background:#fff; } .lp-gophers img{ height:40px; border-radius:5px; }
.lp-benavides{ background:#14213f; }
.lp-dialia{ background:#fff; }

/* ph-plaque logo variants (brand heroes) */
.ph-plaque.lp-gophers{ background:#fff; } .ph-plaque.lp-gophers img{ height:104px; border-radius:8px; }
.ph-plaque.lp-benavides{ background:#14213f; } .ph-plaque.lp-benavides img{ height:62px; }
.ph-plaque.lp-dialia{ background:#fff; } .ph-plaque.lp-dialia img{ width:auto; height:auto; max-height:118px; max-width:210px; object-fit:contain; }
.ph-plaque.lp-academia{ background:#fff; } .ph-plaque.lp-academia img{ width:auto; height:auto; max-width:min(320px,72vw); max-height:120px; object-fit:contain; }
/* Colegio page banner: school photo background, keep current dimensions */
.page-hero.ph-a{ background:#eef1f4 url("assets/img/bg-colegio.webp") center/cover no-repeat; color:var(--ink); text-align:left; }
.page-hero.ph-a .hero-mesh{ display:none; }
.page-hero.ph-a .page-hero-in{ text-align:left; }
.page-hero.ph-a .ph-brand-in{ justify-content:flex-start; }
.page-hero.ph-a .ph-plaque{ display:none; }
.page-hero.ph-a h1, .page-hero.ph-a .ph-brand-txt h1{ color:#1e3a6b; text-align:left; }
.page-hero.ph-a .ph-brand-txt p{ color:#3a4150; }
.page-hero.ph-a .breadcrumb, .page-hero.ph-a .breadcrumb a{ color:#5a6270; }
.page-hero.ph-a .breadcrumb span{ color:#1e3a6b; }
@media (max-width:640px){ .page-hero.ph-a, .page-hero.ph-a .page-hero-in, .page-hero.ph-a .ph-brand-in{ text-align:left; } }
/* Colegio banner + slide 04: on narrow screens stack the photo on top, text below (no crop, no hidden text) */
@media (max-width:820px){
  /* Slide 04: foto a pantalla completa + velo claro abajo (cabe en la altura fija del slider, como los demás) */
  .slide-a .slide-bg{ background:#eef1f4 url("assets/img/bg-colegio.webp") 72% top/cover no-repeat; }
  .slide-a .slide-scrim{ background:linear-gradient(180deg, rgba(237,240,244,0) 0%, rgba(237,240,244,.12) 20%, rgba(237,240,244,.82) 36%, #eef0f4 46%); }
  .slide-a{ align-items:flex-end; }
  .slide-a .slide-in{ padding-bottom:56px; }
  /* Banner de la página Colegio: apilado (crece de forma natural) */
  .page-hero.ph-a{ background:#eef1f4 url("assets/img/bg-colegio.webp") right top/auto 52vw no-repeat; padding-top:calc(52vw + 16px); }
}
.ph-plaque.lp-escolar{ background:#eaf1fc; }

/* ================= PRODUCCIÓN GALLERY ================= */
.produccion{ background:radial-gradient(120% 130% at 50% 0%, #faf2ec 0%, #f4e7de 100%); }
.prod-heart{ width:.86em; height:.86em; fill:var(--d); stroke:none; display:inline-block; vertical-align:-.04em; margin-left:8px; }
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,220px); gap:18px; }
.gitem{ position:relative; overflow:hidden; border-radius:20px; box-shadow:0 22px 46px -26px rgba(120,70,50,.55); }
.gitem img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gitem:hover img{ transform:scale(1.06); }
.gitem.g-corte{ grid-column:1; grid-row:1 / span 2; }
.gitem.g-wide{ grid-column:2 / span 3; grid-row:2; }
.gitem figcaption{ position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--ink); font-weight:600; font-size:.9rem; padding:7px 18px 7px 7px; border-radius:100px; box-shadow:0 12px 26px -10px rgba(0,0,0,.42); }
.g-ic{ width:36px; height:36px; flex:none; border-radius:50%; background:var(--navy); display:grid; place-items:center; }
.g-ic .ic{ width:18px; height:18px; color:#fff; }
.g-ic .prod-ic-sm{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:860px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; grid-auto-rows:190px; }
  .gitem.g-corte{ grid-column:1 / span 2; grid-row:auto; }
  .gitem.g-wide{ grid-column:1 / span 2; grid-row:auto; }
}
@media (max-width:540px){ .gallery{ grid-template-columns:1fr; } .gitem, .gitem.g-corte, .gitem.g-wide{ grid-column:1; } }

/* ================= NOSOTROS: HISTORIA ================= */
.historia{ background:radial-gradient(120% 120% at 85% 5%, #faf6ef 0%, #f2ece0 60%, #eee6d7 100%); }
.hist-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(30px,5vw,60px); align-items:center; }
.hist-media{ position:relative; }
.hist-media img{ width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg); aspect-ratio:4/3; object-fit:cover; }
.hist-badge{ position:absolute; right:-14px; bottom:-14px; background:var(--navy); color:#fff; border-radius:16px; padding:16px 20px; box-shadow:0 20px 40px -18px rgba(1,31,107,.7); display:flex; flex-direction:column; line-height:1.05; }
.hist-badge b{ font-family:var(--font-d); font-size:2.2rem; color:var(--gold-soft); }
.hist-badge span{ font-size:.72rem; letter-spacing:.05em; color:#cdd4e6; margin-top:2px; }
.hist-text .kicker, .hist-text .h2{ text-align:left; }
.hist-text p{ color:var(--muted); margin-top:16px; }
.hist-stats{ display:flex; gap:30px; margin-top:26px; flex-wrap:wrap; }
.hist-stats div{ display:flex; flex-direction:column; }
.hist-stats b{ font-family:var(--font-d); font-size:2rem; color:var(--navy); line-height:1; }
.hist-stats span{ font-size:.82rem; color:var(--muted); margin-top:4px; }

/* ================= NOSOTROS: MISIÓN/VISIÓN PANELS ================= */
.mv-panels{ background:var(--paper); }
.mvp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mvp{ position:relative; padding:clamp(28px,4vw,44px); border-radius:var(--radius); background:linear-gradient(160deg,#12295f,#04123f); color:#e9edf7; overflow:hidden; box-shadow:var(--shadow-lg); }
.mvp:nth-child(2){ background:linear-gradient(160deg,#1a1f2a,#0d1016); }
.mvp-ic{ width:60px; height:60px; border-radius:50%; border:1px solid rgba(201,162,75,.5); display:grid; place-items:center; margin-bottom:18px; }
.mvp-ic .ic{ width:28px; height:28px; color:var(--gold); }
.mvp h3{ font-family:var(--font-d); font-size:1.7rem; font-weight:500; color:#fff; margin-bottom:12px; }
.mvp p{ color:#c3c9d6; font-size:.98rem; }

/* ================= NOSOTROS: SECTORES ================= */
.sectores-sec{ background:var(--cream); }
.sect-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.sect{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; padding:30px 22px 26px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.sect:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(1,31,107,.28); border-color:rgba(201,162,75,.5); }
.sect-ic{ width:66px; height:66px; border-radius:50%; background:linear-gradient(160deg,#fbf6ea,#f3e8cf); border:1px solid rgba(201,162,75,.35); display:grid; place-items:center; margin-bottom:2px; transition:background .3s var(--ease); }
.sect-ic .ic{ width:32px; height:32px; color:var(--gold); stroke-width:1.6; }
.sect:hover .sect-ic{ background:linear-gradient(160deg,#f6ecd4,#ecdcb6); }
.sect b{ color:var(--ink); font-size:1.12rem; font-family:var(--font-d); font-weight:600; }
.sect p{ color:var(--muted); font-size:.85rem; line-height:1.55; }
.sect-link{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-size:.8rem; font-weight:700; letter-spacing:.02em; }
.sect-link .ic{ width:15px; height:15px; transition:transform .3s var(--ease); }
.sect:hover .sect-link .ic{ transform:translateX(4px); }

/* ================= COTIZAR: PROCESO TIMELINE ================= */
.proceso{ background:var(--paper); }
.proceso-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.proceso-head{ position:sticky; top:110px; }
.proceso-head .kicker, .proceso-head .h2{ text-align:left; }
.proceso-head .lead{ margin:16px 0 26px; }
.timeline{ position:relative; display:grid; gap:22px; }
.timeline::before{ content:""; position:absolute; left:27px; top:10px; bottom:10px; width:2px; background:linear-gradient(180deg,var(--gold),var(--line)); }
.tl-item{ display:flex; gap:22px; position:relative; }
.tl-num{ flex:none; width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--font-d); font-size:1.2rem; display:grid; place-items:center; box-shadow:0 12px 26px -12px rgba(1,31,107,.7); z-index:1; }
.tl-body{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; flex:1; box-shadow:var(--shadow); }
.tl-body h3{ font-family:var(--font-d); font-size:1.24rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.tl-body p{ color:var(--muted); font-size:.92rem; }

/* ================= COTIZAR: PERSONALIZACIÓN ================= */
.perso{ background:var(--cream); }
.perso-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.perso-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:30px 24px; text-align:center; box-shadow:var(--shadow); transition:transform .3s var(--ease); }
.perso-card:hover{ transform:translateY(-6px); }
.perso-ic{ width:60px; height:60px; margin:0 auto 16px; border-radius:16px; background:var(--navy); display:grid; place-items:center; }
.perso-ic .ic{ width:28px; height:28px; color:#fff; }
.perso-ic .prod-ic-sm{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.perso-card h3{ font-family:var(--font-d); font-size:1.2rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.perso-card p{ color:var(--muted); font-size:.9rem; }

/* ================= CART DETAIL LINK (drawer) ================= */
.cart-detail-link{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px; font-size:.86rem; font-weight:600; color:var(--ink); }
.cart-detail-link .ic{ width:15px; height:15px; transition:transform .2s var(--ease); }
.cart-detail-link:hover{ color:var(--gold-2); }
.cart-detail-link:hover .ic{ transform:translateX(3px); }

/* ================= CART PAGE ================= */
.cart-page{ background:var(--cream); }
.cartpage-empty{ text-align:center; max-width:520px; margin:0 auto; padding:30px 0; }
.cpe-ic{ width:80px; height:80px; margin:0 auto 20px; border-radius:50%; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; box-shadow:var(--shadow); }
.cpe-ic .ic{ width:36px; height:36px; color:var(--gold-2); }
.cartpage-empty p{ color:var(--muted); margin:12px 0 26px; }
.cartpage-empty .cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cartpage-grid{ display:grid; grid-template-columns:1fr 360px; gap:clamp(22px,3vw,36px); align-items:start; }
.cartpage-list{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:8px clamp(16px,2.5vw,26px) 22px; box-shadow:var(--shadow); }
.cartpage-lhead{ display:grid; grid-template-columns:auto 1fr 150px; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.cartpage-lhead span:first-child{ grid-column:1 / 3; } .cartpage-lhead span:nth-child(2){ text-align:center; }
.cp-item{ display:grid; grid-template-columns:auto 1fr 150px; gap:16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.cp-ic{ width:74px; height:88px; flex:none; border-radius:12px; overflow:hidden; display:grid; place-items:center; }
.cp-ic.ci-photo{ background:#f2f2f4; } .cp-ic.ci-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; }
.cp-ic svg{ width:38px; height:38px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cp-info{ min-width:0; }
.cp-info .ci-brand{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.cp-info h4{ font-family:var(--font-d); font-size:1.14rem; font-weight:600; color:var(--ink); margin:2px 0 3px; }
.cp-unit{ font-size:.86rem; color:var(--muted); }
.cp-info .ci-remove{ font-size:.76rem; color:#b0574f; font-weight:600; margin-top:8px; }
.cp-info .ci-remove:hover{ text-decoration:underline; }
.cp-qty{ display:flex; justify-content:center; }
.cp-sub{ text-align:right; font-family:var(--font-d); font-size:1.16rem; font-weight:600; color:var(--ink); }
.cartpage-continue{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-weight:600; color:var(--ink); }
.cartpage-continue .ic{ width:16px; height:16px; transform:rotate(180deg); }
.cartpage-continue:hover{ color:var(--gold-2); }
.cartpage-summary{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow); position:sticky; top:100px; }
.cartpage-summary h3{ font-family:var(--font-d); font-size:1.4rem; font-weight:600; color:var(--ink); margin-bottom:18px; }
.sum-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); }
.sum-row b{ color:var(--ink); font-weight:700; }
.sum-total{ border-bottom:none; padding-top:16px; }
.sum-total span{ color:var(--ink); font-weight:600; }
.sum-total b{ font-family:var(--font-d); font-size:1.7rem; }
.cartpage-summary .cart-note{ font-size:.74rem; color:var(--muted); margin:8px 0 16px; line-height:1.5; }
.cartpage-summary .cart-clear{ display:block; width:100%; text-align:center; margin-top:12px; color:var(--muted); font-size:.84rem; font-weight:600; padding:6px; }
.cartpage-summary .cart-clear:hover{ color:#b0574f; }
@media (max-width:860px){ .cartpage-grid{ grid-template-columns:1fr; } .cartpage-summary{ position:static; } }
@media (max-width:540px){
  .cartpage-lhead{ display:none; }
  .cp-item{ grid-template-columns:auto 1fr; grid-template-areas:"ic info" "ic qty"; row-gap:12px; }
  .cp-ic{ grid-area:ic; } .cp-info{ grid-area:info; } .cp-qty{ grid-area:qty; justify-content:flex-start; }
}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){ .prod-grid{ grid-template-columns:repeat(3,1fr); } .steps{ grid-template-columns:repeat(2,1fr); } .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:860px){
  .nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.98); }
  .nav.search-open .brand{ display:none; }
  .nav.search-open .nav-search-input{ width:min(240px,54vw); }
  .menu{ position:fixed; inset:0 0 0 auto; top:0; width:min(340px,86%); height:100%; z-index:75; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:2px; background:var(--paper); padding:calc(var(--nav-h) + 20px) 20px 20px; box-shadow:-16px 0 50px -20px rgba(0,0,0,.4); transform:translateX(100%); transition:transform .4s var(--ease); margin-left:0; overflow-y:auto; }
  .menu.open{ transform:none; }
  .menu a{ padding:14px 12px; font-size:1.02rem; border-bottom:1px solid var(--line); border-radius:0; }
  .menu a::after{ display:none; }
  .burger{ display:flex; }
  .nos-grid, .con-grid, .intro-grid{ grid-template-columns:1fr; }
  .hist-grid, .mvp-grid, .proceso-grid{ grid-template-columns:1fr; }
  .proceso-head{ position:static; }
  .hist-badge{ right:12px; }
  .perso-grid{ grid-template-columns:1fr 1fr; }
  .brand-grid, .testi-grid{ grid-template-columns:1fr; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .diff-grid, .intro-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:540px){
  .steps{ grid-template-columns:1fr; }
  .intro-stats{ grid-template-columns:1fr 1fr; }
  .diff-grid{ grid-template-columns:1fr; }
  .perso-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:24px; }
  .foot-bottom{ flex-direction:column; text-align:center; }
  .topbar-item:not(:first-child){ display:none; }
  .prod-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .card-b{ padding:14px; }
  .card-f{ flex-direction:column; align-items:stretch; gap:10px; }
  .card-f .add{ width:100%; justify-content:center; }
  .hero-slider{ height:auto; min-height:0; }
  .slides{ position:static; }
  .slide{ position:relative; opacity:1; visibility:visible; display:none; padding:64px 0; min-height:70vh; }
  .slide.active{ display:flex; }
  .slide-scrim{ background:linear-gradient(180deg, rgba(8,12,26,.6), rgba(8,12,26,.86)); }
  .slide-d .slide-scrim{ background:linear-gradient(180deg, rgba(245,232,226,.55), rgba(245,232,226,.9)); }
  /* On portrait phones the cover-crop centers the image; the product sits on the
     right of each photo, so shift the focus right to keep it in frame (like Gophers). */
  .slide-g .slide-bg{ background-position:64% center; }
  .slide-b .slide-bg{ background-position:82% center; }
  .slide-d .slide-bg{ background-position:86% center; }
  .slide-cta .btn{ width:100%; }
}

/* ===================== PRODUCT DETAIL (producto.html) ===================== */
.pd-section{ padding:34px 0 72px; }
.pd-root{ min-height:50vh; }
.pd-loading{ padding:80px 0; text-align:center; color:var(--muted); }
.pd-breadcrumb{ font-size:.85rem; color:var(--muted); margin-bottom:22px; }
.pd-breadcrumb a{ color:var(--muted); } .pd-breadcrumb a:hover{ color:var(--ink); }
.pd-breadcrumb span{ color:var(--ink); font-weight:500; }
.pd-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start; }
.pd-media{ position:sticky; top:96px; }
.pd-fig{ position:relative; width:100%; aspect-ratio:4/5; background:linear-gradient(160deg,#f6f6f8,#eceef2); border:1px solid var(--line); border-radius:20px; overflow:hidden; display:grid; place-items:center; box-shadow:0 24px 60px -30px rgba(18,21,28,.35); }
.pd-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 15%; transition:opacity .4s ease; }
.pd-fig.is-full .pd-img{ object-fit:contain; object-position:center; padding:18px; }
.pd-fig .pd-img-back{ opacity:0; }
.pd-fig.show-back .pd-img-back{ opacity:1; } .pd-fig.show-back .pd-img-front{ opacity:0; }
.pd-fig-ic{ aspect-ratio:4/5; } .pd-bigic{ width:96px; height:96px; color:var(--muted); }
.pd-thumbs{ display:flex; gap:12px; margin-top:14px; }
.pd-thumb{ width:74px; height:88px; border:2px solid var(--line); border-radius:12px; overflow:hidden; background:#f4f4f6; padding:0; cursor:pointer; transition:border-color .2s, transform .2s; }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; }
.pd-thumb:hover{ transform:translateY(-2px); } .pd-thumb.is-active{ border-color:var(--gold); }
.pd-info{ padding-top:4px; }
.pd-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.pd-brand{ font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#fff; padding:5px 11px; border-radius:100px; }
.pd-brand-gophers{ background:var(--g); } .pd-brand-benavides{ background:var(--b-2); } .pd-brand-dialia{ background:var(--d); }
.pd-brand-escolar{ background:#2f6fe0; } .pd-brand-academias, .pd-brand-colegio{ background:#1e3a6b; }
.pd-cat{ font-size:.8rem; color:var(--muted); background:var(--cream); padding:5px 11px; border-radius:100px; }
.pd-retail{ display:inline-flex; align-items:center; gap:5px; font-size:.75rem; font-weight:600; color:var(--gold-2); }
.pd-retail .ic{ width:14px; height:14px; }
.pd-title{ font-family:var(--serif,'Fraunces',serif); font-size:2.3rem; line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0 0 12px; }
.pd-titlerule{ display:block; width:56px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-2)); margin:0 0 16px; }
.pd-price{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--gold-2); background:rgba(184,139,74,.09); border:1px solid rgba(184,139,74,.26); padding:6px 13px; border-radius:100px; margin-bottom:20px; }
.pd-price .ic{ width:14px; height:14px; }
.pd-desc{ font-size:1.02rem; line-height:1.68; color:var(--text); margin-bottom:20px; }
.pd-feats{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.pd-feats li{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; color:var(--ink); background:var(--cream); border:1px solid var(--line); padding:7px 13px; border-radius:100px; }
.pd-feats .ic{ width:14px; height:14px; color:var(--gold-2); }
/* ---- Detalle: configurador (tallas, colores y CTA) ---- */
.pd-config{ margin:4px 0 24px; padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 34px -22px rgba(18,21,28,.28); }
.pd-config-head{ display:flex; align-items:flex-start; gap:12px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.pd-config-ic{ flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--navy,#011F6B); color:#fff; }
.pd-config-ic .ic{ width:19px; height:19px; }
.pd-config-tx b{ display:block; font-size:1rem; color:var(--ink); line-height:1.2; }
.pd-config-tx span{ display:block; font-size:.86rem; color:var(--muted); margin-top:3px; }
.pd-options{ display:grid; gap:20px; margin:0 0 22px; }
.pd-opt-label{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin-bottom:11px; }
.pd-opt-label em{ font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; font-size:.8rem; color:var(--muted); }
.pd-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-chip{ display:inline-flex; align-items:center; gap:7px; min-width:46px; min-height:42px; justify-content:center; font-size:.9rem; font-weight:500; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); padding:9px 15px; border-radius:11px; cursor:pointer; transition:border-color .15s, background .15s, color .15s, box-shadow .15s; }
.pd-chip:hover{ border-color:var(--ink); }
.pd-chip:focus-visible{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(1,31,107,.16); }
.pd-chip.active{ border-color:var(--ink); background:var(--ink); color:#fff; }
.pd-chip-color{ padding-left:11px; }
.pd-chip-color.active{ background:var(--paper); color:var(--ink); border-color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.pd-chip-color.active .pd-sw{ box-shadow:0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.pd-chip-custom{ font-size:.85rem; color:var(--muted); border-style:dashed; }
.pd-chip-custom:hover{ color:var(--ink); }
.pd-chip-custom.active{ background:var(--gold-2); border-color:var(--gold-2); border-style:solid; color:#fff; }
.pd-sw{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex:none; transition:box-shadow .15s; }
.pd-custom{ display:block; width:100%; max-width:360px; margin-top:11px; font-size:.92rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:11px; padding:11px 14px; }
.pd-custom[hidden]{ display:none; }
.pd-custom::placeholder{ color:var(--muted); }
.pd-custom:focus{ outline:none; border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(184,139,74,.14); }
.pd-cta{ display:flex; flex-wrap:wrap; gap:10px; }
.pd-cta .btn{ flex:1 1 200px; justify-content:center; padding:14px 20px; font-size:.95rem; border-radius:12px; }
.btn-wa{ background:#25d366; color:#fff; }
.btn-wa:hover{ background:#1eb85a; }
.pd-cta .btn .ic{ width:18px; height:18px; }
.pd-quote-note{ display:flex; align-items:flex-start; gap:8px; margin:16px 0 0; font-size:.82rem; line-height:1.5; color:var(--muted); }
.pd-quote-note .ic{ width:15px; height:15px; color:var(--gold-2); flex:none; margin-top:1px; }
.pd-trust{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; padding-top:22px; border-top:1px solid var(--line); }
.pd-trust li{ display:flex; align-items:center; gap:11px; font-size:.9rem; color:var(--text); }
.pd-trust-ic{ flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:var(--cream); border:1px solid var(--line); }
.pd-trust-ic .ic{ width:17px; height:17px; color:var(--navy,#011F6B); }
.pd-related{ margin-top:64px; }
.pd-related h2{ font-family:var(--serif,'Fraunces',serif); font-size:1.5rem; color:var(--ink); margin-bottom:22px; }
.pd-related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pd-rel-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.pd-rel-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg,0 18px 50px -16px rgba(18,21,28,.28)); }
.pd-rel-fig{ aspect-ratio:4/5; background:#f4f4f6; overflow:hidden; }
.pd-rel-fig img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; }
.pd-rel-fig.is-full img{ object-fit:contain; object-position:center; padding:8px; }
.pd-rel-tx{ padding:12px 14px 14px; } .pd-rel-tx small{ display:block; color:var(--muted); font-size:.74rem; margin-bottom:3px; }
.pd-rel-tx b{ font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.3; }
.pd-empty{ text-align:center; padding:70px 0; } .pd-empty h1{ font-family:var(--serif,'Fraunces',serif); margin-bottom:10px; } .pd-empty p{ color:var(--muted); margin-bottom:22px; }
.card-medialink{ display:block; } .card-titlelink{ color:inherit; } .card-titlelink:hover{ color:var(--gold-2); }
@media (max-width:860px){
  .pd-grid{ grid-template-columns:1fr; gap:28px; }
  .pd-media{ position:static; max-width:440px; }
  .pd-title{ font-size:1.8rem; }
  .pd-related-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .pd-config{ padding:18px 16px; }
  .pd-cta{ flex-direction:column; } .pd-cta .btn{ width:100%; }
  .pd-trust{ grid-template-columns:1fr; gap:12px; }
}