/* CyberMonday ChileLentes 2026 - landing.css */
:root {
  --bg: #0B0B0F; --surface: #15161C; --surface-2: #1D1E26; --line: #2A2B35;
  --text: #F5F5F7; --muted: #9A9AA6; --accent: #19E3FF; --accent-ink: #06252B;
  --danger: #FF3B5C; --oakley: #E31E24; --pedestal: #F2F2F4; --star: #FFC247; --radius: 16px;
  --accent-text: var(--accent); --accent-hover: #5EEBFF; --glow: 25, 227, 255;
  --gutter: 16px; --max: 1280px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", var(--font);
  --condensed: "Barlow Condensed", "Inter Tight", sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
b { font-weight: 600; }
.num, .price-old, .price-new, .cd-unit b, .tile__num, .countdown { font-variant-numeric: tabular-nums; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic--h2 { width: 28px; height: 28px; vertical-align: -4px; color: var(--accent-text); }
.ic--tile { width: 32px; height: 32px; color: var(--accent-text); margin-bottom: auto; }
.ic--trust { width: 24px; height: 24px; color: var(--accent-text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -48px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  font: 600 .9375rem/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--icon { width: 44px; padding: 0; background: var(--surface-2); color: var(--text); border-color: var(--line); flex: none; }
.btn--lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--ghost:hover, .btn--icon:hover { border-color: var(--muted); background: var(--surface-2); }
}

/* ---------- Layout ---------- */
.sec { padding: 56px var(--gutter); max-width: var(--max); margin: 0 auto; }
.sec--narrow { max-width: 760px; }
.sec--bleed { max-width: none; padding-left: 0; padding-right: 0; }
.sec__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sec__head { margin-bottom: 24px; }
.sec__lead { color: var(--muted); max-width: 60ch; margin-top: 8px; font-size: 1.0625rem; }
@media (min-width: 768px) { .sec { padding: 72px var(--gutter); } .sec__head { margin-bottom: 32px; } }
@media (min-width: 1200px) { .sec { padding: 88px var(--gutter); } }

/* ---------- Topbar ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar__list {
  display: flex; gap: 24px; padding: 10px var(--gutter); max-width: var(--max); margin: 0 auto;
  overflow-x: auto; scrollbar-width: none; font-size: .8125rem; color: var(--muted);
}
.topbar__list::-webkit-scrollbar { display: none; }
.topbar__list li { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.topbar__list .ic { width: 16px; height: 16px; color: var(--accent-text); }
@media (min-width: 768px) { .topbar__list { justify-content: space-between; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 16px 0 48px; isolation: isolate; overflow: clip; }
.hero__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 40%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 0%, rgb(11 11 15 / .84) 40%, rgb(11 11 15 / .5) 100%);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(42% 30% at 28% 70%, rgba(25, 227, 255, .15), transparent 72%);
  pointer-events: none;
}
.hero.is-missing .hero__bg, .hero.is-missing::after { display: none; }
.hero:not(.is-missing) :is(.hero__dates, .countdown__label, .cd-unit span) { color: #C9C9D2; }
.gchip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgb(21 22 28 / .72); font-size: .875rem; color: var(--text); transition: border-color 160ms var(--ease);
}
.gchip b { font-weight: 700; }
.star { width: 18px; height: 18px; fill: var(--star); flex: none; }
.gchip + .hero__ctas { margin-top: 20px; }
.hero__top { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; margin-bottom: 40px; }
.logo { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 6px 12px; }
.logo img { height: 36px; width: auto; }
.logo--sm { padding: 5px 10px; margin-bottom: 12px; }
.logo--sm img { height: 28px; }
/* logo del hero: palabra -> marca cuadrada segun --lt (0..1, lo fija landing.js al hacer scroll); la fila queda fija en 48px para no re-maquetar el cuerpo */
.logo--hero { --w0: 128px; --m: 40px; position: relative; justify-content: center; overflow: hidden; padding: 0; width: calc(var(--w0) - (var(--w0) - var(--m)) * var(--lt, 0)); height: calc(48px - (48px - var(--m)) * var(--lt, 0)); }
.logo--hero .logo__word { width: 104px; height: 36px; max-width: none; flex: none; opacity: calc(1 - var(--lt, 0) * 1.6); }
.logo--hero .logo__mark { position: absolute; inset: 0; margin: auto; width: calc(var(--m) - 8px); height: calc(var(--m) - 8px); border-radius: 8px; opacity: calc((var(--lt, 0) - .4) * 2.5); }
.hero__top.is-handed .logo--hero { visibility: hidden; }
@media (min-width: 768px) { .logo--hero { --m: 44px; } }
.hero__body { max-width: 880px; }
.hero__event { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1rem + 5vw, 3.75rem); letter-spacing: -.03em; line-height: 1; }
.hero__event-word--accent { color: var(--accent); }
.hero__dates { font: 500 .9375rem/1.4 var(--font); color: var(--muted); letter-spacing: 0; width: 100%; margin-top: 10px; }
/* extension sorpresa (desde el fin original): el aviso pasa a ser noticia */
.hero:not(.is-missing) .hero__dates--ext, .hero__dates--ext { color: var(--accent); font-size: clamp(1.0625rem, .9rem + .6vw, 1.375rem); font-weight: 800; letter-spacing: -.01em; }
.hero__title { margin-top: 28px; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem); max-width: 22ch; }
.countdown { margin-top: 36px; }
.countdown__label { font-size: .875rem; font-weight: 500; color: var(--muted); margin-bottom: 8px; }
.countdown__units { display: flex; gap: 12px; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.cd-unit b { font: 800 clamp(2.75rem, 1.5rem + 7vw, 6rem)/1 var(--display); letter-spacing: -.04em; }
.cd-unit span { font-size: .75rem; color: var(--muted); margin-top: 6px; }
.cd-unit:not(:last-child) { position: relative; padding-right: 12px; }
.cd-unit:not(:last-child)::after { content: ":"; position: absolute; right: -6px; top: 0; font: 800 clamp(2rem, 1rem + 5vw, 4.5rem)/1 var(--display); color: var(--line); }
.countdown__closed { color: var(--muted); font-size: 1.0625rem; max-width: 46ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__ctas .btn { flex: 1 1 auto; }
/* franja bajo el banner: copy de marcas (salio del hero) */
.subhero { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.subhero__in { max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.subhero__text { font-size: .9375rem; color: var(--muted); max-width: 72ch; }
@media (min-width: 768px) {
  .hero { padding-top: 24px; padding-bottom: 72px; }
  .hero::after { background: linear-gradient(90deg, rgb(11 11 15 / .9) 0%, rgb(11 11 15 / .76) 46%, rgb(11 11 15 / .2) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 32%); }
  .hero__top { margin-bottom: 64px; }
  .gchip:hover { border-color: var(--muted); }
  .cd-unit { min-width: 120px; align-items: flex-start; }
  .cd-unit:not(:last-child) { padding-right: 32px; }
  .cd-unit:not(:last-child)::after { right: 8px; }
  .hero__ctas .btn { flex: 0 1 auto; }
}

/* ---------- Cards ---------- */
.card {
  position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; --card-accent: var(--accent); --card-ink: var(--accent-ink);
  transition: border-color 200ms var(--ease);
}
/* sin variantes por marca: todas las tarjetas con el mismo color y fuente (pedido del usuario) */
.card__media {
  position: relative; border-radius: calc(var(--radius) - 4px); margin: 8px 8px 0; overflow: hidden; aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 50% 110%, #E9EAEF 0%, #FAFAFC 70%); perspective: 900px;   /* recortes (img_cut): pedestal gris claro casi blanco */
}
.card__media:not(.card__media--cut) { background: radial-gradient(circle at 50% 40%, #F4F4F6, #E6E7EB); }
.card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%;
  transform: perspective(900px) rotateY(-8deg) scale(1.04); transform-origin: 55% 60%;
  transition: transform 500ms var(--ease-out), opacity 350ms var(--ease); backface-visibility: hidden;
}
.card__img--alt { opacity: 0; }
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 1; padding: 5px 9px; border-radius: 999px;
  background: var(--card-accent, var(--accent)); color: var(--card-ink, var(--accent-ink)); font: 700 .8125rem/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.badge--alt { left: auto; right: 10px; background: var(--text); color: var(--bg); }
.card__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px; flex: 1; }
.card__sku { font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.card__brand { font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card__name { font-size: .9375rem; font-weight: 600; font-family: var(--font); letter-spacing: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 4px; }
.price-old { color: var(--muted); font-size: 1rem; text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; }
.price-new { color: var(--card-accent); font-size: 1rem; font-weight: 700; }
.card__save { font-size: .875rem; font-weight: 800; color: var(--danger); }   /* ahorro en CLP: texto rojo plano, sin fondo */
.card__actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: auto; padding-top: 10px; }
.card__actions .card__buy { position: relative; z-index: 1; min-height: 46px; font-size: 1rem; font-weight: 700; background: var(--card-accent); color: var(--card-ink); }
.card__actions .card__link { min-height: 32px; padding: 0 12px; font-size: .8125rem; font-weight: 500; color: var(--muted); border-color: transparent; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 0; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--muted); }
  .card:hover .card__img { transform: perspective(900px) rotateY(0) scale(1.06); }
  .card:hover .card__media:has(.card__img--alt) .card__img--main { opacity: 0; }
  .card:hover .card__img--alt { opacity: 1; }
}
.card--sm .card__actions .card__buy { font-size: .9375rem; }
.card--sm .card__body { padding: 10px 10px 10px; }
@media (max-width: 767px) {
  .card__body { padding: 10px; }
  .card .card__actions .card__buy { padding: 0 8px; font-size: .9375rem; min-width: 0; }
}

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card--big { grid-column: span 2; grid-row: span 2; }
.card--big .card__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 200px; }
.card--big .card__img { padding: 0; transform: perspective(900px) rotateY(-5deg) scale(1.08); }
.card--big .card__media:not(.card__media--cut) .card__img { object-fit: cover; }
.card--big .card__name { font-size: 1.25rem; }
.card--big .price-old, .card--big .price-new { font-size: 1.25rem; }
.card--big .card__save { font-size: 1rem; }
.card--big .card__body { padding: 16px; gap: 6px; flex: 0 0 auto; }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); } .card--big .card__name { font-size: 1.5rem; } .card--big .price-old, .card--big .price-new { font-size: 1.5rem; } }
.tile--all { background: var(--surface-2); border-color: var(--line); align-items: flex-start; justify-content: center; }
.tile--all .tile__num { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); color: var(--accent-text); }
.tile--all .btn { margin-top: auto; }

