/* Solare — estilos compartidos de todas las páginas de la tienda. */
:root{
  /* Layout: página de producto tipo estudio. Fondo casi blanco que se funde con las fotos, bandas de carbono para la textura, titulares enormes centrados, grilla de detalles y galería con caja de compra. Un solo tema claro a propósito: las fotos son de estudio blanco. */
  --studio:#FAFAF9; --paper:#F3F3F1; --tile:#EFEFEC; --surface:#FFFFFF;
  --ink:#121212; --muted:#6A6A66; --line:#E0E0DB;
  --sun:#FFC72C; --sun-hi:#FFD65C; --sun-deep:#D99E00; --on-sun:#121212;
  --ok:#1C7A45; --ok-bg:#E2F2E8; --err:#B3261E;
  --cf:#0D0D0E; --cf-ink:#F3F3F0; --cf-muted:#A3A39E; --cf-line:rgba(255,255,255,.14);
  --scrim:rgba(12,12,12,.5);
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-ui:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --nav-h:64px;
  --logo:url("data:image/png;base64,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");
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 64px)}
body{margin:0;background:var(--studio);color:var(--ink);font:400 16px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:2px solid var(--sun-deep);outline-offset:3px}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.label{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foto{mix-blend-mode:multiply}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding-inline:26px;border-radius:999px;border:0;font:600 15px/1 var(--f-ui);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease-out),background-color .2s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn-sun{background:var(--sun);color:var(--on-sun)}
.btn-ink{background:var(--ink);color:var(--surface)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-mini{height:38px;padding-inline:16px;font-size:13.5px}
@media (hover:hover){.btn-sun:hover{background:var(--sun-hi)}.btn-ink:hover{opacity:.86}.btn-line:hover{background:color-mix(in srgb,currentColor 8%,transparent)}}
.btn.soft{opacity:.5}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font:inherit;color:inherit}
.icon-btn{width:40px;height:40px;flex:none;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:inherit}
.icon-btn svg{width:20px;height:20px}
@media (hover:hover){.icon-btn:hover{background:var(--tile)}}

/* Muestras de color: mitad montura, mitad lente */
.sws{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sw{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;cursor:pointer;font:500 14px/1 var(--f-ui);color:var(--muted)}
.sw i{position:relative;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--m) 50%,var(--l) 50%);box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:box-shadow .2s var(--ease-out)}
.sw i::after{content:"";position:absolute;inset:-7px}
.sw[aria-checked="true"]{color:var(--ink)}
.sw[aria-checked="true"] i{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--ink)}
.sw-l{height:44px;padding:0 16px 0 8px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.sw-l[aria-checked="true"]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sw-l[aria-checked="true"] i{box-shadow:0 0 0 1px rgba(0,0,0,.12)}

/* Anuncio + navegación */
.anuncio{background:var(--cf);color:var(--cf-ink);font:500 11.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;overflow:hidden}
.marquee{display:flex;overflow:hidden;padding-block:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mq-track{display:flex;flex:none;animation:mq var(--mq-dur,40s) linear infinite}
.mq-grupo{display:flex;flex:none;align-items:center}
.mq-item{display:inline-flex;align-items:center;gap:30px;padding-right:30px;white-space:nowrap}
.mq-item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--sun)}
.mq-item b{color:var(--sun);font-weight:500}
.anuncio button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
.anuncio:hover .mq-track,.anuncio:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-33.3333%)}}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none!important;width:100%;justify-content:center}
  .mq-grupo{flex-wrap:wrap;justify-content:center;row-gap:6px}
  .mq-grupo[aria-hidden]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:var(--nav-h)}
.logo{display:block;flex:none;text-decoration:none;color:var(--ink)}
.logo-mark{display:block;width:108px;height:28px;background:currentColor;-webkit-mask:var(--logo) no-repeat left center/contain;mask:var(--logo) no-repeat left center/contain}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{text-decoration:none;font-size:15px;color:var(--muted);transition:color .2s}
@media (hover:hover){.nav nav a:hover{color:var(--ink)}}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:14px 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;font:500 14px/1 var(--f-ui);transition:transform .16s var(--ease-out)}
.cart-btn:active{transform:scale(.97)}
.cart-btn svg{width:20px;height:20px}
.cart-count{min-width:22px;height:22px;border-radius:11px;background:var(--sun);color:var(--on-sun);font:600 12px/22px var(--f-mono);text-align:center;padding-inline:6px}
.cart-btn.bump .cart-count{animation:bump .45s var(--ease-out)}
@keyframes bump{30%{transform:scale(1.35)}}
@media (max-width:760px){.nav nav{display:none}.cart-btn{margin-left:auto}.cart-btn .txt{display:none}}

/* Barra de producto fija (como en las páginas de Xiaomi) */
.subnav{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--nav-h));z-index:45;background:var(--surface);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-110%);opacity:0;transition:transform .35s var(--ease-out),opacity .25s;pointer-events:none}
.subnav.on{transform:none;opacity:1;pointer-events:auto}
.subnav .wrap{display:flex;align-items:center;gap:22px;height:54px}
.subnav b{font:600 17px/1 var(--f-ui)}
.subnav nav{display:flex;gap:20px;margin-left:8px}
.subnav nav a{text-decoration:none;font-size:14px;color:var(--muted)}
@media (hover:hover){.subnav nav a:hover{color:var(--ink)}}
.subnav .sn-precio{margin-left:auto;font:500 14px/1 var(--f-mono)}
@media (max-width:760px){.subnav nav{display:none}.subnav .wrap{gap:12px}}

/* Hero de estudio */
.hero{background:var(--studio);text-align:center;overflow:hidden}
.hero .wrap{padding-block:clamp(36px,6vw,72px) clamp(32px,5vw,64px);display:flex;flex-direction:column;align-items:center}
.eyebrow{font:500 12px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.eyebrow b{color:var(--ink);font-weight:500}
.hero h1{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(4rem,15vw,10.5rem);line-height:.84;letter-spacing:-.05em;margin:18px 0 0}
.hero .lema{font:400 clamp(1.15rem,2.2vw,1.6rem)/1.3 var(--f-ui);margin:18px 0 0;max-width:30ch}
.hero .tipo{font:400 13px/1.4 var(--f-mono);color:var(--muted);margin:10px 0 0}
.hero-img{display:block;width:min(820px,100%);height:auto;margin:clamp(12px,3vw,28px) auto 0;animation:entra 1s var(--ease-out) both}
@keyframes entra{from{transform:translateY(28px) scale(.96)}}
.hero-buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px;margin-top:8px}
.hero-buy .precio{font:500 1.15rem/1 var(--f-mono);margin-right:6px}
.hero .sws{justify-content:center;margin-top:22px}

