/* SEBAX-DROP — tienda v3: negro carbón, lima como acento, brasa y ámbar a cuentagotas.
   One family (Archivo variable): width is the expressive axis. Expanded for
   poster headlines, condensed for prices, normal for reading. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --asfalto: #0e0e10;
  --concreto: #1d1d21;
  --panel: #151518;
  --linea: rgba(242, 241, 238, 0.13);
  --cromo: #f2f1ee;
  --suave: #a4a39d;
  --neon: #c6ff1a;
  --neon-tinta: #141a00;
  --neon-glow: 0 8px 26px -10px rgba(198, 255, 26, 0.6);
  --oro: #f2b648;
  --brasa: #ff4d1a;
  --fuego: #ff7a1a;
  --esmeralda: #12a37a;
  --vitrina: #f4f3ef;
  --tinta: #111113;

  --radius-s: 6px;
  --bar-h: 72px;
  --radius-m: 8px;
  --radius-l: 12px;
  --gutter: clamp(16px, 4.5vw, 40px);
  --max: 1240px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--cromo);
  background-color: var(--asfalto);
  /* concrete grain: a tiny tiled noise keeps the dark from reading as flat black */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg use { fill: currentColor; stroke: none; }
svg .fill { fill: currentColor; stroke: none; }

:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; bottom: 12px; z-index: 50; padding: 12px 18px; background: var(--neon); color: var(--neon-tinta); font-weight: 700; border-radius: var(--radius-s); text-decoration: none; transform: translateY(calc(100% + 24px)); }
.skip:focus { transform: none; }

/* ---------- type ---------- */

.section-title {
  font-stretch: 118%;
  font-weight: 820;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(28px, 7vw, 48px);
  margin: 0 0 12px;
  text-wrap: balance;
}

.section-sub { color: var(--suave); margin: 0 0 22px; max-width: 56ch; }

.price {
  font-stretch: 72%;
  font-weight: 800;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border-radius: var(--radius-m); border: 1.5px solid transparent;
  font-weight: 800; font-stretch: 110%; font-size: 16.5px; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--ease-out), background-color 0.18s, border-color 0.18s;
}
.btn:active { transform: scale(0.97); }
.btn-solid {
  background: radial-gradient(130% 160% at 50% -20%, #e6ff8a 0%, var(--neon) 48%, #a6dc00 100%);
  color: var(--neon-tinta);
  box-shadow: 0 10px 32px -10px rgba(198, 255, 26, 0.65), 0 0 0 1px rgba(198, 255, 26, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-solid:hover { background: radial-gradient(130% 160% at 50% -20%, #f0ffb0 0%, #d4ff52 50%, #b4e81a 100%); }
.btn-solid:disabled { background: var(--concreto); color: var(--suave); box-shadow: none; cursor: progress; }
.btn-line {
  border-color: rgba(242, 241, 238, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025));
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 26px -14px rgba(0, 0, 0, 0.9);
}
.btn-line:hover { border-color: rgba(242, 241, 238, 0.35); background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04)); }
.btn svg { font-size: 22px; }

/* ---------- top bar ---------- */

/* The bar has no hard edge: its blurred backdrop fades out downwards, so the
   logo and buttons sit inside the page instead of on a strip. */
.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px var(--gutter) 14px;
  padding-top: max(8px, env(safe-area-inset-top));
  min-height: var(--bar-h);
}
.bar::before {
  content: ""; position: absolute; inset: 0 0 -26px; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 14, 16, 0.92) 0%, rgba(14, 14, 16, 0.86) 70%, rgba(14, 14, 16, 0) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent);
  mask-image: linear-gradient(180deg, #000 74%, transparent);
  pointer-events: none;
}
.bar-logo { position: relative; display: block; }
/* Warm light behind the wordmark, as if the stage spotlight reached it. */
.bar-logo::before {
  content: ""; position: absolute; inset: -45% -35%; z-index: -1;
  background: radial-gradient(closest-side, rgba(242, 182, 72, 0.26), rgba(255, 122, 26, 0.08) 55%, transparent);
  filter: blur(6px); pointer-events: none;
}
/* SEBAX-DROP on one line in chrome; the ends fade into the page. */
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; white-space: nowrap; line-height: 1;
  font-size: clamp(21px, 6vw, 25px); font-weight: 900; font-stretch: 112%; letter-spacing: -0.005em;
}
.wordmark span {
  background: linear-gradient(180deg, #ffffff 0%, #d3d6db 40%, #6b6f78 52%, #eceef1 76%, #9aa0a8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(242, 182, 72, 0.2));
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55), #000 18%, #000 82%, rgba(0, 0, 0, 0.55));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55), #000 18%, #000 82%, rgba(0, 0, 0, 0.55));
}
.wordmark em { font-style: normal; color: var(--neon); -webkit-text-fill-color: var(--neon); text-shadow: 0 0 12px rgba(198, 255, 26, 0.7); }
.bar-logo img {
  width: 112px; height: auto;
  filter: drop-shadow(0 0 18px rgba(242, 182, 72, 0.22));
}
.bar-actions { display: flex; align-items: center; gap: 8px; }
/* No box: each control is a soft pool of light with no edge. */
.bar-list, .bar-bag, .bar-wa {
  border-radius: 999px; border: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0) 100%);
  /* no backdrop-filter of their own: they already sit on the bar's blurred backdrop */
  transition: background 0.2s, transform 0.18s var(--ease-out);
}
.bar-list:hover, .bar-bag:hover { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0) 100%); }
.bar-list:active, .bar-bag:active, .bar-wa:active { transform: scale(0.94); }
.bar-list, .bar-bag {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; min-height: 48px; padding: 0 12px;
  font-weight: 750; font-stretch: 105%; cursor: pointer;
}
.bar-list svg, .bar-bag svg { font-size: 21px; }
.bar-list.has-items svg { fill: var(--brasa); stroke: var(--brasa); }
.bar-list .count, .bar-bag .count {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  display: none; place-items: center;
  font-size: 12.5px; font-weight: 850; font-stretch: 90%;
}
.bar-list.has-items .count { display: inline-grid; background: var(--cromo); color: var(--tinta); }
.bar-bag.has-items .count { display: inline-grid; background: var(--neon); color: var(--neon-tinta); }
.bar-bag-label { display: none; }
@media (min-width: 420px) {
  .bar-bag { padding: 0 18px; }
  .bar-bag-label { display: inline; }
  .bar-bag .count { position: static; display: inline-grid; background: rgba(255, 255, 255, 0.12); }
}
.bar-wa {
  display: grid; place-items: center; width: 48px; height: 48px; color: var(--neon);
  background: radial-gradient(closest-side, rgba(198, 255, 26, 0.3), rgba(198, 255, 26, 0.08) 60%, rgba(198, 255, 26, 0) 100%);
  filter: drop-shadow(0 0 10px rgba(198, 255, 26, 0.35));
}
.bar-wa:hover { background: radial-gradient(closest-side, rgba(198, 255, 26, 0.42), rgba(198, 255, 26, 0.12) 60%, rgba(198, 255, 26, 0) 100%); }
.bar-wa svg { font-size: 24px; }