/* ---------- Oferta por tiempo limitado (spotlight: una ventana = un producto) ---------- */
.sec--flash { padding-top: 40px; }
.sec--flash .sec__head { margin-bottom: 20px; }
.flash {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  --card-accent: var(--accent); --card-ink: var(--accent-ink);
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.flash[data-state="live"] { border-color: rgba(var(--glow), .3); box-shadow: 0 0 0 1px rgba(var(--glow), .08), 0 24px 64px -32px rgba(var(--glow), .35); }
.flash[data-state="none"], .flash:empty { display: none; }
.spot { display: grid; grid-template-columns: 1fr; }
.spot__media { margin: 0; border-radius: 0; aspect-ratio: 4 / 3; }
.spot__media .card__img { padding: 4%; transform: perspective(900px) rotateY(-8deg) scale(1.02); }
.spot__media .badge { top: 14px; left: 14px; font-size: 1rem; padding: 7px 11px; }
/* velo: ventana futura (o activa aun sin revelar): foto difuminada + overlay oscuro + hora de revelado */
.spot__media--veil .card__img { filter: blur(14px) saturate(.6); transform: scale(1.08); }
.spot__media--veil::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 50%, rgba(8, 10, 16, .38), rgba(8, 10, 16, .66)); z-index: 1; }
.spot__reveal { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; text-align: center; pointer-events: none; }
.spot__reveal small { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.spot__reveal b { font: 800 clamp(2.75rem, 2rem + 3vw, 4.5rem)/1 var(--display); letter-spacing: -.03em; text-shadow: 0 8px 32px rgba(0, 0, 0, .45); }
@media (hover: hover) and (pointer: fine) {
  .spot:hover .spot__media:not(.spot__media--veil) .card__img { transform: perspective(900px) rotateY(0) scale(1.05); }
  .spot:hover .spot__media:has(.card__img--alt) .card__img--main { opacity: 0; }
  .spot:hover .spot__media .card__img--alt { opacity: 1; }
}
.spot__body { display: flex; flex-direction: column; gap: 6px; padding: 20px 16px 22px; }
.spot__top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.flash__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.flash__cd { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; font-weight: 500; color: var(--muted); }
.flash__cd b { font: 800 clamp(2rem, 1.3rem + 2.6vw, 3rem)/1 var(--display); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.flash[data-state="live"] .flash__kicker, .flash[data-state="live"] .flash__cd b { color: var(--accent-text); }
.flash[data-state="live"] .live-dot { background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--glow), .45); animation: livepulse 2s var(--ease) infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(var(--glow), .45); } 70% { box-shadow: 0 0 0 7px rgba(var(--glow), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--glow), 0); } }
.spot__name { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); line-height: 1.1; }
.spot__reason { color: var(--muted); font-size: 1rem; max-width: 46ch; }
.spot__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 10px; }
.spot__price .price-old { font-size: 1.125rem; }
.spot__price .price-new { font-size: 1.75rem; }
/* badge del descuento de ventana (el cupon no se muestra: se aplica en el carro) */
.spot__until { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(var(--glow), .1); border: 1px solid rgba(var(--glow), .28); color: var(--accent-text); font-size: .8125rem; font-weight: 600; white-space: nowrap; align-self: center; }
.spot__until b { font-weight: 800; }
.spot__save { font-size: .9375rem; font-weight: 800; color: var(--danger); white-space: nowrap; align-self: baseline; }   /* ahorro en CLP: texto rojo plano, sin fondo (no debe parecer boton) */
.spot__reason .num { color: var(--text); font-weight: 700; }
.spot__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.spot__actions .btn { flex: 1 1 auto; }
.spot__actions .btn--primary { background: var(--card-accent); color: var(--card-ink); }
.flash__legal { margin-top: 8px; }
.spot__only { margin-top: 14px; color: var(--danger); font-size: .84rem; font-weight: 600; line-height: 1.35; }
/* timeline del dia */
.flash-tl { margin-top: 16px; }
.flash-tl__label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.flash-tl__label--next { margin-top: 14px; }
.flash-tl__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
.flash-tl__row::-webkit-scrollbar { display: none; }
.tl {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; width: 236px; min-height: 64px; padding: 8px 12px 8px 8px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font-family: var(--font);
  scroll-snap-align: start; transition: transform 160ms var(--ease-out), border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.tl:active { transform: scale(.97); }
.tl__img { flex: none; width: 56px; height: 42px; object-fit: contain; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #F4F4F6, #E6E7EB); padding: 2px; }
.tl__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tl__time { font: 700 1rem/1.1 var(--display); letter-spacing: -.01em; }
.tl__title { font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl__st { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.tl[data-st="past"] { opacity: .45; cursor: default; }
.tl[data-st="past"]:active { transform: none; }
.tl[data-st="past"] .tl__img { filter: grayscale(1); }
.tl[data-st="next"] .tl__img { filter: blur(6px) saturate(.6); }
.tl[data-st="next"] .tl__title { color: var(--muted); }
.tl[data-st="live"] { border-color: var(--accent-text); background: rgba(var(--glow), .08); box-shadow: 0 0 0 1px rgba(var(--glow), .2); }
.tl[data-st="live"] .tl__time, .tl[data-st="live"] .tl__st { color: var(--accent-text); }
.tl[data-st="live"] .tl__st::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); margin-right: 6px; vertical-align: 1px; }
@media (hover: hover) and (pointer: fine) { .tl:not([disabled]):hover { border-color: var(--muted); background: var(--surface-2); } .tl[data-st="live"]:hover { border-color: var(--accent-text); background: rgba(var(--glow), .12); } }
.jump[hidden] { display: none; }
@media (min-width: 768px) {
  .sec--flash { padding-top: 48px; }
  .spot { grid-template-columns: 3fr 2fr; }
  .spot__media { aspect-ratio: auto; min-height: 420px; }
  .spot__body { padding: 28px 28px 30px; justify-content: center; }
  .spot__actions .btn { flex: 0 1 auto; }
  .flash-tl { margin-top: 20px; }
  .flash-tl__row { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .tl { width: auto; min-width: 236px; max-width: 300px; }
}
@media (min-width: 1200px) { .sec--flash { padding-top: 56px; } .spot__media { min-height: 480px; } .spot__body { padding: 36px 40px; } }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; gap: 4px; min-height: 150px; padding: 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.tile__label { font-family: var(--display); font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; line-height: 1.15; }
.tile__blurb { font-size: .8125rem; color: var(--muted); }
.tile__pct { margin-top: 8px; font-size: .8125rem; font-weight: 600; color: var(--accent-text); }
.tile__num { font: 800 clamp(1.5rem, 1rem + 2vw, 2.25rem)/1 var(--display); letter-spacing: -.03em; }
.tile--use { min-height: 170px; justify-content: flex-end; }
.tile--use .tile__label { font-size: 1.375rem; }
.tile--oakley { border-color: rgba(227, 30, 36, .5); }
.tile--oakley .tile__label { font-family: var(--condensed); text-transform: uppercase; font-size: 1.75rem; letter-spacing: .01em; }
.tile--oakley .tile__pct { color: var(--oakley); }
.tile--photo { position: relative; overflow: hidden; min-height: 200px; isolation: isolate; }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 500ms var(--ease-out); }
.tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(11 11 15 / .92) 0%, rgb(11 11 15 / .5) 50%, rgb(11 11 15 / .08) 100%); }
.tile--photo.tile--oakley::before { background: linear-gradient(0deg, rgba(46, 6, 8, .94) 0%, rgb(11 11 15 / .5) 55%, rgb(11 11 15 / .08) 100%); }
.tile--photo.is-missing .tile__img, .tile--photo.is-missing::before { display: none; }
.tile--tier { justify-content: center; align-items: flex-start; min-height: 130px; }
.tile--tier .tile__num { color: var(--accent-text); }
.tile.tile--gift { position: relative; padding-top: 56px; justify-content: flex-start; }
@media (max-width: 767px) { .giftwrap .tiles--3 { grid-template-columns: 1fr; } }
.tile--gift .badge { top: 14px; left: 14px; font-size: 1rem; padding: 7px 11px; }
.gift__value { font-size: .9375rem; color: var(--muted); }
.gift__value b { color: var(--text); }
.gift__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 6px 0 2px; }
.gift__price .price-old { color: var(--muted); font-weight: 700; }
.gift__price .price-new { color: var(--accent-text); }
.gift__save { margin-top: 0; color: var(--danger); }   /* ahorro en CLP en rojo (pedido del usuario) */
.gift__notice { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; max-width: 70ch; font-size: .9375rem; color: var(--text); }
.gift__notice .ic { width: 18px; height: 18px; flex: none; color: var(--danger); margin-top: 2px; }
.gift__notice b { color: var(--danger); }
.meta__promo { margin-top: 10px; font-size: 1.0625rem; font-weight: 800; color: var(--danger); }   /* descuento Cyber Meta: texto rojo plano */
.tile--gift .btn { margin-top: 12px; align-self: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { border-color: var(--muted); background: var(--surface-2); }
  .tile--photo:hover .tile__img, .ccard:hover .ccard__img { transform: scale(1.04); }
  .ccard:hover, .carousel__btn:hover, .giftwrap:not(.is-missing) .tile--gift:hover { border-color: var(--muted); }
}
@media (min-width: 768px) {
  .tiles { gap: 16px; }
  .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { padding: 22px; min-height: 170px; }
  .tile--photo { min-height: 260px; }
}