/* Banda de carbono */
.carbon{background-color:var(--cf);background-image:
  linear-gradient(27deg,#151515 5px,transparent 5px),
  linear-gradient(207deg,#151515 5px,transparent 5px),
  linear-gradient(27deg,#222 5px,transparent 5px),
  linear-gradient(207deg,#222 5px,transparent 5px),
  linear-gradient(90deg,#1b1b1b 10px,transparent 10px),
  linear-gradient(#1d1d1d 25%,#1a1a1a 25%,#1a1a1a 50%,transparent 50%,transparent 75%,#242424 75%,#242424);
  background-size:20px 20px;background-position:0 5px,10px 0,0 10px,10px 5px,0 0,0 0}
.banda{position:relative;isolation:isolate;color:var(--cf-ink)}
.banda::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 50% 40%,rgba(10,10,10,.55),rgba(10,10,10,.92))}
.centro{text-align:center;display:flex;flex-direction:column;align-items:center}
.sec{padding-block:clamp(64px,9vw,128px)}
.h2{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:clamp(2.3rem,6vw,4.6rem);line-height:.95;letter-spacing:-.035em;margin:14px 0 0;max-width:16ch}
.intro{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--muted);max-width:46ch;margin:20px 0 0}
.banda .eyebrow{color:var(--sun)}
.banda .intro{color:var(--cf-muted)}
.plato{position:relative;width:min(760px,100%);aspect-ratio:510/234;margin:clamp(32px,5vw,56px) auto 0;border-radius:26px;overflow:hidden;background:#dcdcdd;box-shadow:0 40px 80px rgba(0,0,0,.45)}
.plato img{display:block;width:100%;height:100%;object-fit:cover}
.plato .tag{position:absolute;left:16px;bottom:14px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:rgba(13,13,14,.72);color:var(--cf-ink);backdrop-filter:blur(6px)}
.acabados{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(760px,100%);margin-top:14px}
.acabado{border:0;padding:0;background:none;cursor:pointer;color:var(--cf-muted);display:grid;gap:8px;font:400 13px/1.2 var(--f-ui);text-align:left}
.acabado span:first-child{display:block;aspect-ratio:510/234;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--cf-line);transition:box-shadow .2s var(--ease-out)}
.acabado img{display:block;width:100%;height:100%;object-fit:cover}
.acabado[aria-checked="true"]{color:var(--cf-ink)}
.acabado[aria-checked="true"] span:first-child{box-shadow:0 0 0 2px var(--sun)}
.datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(900px,100%);margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--cf-line)}
.dato{padding:20px 12px 0;display:grid;gap:6px;text-align:center;min-width:0}
.dato>span{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cf-muted)}
.dato b{font:600 clamp(1rem,1.8vw,1.3rem)/1.2 var(--f-ui)}
@media (max-width:600px){.datos{grid-template-columns:1fr}.dato{padding-block:16px;border-bottom:1px solid var(--cf-line)}}

/* Grilla de detalles */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:clamp(32px,5vw,56px);text-align:left}
.tile{background:var(--tile);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.tile .cap{padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) 0;display:grid;gap:8px}
.tile h3{font:600 clamp(1.15rem,1.8vw,1.45rem)/1.15 var(--f-ui);margin:0}
.tile p{margin:0;color:var(--muted);font-size:.95rem;max-width:40ch}
.tile .im{margin-top:auto;padding:16px clamp(12px,2vw,24px) clamp(12px,2vw,20px)}
.tile .im img{display:block;width:100%;height:auto}
.tile .im.cover{flex:1 1 auto;position:relative;min-height:220px;padding:0}
.tile .im.cover img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:cover;border-radius:16px}
.tile .im img.foto,.hero-img,.comp-col img.foto{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.t-a{grid-column:span 4}.t-b{grid-column:span 2}.t-c{grid-column:span 2}.t-d{grid-column:span 4}
@media (max-width:900px){.bento{grid-template-columns:1fr}.t-a,.t-b,.t-c,.t-d{grid-column:auto}}

/* Ficha de producto: galería + caja de compra */
.pdp{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start;margin-top:clamp(32px,5vw,56px);text-align:left}
.gal{min-width:0}
.stage{position:relative;aspect-ratio:var(--ar,2/1);border-radius:26px;background:var(--surface);overflow:hidden;display:grid;place-items:center}
.stage img{width:100%;height:100%;object-fit:contain;padding:4%;mix-blend-mode:multiply}
.stage img.cover{object-fit:cover;padding:0}
.stage .nav-v{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.86);box-shadow:0 2px 12px rgba(0,0,0,.12)}
.stage .prev{left:10px}.stage .next{right:10px}
.stage .vista-nombre{position:absolute;left:14px;bottom:12px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.86);padding:6px 9px;border-radius:999px}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding:3px;scrollbar-width:thin}
.thumb{flex:0 0 86px;aspect-ratio:3/2;border-radius:12px;border:0;padding:0;background:var(--surface);cursor:pointer;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s var(--ease-out)}
.thumb img{width:100%;height:100%;object-fit:contain;padding:6%;display:block;mix-blend-mode:multiply}
.thumb img.cover{object-fit:cover;padding:0}
.thumb[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.buy{display:grid;gap:16px;position:sticky;top:calc(var(--nav-h) + 74px)}
.buy .marca{font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.buy h3{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.03em;margin:-6px 0 0}
.buy .tipo{margin:-8px 0 0;color:var(--muted)}
.buy .precio{font:500 1.5rem/1 var(--f-mono)}
.buy .color-lbl{font-size:.92rem;color:var(--muted);margin:0 0 -4px}
.buy .color-lbl b{color:var(--ink);font-weight:500}
.buy .btn{width:100%;height:54px;font-size:16px}
.nota-envio{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:14px;background:var(--paper);font-size:.9rem;line-height:1.4}
.nota-envio svg{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nota-envio.ok{background:var(--ok-bg)}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin:20px 0 0;text-align:left;border-top:1px solid var(--line);align-self:stretch}
.specs div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.specs dt{font:500 12px/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.specs dd{margin:0}
.specs-tit{font:600 1.3rem/1.2 var(--f-ui);margin:clamp(48px,7vw,80px) 0 0;text-align:left;align-self:stretch}
@media (max-width:900px){.pdp{grid-template-columns:1fr}.buy{position:static}}
@media (max-width:640px){.specs{grid-template-columns:1fr}.specs div{grid-template-columns:110px minmax(0,1fr)}.stage{border-radius:18px}}

.brisa{background:var(--surface)}
.brisa .stage{background:var(--studio)}
.brisa .thumb{background:var(--studio)}

/* Comparar */
.comp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(900px,100%);margin-top:clamp(32px,5vw,56px);text-align:left}
.comp-col{background:var(--surface);border-radius:26px;padding:clamp(18px,2.6vw,28px);display:grid;gap:14px;align-content:start;min-width:0}
.comp-col img{width:100%;height:auto;display:block}
.comp-col h3{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:1.7rem;letter-spacing:-.03em;margin:0}
.comp-col dl{margin:0;display:grid}
.comp-col dl div{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--line)}
.comp-col dt{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.comp-col dd{margin:0}
.comp-col .sws{gap:6px}
.comp-col .sw i{width:20px;height:20px}
@media (max-width:600px){.comp{grid-template-columns:1fr}}

/* Lanzamientos por etapas */
.drop-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:100%;margin-top:clamp(32px,5vw,48px);text-align:left}
.drop{border:1px solid var(--cf-line);border-radius:22px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:rgba(255,255,255,.03);min-width:0}
.drop .num{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(3.4rem,8vw,6rem);line-height:.85;letter-spacing:-.04em}
.drop.on .num{color:var(--sun)}
.drop.off .num{color:transparent;-webkit-text-stroke:1.5px var(--cf-muted)}
.drop h3{font:600 1.3rem/1.2 var(--f-ui);margin:6px 0 0}
.drop p{color:var(--cf-muted);margin:0 0 8px;max-width:40ch}
.drop .btn{margin-top:auto}
.estado{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--cf-line);color:var(--cf-muted)}
.drop.on .estado{background:var(--sun);color:var(--on-sun);border-color:transparent}
@media (max-width:700px){.drop-list{grid-template-columns:1fr}}