/* ---------- portada: escenario ---------- */
/* One lit product at a time, stories-style. The bottle is a cut-out of the
   real catalog photo; its tone colours the light behind it. */

.stage {
  --tone: #f2b648;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 14px;
  padding: 14px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 34px;
  background: #0b0b0d;
}
/* The stage starts under the bar so the bar floats on the lit wall instead of
   sitting on a separate strip. */
main > .stage:first-child {
  margin-top: calc(-1 * var(--bar-h));
  padding-top: calc(14px + var(--bar-h));
}
/* the brand wall, deliberately out of focus like a shallow depth-of-field shot.
   A 72px thumbnail is enough once blurred, and it never competes as the LCP. */
.stage-bg {
  position: absolute; inset: -40px; z-index: -2;
  background: url("data:image/webp;base64,UklGRmYCAABXRUJQVlA4IFoCAAAQDQCdASpIACgAPt1iqE8opaOiKJgNERAbiUAZSDhcqSeV8GNMw0yZDo844SluNp8OR6duoiNIfXSjp1cvfIUZAnsGQ7ULnRiGmrhcSw24EfT0c6A65hTm933GheOe75UJD/L5BjUqtmRRp5bV0VAa8AD+7sq8Sl6392aYwgXxjH+HQFT2YgBHPYnsAuxXUdshOlbITTDKw6igm38KMr09WXkI7/ux6FB4XKR+J3wfL3sIAzj7R8I6ocfM7NNujxMJj7N0NUDuRDMD0q328Y+zL2yh9h19WUJTwPoBGLykLcVB6ttGhqw2CjHeVzXlhT3fW6ueUV3BqBUKtnMUBU4o46HKzNi2co3CeGDxCRHK+4ViGlhgC6VwWSljKOG9A6bgX2/u4hkgMLqyeTcyaDRYuI5TnswqMqMUx7coRxtBPAepUphA1Cyt9ohmhMmPt+Rsrg4mWW3yP6Ry2L6/RMH8MEF35O2zRm6WZk/2ZMSpc6DXBauaEK9qY32EtfKjd8XdYw/cze7rvjBM1BqySA3MyTeS0kqVoK+hO0heUyJYH3SszLbZhw8dS23bTWd5cY4p2nlslWg8FiBC3tfmU91wL3s37zFJwmKk93lhFbTidhtM6pIZEo+WywA8OUmY1PmHK4R3zzuc5/KQhKjX9lUzAFqs4wg2TUJeBBKfANyCXPC6Lo7lSa4FuvkIFgNolLGM70+3eYbdVg2Praf67pJ6+CbiMPpIlYdQxowGDCFbkaaIHeXem5p2VpkC2rVn2yeD4gSGvREBm9JOaGWQfrN640b7hzM/wIAAAA==") center 18% / cover no-repeat;
  filter: blur(14px) brightness(0.5) saturate(0.8);
}
.stage-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, 0.4), #0b0b0d 86%); }
/* melt the darker stage into the page colour instead of ending on a hard edge */
.stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: -1; background: linear-gradient(180deg, transparent, var(--asfalto)); pointer-events: none; }

/* mobile reads title → scene → facts → actions; desktop puts copy beside the scene */
.stage-copy { display: contents; }
.stage-title { order: 1; }
.scene { order: 2; }
.stage-lede { order: 3; }
.stage-actions { order: 4; }
.stage-title {
  margin: 0;
  font-stretch: 125%; font-weight: 880; letter-spacing: -0.03em; line-height: 0.92;
  font-size: clamp(34px, 9vw, 84px);
  text-wrap: balance;
}
.stage-lede { margin: 0; color: var(--suave); max-width: 44ch; }
.stage-lede strong { color: var(--cromo); }
.stage-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stage-actions .btn { flex: 1 1 100%; }
@media (min-width: 520px) { .stage-actions .btn { flex: 1 1 0; } }

.scene {
  position: relative;
  height: clamp(470px, 70svh, 640px);
  margin: 0 calc(-1 * var(--gutter));
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}