/* ---------- Carrusel ---------- */
.carousel { --n: 1.15; --k: 1; --g: 12px; }
.carousel__track {
  position: relative; display: flex; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.ccard {
  position: relative; flex: 0 0 calc((100% - var(--g) * var(--k)) / var(--n)); aspect-ratio: 4 / 5; scroll-snap-align: start; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); transition: border-color 200ms var(--ease);
}
.ccard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 500ms var(--ease-out); }
.ccard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(11 11 15 / .94) 0%, rgb(11 11 15 / .55) 42%, rgb(11 11 15 / .04) 72%); }
.ccard__body { display: flex; flex-direction: column; gap: 4px; padding: 18px; }
.ccard__ic { width: 22px; height: 22px; color: var(--accent-text); margin-bottom: 6px; }
.ccard .tile__label { font-size: 1.375rem; }
.ccard.is-missing .ccard__img, .ccard.is-missing::before { display: none; }
.carousel__ui { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.carousel.is-static .carousel__ui { display: none; }
.carousel__dots { display: flex; margin-left: -8px; }
.carousel__dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.carousel__dot::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; border-radius: 50%; background: var(--line); transition: background-color 200ms var(--ease), transform 200ms var(--ease-out); }
.carousel__dot[aria-current="true"]::before { background: var(--accent-text); transform: scale(1.3); }
.carousel__nav { display: flex; gap: 8px; }
.carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; transition: transform 160ms var(--ease-out), border-color 160ms var(--ease); }
.carousel__btn:active { transform: scale(.94); }
@media (min-width: 768px) {
  .carousel { --n: 3; --k: 2; --g: 16px; }
  .carousel__track { margin: 0; padding: 0 0 4px; scroll-padding-inline: 0; }
}
/* Desktop: grilla estatica 3x2 (sin overflow -> el JS la marca is-static: sin dots/flechas ni autoplay) */
@media (min-width: 1200px) {
  .carousel__track { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .ccard { aspect-ratio: 16 / 10; }
  .ccard .tile__label { font-size: 1.5rem; }
}

/* ---------- Gift cards ---------- */
.giftwrap { position: relative; isolation: isolate; border-radius: var(--radius); overflow: hidden; padding: 16px; border: 1px solid var(--line); }
.giftwrap__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.giftwrap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgb(11 11 15 / .84), rgb(11 11 15 / .55)); }
.giftwrap.is-missing { padding: 0; border: 0; overflow: visible; }
.giftwrap.is-missing .giftwrap__bg, .giftwrap.is-missing::before { display: none; }
.giftwrap:not(.is-missing) .tile--gift { background: rgb(21 22 28 / .86); border-color: rgba(255, 255, 255, .12); }
@supports (backdrop-filter: blur(1px)) { .giftwrap:not(.is-missing) .tile--gift { background: rgb(21 22 28 / .5); backdrop-filter: blur(14px); } }
@media (min-width: 768px) { .giftwrap { padding: 32px; } }