/* Accesorios */
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:clamp(24px,4vw,40px)}
.sec-head>div{min-width:0}
.sec-head>p{color:var(--muted);max-width:42ch;margin:0}
.h2s{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.03em;margin:10px 0 0}
.grid-a{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:820px}
.acc-nota{font-size:.8rem;color:var(--ok);margin:-6px 0 0}
@media (max-width:600px){.grid-a{gap:8px}.acard{padding:8px}.acard h3{font-size:.85rem}.acard .btn{padding-inline:8px}}
.acard{background:var(--surface);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.aico{aspect-ratio:1;border-radius:14px;background:var(--tile);display:grid;place-items:center;color:var(--ink)}
.aico svg{width:48%;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.aico .acf{fill:var(--sun)}
.acard h3{font:500 .95rem/1.25 var(--f-ui);margin:0}
.price{font:500 .92rem/1.2 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.acard .btn{margin-top:auto;width:100%}

/* Beneficios */
.benef{background:var(--paper)}
.benef .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;padding-block:44px 60px}
.b{display:flex;gap:14px;align-items:flex-start;padding-top:20px;border-top:1px solid var(--line);min-width:0}
.b svg{width:26px;height:26px;flex:none;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.b h3{font:600 1rem/1.3 var(--f-ui);margin:0 0 4px}
.b p{margin:0;color:var(--muted);font-size:.92rem}
@media (max-width:760px){.benef .wrap{grid-template-columns:1fr}}

/* Pie */
.foot{color:var(--cf-muted)}
.foot .wrap{padding-block:48px calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px 56px}
.foot .logo-mark{color:var(--cf-ink);width:116px;height:30px}
.f-brand p{max-width:30ch;margin:14px 0 0;font-size:.92rem}
.f-col{display:flex;flex-direction:column;gap:8px;font-size:.92rem;align-items:flex-start}
.f-col h4{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cf-ink);margin:0 0 4px}
.f-col a{text-decoration:none}
@media (hover:hover){.f-col a:hover{color:var(--cf-ink)}}
.f-legal{flex-basis:100%;margin:0;padding-top:20px;border-top:1px solid var(--cf-line);font:400 12px/1.5 var(--f-mono)}

/* 25 gramos: el número protagonista, relleno con tejido de carbono */
.peso{background:var(--studio);overflow:hidden}
.peso .wrap{padding-block:clamp(48px,7vw,96px) clamp(64px,9vw,128px)}
.peso-num{display:flex;align-items:baseline;justify-content:center;margin:clamp(8px,1.5vw,20px) 0 0;font-family:var(--f-display);font-stretch:125%;font-weight:800;line-height:.78;letter-spacing:-.06em}
.peso-num .n{font-size:clamp(9rem,36vw,27rem);font-variant-numeric:tabular-nums;color:var(--ink);
  background-color:#141414;background-image:
    linear-gradient(165deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 62%,rgba(255,255,255,.14) 100%),
    linear-gradient(27deg,#151515 7px,transparent 7px),
    linear-gradient(207deg,#151515 7px,transparent 7px),
    linear-gradient(27deg,#2a2a2a 7px,transparent 7px),
    linear-gradient(207deg,#2a2a2a 7px,transparent 7px),
    linear-gradient(90deg,#1e1e1e 14px,transparent 14px),
    linear-gradient(#222 25%,#1a1a1a 25%,#1a1a1a 50%,transparent 50%,transparent 75%,#2c2c2c 75%,#2c2c2c);
  background-size:100% 100%,28px 28px,28px 28px,28px 28px,28px 28px,28px 28px,28px 28px;
  background-position:0 0,0 7px,14px 0,0 14px,14px 7px,0 0,0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 28px 36px rgba(0,0,0,.2))}
.peso-num .u{font-size:clamp(3.2rem,11vw,8rem);color:var(--ink);margin-left:.06em;letter-spacing:-.03em}
.peso .h2{margin-top:clamp(18px,3vw,36px)}

/* Protección y tecnología: dos fichas grandes */
.prot{background:var(--studio)}
.prot .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-block:0 clamp(64px,9vw,120px)}
.ptile{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;padding:clamp(24px,3.4vw,44px);display:flex;flex-direction:column;gap:12px;min-height:clamp(340px,36vw,460px);min-width:0}
.ptile-uv{color:var(--cf-ink)}
.ptile-uv::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 80% at 80% 10%,rgba(255,199,44,.16),rgba(10,10,10,.82) 70%)}
.ptile-uv .label,.ptile-uv p.txt{color:var(--cf-muted)}
.ptile-af{background:var(--tile)}
.pbig{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(3.6rem,9vw,7.4rem);line-height:.86;letter-spacing:-.05em;margin:6px 0 0}
.ptile-uv .pbig{color:var(--sun)}
.ptile-af .pbig{font-stretch:100%;font-size:clamp(2.4rem,4.9vw,4.1rem);line-height:.95;letter-spacing:-.04em}
.pchip{align-self:flex-start;font:600 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:999px;background:var(--sun);color:var(--on-sun)}
.ptile h3{font:600 clamp(1.15rem,1.8vw,1.4rem)/1.2 var(--f-ui);margin:auto 0 0}
.ptile p.txt{margin:0;color:var(--muted);max-width:44ch}
.cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:6px;max-width:360px}
.cats span{display:grid;place-items:center;height:38px;border-radius:10px;font:600 13px/1 var(--f-mono);color:rgba(255,255,255,.75)}
.cats span:nth-child(1){background:#E9E8E2;color:#555}
.cats span:nth-child(2){background:#C4BCA9;color:#3c3a33}
.cats span:nth-child(3){background:#8B826F}
.cats span:nth-child(4){background:var(--sun);color:var(--on-sun);transform:scale(1.08)}
.cats span:nth-child(5){background:#1F1D1A}
.cats-nota{font:400 12px/1.4 var(--f-mono);color:var(--cf-muted);margin:-4px 0 0}
@media (max-width:760px){.prot .wrap{grid-template-columns:1fr}.ptile{min-height:0}.ptile h3{margin-top:12px}}

/* Ficha UV400 a todo el ancho: información a la izquierda, comparativa a la derecha (abajo en celular) */
.ptile-uv{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.uv-info{display:flex;flex-direction:column;gap:12px;min-width:0}
.uv-info h3{margin-top:14px}
.uv-cmp{display:grid;gap:10px;justify-items:center;min-width:0}
.uv-cmp .cmp-nota{font:400 11.5px/1.45 var(--f-mono);color:var(--cf-muted);margin:0;max-width:52ch;text-align:center}
.ptile-af{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px 40px;align-items:end;min-height:0}
.ptile-af .label{grid-column:1/-1}
.af-txt{display:grid;gap:8px}
.ptile-af h3{margin:0}
@media (max-width:760px){.ptile-uv,.ptile-af{grid-template-columns:1fr}}

/* Deslizador sin filtro / con filtro */
.cmp{position:relative;width:100%;max-width:460px;aspect-ratio:var(--cmp-ar,3/4);border-radius:22px;overflow:hidden;background:#222;box-shadow:0 24px 50px rgba(0,0,0,.4);touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.cmp-sin{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);will-change:clip-path}
.cmp>*{pointer-events:none}
.cmp .cmp-knob{pointer-events:auto;touch-action:none}
.cmp-knob::before{content:"";position:absolute;inset:-18px;border-radius:50%}
.cmp-linea{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.35);pointer-events:none}
.cmp-knob{position:absolute;top:50%;left:var(--pos);width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:#fff;color:#121212;display:grid;place-items:center;box-shadow:0 6px 22px rgba(0,0,0,.28);transition:transform .2s var(--ease-out)}
.cmp-knob svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmp.arrastrando .cmp-knob{transform:scale(1.1)}
.cmp-knob:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.cmp-tag{position:absolute;bottom:14px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:rgba(18,18,18,.72);color:#fff;pointer-events:none;transition:opacity .2s}
.cmp-tag.izq{left:14px}
.cmp-tag.der{right:14px;background:var(--sun);color:var(--on-sun)}
@media (max-width:760px){.cmp{max-width:none;border-radius:18px}}

/* Caja de compra: llévalo completo, fórmula y regalo */
.combo-lbl{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 0 -6px}
.combo{display:grid;grid-template-columns:auto 44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px 10px 12px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .2s}
.combo:has(input:checked){box-shadow:inset 0 0 0 1.5px var(--ink)}
.combo input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.combo-ico{width:44px;height:44px;border-radius:10px;background:var(--tile);display:grid;place-items:center}
.combo-ico svg{width:62%;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.combo-ico .acf{fill:var(--sun)}
.combo-txt{display:grid;gap:2px;min-width:0}
.combo-txt b{font-weight:600}
.combo-txt small{color:var(--ok);font-size:.82rem}
.combo-precio{display:grid;text-align:right;font:500 .92rem/1.3 var(--f-mono)}
.combo-precio s{color:var(--muted);font-size:.78rem;font-weight:400}
.buy .btn-rx{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.regalo-nota{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:.9rem;line-height:1.4}
.garantia{border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:.9rem}
.garantia summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none;line-height:1.35}
.garantia summary::-webkit-details-marker{display:none}
.garantia summary::after{content:"+";margin-left:auto;font:500 16px/1 var(--f-mono);color:var(--muted)}
.garantia[open] summary::after{content:"−"}
.garantia summary svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ok);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g-cuerpo{padding:0 14px 14px 44px;display:grid;gap:6px;color:var(--muted)}
.g-cuerpo p{margin:0}
.g-cuerpo ul{margin:0;padding-left:18px;color:var(--ink)}
.g-cuerpo .g-req{font-size:.84rem}
.g-cuerpo a{color:var(--ink);font-weight:500}
.regalo-nota svg,.nota-envio svg.regalo{width:20px;height:20px;flex:none;margin-top:1px;fill:none;stroke:var(--sun-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Sección de fórmula */
.rx-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(900px,100%);margin-top:clamp(32px,5vw,48px);text-align:left}
.rx-card{background:var(--tile);border-radius:26px;padding:clamp(20px,3vw,32px);display:grid;gap:10px;align-content:start;min-width:0}
.rx-card.on{background:var(--cf);color:var(--cf-ink)}
.rx-card.on .label,.rx-card.on p:not(.rx-precio){color:var(--cf-muted)}
.rx-card h3{font:600 1.35rem/1.2 var(--f-ui);margin:0}
.rx-card p{margin:0;color:var(--muted)}
.rx-card .rx-precio{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:clamp(2rem,4vw,2.8rem);line-height:1;letter-spacing:-.03em;color:inherit}
.rx-card.on .rx-precio{color:var(--sun)}
.rango-nota{color:var(--muted);margin:18px 0 0;max-width:52ch}
.comp-nota{color:var(--muted);margin:22px 0 0}
#formula .specs,#formula .specs-tit{width:min(900px,100%);align-self:center}
@media (max-width:640px){.rx-cards{grid-template-columns:1fr}}

/* Configurador de lentes formulados */
.rx-box{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;background:var(--surface);color:var(--ink);border-radius:22px;overflow:hidden;animation:pop .4s var(--ease-out)}
.rx-box:focus{outline:none}
.rx-head{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 0}
.rx-paso{font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.rx-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px clamp(18px,4vw,28px) 20px;display:grid;gap:12px;align-content:start}
.rx-body h2{font-family:var(--f-display);font-stretch:112%;font-weight:750;font-size:clamp(1.5rem,4vw,2rem);line-height:1.05;letter-spacing:-.025em;margin:0;text-align:center}
.rx-sub{text-align:center;color:var(--muted);margin:-4px 0 6px}
.rx-op{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;padding:14px 16px 14px 14px;border:0;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-align:left;cursor:pointer;transition:box-shadow .2s,background-color .2s}
.rx-op[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper)}
.rx-op .ico{width:52px;height:52px;border-radius:12px;background:var(--tile);display:grid;place-items:center}
.rx-op .ico svg{width:58%;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rx-op .acf{fill:var(--sun)}
.rx-op .t{display:block;font:600 1rem/1.25 var(--f-ui)}
.rx-op .d{display:block;margin-top:3px;color:var(--muted);font-size:.85rem;line-height:1.4}
.rx-op .mas{font:500 .9rem/1 var(--f-mono);white-space:nowrap}
.rx-extra{padding:14px;border-radius:14px;background:var(--paper);display:grid;gap:12px;font-size:.9rem}
.rx-tabla{display:grid;gap:8px}
.rx-fila{display:grid;grid-template-columns:34px repeat(3,minmax(0,1fr));gap:8px;align-items:center}
.rx-enc span{font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rx-fila b{font:600 .95rem/1 var(--f-mono)}
.rx-extra select,.rx-extra input[type="text"]{width:100%;min-width:0;height:42px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding-inline:8px;font:400 14px/1 var(--f-mono)}
.rx-extra select:focus,.rx-extra input:focus{outline:none;border-color:var(--ink)}
.rx-dp{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:10px;align-items:center}
.rx-file{position:relative;display:grid;justify-items:center;gap:6px;padding:20px;border:1.5px dashed var(--line);border-radius:14px;background:var(--surface);text-align:center;cursor:pointer}
.rx-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.rx-file img{max-height:120px;border-radius:8px}
.rx-file b{font-weight:600}
.rx-rango{font-size:.8rem;color:var(--muted);margin:0}
.rx-err{color:var(--err);font-size:.86rem;margin:0}
.rx-resumen{display:grid;gap:10px}
.rx-res{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--paper)}
.rx-res .ico{width:72px;aspect-ratio:3/2;border-radius:10px;background:var(--surface);display:grid;place-items:center;overflow:hidden}
.rx-res .ico img{width:94%;mix-blend-mode:multiply}
.rx-res .ico svg{width:48%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rx-res .acf{fill:var(--sun)}
.rx-res h3{font:600 .98rem/1.25 var(--f-ui);margin:0}
.rx-res p{margin:2px 0 0;color:var(--muted);font-size:.82rem;line-height:1.4}
.rx-res .mono{white-space:nowrap}
.rx-foot{border-top:1px solid var(--line);padding:12px clamp(18px,4vw,28px) 16px;display:grid;gap:12px}
.rx-sum{margin:0;display:grid;gap:4px;font-size:.9rem}
.rx-sum div{display:flex;justify-content:space-between;gap:12px}
.rx-sum dt{color:var(--muted)}
.rx-sum dd{margin:0;font-family:var(--f-mono)}
.rx-sum .grand{padding-top:6px;margin-top:2px;border-top:1px dashed var(--line);font-size:1.05rem}
.rx-sum .grand dt{color:var(--ink);font-weight:600}
.rx-foot .btn{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* Carrito: regalo, fórmula y precio a mitad */
.item.regalo{align-items:center}
.item-img.regalo-img{background:color-mix(in srgb,var(--sun) 22%,var(--surface))}
.item-img.regalo-img svg{width:50%;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.item-img.regalo-img .acf{fill:var(--sun)}
.regalo-tag{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sun-deep);margin:0 0 2px}
.item.regalo .var{margin-bottom:0}
.gratis{display:inline-block;font:600 12px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:6px 8px;border-radius:6px;background:var(--ok-bg);color:var(--ok)}
.item-price small{display:block;color:var(--muted);font-size:.75rem;margin-top:4px}
.item .rx-linea{font-size:.78rem;color:var(--muted);margin:-6px 0 10px;line-height:1.35}
.var s,.ant s{color:var(--muted);font-size:.85em;margin-left:4px}
.chip-50{position:absolute;top:6px;right:6px;font:600 10px/1 var(--f-mono);padding:4px 6px;border-radius:6px;background:var(--ink);color:var(--surface)}

/* Animaciones ligadas al scroll: solo donde el navegador las soporta; sin soporte todo queda quieto y visible */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    @keyframes rv{from{opacity:.15;transform:translateY(40px)}}
    .zoom img{animation:zoom linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
    @keyframes zoom{from{transform:scale(1.25)}}
  }
}

/* Carrito lateral */
.scrim{position:fixed;inset:0;z-index:80;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-out)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100%);display:flex;flex-direction:column;background:var(--surface);color:var(--ink);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px);box-shadow:-24px 0 60px rgba(0,0,0,.2);transform:translateX(104%);visibility:hidden;transition:transform .4s var(--ease-out),visibility 0s linear .4s}
.drawer.on{transform:none;visibility:visible;transition:transform .4s var(--ease-out),visibility 0s}
.meta{margin:12px 16px 0;padding:12px 14px 10px;border-radius:14px;background:var(--paper);display:grid;gap:8px;transition:background-color .4s}
.meta.done{background:var(--ok-bg)}
.meta.festeja{animation:festeja .6s var(--ease-out)}
@keyframes festeja{35%{transform:scale(1.03)}}
.meta-txt{display:flex;gap:10px;align-items:center;font-size:.95rem;line-height:1.3;margin:0}
.meta-txt svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.meta.done .meta-txt svg{color:var(--ok)}
.bar{height:8px;border-radius:99px;background:rgba(18,18,18,.1);overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;background:var(--sun-deep);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .7s var(--ease-out),background-color .4s}
.meta.done .bar i{background:var(--ok)}
.bar-escala{display:flex;justify-content:space-between;font:400 11px/1 var(--f-mono);color:var(--muted)}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 12px 16px;border-bottom:1px solid var(--line)}
.dhead h2{font:600 1.55rem/1 var(--f-ui);margin:0;display:flex;align-items:baseline;gap:10px}
.dhead h2 small{font:400 13px/1 var(--f-mono);color:var(--muted)}
.dbody{flex:1;overflow-y:auto;overscroll-behavior:contain}
.items{list-style:none;margin:0;padding:0 16px}
.item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;padding-block:16px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item-img{width:96px;aspect-ratio:1;border-radius:14px;background:var(--studio);display:grid;place-items:center;overflow:hidden}
.item-img img{width:96%;height:auto;display:block}
.item-img.acc{background:var(--tile)}
.item-img.acc svg{width:52%;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.item-img .acf{fill:var(--sun)}
.item-info{min-width:0}
.item h3{font:600 1rem/1.25 var(--f-ui);margin:0}
.item .var{font-size:.85rem;color:var(--muted);margin:2px 0 10px}
.item-ctrl{display:flex;align-items:center;gap:6px}
.qty{display:inline-flex;align-items:center;height:38px;border:1px solid var(--line);border-radius:999px}
.qty button{width:36px;height:36px;border:0;background:transparent;cursor:pointer;font-size:18px;line-height:1;color:var(--muted);border-radius:50%}
.qty button:disabled{opacity:.35;cursor:default}
.qty output{min-width:22px;text-align:center;font:500 14px/1 var(--f-mono)}
.item-price{font:500 .92rem/1.3 var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.empty{padding:44px 24px 32px;display:grid;justify-items:center;gap:12px;text-align:center}
.empty svg{width:44px;height:44px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.empty h3{font:600 1.35rem/1.2 var(--f-ui);margin:0}
.empty p{color:var(--muted);margin:0 0 6px;max-width:30ch}

/* Antojos: la fila del supermercado */
.antojos{background:var(--paper);padding-block:18px 6px;border-block:1px solid var(--line)}
.ant-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-inline:16px 10px}
.ant-head h3{font:600 1.05rem/1.25 var(--f-ui);margin:0}
.ant-head p{font-size:.85rem;color:var(--muted);margin:3px 0 0}
.arrows{display:flex;gap:2px;flex:none}
.arrows .icon-btn:disabled{opacity:.3;cursor:default}
.track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;padding:12px 16px 14px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.ant{flex:0 0 148px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.ant.cierra{border-color:var(--sun-deep);box-shadow:inset 0 0 0 1px var(--sun-deep)}
.ant .aico{aspect-ratio:4/3;position:relative}
.ant .aico svg{width:40%}
.ant.cierra .aico svg{transform:translateY(-8px)}
.badge{position:absolute;left:6px;right:6px;bottom:6px;font:500 10px/1.2 var(--f-mono);letter-spacing:.02em;text-align:center;padding:4px;border-radius:6px;background:var(--sun);color:var(--on-sun)}
.ant h4{font:500 .86rem/1.25 var(--f-ui);margin:0;min-height:2.5em}
.ant .price{font-size:.84rem}
.ant .btn{height:34px;font-size:13px;width:100%;margin-top:2px}
.dfoot{padding:14px 16px 18px;display:grid;gap:12px}
.dpay{border-top:1px solid var(--line);padding:12px 16px 14px;display:grid;gap:10px;background:var(--surface);box-shadow:0 -10px 24px rgba(0,0,0,.06)}
.codigo summary{cursor:pointer;font-size:.88rem;color:var(--muted);list-style:none;display:flex;align-items:center;gap:6px}
.codigo summary::-webkit-details-marker{display:none}
.codigo summary::before{content:"+";font:500 15px/1 var(--f-mono)}
.codigo[open] summary::before{content:"−"}
.code-form{display:flex;gap:8px;margin-top:10px}
.code-form .in{height:42px;text-transform:uppercase}
.code-form .btn{height:42px}
.code-msg{font-size:.82rem;margin:6px 0 0;color:var(--err)}
.code-on{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.88rem;padding:8px 6px 8px 12px;border-radius:10px;background:var(--ok-bg)}
.code-on b{font-family:var(--f-mono);font-weight:500}
.code-on .icon-btn{width:30px;height:30px}
.code-on .icon-btn svg{width:16px;height:16px}
.tot{display:grid;gap:5px;margin:0;font-size:.92rem}
.tot div{display:flex;justify-content:space-between;gap:12px}
.tot dt{color:var(--muted)}
.tot dd{margin:0;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tot .desc dd{color:var(--ok)}
.tot .envio-ok dd{color:var(--ok);font-weight:500}
.tot .grand{padding-top:8px;margin-top:3px;border-top:1px dashed var(--line);font-size:1.1rem}
.tot .grand dt{color:var(--ink);font-weight:600;font-family:var(--f-ui)}
.tot .grand dd{font-weight:500}
.nota{font-size:.78rem;color:var(--muted);margin:-4px 0 0}
.terms{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;line-height:1.35;cursor:pointer}
.terms input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.terms.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.terms-err{font-size:.8rem;color:var(--err);margin:-6px 0 0}
.dbtns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px}
.dbtns .btn{width:100%;padding-inline:12px;font-size:14.5px}
#pagarTotal{font-family:var(--f-mono);font-weight:500}
@media (max-width:400px){.dbtns{grid-template-columns:1fr}.dbtns #seguir{order:1;height:42px}}

/* Popup de bienvenida */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--scrim);padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:fade .3s var(--ease-out)}
@keyframes fade{from{opacity:0}}
.promo-box{position:relative;width:min(840px,100%);animation:pop .4s var(--ease-out)}
.promo-box:focus{outline:none}
.promo{width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;border-radius:22px;background:var(--surface);color:var(--ink);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}}
.promo-close{position:absolute;top:10px;right:10px;z-index:2;background:var(--surface);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.promo-form{padding:clamp(22px,4vw,40px);display:grid;gap:14px;align-content:start;min-width:0}
.promo h2{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:clamp(1.8rem,3.8vw,2.55rem);line-height:1;letter-spacing:-.025em;margin:0;max-width:12ch}
.promo-form>p{margin:0;color:var(--muted)}
.field{display:grid;gap:6px;min-width:0}
.field>span{font-size:.86rem;color:var(--muted)}
.in{width:100%;height:50px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding-inline:14px;font:400 15px/1 var(--f-ui);transition:border-color .2s;min-width:0}
.in::placeholder{color:var(--muted);opacity:.8}
.in:focus{outline:none;border-color:var(--ink)}
.in[aria-invalid="true"]{border-color:var(--err)}
.fecha{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px}
.tel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.pref{display:flex;align-items:center;gap:6px;height:50px;padding-inline:14px;border-radius:12px;border:1.5px solid var(--line);font:500 15px/1 var(--f-mono)}
.flag{width:20px;height:14px;border-radius:2px;background:linear-gradient(#FCD116 0 50%,#003893 50% 75%,#CE1126 75%)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.35;cursor:pointer}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--ink);flex:none}
.legal{font-size:.74rem;color:var(--muted);margin:0}
.form-err{font-size:.84rem;color:var(--err);margin:0}
.promo-form .btn{width:100%}
.no-gracias{justify-self:center;font-size:.86rem;color:var(--muted)}
.promo-art{position:relative;overflow:hidden;isolation:isolate;color:var(--cf-ink);min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;background:var(--cf)}
.promo-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.promo-art::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.05) 20%,rgba(10,10,10,.85))}
.promo-big{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(3.4rem,8vw,5.4rem);line-height:.85;letter-spacing:-.04em;margin:0;color:var(--sun)}
.promo-art p{margin:6px 0 0;font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cf-ink)}
.ok-code{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;border:1.5px dashed var(--ink);font:500 1.3rem/1 var(--f-mono);letter-spacing:.06em}
@media (max-width:700px){
  .promo{grid-template-columns:1fr}
  .promo-art{order:-1;min-height:140px;padding:20px}
  .promo-big{font-size:3.4rem}
  .promo-form{gap:12px}
  .in,.pref{height:46px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Multipágina: inicio, líneas y fichas de producto ---------- */
.nav nav a[aria-current="page"]{color:var(--ink);font-weight:500}
.nav nav .off{color:var(--muted);opacity:.75;cursor:default;font-size:15px}
.pronto{display:inline-block;font:500 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 6px;border-radius:999px;background:var(--tile);color:var(--muted);margin-left:6px;vertical-align:2px}
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:18px;font:400 12.5px/1.4 var(--f-mono);color:var(--muted)}
.migas a{text-decoration:none;color:var(--muted)}
@media (hover:hover){.migas a:hover{color:var(--ink)}}
.migas [aria-current]{color:var(--ink)}
.hero .migas{justify-content:center;padding-top:0;margin-bottom:22px}

/* Inicio */
.inicio-hero h1{font-size:clamp(3rem,9vw,7rem);line-height:.9;max-width:11ch}
.inicio-hero .hero-img{width:min(760px,100%)}
.lineas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(28px,4vw,48px)}
.linea{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;min-height:clamp(360px,42vw,540px);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;text-align:left}
.linea-on{background:var(--tile)}
.linea-on img{position:absolute;left:6%;right:6%;bottom:7%;width:88%;z-index:-1;mix-blend-mode:multiply;transition:transform .6s var(--ease-out)}
@media (hover:hover){.linea-on:hover img{transform:translateY(-6px) scale(1.02)}}
.linea-off{color:var(--cf-ink)}
.linea-off::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 70% at 70% 30%,rgba(255,199,44,.14),rgba(10,10,10,.85) 70%)}
.linea h3{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:.92;letter-spacing:-.035em;margin:4px 0 0}
.linea p{margin:0;color:var(--muted);max-width:30ch}
.linea-off p,.linea-off .label{color:var(--cf-muted)}
.linea .btn{align-self:flex-start;margin-top:6px}
@media (max-width:760px){.lineas{grid-template-columns:1fr}.linea{min-height:380px}}

/* Tarjetas de producto */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;width:100%;max-width:1060px;margin-inline:auto;text-align:left}
.tarjeta{background:var(--surface);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.tarjeta-img{position:relative;display:block;aspect-ratio:16/10;background:var(--studio)}
.tarjeta-img img{width:100%;height:100%;object-fit:contain;padding:7% 5%;mix-blend-mode:multiply;transition:transform .5s var(--ease-out)}
@media (hover:hover){.tarjeta:hover .tarjeta-img img{transform:scale(1.035)}}
.tarjeta-info{padding:18px 20px 20px;display:grid;gap:10px;flex:1;align-content:start}
.tarjeta .marca{font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.tarjeta h3{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:1.8rem;line-height:1;letter-spacing:-.03em;margin:0}
.tarjeta h3 a{text-decoration:none}
.tarjeta .tipo{margin:0;color:var(--muted);font-size:.92rem}
.tarjeta .fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 14px}
.tarjeta .precio{font:500 1.1rem/1 var(--f-mono)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipf{font:500 11px/1 var(--f-mono);letter-spacing:.03em;padding:7px 9px;border-radius:999px;background:var(--paper);color:var(--ink)}
.tarjeta .acciones{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:auto;padding-top:6px}
.tarjeta .acciones .btn{height:48px}
.btn-icono{width:48px;padding:0}
.btn-icono svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Encabezado de línea */
.cat-hero{background:var(--studio);text-align:center}
.cat-hero .wrap{padding-block:clamp(24px,4vw,44px) clamp(40px,6vw,72px);display:flex;flex-direction:column;align-items:center}
.cat-hero h1{font-family:var(--f-display);font-stretch:125%;font-weight:800;font-size:clamp(2.8rem,8.5vw,6.2rem);line-height:.9;letter-spacing:-.045em;margin:14px 0 0;max-width:13ch}
.cat-hero .chips{justify-content:center;margin-top:22px}
.cat-hero .chipf{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;padding:8px 12px}
.seccion-blanca{background:var(--surface)}
.seccion-papel{background:var(--paper)}
.rx-botones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.bento .c2{grid-column:span 2}.bento .c3{grid-column:span 3}.bento .c4{grid-column:span 4}
@media (max-width:900px){.bento .c2,.bento .c3,.bento .c4{grid-column:auto}}
.cat-hero .migas{justify-content:center;padding-top:0;margin-bottom:18px}
.benef .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.benef .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.benef .wrap{grid-template-columns:1fr}}
.item-img a{display:grid;place-items:center;width:100%;height:100%}
.tarjeta-img{flex:none}
.tarjeta-img img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
@media (max-width:760px){.linea-on img{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:auto;z-index:0}}

/* ---------- Línea de sol: filtros, polarizado, medidas ---------- */
.filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(20px,3vw,32px)}
.filtro{display:inline-flex;align-items:center;gap:8px;height:44px;padding-inline:18px;border:0;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font:500 14.5px/1 var(--f-ui);color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s}
.filtro span{font:500 11px/1 var(--f-mono);color:var(--muted)}
.filtro[aria-pressed="true"]{background:var(--ink);color:var(--surface);box-shadow:none}
.filtro[aria-pressed="true"] span{color:var(--cf-muted)}
.tarjeta[hidden]{display:none!important}
.ptile-osc{color:var(--cf-ink)}
.ptile-osc::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 80% at 80% 10%,rgba(255,199,44,.16),rgba(10,10,10,.82) 70%)}
.ptile-osc .label,.ptile-osc p.txt{color:var(--cf-muted)}
.ptile-osc .pbig{color:var(--sun)}
.ptile-cla{background:var(--tile)}
.pbig.ancha{font-stretch:100%;font-size:clamp(2.4rem,4.9vw,4.1rem);line-height:.95;letter-spacing:-.04em}
.medidas-svg{width:min(560px,100%);height:auto;margin-top:clamp(24px,4vw,40px);fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.medidas-svg .cota{stroke:var(--sun-deep);stroke-width:2.2}
.medidas-svg text{fill:var(--ink);stroke:none;font:500 16px var(--f-mono)}
.medidas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(900px,100%);margin-top:clamp(20px,3vw,32px);text-align:left}
.medida{background:var(--paper);border-radius:22px;padding:20px 22px;display:grid;gap:4px;min-width:0}
.medida span{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.medida b{font-family:var(--f-display);font-stretch:118%;font-weight:750;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;letter-spacing:-.03em}
.medida b small{font:500 .9rem/1 var(--f-mono);letter-spacing:0;margin-left:6px;color:var(--muted)}
.medida p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.rx-cards.tres{grid-template-columns:repeat(3,minmax(0,1fr));width:min(1100px,100%)}
.drop-list.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.linea .chips{margin-top:2px}
.linea-on .chipf{background:var(--surface)}
@media (max-width:900px){.rx-cards.tres,.drop-list.tres{grid-template-columns:1fr}}
@media (max-width:640px){.medidas{grid-template-columns:1fr}}
.tarjetas.n1{grid-template-columns:minmax(0,1fr);max-width:520px}
.tarjetas.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1060px}
.tarjetas.n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1240px}
.tarjetas.n4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1240px}
.tarjetas.n4 .tarjeta h3{font-size:1.55rem}
@media (max-width:1100px){.tarjetas.n3,.tarjetas.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.tarjetas.n2,.tarjetas.n3,.tarjetas.n4{grid-template-columns:minmax(0,1fr)}}
.promo-art.carbon::after{background:radial-gradient(90% 80% at 70% 20%,rgba(255,199,44,.22),rgba(10,10,10,.75) 75%)}

/* Progresivos y rangos de precio de los lentes de sol */
.prog{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--ok-bg);color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.35;text-align:left}
.prog svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--ok);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.prog b{display:block;font-weight:600}
.prog .flecha{margin-left:auto;font:500 16px/1 var(--f-mono);color:var(--ok)}
@media (hover:hover){.prog:hover{box-shadow:inset 0 0 0 1.5px var(--ok)}}
.prog-corto{padding:10px 14px;font-size:.86rem}
.prog-wrap{width:min(560px,100%);margin-top:18px}
.rx-op .rg{display:block;margin-top:6px;font:400 11.5px/1.5 var(--f-mono);color:var(--muted)}
.rx-op .mas{text-align:right;line-height:1.25}
.rx-card .rx-precio small{font:500 .4em/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}
.rx-rangos{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:4px;font:400 12px/1.45 var(--f-mono);color:var(--muted)}
.rx-card.on .rx-rangos{color:var(--cf-muted)}