/* stories-style progress */
.scene-progress {
  position: absolute; z-index: 6; top: 4px; left: var(--gutter); right: calc(var(--gutter) + 52px);
  display: flex; gap: 6px;
}
.scene-progress span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.scene-progress i { display: block; height: 100%; width: 100%; background: var(--cromo); transform: scaleX(0); transform-origin: left; }
.scene-progress span.done i { transform: none; }
.scene-pause {
  position: absolute; z-index: 7; top: -10px; right: var(--gutter);
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: transparent; display: grid; place-items: center; cursor: pointer;
}
.scene-pause svg { font-size: 18px; }

/* the product's own colour lights the scene from behind; a neutral disc keeps dark bottles legible */
.scene-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(30% 26% at 50% 50%, rgba(255, 244, 225, 0.12), transparent 70%),
    radial-gradient(44% 36% at 50% 50%, color-mix(in oklab, var(--tone) 62%, transparent), transparent 72%),
    radial-gradient(60% 40% at 50% 46%, rgba(255, 122, 26, 0.22), transparent 75%);
  transition: background 0.8s ease;
}
/* warm overhead key light */
.scene-light {
  position: absolute; z-index: 3; left: 50%; top: -12%; width: 140%; height: 100%;
  translate: -50% 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, rgba(255, 220, 160, 0.16) 174deg, rgba(255, 228, 182, 0.26) 180deg, rgba(255, 220, 160, 0.16) 186deg, transparent 198deg);
  mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  mix-blend-mode: screen;
  transition: opacity 0.5s ease;
}
.scene.is-out .scene-light { opacity: 0.25; }
.scene.is-intro .scene-light { animation: lights-up 1.6s 0.1s ease-out both; }
.scene.is-intro .scene-name { animation: name-in 1.4s 0.3s var(--ease-out) both; }
.scene.is-intro .scene-glow { animation: lights-up 1.8s ease-out both; }
@keyframes lights-up { from { opacity: 0; } }
@keyframes name-in { from { opacity: 0; letter-spacing: 0.12em; } }

.scene-name {
  position: absolute; z-index: 1; left: 0; right: 0; top: 11%;
  display: grid; justify-items: center;
  font-stretch: 125%; font-weight: 900; line-height: 0.84; letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 241, 238, 0.18);
  text-align: center; white-space: nowrap; pointer-events: none;
  translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -8px);
  transition: opacity 0.5s ease;
}
.scene.is-out .scene-name { opacity: 0; }

.scene-floor {
  position: absolute; z-index: 1; left: 50%; bottom: 168px;
  width: 120%; height: 34%; translate: -50% 50%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(198, 255, 26, 0.34), rgba(198, 255, 26, 0.08) 55%, transparent),
    radial-gradient(closest-side, #1a1a1d, #0e0e10 70%, transparent);
  pointer-events: none;
}

.scene-product {
  position: absolute; z-index: 4; left: 50%; bottom: 168px;
  width: min(76%, 470px); height: calc(100% - 168px - 74px);
  translate: calc(-50% + var(--px, 0) * 10px) calc(var(--py, 0) * 6px);
  margin: 0; pointer-events: none;
}
/* bottle, gleam and mirror share one box so the effects line up with the bottle */
.scene-product img {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
}
.scene-product .bottle { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.55)); }
.scene-product .mirror {
  bottom: auto; top: 100%; scale: 1 -1;
  opacity: 0.3; filter: blur(1px);
  mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent 34%);
  -webkit-mask-image: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent 34%);
}
/* specular sweep: a brightened copy of the bottle revealed through a moving band */
.scene-product .gleam {
  filter: brightness(2.4) saturate(0.2);
  mix-blend-mode: screen; opacity: 0;
  mask-image: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%);
  -webkit-mask-image: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%);
  mask-size: 300% 100%; -webkit-mask-size: 300% 100%;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
  mask-position: 100% 0; -webkit-mask-position: 100% 0;
}
.scene.is-in .gleam { animation: gleam 1.4s 0.2s var(--ease-out) both; }
@keyframes gleam {
  0% { opacity: 0.55; mask-position: 100% 0; -webkit-mask-position: 100% 0; }
  100% { opacity: 0.55; mask-position: 0% 0; -webkit-mask-position: 0% 0; }
}

.scene.is-out .scene-product { opacity: 0; translate: -50% 14px; filter: blur(6px); transition: opacity 0.32s ease, translate 0.32s ease, filter 0.32s ease; }
.scene.is-in .scene-product { animation: rise 0.9s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; translate: -50% 34px; scale: 0.95; } }

.scene-tap {
  position: absolute; z-index: 5; top: 40px; bottom: 168px; width: 50%;
  border: 0; background: none; cursor: pointer; padding: 0;
}
.scene-tap:focus-visible { outline-offset: -6px; }
.scene-prev { left: 0; }
.scene-next { right: 0; }

