/* ==========================================================
   Capa visual "Elevado" · se carga DESPUÉS de motor.css (o del <style> de la home).
   Usa los mismos tokens (--accent, --ink, --paper...). Todo se activa con clases elev-*.
   ========================================================== */
/* Puente de variables: en el tema hijo los tokens se llaman --pulso-*. En la home ya existen sin prefijo y estos valores son los mismos. */
:root{
  --bg:var(--pulso-bg,#F2F3F5);--paper:var(--pulso-paper,#FFFFFF);--ink:var(--pulso-ink,#0D0F12);--ink-2:var(--pulso-ink-2,#5B616B);
  --line:var(--pulso-line,#E2E4E8);--accent:var(--pulso-accent,#1450FF);--night:var(--pulso-night,#0A0B0E);--glow:var(--pulso-glow,#3D6BFF);
  --r:var(--pulso-r,18px);--f-display:var(--pulso-display,"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif);
  --f-text:var(--pulso-text,"Inter Tight","Segoe UI",system-ui,sans-serif);--f-mono:var(--pulso-mono,"JetBrains Mono",ui-monospace,Menlo,monospace);
  --gut:max(16px,env(safe-area-inset-left,0px));--gut-r:max(16px,env(safe-area-inset-right,0px));
}
.elev-l{display:inline-block;will-change:transform}
.elev-grano{position:relative;isolation:isolate}
.elev-grano::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- Botones ---------- */
.btn{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn .arr{width:16px;height:16px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.btn:hover .arr{transform:translateX(4px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#262a31}
.btn-line{background:transparent;border:1px solid currentColor}
.btn-wa2{background:#1FAF5A;color:#fff}
.btn-wa2:hover{background:#18964C}
.elev-iman{will-change:transform}

/* ---------- Navegación sobre secciones oscuras ---------- */
.nav{transition:background .35s,color .35s,border-color .35s}
.nav.nav--dark{background:rgba(18,20,26,.72);color:#fff;border-color:rgba(255,255,255,.14)}
.nav.nav--dark a:hover{background:rgba(255,255,255,.1)}
.nav.nav--dark .cart{background:#fff;color:var(--ink)}
.nav .cta{background:var(--accent);color:#fff}
.nav .cta:hover{background:#0B3FE0}

/* ---------- Hero ---------- */
.hero-tilt{display:grid;place-items:center;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s cubic-bezier(.22,1,.36,1);will-change:transform;transform-style:preserve-3d}
.hero-ctas{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hero-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:10px 14px;font-size:13px;box-shadow:0 14px 34px -18px rgba(60,40,10,.4)}
.hero-chip b{font-family:var(--f-mono);font-size:20px;font-weight:500;display:block;line-height:1}
.hero-chip small{color:var(--ink-2);font-size:12px}
.hero-chip.c1{left:max(var(--gut),9vw);top:46%}
.hero-chip.c2{right:max(var(--gut-r),9vw);top:38%}
.pulso-dot{width:9px;height:9px;border-radius:50%;background:#1FAF5A;box-shadow:0 0 0 0 rgba(31,175,90,.6);animation:elev-ping 2s infinite}
@keyframes elev-ping{70%{box-shadow:0 0 0 10px rgba(31,175,90,0)}100%{box-shadow:0 0 0 0 rgba(31,175,90,0)}}
.hero .scroll-cue{position:absolute;left:50%;bottom:18px;z-index:5;translate:-50% 0;display:grid;justify-items:center;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 55%,transparent)}
.scroll-cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--ink),transparent);transform-origin:top;animation:elev-cue 2.2s ease-in-out infinite}
@keyframes elev-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- Cine: carta circular detrás del producto ---------- */
.elev-carta{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:1}
.elev-carta svg{width:min(116vmin,1000px);height:auto;max-width:none;overflow:visible;animation:elev-giro 360s linear infinite}
@keyframes elev-giro{to{rotate:360deg}}
.elev-carta-aro{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}
.elev-carta-radio{stroke:rgba(255,255,255,.05);stroke-width:1}
.elev-carta-radio.fuerte{stroke:rgba(255,255,255,.14)}
.elev-carta-hora{fill:rgba(255,255,255,.4);font:500 11px var(--f-mono);letter-spacing:.06em}
.elev-carta-trazo{fill:none;stroke:var(--glow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px var(--glow))}
.elev-carta-pluma{fill:#7CF0A8;filter:drop-shadow(0 0 10px #7CF0A8)}
.cine-tag{position:absolute;left:50%;bottom:34px;translate:-50% 0;z-index:3;font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#7F8794;text-align:center}
.spec{overflow:hidden}
.spec::before,.spec::after{content:"";position:absolute;width:8px;height:8px;border:1px solid rgba(255,255,255,.4)}
.spec::before{left:6px;top:6px;border-right:0;border-bottom:0}
.spec::after{right:6px;bottom:6px;border-left:0;border-top:0}

/* ---------- Marquesina que reacciona al scroll ---------- */
.elev-marquesina.elev-js .marquee-track{animation:none;will-change:transform}

/* ---------- Envíos: Arturo al volante ---------- */
.van{width:min(600px,82vw)}
.van-svg{width:100%;height:auto;display:block;overflow:visible}
.van-svg .rueda{transform-box:fill-box;transform-origin:center;animation:elev-rueda 1s linear infinite}
@keyframes elev-rueda{to{rotate:360deg}}
.van-svg .rebote{animation:elev-rebote .5s ease-in-out infinite alternate}
@keyframes elev-rebote{to{translate:0 -2px}}

/* ---------- Red de envíos ---------- */
.red{background:var(--paper);padding-block:90px 100px;position:relative;overflow:hidden}
.red-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:48px;align-items:center}
.red h2{font-size:clamp(40px,5.4vw,76px);margin:10px 0 16px}
.red p{color:var(--ink-2);max-width:42ch}
.red .hero-ctas{margin-top:24px}
.elev-red{position:relative;border-radius:28px;background:radial-gradient(circle at 1px 1px,rgba(13,15,18,.12) 1px,transparent 1.4px) 0 0/22px 22px,var(--bg);border:1px solid var(--line);min-width:0}
.elev-red svg{display:block;width:100%;height:auto}
.elev-red-base{fill:none;stroke:rgba(20,80,255,.16);stroke-width:2;stroke-dasharray:3 6}
.elev-red-linea{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.elev-red-ciudad circle{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.elev-red-ciudad text,.elev-red-origen text{font:600 14px var(--f-text);fill:var(--ink)}
.elev-red-origen text.nota{font:500 12px var(--f-mono);fill:var(--ink-2)}
.elev-red-origen circle{fill:var(--accent)}
.elev-red-origen .onda{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:elev-onda 2.6s ease-out infinite}
.elev-red-origen .onda.o2{animation-delay:1.3s}
@keyframes elev-onda{from{scale:.4;opacity:.9}to{scale:2.4;opacity:0}}
.elev-red-caja{fill:#C79A63;stroke:#8C6636;stroke-width:1.5;opacity:0}

/* ---------- Calculadora de respaldo ---------- */
.calc{background:var(--night);color:#fff;padding-block:100px;position:relative;overflow:hidden}
.calc .glow2{position:absolute;right:-10vmin;top:-10vmin;width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 55%,transparent),transparent 65%);filter:blur(40px);opacity:.5;pointer-events:none}
.calc-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.calc h2{font-size:clamp(40px,5.6vw,80px);color:#fff;margin:10px 0 14px}
.calc .lead{color:#A8AEB8;max-width:42ch}
.calc .eyebrow{color:#A8AEB8}
.calc-arturo{display:flex;align-items:flex-end;gap:14px;margin-top:28px}
.calc-arturo .elev-arturo{--aw:170px;width:var(--aw);flex:none}
.bubble{position:relative;background:#fff;color:var(--ink);border-radius:18px 18px 18px 4px;padding:12px 16px;font-size:14px;max-width:26ch;margin-bottom:60px}
.elev-calc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);border-radius:26px;padding:clamp(18px,3vw,30px);display:grid;gap:20px;min-width:0}
.calc-t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8D95A3;margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;border-radius:999px;padding:9px 14px;font-size:14px;transition:background .2s,border-color .2s,transform .16s}
.chip:active{transform:scale(.96)}
.chip small{font:500 12px var(--f-mono);color:#8D95A3}
.chip[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.chip[aria-pressed="true"] small{color:var(--ink-2)}
.calc-out{display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:end;border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
.calc-out .big{font-family:var(--f-mono);font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.calc-out small{color:#A8AEB8;font-size:13px}
.elev-calc-bat{display:flex;gap:5px;grid-column:1/-1}
.elev-calc-bat i{flex:1;height:16px;border-radius:5px;background:rgba(255,255,255,.1);transition:background .4s,box-shadow .4s}
.elev-calc-bat i.on{background:#7CF0A8;box-shadow:0 0 14px rgba(124,240,168,.45)}
.calc-nota{color:#C5CBD6;font-size:14px;grid-column:1/-1;min-height:1.5em}
.calc-ctas{display:flex;gap:10px;flex-wrap:wrap}
.calc .fine{font-size:12px;color:#7F8794}

/* ---------- Más vendidos ---------- */
.rail.elev-arrastre{cursor:grab}
.rail.elev-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.card .ph{transition:box-shadow .4s}
.card.elev-foco .ph::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(260px circle at var(--fx,50%) var(--fy,50%),rgba(20,80,255,.14),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.card.elev-foco:hover .ph::before{opacity:1}
.card .ph svg{position:relative;z-index:1}
.card .ph .tag,.card .ph .add{z-index:2}
.card .meta-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.card .wa-mini{font-size:12px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.elev-avance{height:14px;width:min(240px,50%);position:relative;background:repeating-linear-gradient(90deg,var(--ink-2) 0 1px,transparent 1px 12px) 0 100%/100% 6px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 60px) 0 100%/100% 12px no-repeat}
.elev-avance i{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(.12)}
.best-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}

/* ---------- Banda de CTA con Arturo ---------- */
.ctaband{background:var(--accent);color:#fff;padding-block:56px;position:relative;overflow:hidden}
.ctaband-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,4vw,48px);align-items:center}
.ctaband .elev-arturo{--aw:150px;width:var(--aw);margin-bottom:-56px;align-self:end}
.ctaband h2{font-size:clamp(34px,4.6vw,60px);color:#fff}
.ctaband p{color:#DCE5FF;margin-top:10px;max-width:46ch}
.ctaband .btn-light{background:#fff;color:var(--accent)}
.ctaband .btn-light:hover{background:#EAF0FF}

/* ---------- Newsletter con Arturo ---------- */
.news{position:relative;overflow:hidden}
.news-in{grid-template-columns:auto 1.1fr 1fr}
.news .elev-arturo{--aw:190px;width:var(--aw);margin-block:-20px -80px;align-self:end}
.news-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.news .btn-line{color:#fff}

/* ---------- Arturo ---------- */
.elev-arturo{display:block;overflow:visible;width:var(--aw,160px);height:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.elev-arturo .ojos{transform-box:fill-box;transform-origin:center;animation:elev-parpadeo 5.5s infinite}
@keyframes elev-parpadeo{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.elev-arturo .cabeza{transform-box:fill-box;transform-origin:50% 100%;animation:elev-cabeza 5s ease-in-out infinite}
@keyframes elev-cabeza{50%{rotate:2.2deg}}
.elev-arturo .saluda{transform-box:fill-box;transform-origin:10% 95%;animation:elev-saludo 1.5s ease-in-out infinite}
@keyframes elev-saludo{0%,100%{rotate:-8deg}50%{rotate:16deg}}
.elev-arturo .arriba-i,.elev-arturo .arriba-d{transform-box:fill-box;transform-origin:50% 95%;animation:elev-festeja .7s ease-in-out infinite alternate}
.elev-arturo .arriba-d{animation-delay:.35s}
@keyframes elev-festeja{from{rotate:-8deg}to{rotate:10deg}}
.elev-arturo .pulgar{transform-box:fill-box;transform-origin:10% 95%;animation:elev-pulgar 2.4s ease-in-out infinite}
@keyframes elev-pulgar{0%,100%{rotate:0deg}50%{rotate:-9deg}}
.elev-arturo .confeti>*{animation:elev-confeti 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.elev-arturo .confeti>*:nth-child(2n){animation-delay:.6s}
.elev-arturo .confeti>*:nth-child(3n){animation-delay:1.1s}
@keyframes elev-confeti{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 12px;rotate:80deg}}
.elev-arturo .volante{transform-box:fill-box;transform-origin:center;animation:elev-volante 3s ease-in-out infinite}
@keyframes elev-volante{0%,100%{rotate:-6deg}50%{rotate:6deg}}

/* ---------- Progreso de lectura (blog) ---------- */
.elev-progreso{position:fixed;left:0;right:0;top:0;height:3px;background:var(--accent);transform-origin:left;transform:scaleX(0);z-index:70}

/* ---------- Móvil ---------- */
@media (max-width:820px){
  .hero-chip{display:none}
  .red-in,.calc-in{grid-template-columns:1fr;gap:32px}
  .red{padding-block:70px}
  .calc{padding-block:70px}
  .ctaband-in{grid-template-columns:1fr}
  .ctaband .elev-arturo{display:none}
  .news-in{grid-template-columns:1fr}
  .news .elev-arturo{display:none}
  .calc-arturo .elev-arturo{--aw:130px}
  .bubble{margin-bottom:40px}
  .calc-out{grid-template-columns:1fr}
  .nav .hide-m2{display:none}
}
@media (prefers-reduced-motion:reduce){
  .elev-arturo *,.elev-carta svg,.van-svg .rueda,.van-svg .rebote,.pulso-dot,.scroll-cue i,.elev-red-origen .onda{animation:none!important}
  .elev-red-linea{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}

/* ---------- Utilidades ---------- */
.link-u{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;width:max-content}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));translate:-50% 20px;opacity:0;z-index:95;background:var(--ink);color:#fff;border-radius:999px;padding:12px 20px;font-size:14px;transition:opacity .3s,translate .3s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;translate:-50% 0}

/* ======== OFERTAS + TIENDA ======== */
.ofer{background:#0B0D11;color:#fff;padding-block:clamp(64px,9vw,120px);position:relative;overflow:hidden}
.ofer .glow2{position:absolute;right:-10vmin;top:-10vmin;width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow,#1450FF) 55%,transparent),transparent 65%);filter:blur(40px);opacity:.5;pointer-events:none}
.ofer .wrap{position:relative}
.ofer h2{color:#fff;font-size:clamp(40px,6vw,84px)}
.ofer .eyebrow{color:#8D95A3}
.ofer-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.ofer-grid{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr;gap:18px}
.ofer-big,.ofer-mini{position:relative;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,#171B22,#0F1217);padding:clamp(22px,3vw,36px)}
.ofer-big{grid-row:1/3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px;background:linear-gradient(150deg,#1B2A55,#0F1217 70%)}
.ofer-big svg{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.ofer h3{font-size:clamp(24px,2.6vw,36px);color:#fff;letter-spacing:-.02em}
.ofer p{color:#B7BDC9;margin-top:10px}
.ofer-price{font-size:clamp(26px,3vw,40px);color:#fff!important}
.ofer-price s{font-size:.55em;color:#8D95A3;margin-left:8px}
.ofer-badge{display:inline-block;background:#FFD166;color:#0D0F12;font:600 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 12px;margin-bottom:14px}
.ofer-big .ofer-badge{position:absolute;left:24px;top:22px;margin:0}
.ofer-mini{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ofer-mini .btn,.ofer-mini .link-u{margin-top:auto}
.ofer .link-u,.link-u-light{color:#fff}
.ofer .btn-light{background:#fff;color:#0D0F12}
.ofer-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:36px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.ofer-cta p{margin:0;font-size:18px;color:#fff;flex:1 1 260px}
.tag.tag-of,.card .tag-of{background:#FFD166;color:#0D0F12}
.shop{padding-block:clamp(64px,9vw,120px)}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.shop-head h2{font-size:clamp(40px,6vw,84px)}
.shop-filtros{display:flex;flex-wrap:wrap;gap:8px}
.shop .chip{border-color:#CDD1D9;color:var(--ink)}
.shop .chip:hover{border-color:var(--ink)}
.shop .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
.shop-grid .card[hidden]{display:none}
.shop-grid .card .add{opacity:1;transform:none}
.shop-vacio{text-align:center;color:var(--ink-2);padding:40px 0}
.shop-cta{margin-top:44px}
@media(max-width:960px){.ofer-grid{grid-template-columns:1fr}.ofer-big{grid-row:auto;grid-template-columns:1fr}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ofer-combo{align-items:stretch}
.ofer-pics{display:flex;align-items:center;gap:10px;height:96px;margin:8px 0 4px}
.ofer-pics svg{height:100%;width:auto;max-width:42%;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.ofer-pics svg:only-child{max-width:100%}
.ofer-mas{font:600 26px var(--f-mono);color:#8D95A3}
.ofer-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px}
.ofer-combo .ofer-btns .btn{margin:0}
.cine.elev-grano::after{mix-blend-mode:normal;opacity:.06}