/* ---------- Marcas ---------- */
.sec--brand { padding-left: 0; padding-right: 0; }
.sec--brand .sec__head, .chips { padding-left: var(--gutter); padding-right: var(--gutter); }
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.brand-word { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font: 700 1.5rem/1 var(--display); letter-spacing: -.02em; color: var(--text); opacity: .55; white-space: nowrap; text-decoration: none; transition: color 160ms var(--ease), opacity 160ms var(--ease), text-shadow 160ms var(--ease); }
.brand-word:hover, .brand-word:focus-visible { color: var(--accent-text); opacity: 1; text-shadow: 0 0 14px rgba(var(--glow),.55), 0 0 32px rgba(var(--glow),.25); outline: none; }
.bolt { position: absolute; width: 14px; height: 22px; pointer-events: none; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='M9 0 0 13h5l-1 9 10-14H8z' fill='%2319E3FF'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 0 4px rgba(25,227,255,.9)); }
.bolt--1 { top: -10px; left: -6px; transform: rotate(-25deg); }
.bolt--2 { top: -14px; right: -4px; transform: rotate(20deg); }
.bolt--3 { bottom: -12px; left: 40%; transform: rotate(160deg); }
@media (hover: hover) {
  .brand-word:hover .bolt--1 { animation: boltpop 520ms var(--ease) both; }
  .brand-word:hover .bolt--2 { animation: boltpop 520ms var(--ease) 90ms both; }
  .brand-word:hover .bolt--3 { animation: boltpop 520ms var(--ease) 180ms both; }
}
@keyframes boltpop { 0% { opacity: 0; transform: scale(.3) rotate(var(--r, 0deg)) translateY(6px); } 35% { opacity: 1; transform: scale(1.15) rotate(var(--r, 0deg)) translateY(-4px); } 100% { opacity: 0; transform: scale(.9) rotate(var(--r, 0deg)) translateY(-14px); } }
.bolt--1 { --r: -25deg; } .bolt--2 { --r: 20deg; } .bolt--3 { --r: 160deg; }
@media (prefers-reduced-motion: reduce) { .bolt { display: none; } }
/* rayos en el boton del flash: hover + chispa periodica cada 7 s mientras esta live (el pop vive al final del ciclo: al salir del hover no hay doble pop) */
.btn--bolts { position: relative; }
.btn--bolts .bolt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='M9 0 0 13h5l-1 9 10-14H8z' fill='%23fff'/%3E%3C/svg%3E"); }
.btn--bolts .bolt--1 { top: -9px; left: 12px; }
.btn--bolts .bolt--2 { top: -12px; right: 10px; }
.btn--bolts .bolt--3 { bottom: -10px; left: 50%; margin-left: -7px; }
.flash[data-state="live"] .btn--bolts .bolt--1 { animation: boltcycle 7s var(--ease) infinite; }
.flash[data-state="live"] .btn--bolts .bolt--2 { animation: boltcycle 7s var(--ease) 90ms infinite; }
.flash[data-state="live"] .btn--bolts .bolt--3 { animation: boltcycle 7s var(--ease) 180ms infinite; }
@media (hover: hover) {
  .flash[data-state="live"] .btn--bolts:is(:hover, :focus-visible) .bolt--1 { animation: boltpop 520ms var(--ease) both; }
  .flash[data-state="live"] .btn--bolts:is(:hover, :focus-visible) .bolt--2 { animation: boltpop 520ms var(--ease) 90ms both; }
  .flash[data-state="live"] .btn--bolts:is(:hover, :focus-visible) .bolt--3 { animation: boltpop 520ms var(--ease) 180ms both; }
}
@keyframes boltcycle {
  0%, 92% { opacity: 0; transform: scale(.3) rotate(var(--r, 0deg)) translateY(6px); }
  95% { opacity: 1; transform: scale(1.15) rotate(var(--r, 0deg)) translateY(-4px); }
  100% { opacity: 0; transform: scale(.9) rotate(var(--r, 0deg)) translateY(-14px); }
}
@keyframes marquee { to { transform: translateX(-50%); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .9375rem; font-weight: 500; transition: border-color 160ms var(--ease), color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--accent-text); color: var(--accent-text); } }