.scene-info {
  position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: 0;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px;
}
.scene-mood { grid-column: 1 / -1; margin: 0; color: var(--tone-text, var(--oro)); font-weight: 650; font-size: 15px; }
.scene-pname { margin: 0; font-stretch: 112%; font-weight: 840; font-size: 22px; line-height: 1.1; }
.scene-info .price { font-size: 30px; color: var(--oro); }
.scene-cta { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.scene-cta .btn { min-height: 48px; font-size: 15.5px; padding: 0 16px; white-space: nowrap; }
.scene-cta .btn-solid { flex: 1 1 auto; }
.scene-cta .btn-line { flex: 0 0 auto; }
.scene-cta .btn svg { font-size: 20px; }
@media (max-width: 359px) { .scene-cta { gap: 6px; } .scene-cta .btn { padding: 0 10px; font-size: 14px; font-stretch: 98%; gap: 6px; } .scene-cta .btn svg { font-size: 17px; } }
.scene.is-out .scene-info { opacity: 0.35; transition: opacity 0.3s; }

@media (min-width: 900px) {
  .stage { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "copy scene"; align-items: center; min-height: min(820px, 90vh); padding-top: 24px; }
  .stage-copy { grid-area: copy; display: grid; gap: 20px; align-content: center; }
  .stage-copy > * { order: 0; }
  .scene { grid-area: scene; height: min(700px, 80vh); margin: 0; }
  .stage-bg::after { background: linear-gradient(90deg, #0b0b0d 18%, rgba(11, 11, 13, 0.45) 60%, rgba(11, 11, 13, 0.7)); }
  .scene-progress { left: 0; right: 52px; }
  .scene-pause { right: 0; }
  .scene-info { left: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scene.is-in .scene-product, .scene.is-in .gleam, .scene.is-intro * { animation: none !important; }
  .scene-product, .scene-name { translate: -50% 0; }
  .scene-name { translate: none; }
}

/* ---------- trust ---------- */

.trust {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  display: grid; gap: 14px;
}
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item svg {
  font-size: 22px; color: var(--neon);
  width: 42px; height: 42px; padding: 10px; border-radius: 12px;
  background: rgba(198, 255, 26, 0.07);
}
.trust-item p { margin: 0; color: var(--suave); font-size: 16px; }
.trust-item strong { color: var(--cromo); display: block; }

/* ---------- planes ---------- */

.planes, .catalogo, .destacados, .como, .entregas, .faq, .redes {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
}
/* Below the first screen: the browser skips their layout and paint until they
   get close to the viewport. The intrinsic sizes are the measured content
   heights (phone, then desktop) so the page barely moves when they render;
   "auto" remembers the real size once a section has been shown. */
.planes { content-visibility: auto; contain-intrinsic-size: auto 870px; }
.match-cta { content-visibility: auto; contain-intrinsic-size: auto 540px; }
.destacados { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.como { content-visibility: auto; contain-intrinsic-size: auto 330px; }
.entregas { content-visibility: auto; contain-intrinsic-size: auto 750px; }
.faq { content-visibility: auto; contain-intrinsic-size: auto 1150px; }
.redes { content-visibility: auto; contain-intrinsic-size: auto 370px; }
.pie { content-visibility: auto; contain-intrinsic-size: auto 200px; }
@media (min-width: 900px) {
  .planes { contain-intrinsic-size: auto 455px; }
  .match-cta { contain-intrinsic-size: auto 270px; }
  .destacados { contain-intrinsic-size: auto 520px; }
  .como { contain-intrinsic-size: auto 300px; }
  .entregas { contain-intrinsic-size: auto 590px; }
  .faq { contain-intrinsic-size: auto 1000px; }
  .redes { contain-intrinsic-size: auto 260px; }
  .pie { contain-intrinsic-size: auto 160px; }
}
.planes { padding-bottom: 44px; }
.planes .section-sub { margin-bottom: 16px; }
.planes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .planes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.plan {
  --ac: var(--neon);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: start; justify-items: start; gap: 2px; text-align: left;
  min-height: 150px; padding: 14px 14px 13px;
  border-radius: var(--radius-m); border: 1px solid var(--linea);
  border-bottom: 2px solid var(--ac);
  background:
    radial-gradient(120% 70% at 0% 100%, color-mix(in oklab, var(--ac) 20%, transparent), transparent 62%),
    var(--panel);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s var(--ease-out);
}
.plan[data-accent="brasa"] { --ac: var(--brasa); }
.plan[data-accent="fuego"] { --ac: var(--fuego); }
.plan[data-accent="ambar"] { --ac: var(--oro); }
.plan[data-accent="esmeralda"] { --ac: var(--esmeralda); }
.plan-face {
  width: 58px; aspect-ratio: 1; border-radius: var(--radius-s); overflow: hidden;
  background: var(--vitrina); rotate: -4deg; margin: 0 0 10px 2px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in oklab, var(--ac) 50%, transparent);
}
.plan-face img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.plan b { font-stretch: 112%; font-weight: 880; font-size: clamp(17px, 5vw, 22px); line-height: 1.02; letter-spacing: -0.015em; }
.plan span { color: var(--suave); font-size: 14px; line-height: 1.3; }
.plan em { font-style: normal; font-stretch: 80%; font-weight: 800; font-size: 14px; color: var(--ac); margin-top: 4px; }
@media (max-width: 359px) { .plan { padding-inline: 12px; } .plan b { font-stretch: 100%; } }
@media (hover: hover) { .plan:hover { border-color: color-mix(in oklab, var(--ac) 55%, transparent); border-bottom-color: var(--ac); } }
.plan:active { transform: scale(0.98); }
.plan[aria-pressed="true"] { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac), 0 0 28px -10px var(--ac); }
.plan[aria-pressed="true"] b::after { content: " ✓"; color: var(--ac); }
.plan-sorpresa { border: 1px dashed rgba(198, 255, 26, 0.55); background: var(--panel); }
.plan-sorpresa svg { font-size: 40px; margin: 6px 0 14px; color: var(--neon); stroke-width: 1.5; }
.plan-sorpresa b { color: var(--neon); }

/* ---------- catálogo ---------- */

.catalogo { padding-top: 12px; padding-bottom: 56px; }
.catalogo-head { display: grid; gap: 4px; margin-bottom: 14px; }
.catalogo-note { margin: 0; color: var(--suave); font-size: 15px; max-width: 60ch; }

.tools {
  position: sticky; top: 61px; z-index: 10;
  display: grid; gap: 10px;
  margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 12px;
  background: rgba(14, 14, 16, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}
.search {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 16px; border-radius: var(--radius-m);
  background: var(--concreto); border: 1px solid var(--linea);
}
.search:focus-within { border-color: var(--neon); }
.search svg { font-size: 20px; color: var(--suave); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 16px; }
.search input::placeholder { color: #8d8c87; }

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 40px; padding: 0 16px; border-radius: var(--radius-s);
  border: 1px solid var(--linea); background: transparent; font-weight: 650; cursor: pointer;
}
.chip.active { background: var(--cromo); color: var(--tinta); border-color: var(--cromo); }

.tools-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.result-count { margin: 0; color: var(--suave); font-size: 15px; }
.sort select {
  min-height: 40px; padding: 0 34px 0 14px; border-radius: var(--radius-s);
  border: 1px solid var(--linea); background: var(--concreto); appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.active-plan { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 15px; color: var(--suave); }
.active-plan button { min-height: 36px; padding: 0 12px; border-radius: var(--radius-s); border: 1px solid var(--oro); background: none; color: var(--oro); font-weight: 650; cursor: pointer; }

.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1080px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* contain-intrinsic-size: an upper bound of the real card height, so a card
   that has not rendered yet never overlaps what is below it */
.card { position: relative; display: grid; gap: 8px; content-visibility: auto; contain-intrinsic-size: auto 345px; }
@media (min-width: 720px) { .card { contain-intrinsic-size: auto 380px; } }
@media (min-width: 1024px) { .card { contain-intrinsic-size: auto 440px; } }
.card-open { display: grid; gap: 8px; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--radius-m); }
.card .plate {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-m); overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #ffffff, var(--vitrina) 70%);
}
.card .plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: scale 0.4s var(--ease-out); }
@media (hover: hover) { .card-open:hover .plate img { scale: 1.05; } }
.card .tag {
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(17, 17, 19, 0.86); color: #fff; font-size: 12.5px; font-weight: 650;
}
.card .name { font-stretch: 100%; font-weight: 780; font-size: 16px; line-height: 1.2; margin: 0; }
.card .mood { color: var(--suave); font-size: 14px; line-height: 1.3; margin: 0; }
.card-foot { display: grid; gap: 6px; }
.card .price { font-size: 22px; color: var(--oro); line-height: 1; }
.card-actions { display: flex; gap: 6px; }
/* add to bag straight from the card: the lime CTA; WhatsApp stays as the quiet icon next to it */
.card-add {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: var(--radius-m); cursor: pointer;
  background: radial-gradient(130% 160% at 50% -20%, #e6ff8a 0%, var(--neon) 48%, #a6dc00 100%);
  color: var(--neon-tinta); font-weight: 800; font-stretch: 105%; font-size: 15px; white-space: nowrap;
  box-shadow: 0 8px 22px -10px rgba(198, 255, 26, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.18s var(--ease-out), background 0.18s;
}
.card-add svg { font-size: 19px; stroke-width: 2; }
.card-add:hover { background: radial-gradient(130% 160% at 50% -20%, #f0ffb0 0%, #d4ff52 50%, #b4e81a 100%); }
.card-add:active { transform: scale(0.97); }
.card-add.is-added { background: var(--cromo); box-shadow: none; }
.card .wa {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-m);
  color: var(--neon);
  background: radial-gradient(closest-side, rgba(198, 255, 26, 0.22), rgba(198, 255, 26, 0.06) 70%, transparent), var(--concreto);
  box-shadow: inset 0 0 0 1px rgba(198, 255, 26, 0.35);
}
.card .wa svg { font-size: 22px; }

.heart {
  position: absolute; right: 6px; top: 6px; z-index: 2;
  width: 44px; height: 44px; border-radius: var(--radius-m); border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.88); color: var(--tinta);
}
.heart svg { font-size: 22px; }
.heart[aria-pressed="true"] svg { fill: var(--brasa); stroke: #d93a0c; }
@media (prefers-reduced-motion: no-preference) {
  .heart.pop svg { animation: pop 0.35s var(--ease-out); }
  @keyframes pop { 40% { scale: 1.35; } }
}

.empty { grid-column: 1 / -1; padding: 28px; border-radius: var(--radius-m); border: 1px dashed var(--linea); color: var(--suave); }
.empty button { margin-top: 12px; }
.more { display: flex; margin: 22px auto 0; }

/* ---------- destacados ---------- */

.destacados { padding-bottom: 56px; }
.reel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74%, 300px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel-item {
  scroll-snap-align: start; position: relative;
  aspect-ratio: 4 / 5; border-radius: var(--radius-l); overflow: hidden;
  border: 0; padding: 0; cursor: pointer; background: var(--concreto); text-align: left;
}
.reel-item video, .reel-item img { width: 100%; height: 100%; object-fit: cover; }
.reel-item .reel-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 16px 16px; display: grid; gap: 2px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  color: #fff;
}
.reel-label b { font-stretch: 112%; font-weight: 820; font-size: 21px; }
.reel-label .price { color: var(--oro); font-size: 20px; }

/* ---------- cómo, entregas, faq ---------- */

.como, .entregas, .faq { padding-bottom: 56px; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li {
  counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--radius-m); background: var(--concreto); color: var(--suave);
}
.steps li::before {
  content: counter(step); width: 44px; height: 44px;
  display: grid; place-items: center; background: transparent; color: var(--oro); border: 1.5px solid var(--oro); border-radius: var(--radius-s);
  font-weight: 860; font-stretch: 120%; font-size: 20px;
}
.steps strong { color: var(--cromo); }

.facts { margin: 0; display: grid; gap: 1px; background: var(--linea); border-radius: var(--radius-m); overflow: hidden; }
.facts div { background: var(--asfalto); padding: 16px 18px; }
.facts dt { font-weight: 780; }
.facts dd { margin: 4px 0 0; color: var(--suave); }

.faq-list { display: grid; gap: 8px; }
.faq details { border-radius: var(--radius-m); background: var(--concreto); }
.faq summary {
  list-style: none; cursor: pointer; min-height: 56px; padding: 14px 52px 14px 18px; position: relative;
  font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave);
  translate: 0 -70%; rotate: 45deg; transition: rotate 0.2s;
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 -30%; }
.faq details p { margin: 0; padding: 0 18px 18px; color: var(--suave); }
.faq details a { color: var(--cromo); text-underline-offset: 3px; }
.faq-note { color: var(--suave); font-size: 15px; margin-top: 18px; }

/* ---------- redes y pie ---------- */

.redes { padding-bottom: 56px; }
.redes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .redes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.red {
  display: grid; gap: 2px; padding: 18px; border-radius: var(--radius-m);
  background: var(--concreto); text-decoration: none; min-height: 112px; align-content: end;
}
.red svg { font-size: 26px; margin-bottom: 10px; }
.red span { font-weight: 780; }
.red small { color: var(--suave); font-size: 14px; }
.red-wa { background: var(--panel); box-shadow: inset 0 0 0 1px rgba(198, 255, 26, 0.55); }
.red-wa svg { color: var(--neon); }

.pie {
  border-top: 1px solid var(--linea);
  padding: 36px var(--gutter) calc(110px + env(safe-area-inset-bottom));
  display: grid; justify-items: center; text-align: center; gap: 6px; color: var(--suave);
}
.pie img { width: 120px; height: auto; margin-bottom: 8px; }
.pie p { margin: 0; }
.pie-small { font-size: 14px; }

/* ---------- dock (mi lista) ---------- */

.dock {
  position: fixed; z-index: 30; left: 12px; right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px;
  border-radius: var(--radius-l); background: rgba(21, 21, 24, 0.95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--linea);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  max-width: 520px; margin: 0 auto;
}
.dock[hidden] { display: none; }
.dock-summary { flex: 1; margin: 0; font-weight: 750; font-stretch: 95%; font-size: 15.5px; }
.dock-go {
  min-height: 46px; padding: 0 18px; border: 0; cursor: pointer;
  border-radius: var(--radius-m); background: var(--neon); color: var(--neon-tinta); font-weight: 800; font-stretch: 108%;
}

/* ---------- sheets (ficha, lista, guía) ---------- */

.sheet {
  margin: auto auto 0; padding: 0; border: 0;
  width: 100%; max-width: 640px; max-height: 92dvh;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: var(--asfalto); color: var(--cromo);
  overflow: hidden;
}
@media (min-width: 720px) { .sheet { margin: auto; border-radius: var(--radius-l); } }
.sheet::backdrop { background: rgba(5, 5, 6, 0.72); backdrop-filter: blur(4px); }
.sheet-inner { max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding: 18px var(--gutter) calc(22px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: no-preference) {
  /* slide only: text is never shown at reduced contrast while the sheet opens */
  .sheet[open] { animation: sheet-in 0.36s var(--ease-out); }
  @keyframes sheet-in { from { translate: 0 40px; } }
  .sheet[open]::backdrop { animation: fade 0.3s ease; }
  @keyframes rise { from { translate: 0 40px; opacity: 0; } }
  @keyframes fade { from { opacity: 0; } }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet-title { font-stretch: 118%; font-weight: 820; font-size: 26px; margin: 0; line-height: 1.05; }
.close {
  width: 44px; height: 44px; border-radius: var(--radius-m); border: 1px solid var(--linea);
  background: var(--concreto); display: grid; place-items: center; cursor: pointer; flex: none;
}
.close svg { font-size: 20px; }

.ficha-plate {
  position: relative; aspect-ratio: 1; max-height: 46dvh; margin: 0 auto 16px; border-radius: var(--radius-l); overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #fff, var(--vitrina) 70%);
}
.ficha-plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ficha-plate .heart { right: 12px; top: 12px; }
.ficha-cat { color: var(--suave); font-size: 15px; margin: 0 0 2px; }
.ficha-mood { margin: 6px 0 0; color: var(--oro); font-weight: 650; }
.ficha-moment { margin: 6px 0 0; color: var(--suave); }
.ficha-price { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 4px; }
.ficha-price .price { font-size: 38px; color: var(--oro); }
.ficha-confirm { margin: 0 0 16px; color: var(--suave); font-size: 15px; }
.ficha-actions { display: grid; gap: 10px; }
.ficha-actions .btn { width: 100%; }
.similares h3 { font-stretch: 112%; font-weight: 800; font-size: 19px; margin: 26px 0 10px; }
.similares-row { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.similar { border: 0; padding: 0; background: none; text-align: left; cursor: pointer; display: grid; gap: 6px; }
.similar .plate { aspect-ratio: 1; border-radius: var(--radius-m); overflow: hidden; background: var(--vitrina); }
.similar img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.similar b { font-size: 14.5px; line-height: 1.2; }
.similar .price { font-size: 18px; color: var(--oro); }

.lista-items { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.lista-items li { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 10px; align-items: center; }
.lista-items .plate { width: 56px; height: 56px; border-radius: var(--radius-s); overflow: hidden; background: var(--vitrina); }
.lista-items img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.lista-items b { display: block; line-height: 1.2; }
.lista-items .price { color: var(--oro); font-size: 18px; }
.lista-items button { width: 44px; height: 44px; border-radius: var(--radius-m); border: 1px solid var(--linea); background: none; cursor: pointer; display: grid; place-items: center; }
.lista-empty { color: var(--suave); }

.guia-progress { display: flex; gap: 6px; margin-bottom: 18px; }
.guia-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--concreto); }
.guia-progress span.on { background: var(--neon); }
.guia-q { font-stretch: 112%; font-weight: 800; font-size: 22px; margin: 0 0 14px; }
.guia-options { display: grid; gap: 10px; }
.guia-options button {
  min-height: 56px; padding: 12px 18px; border-radius: var(--radius-m);
  border: 1px solid var(--linea); background: var(--concreto); text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700;
}
.guia-options button span { color: var(--suave); font-weight: 500; font-size: 15px; }
.guia-options button:hover { border-color: var(--neon); }
.guia-back { margin-top: 14px; background: none; border: 0; color: var(--suave); text-decoration: underline; cursor: pointer; min-height: 44px; }
.guia-result-head { color: var(--suave); margin: 0 0 14px; }
.guia-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }

/* ---------- wider screens ---------- */

@media (min-width: 900px) {
  :root { --bar-h: 80px; }
  .wordmark { font-size: 30px; }
  .tools { top: 73px; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; }
  .tools .chips { margin: 0; padding: 0; }
  .trust { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .guia-cta { grid-template-columns: 1fr auto; align-items: center; padding: 40px 48px; }
  .dock { left: auto; right: 24px; bottom: 24px; min-width: 380px; }
}

/* =====================================================================
   Tienda v3
   ===================================================================== */

/* ---------- intro: se prenden las luces ---------- */
/* Shown only when the inline script adds .intro-on (first visit of the day,
   no reduced motion). The page is already rendered underneath; the overlay
   removes itself with CSS at ~1.5 s even without JS. */
.intro { display: none; }
.intro-on .intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  /* not fully opaque: the store is already painted underneath and stays measurable as the LCP */
  background: rgba(5, 5, 6, 0.9); cursor: pointer;
  animation: intro-out 0.32s 1.22s ease-in forwards;
}
.intro-spot {
  position: absolute; top: 0; left: 50%; width: min(520px, 120vw); height: 100%; translate: -50% 0;
  background:
    radial-gradient(38% 26% at 50% 52%, rgba(255, 122, 26, 0.5), rgba(242, 182, 72, 0.16) 48%, transparent 72%),
    linear-gradient(180deg, rgba(255, 244, 225, 0.16), transparent 72%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0;
  animation: spot-on 0.9s 0.1s steps(1, end) forwards;
}
.intro-logo { position: relative; width: 130px; height: auto; opacity: 0; filter: drop-shadow(0 0 26px rgba(255, 122, 26, 0.55)); animation: logo-on 0.5s 0.45s ease-out forwards; }
.intro-line { position: relative; margin: 0; color: var(--suave); font-size: 13px; font-weight: 650; letter-spacing: 0.22em; opacity: 0; animation: logo-on 0.4s 0.7s ease-out forwards; }
.intro-skip {
  position: absolute; right: 18px; bottom: max(22px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 16px; border-radius: var(--radius-m);
  border: 1px solid var(--linea); background: rgba(255, 255, 255, 0.04); color: var(--cromo); font-weight: 700; cursor: pointer;
}
@keyframes spot-on { 0% { opacity: 0; } 30% { opacity: 0.9; } 42% { opacity: 0.15; } 55%, 100% { opacity: 1; } }
@keyframes logo-on { to { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro-on .intro { display: none; } }

/* ---------- drop bar (drop-config.js, off by default) ---------- */
.dropbar {
  grid-column: 1 / -1; order: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-m);
  /* no backdrop-filter: the wall behind it is already a blurred thumbnail */
  background: linear-gradient(90deg, rgba(255, 77, 26, 0.3), rgba(255, 122, 26, 0.06) 60%), rgba(14, 14, 16, 0.6);
  box-shadow: inset 3px 0 0 var(--brasa), 0 14px 30px -18px rgba(255, 77, 26, 0.6);
}
@media (min-width: 900px) {
  .dropbar { grid-area: drop; justify-self: start; width: 100%; max-width: 620px; }
  .stage:has(> .dropbar:not([hidden])) { grid-template-areas: "drop drop" "copy scene"; }
}
.dropbar[hidden] { display: none; }
.dropbar p { margin: 0; }
.dropbar-copy { flex: 1; min-width: 0; }
.dropbar-title { color: var(--fuego); font-weight: 850; font-stretch: 115%; font-size: 14px; }
.dropbar-prod { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropbar-prod .price { color: var(--oro); font-size: 17px; }
.dropbar-clock { display: flex; gap: 3px; font-stretch: 70%; font-weight: 900; font-size: 20px; color: var(--oro); font-variant-numeric: tabular-nums; }
.dropbar-clock { align-items: flex-start; }
.dropbar-clock span { display: grid; justify-items: center; min-width: 32px; background: rgba(0, 0, 0, 0.45); border-radius: 5px; padding: 1px 5px 2px; line-height: 1.1; }
.dropbar-clock span::after { content: attr(data-u); font-size: 8.5px; font-stretch: 100%; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--suave); }
.dropbar-prod { color: var(--suave); }
.dropbar-go { min-height: 40px; padding: 0 14px; font-size: 15px; }
@media (max-width: 380px) {
  .dropbar { gap: 8px; padding: 9px 10px; }
  .dropbar-clock { font-size: 17px; gap: 2px; }
  .dropbar-clock span { min-width: 27px; padding: 1px 3px 2px; }
  .dropbar-title { font-size: 12.5px; }
  .dropbar-prod { font-size: 12.5px; }
  .wordmark { font-size: 18px; font-stretch: 105%; }
  .bar { gap: 6px; }
  .bar-actions { gap: 2px; }
}
.dropbar { min-width: 0; }
.dropbar-title { line-height: 1.2; }
.dropbar-detalle { white-space: normal; line-height: 1.25; margin-top: 2px !important; }
.dropbar-clock { flex: none; }
.dropbar { flex-wrap: wrap; }
.dropbar-time { flex: none; display: grid; justify-items: end; gap: 2px; }
.dropbar-state { font-size: 11px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cromo); }
.dropbar[data-fase="durante"] .dropbar-state { color: var(--neon); }
.dropbar-cond-btn {
  margin-top: 2px; padding: 0; min-height: 24px; border: 0; background: none; cursor: pointer;
  color: var(--cromo); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.dropbar-cond-btn::after { content: " +"; }
.dropbar-cond-btn[aria-expanded="true"]::after { content: " −"; }
.dropbar-cond { flex: 1 1 100%; color: var(--suave); font-size: 13.5px; line-height: 1.4; padding-top: 8px; border-top: 1px solid var(--linea); }
.dropbar-cond[hidden] { display: none; }
/* grid: the title runs the full width, the clock sits beside the detail */
.dropbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 2px; align-items: center; }
.dropbar-copy { display: contents; }
.dropbar-title { grid-column: 1 / -1; }
.dropbar-prod, .dropbar-cond-btn { grid-column: 1; justify-self: start; }
.dropbar-time { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.dropbar-go { grid-column: 3; grid-row: 2 / span 2; }
.dropbar-cond { grid-column: 1 / -1; margin-top: 8px !important; }
@media (max-width: 380px) { .dropbar { column-gap: 8px; } }

/* ---------- match teaser ---------- */
.match-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 22px;
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 var(--gutter) 56px; padding: 26px 20px 0;
  border-radius: var(--radius-l); border: 1px solid var(--linea);
  background:
    radial-gradient(70% 60% at 85% 100%, rgba(255, 122, 26, 0.26), transparent 70%),
    linear-gradient(180deg, #19191c, #0f0f11);
}
@media (min-width: 1240px) { .match-cta { margin-inline: auto; } }
.match-copy { display: grid; gap: 12px; justify-items: start; }
.match-copy .section-title { margin: 0; font-size: clamp(34px, 9vw, 64px); font-stretch: 125%; font-weight: 900; line-height: 0.9; }
.match-copy p { margin: 0; color: var(--suave); max-width: 50ch; }
.match-actions { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.match-actions .btn { flex: 1 1 100%; }
@media (min-width: 520px) { .match-actions .btn { flex: 0 0 auto; } }
.match-fan { position: relative; height: 190px; display: flex; justify-content: center; align-items: flex-end; }
.match-fan span {
  width: 140px; aspect-ratio: 3 / 4; margin: 0 -18px; border-radius: var(--radius-m); overflow: hidden;
  background: var(--vitrina); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.85);
  translate: 0 30px;
}
.match-fan span:nth-child(1) { rotate: -10deg; }
.match-fan span:nth-child(2) { rotate: 0deg; z-index: 2; translate: 0 8px; box-shadow: 0 0 0 2px var(--neon), 0 18px 30px -12px rgba(0, 0, 0, 0.85); }
.match-fan span:nth-child(3) { rotate: 10deg; }
.match-fan img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
@media (min-width: 900px) {
  .match-cta { grid-template-columns: 1.1fr 0.9fr; align-items: center; padding: 44px 48px; }
  .match-fan { height: 260px; }
  .match-fan span { width: 170px; translate: 0 0; }
  .match-fan span:nth-child(2) { translate: 0 -20px; }
}

/* ---------- página legal (politica-de-datos.html) ---------- */
.legal-back { text-decoration: none; font-size: 15px; }
.legal { max-width: 760px; margin: 0 auto; padding: 18px var(--gutter) 56px; }
.legal-kicker { margin: 0 0 8px; color: var(--oro); font-weight: 700; font-size: 14px; }
.legal-title { margin: 0 0 14px; font-stretch: 118%; font-weight: 880; letter-spacing: -0.02em; line-height: 1; font-size: clamp(32px, 8vw, 54px); text-wrap: balance; }
.legal-lede { margin: 0 0 30px; color: var(--suave); font-size: 18px; max-width: 58ch; }
.legal section { padding: 22px 0; border-top: 1px solid var(--linea); }
.legal h2 { margin: 0 0 10px; font-stretch: 112%; font-weight: 820; font-size: 22px; line-height: 1.15; }
.legal p, .legal li { color: var(--suave); max-width: 66ch; }
.legal p { margin: 0 0 10px; }
.legal strong { color: var(--cromo); }
.legal ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.legal li::marker { color: var(--neon); }
.legal a { color: var(--neon); text-underline-offset: 3px; }
.legal-facts { margin: 0; display: grid; gap: 1px; background: var(--linea); border-radius: var(--radius-m); overflow: hidden; }
.legal-facts div { background: var(--panel); padding: 12px 16px; display: grid; gap: 2px; }
.legal-facts dt { color: var(--suave); font-size: 14px; }
.legal-facts dd { margin: 0; font-weight: 700; }
.pie a { color: var(--cromo); text-underline-offset: 3px; }