/* DP opcional */
.rx-check{display:flex;align-items:center;gap:10px;font-size:.88rem;cursor:pointer;line-height:1.3}
.rx-check input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--ink)}
.rx-dpnota{margin-top:4px}
/* Fórmula en celular: el eje solo lleva 3 dígitos, así esfera y cilindro caben completos */
@media (max-width:480px){
  .rx-fila{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 62px;gap:6px}
  .rx-fila select{padding-inline:6px 2px;font-size:13px}
}

/* Foto real del kit de protección */
.regalo-nota.con-foto{align-items:center}
.regalo-nota.con-foto img{width:64px;height:64px;flex:none;object-fit:contain;mix-blend-mode:multiply}
.item-img.regalo-img.foto{background:var(--studio)}
.item-img.regalo-img.foto img{width:92%;mix-blend-mode:multiply}
.rx-res .ico img.kit{width:auto;height:100%}

/* Llamado a la acción del kit de protección (caja de compra) */
.kit-cta{display:flex;align-items:center;gap:12px;width:100%;padding:8px 14px 8px 8px;border-radius:14px;border:1.5px dashed var(--sun-deep);background:color-mix(in srgb,var(--sun) 14%,var(--surface));color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s,transform .15s var(--ease-out)}
.kit-cta:hover{background:color-mix(in srgb,var(--sun) 26%,var(--surface))}
.kit-cta:active{transform:scale(.98)}
.kit-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.kit-cta img{width:58px;height:58px;flex:none;object-fit:contain;mix-blend-mode:multiply}
.kit-cta svg{width:30px;height:30px;flex:none;margin:0 8px;fill:none;stroke:var(--sun-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kit-cta svg .acf{fill:var(--sun)}
.kit-cta b{display:block;font-weight:600;font-size:.93rem;line-height:1.25}
.kit-cta small{display:block;font-size:.78rem;line-height:1.3;color:var(--muted);margin-top:2px}
.kit-cta .flecha{margin-left:auto;padding-left:6px;font-size:1.1rem;color:var(--sun-deep);transition:transform .2s var(--ease-out)}
.kit-cta:hover .flecha{transform:translateX(3px)}