/* ---------- Optical builder ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px var(--gutter); }
.panel__text .sec__lead { margin-top: 8px; }
.steps { counter-reset: s; display: grid; gap: 12px; margin-top: 24px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: start; }
.steps li::before { content: counter(s); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font: 700 1rem/1 var(--display); color: var(--accent-text); }
.steps li b { font-family: var(--display); font-size: 1.0625rem; }
.steps li span { font-size: .9375rem; color: var(--muted); }
.panel__note { margin-top: 20px; font-size: .9375rem; color: var(--muted); }
.panel__note b { color: var(--accent-text); }
/* Arma tus lentes: el -20 % en todos los cristales es el gancho */
.lens-off { position: absolute; top: 16px; left: 16px; z-index: 1; width: 112px; height: 112px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px rgb(0 0 0 / .35); }
.lens-off b { font: 800 2.125rem/1 var(--display); letter-spacing: -.03em; }
.lens-off small { font: 700 .6875rem/1.15 var(--font); max-width: 84px; margin-top: 4px; text-transform: uppercase; letter-spacing: .02em; }
.lens-banner { margin-top: 10px; font: 800 clamp(1.375rem, 1rem + 1.4vw, 2rem)/1.15 var(--display); letter-spacing: -.02em; color: var(--text); }
.lens-banner b { color: var(--accent-text); }
.panel.is-missing .lens-off { display: none; }
@media (min-width: 1024px) { .lens-off { width: 136px; height: 136px; top: 24px; left: 24px; } .lens-off b { font-size: 2.625rem; } }
.panel .hero__ctas { margin-top: 24px; }
.panel--media { padding: 0; overflow: hidden; display: grid; }
.panel__media { position: relative; aspect-ratio: 16 / 9; }
.panel__img { width: 100%; height: 100%; object-fit: cover; }
.panel--media .panel__text { padding: 24px var(--gutter); }
.panel.is-missing .panel__media { display: none; }
@media (min-width: 768px) { .panel:not(.panel--media), .panel--media .panel__text { padding: 40px; } .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } .panel__text { max-width: 880px; } }
@media (min-width: 1024px) {
  .panel--media:not(.is-missing) { grid-template-columns: 5fr 7fr; }
  .panel--media:not(.is-missing) .panel__media { aspect-ratio: auto; }
  .panel--media:not(.is-missing) .panel__img { position: absolute; inset: 0; }
  .panel--media:not(.is-missing) .steps { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- Comparativa Meta ---------- */
.compare { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 16px; }
.compare__table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.compare__table th, .compare__table td { padding: 12px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare__table thead th { font-family: var(--display); font-size: 1rem; color: var(--text); }
.compare__table tbody th { font-weight: 500; color: var(--muted); width: 28%; }
.compare__table tbody td { color: var(--text); }
.compare .btn { margin: 16px 8px 0; }
@media (min-width: 768px) { .compare { padding: 16px 24px 24px; } .compare__table { font-size: 1rem; } .compare__table th, .compare__table td { padding: 14px 12px; } }

/* ---------- Confianza ---------- */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trust li { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.trust li b { font-family: var(--display); font-size: 1rem; margin-top: 6px; }
.trust li span { font-size: .875rem; color: var(--muted); }
.trust li.trust__feat { grid-column: span 2; border-color: rgba(255, 194, 71, .35); }
.trust__feat .ic--trust { color: var(--star); }
.trust__feat b { font-size: 1.25rem; }
.trust__feat .stars { margin-top: 6px; }
.trust__link { margin-top: auto; padding-top: 10px; min-height: 44px; display: inline-flex; align-items: flex-end; font-size: .875rem; font-weight: 600; color: var(--accent-text); }
.legal { margin-top: 24px; font-size: .75rem; line-height: 1.5; color: var(--muted); max-width: 90ch; }
@media (min-width: 768px) { .trust { gap: 16px; } }
@media (min-width: 1024px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } .trust li.trust__feat { grid-column: 1; grid-row: span 2; } }

/* ---------- Reviews ---------- */
.reviews { display: grid; gap: 12px; }
.reviews__sum, .review { display: flex; flex-direction: column; margin: 0; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.reviews__score { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.reviews__score b { font: 800 clamp(3rem, 2rem + 4vw, 4.5rem)/1 var(--display); letter-spacing: -.04em; }
.stars { position: relative; display: inline-flex; --s: 24px; height: var(--s); }
.stars__off, .stars__on { display: flex; gap: 2px; }
.stars svg { width: var(--s); height: var(--s); flex: none; fill: var(--line); }
.stars__on { position: absolute; inset: 0; width: var(--fill, 100%); overflow: hidden; }
.stars__on svg { fill: var(--star); }
.stars--sm { --s: 16px; }
.reviews__count { margin-top: 10px; font-weight: 500; }
.reviews__bar { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: .875rem; color: var(--muted); }
.reviews__bar i { display: block; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.reviews__bar i::after { content: ""; position: absolute; inset: 0; width: var(--w, 0); border-radius: 3px; background: var(--star); }
.reviews__badge { margin-top: auto; padding-top: 18px; display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; }
.reviews__badge .ic { color: var(--star); }
.review { gap: 12px; }
.review p { font-size: .9375rem; line-height: 1.55; }
.review footer { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .8125rem; color: var(--muted); }
.review footer time { color: var(--text); font-weight: 500; }
.reviews__cta { margin-top: 20px; }
@media (min-width: 768px) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .reviews { grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr)); } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__chev { transition: transform 200ms var(--ease-out); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__item p { padding: 0 0 18px; color: var(--muted); max-width: 70ch; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 40px var(--gutter) 96px; max-width: var(--max); margin: 0 auto; color: var(--muted); font-size: .875rem; }
.footer__grid { display: grid; gap: 24px; }
.footer__grid p { margin-bottom: 4px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__links a, .footer__grid a { color: var(--text); }
.footer__copy { margin-top: 32px; font-size: .75rem; }
.footer__build { opacity: .5; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.4fr; } .footer { padding-bottom: 48px; } }

/* ---------- Sticky CTA mobile ---------- */
.sticky-cta {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font: 600 1rem/1 var(--font); box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transform: translateY(calc(100% + 24px)); opacity: 0; transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
}
.sticky-cta small { font-size: .6875rem; font-weight: 500; opacity: .85; }
.sticky-cta[hidden] { display: flex; }
.sticky-cta.is-on { transform: none; opacity: 1; }
.sticky-cta:active { transform: scale(.97); }
@media (min-width: 768px) { .sticky-cta { display: none !important; } }

/* ---------- Marca fija (toma el relevo del logo del hero; .brandbar__in replica .hero__in para que el borde derecho coincida sin depender de 100vw/scrollbar) ---------- */
.brandbar { position: fixed; top: 20px; left: 0; right: 0; z-index: 45; pointer-events: none; }
.brandbar[hidden] { display: none; }
.brandbar__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: flex-end; }
.brandmark { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.7); visibility: hidden; transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms; }
.brandmark img { width: 32px; height: 32px; border-radius: 8px; }
.brandmark.is-on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* rayos: .is-zap la pone/reinicia landing.js en el handover y en cada mouseenter/focus */
.brandmark.is-zap .bolt--1 { animation: boltpop 520ms var(--ease) both; }
.brandmark.is-zap .bolt--2 { animation: boltpop 520ms var(--ease) 90ms both; }
.brandmark.is-zap .bolt--3 { animation: boltpop 520ms var(--ease) 180ms both; }
@media (min-width: 768px) { .brandbar { top: 26px; } .brandmark { width: 44px; height: 44px; } .brandmark img { width: 36px; height: 36px; } }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 200ms linear; transition-delay: 0ms; }
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; padding: 0 var(--gutter); gap: 16px 32px; }
  .btn, .sticky-cta, .faq__chev, .ccard__img, .tile__img, .carousel__dot::before, .carousel__btn, .flash, .tl, .brandmark { transition: none; }
  .flash[data-state="live"] .live-dot { animation: none; box-shadow: 0 0 0 4px rgba(var(--glow), .2); }
  .card__img { transition: opacity 200ms linear; }
  .card__img, .card:hover .card__img, .ccard:hover .ccard__img, .tile--photo:hover .tile__img { transform: none; }
}

/* ---------- Seccion Lentes con IA con fondo ---------- */
.sec--meta { position: relative; isolation: isolate; overflow: clip; }
.sec--meta .sec__in { position: relative; }
.sec--meta .sec__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; z-index: -3; }
.sec--meta .sec__particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.sec--meta .sec__bgfade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0B0B0Feb 0%, #0B0B0Fc7 50%, #0B0B0F26 100%), linear-gradient(180deg, #0B0B0F40, #0B0B0F00 30%, #0B0B0F00 70%, #0B0B0F59); }
.sec--meta .compare { background: rgba(21,22,28,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(25,227,255,.18); }
.sec--meta .sec__head { max-width: 640px; }
@media (min-width: 768px) { .sec--meta .sec__bg { object-position: 78% center; } }
@media (min-width: 1200px) { .sec--meta { min-height: 640px; } .sec--meta .compare { max-width: 940px; } .sec--meta .sec__bg { object-position: 85% center; } }
@media (min-width: 1700px) { .sec--meta .sec__bg { object-position: 65% center; } }
.sec--meta.is-missing .sec__bg, .sec--meta.is-missing .sec__bgfade, .sec--meta.is-missing .sec__particles { display: none; }
@media (max-width: 767px) { .sec--meta .sec__bgfade { background: linear-gradient(180deg, rgba(11,11,15,.7), rgba(11,11,15,.9)); } }
/* ---------- Tema claro (opt-in: <html data-theme="light"> via ?theme=light; hero, Meta, giftwrap, fotos y velo siguen oscuros) ---------- */
html[data-theme="light"] {
  --bg: #FFFFFF; --surface: #F3F8FA; --surface-2: #E6F0F4; --line: #D5E2E8; --text: #0E1116; --muted: #5B6270;
  --accent-text: #00768C; --accent-hover: #0FD0EC; --danger: #D81B4A; --oakley: #C4161C; --glow: 0, 118, 140;
  color-scheme: light;
}
/* islas oscuras: re-declaran los tokens dark y los hijos los heredan */
html[data-theme="light"] :is(.hero, .sec--meta:not(.is-missing), .giftwrap:not(.is-missing), .ccard:not(.is-missing), .tile--photo:not(.is-missing), .spot__media--veil) {
  --bg: #0B0B0F; --surface: #15161C; --surface-2: #1D1E26; --line: #2A2B35; --text: #F5F5F7; --muted: #9A9AA6;
  --accent-text: #19E3FF; --accent-hover: #5EEBFF; --danger: #FF3B5C; --oakley: #E31E24; --glow: 25, 227, 255;
  color-scheme: dark; color: var(--text);   /* el color del body ya viene computado (claro): la isla lo re-resuelve */
}
/* hero y Meta como paneles redondeados con margen lateral */
html[data-theme="light"] .hero { margin: 8px var(--gutter) 0; border-radius: 24px; background: var(--bg); }
html[data-theme="light"].scrub .hero { top: 8px; min-height: calc(100svh - 16px); }
html[data-theme="light"] .hero-scroll { margin-bottom: 8px; }
html[data-theme="light"] .sec--meta:not(.is-missing) { margin-inline: var(--gutter); border-radius: 24px; }
@media (min-width: 1376px) { html[data-theme="light"] :is(.hero, .sec--meta:not(.is-missing)) { margin-inline: auto; max-width: calc(var(--max) + 64px); } }
/* detalles sobre fondo claro */
html[data-theme="light"] .card__media:not(.card__media--cut), html[data-theme="light"] .tl__img { background: radial-gradient(circle at 50% 40%, #FFFFFF, #EDEFF3); }
html[data-theme="light"] .btn--primary { box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 6px 16px -8px rgba(10, 30, 40, .35); }
html[data-theme="light"] .sticky-cta { box-shadow: 0 8px 24px rgba(10, 30, 40, .25); }
html[data-theme="light"] .footer .logo { box-shadow: 0 0 0 1px var(--line); }
html[data-theme="light"] .brandbar { top: 28px; }
@media (min-width: 768px) { html[data-theme="light"] .brandbar { top: 34px; } }
@media (max-width: 1311px) { html[data-theme="light"] .brandbar__in { padding: 0 calc(2 * var(--gutter)); } }
html[data-theme="light"] .brandmark { box-shadow: 0 6px 20px rgba(10, 30, 40, .18), 0 0 0 1px var(--line); }
html[data-theme="light"] .bolt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 22'%3E%3Cpath d='M9 0 0 13h5l-1 9 10-14H8z' fill='%2300768C'/%3E%3C/svg%3E"); filter: drop-shadow(0 0 4px rgba(var(--glow), .7)); }
/* toggle del footer: oculto salvo que el tema se haya activado por ?theme= (landing.js lo muestra) */
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 .8125rem/1 var(--font); cursor: pointer; transition: border-color 160ms var(--ease); }
.theme-toggle[hidden] { display: none; }
.theme-toggle .ic { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { border-color: var(--muted); } }

/* ---------- Tendencias: lookbook editorial (la foto manda) ----------
   Movil: fotos 4:5 casi a pantalla completa con scroll lateral y el nombre DEBAJO (la foto no se tapa).
   Desktop: mosaico asimetrico 4 columnas (2 grandes 2x2, 2 verticales 1x2, 4 chicas) con el nombre sobre la foto. */
.sec__sub { margin: 4px 0 0; color: var(--muted); }
.look {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter);
}
.look::-webkit-scrollbar { display: none; }
.look__item { flex: 0 0 82%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; color: var(--text); text-decoration: none; }
.look__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.look__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out), filter 600ms var(--ease); }
.look__cap { display: flex; flex-direction: column; gap: 2px; }
.look__name { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.look__meta { font-size: .875rem; color: var(--muted); }
.look__cta { display: none; }
.look__item.is-missing .look__media { display: none; }
@media (min-width: 900px) {
  .look {
    display: grid; overflow: visible; margin: 0; padding: 0; gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 19vw, 300px);
  }
  .look__item { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); gap: 0; }
  .look__item--1 { grid-column: span 2; grid-row: span 2; }
  .look__item--2 { grid-row: span 2; }
  .look__item--7 { grid-row: span 2; }
  .look__item--8 { grid-column: span 2; grid-row: span 2; }
  .look__item--7 { grid-column: 3; grid-row: 3 / span 2; }
  .look__item--8 { grid-column: 1 / span 2; grid-row: 3 / span 2; }
  .look__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  .look__item::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(0deg, rgb(11 11 15 / .78) 0%, rgb(11 11 15 / .18) 32%, transparent 52%); }
  .look__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(14px, 1.6vw, 24px); color: #F4F4F6; }
  .look__name { font-size: clamp(1.25rem, 1.7vw, 1.75rem); }
  .look__item--1 .look__name, .look__item--8 .look__name { font-size: clamp(1.75rem, 2.8vw, 2.75rem); }
  .look__meta { color: rgb(244 244 246 / .78); }
  .look__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .875rem; font-weight: 600;
    opacity: 0; transform: translateY(6px); transition: opacity 250ms var(--ease), transform 250ms var(--ease-out); }
  .look__cta .ic { width: 16px; height: 16px; }
  .look__item:hover .look__cta, .look__item:focus-visible .look__cta { opacity: 1; transform: none; }
  .look__item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
}
@media (hover: hover) and (min-width: 900px) {
  .look__item:hover .look__img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .look__img, .look__cta { transition: none; }
  .look__item:hover .look__img { transform: none; }
}
/* Acceso al viaje inmersivo /viaje-trends/: link junto al titulo + tarjeta (isla oscura en ambos temas) */
.look__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.look__voyage { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 600; color: var(--accent-text, var(--accent)); text-decoration: none; }
.look__voyage .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.look__voyage:hover { text-decoration: underline; text-underline-offset: 3px; }
.voyage { position: relative; isolation: isolate; display: flex; align-items: flex-end; margin-top: 24px; min-height: 420px; overflow: hidden;
  border-radius: var(--radius); background: #0B0B0F; color: #F4F4F6; text-decoration: none; }
.voyage picture, .voyage__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2;
  transition: transform 900ms var(--ease-out); }
.voyage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(11 11 15 / 0) 30%, rgb(11 11 15 / .86) 100%); }
.voyage__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 3vw, 40px); max-width: 640px; }
.voyage__kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #19E3FF; }
.voyage__title { font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.voyage__btn { margin-top: 6px; background: #19E3FF; color: #06252B; }
.voyage__btn .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.voyage:focus-visible { outline: 2px solid var(--accent-text, var(--accent)); outline-offset: 3px; }
@media (min-width: 768px) { .voyage { min-height: 380px; margin-top: 32px; } }
@media (hover: hover) and (min-width: 900px) { .voyage:hover .voyage__img { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .voyage__img { transition: none; } .voyage:hover .voyage__img { transform: none; } }