/* ==========================================================================
   LNY · páginas interiores · PROTOTIPO v1 (maqueta estática, no es Liquid)

   TOKENS copiados de snippets/css-variables.liquid (origen). Los valores de
   paleta son los `default` de config/settings_schema.json (settings.*).
   Si el theme cambia, esto es lo que hay que resincronizar; el resto del
   archivo solo consume var(--token).

   Explorer: UN solo peso (400). Sin negritas sobre display, sin mayúsculas
   condensadas, sin cursor personalizado (reglas cerradas del proyecto).
   ========================================================================== */

@font-face {
  font-family: 'Explorer';
  src: url('../../../assets/Explorer-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* 1. PRIMITIVOS (settings_schema defaults) */
  --color-background: #EFDBB2;       /* crema de marca */
  --color-foreground: #56192B;       /* tinta */
  --color-accent: #651D32;           /* granate */
  --color-highlight: #F8AC67;        /* naranja suave */
  --color-background-alt: #FDFBF7;   /* blanco roto = superficie por defecto */
  --color-cta: #FF894E;              /* naranja CTA */
  --color-cream-soft: #FAF4E8;
  --color-inverse: #ffffff;
  --font-display--family: 'Explorer', ui-sans-serif, system-ui, sans-serif;
  --font-primary--family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --page-width: 1280px;
  --page-margin: 40px;

  /* 2. SEMÁNTICOS (derivados con color-mix, igual que el theme) */
  --color-hairline: color-mix(in srgb, var(--color-accent) 20%, transparent);
  --color-hairline-inverse: color-mix(in srgb, var(--color-background) 25%, transparent);
  --color-on-light-muted: color-mix(in srgb, var(--color-foreground) 72%, var(--color-background));
  --color-text: var(--color-foreground);
  --color-text-inverse: var(--color-background);
  --color-text-muted: var(--color-on-light-muted);
  --color-outline: var(--color-accent);

  /* 3. ESCALAS */
  --shadow-hard: 0 4px 0 var(--color-outline);
  --radius-pill: 999px;
  --radius-sm: 6px;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --spacing-4: .25rem; --spacing-8: .5rem; --spacing-12: .75rem; --spacing-16: 1rem;
  --spacing-24: 1.5rem; --spacing-32: 2rem; --spacing-40: 2.5rem; --spacing-48: 3rem;
  --spacing-64: 4rem; --spacing-80: 5rem; --spacing-96: 6rem; --spacing-120: 7.5rem;
  --font-size-display-xl: clamp(2rem, 1.256rem + 3.05vw, 4rem);
  --font-size-display-lg: clamp(1.75rem, 1.19rem + 2.29vw, 3rem);
  --font-size-display-md: clamp(1.625rem, 1.207rem + 1.71vw, 2.75rem);
  --font-size-body: 1rem;
  --font-size-body-lg: 1.125rem;
  --line-height-display: 1.2;
  --line-height-body: 1.5;
  --font-size-eyebrow: .8125rem;
  --letter-spacing-eyebrow: .14em;
  --border-frame-thin: 4px;
  --border-frame-thick: 8px;

  /* 4. APLICADOS */
  --section-padding-md: clamp(var(--spacing-48), 7vw, var(--spacing-80));
  --section-padding-lg: clamp(var(--spacing-64), 10vw, var(--spacing-120));
  --motion-duration-200: 200ms;
  --motion-duration-600: 600ms;
  --motion-duration-1000: 1000ms;
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion-marquee-duration: 30s;

  /* Solo del prototipo (derivados, no tokens del theme) */
  --gutter: clamp(20px, 4vw, var(--page-margin));
  --ink: var(--color-text);
  --line: var(--color-hairline);
  --mk: var(--color-cta);
  --frame: var(--color-accent);
  --frame-shadow: var(--color-accent);
  --btn-line: var(--color-accent);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-background-alt);
  color: var(--color-text);
  font-family: var(--font-primary--family);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
strong { font-weight: 700; }
/* La palabra destacada (<em> del template) va sobre un rotulador, no en cursiva sola */
em {
  font-style: italic;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--color-highlight) 75%, transparent) 58%);
  padding-inline: .06em;
}
.sf-accent em, .sf-cta em { background: none; text-decoration: underline; text-decoration-color: var(--mk); text-decoration-thickness: .12em; text-underline-offset: .12em; }
.wrap { max-width: var(--page-width); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--section-padding-lg); }
.sec--md { padding-block: var(--section-padding-md); }
.eyebrow {
  font-size: var(--font-size-eyebrow);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Superficies (equivalen a section-surface del theme) */
.sf-paper  { background: var(--color-background-alt); }
.sf-soft   { background: var(--color-cream-soft); }
.sf-cream  { background: var(--color-background); }
.sf-accent {
  background: var(--color-accent);
  --ink: var(--color-background);
  --line: var(--color-hairline-inverse);
  --frame: var(--color-background);
  --frame-shadow: var(--color-highlight);
  --btn-line: var(--color-background);
  color: var(--ink);
}
.sf-accent .eyebrow { color: color-mix(in srgb, var(--color-background) 78%, var(--color-accent)); }
.sf-cta {
  background: var(--color-cta);
  --mk: var(--color-accent);
  --frame-shadow: var(--color-accent);
}
.sf-cta .eyebrow { color: var(--color-foreground); }

/* ---------- tipografía display ---------- */
.giant {
  font-family: var(--font-display--family);
  font-weight: 400;
  font-size: clamp(3.3rem, 12.4vw, 12rem);
  line-height: .98;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.giant--md { font-size: clamp(2.9rem, 9.4vw, 9rem); }
.giant--sm { font-size: clamp(2.6rem, 8vw, 7rem); }
.giant .ln, .fq__text .ln { display: block; }
.h2 {
  font-family: var(--font-display--family);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 4.25rem);
  line-height: 1.06;
  text-wrap: balance;
}
.h3 { font-family: var(--font-display--family); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.1; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.5; max-width: 40rem; }
.prose p + p { margin-top: 1.1em; }
.prose { max-width: 38rem; }

/* ---------- botón (pastilla con sombra dura) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.6em;
  background: var(--color-cta);
  color: var(--color-foreground);
  border: 2px solid var(--btn-line);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 var(--btn-line);
  font: 600 1rem/1 var(--font-primary--family);
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform var(--motion-duration-200) var(--motion-ease-out), box-shadow var(--motion-duration-200) var(--motion-ease-out);
}
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--btn-line); }
.btn--round { width: 4.5rem; height: 4.5rem; padding: 0; justify-content: center; }
.btn img { width: 1.5rem; height: 1.5rem; }

/* ---------- marcos con sombra dura (page-story) ---------- */
.frame { position: relative; isolation: isolate; }
.frame::after {
  content: ''; position: absolute; z-index: -1;
  inset: var(--spacing-12) var(--spacing-12) calc(var(--spacing-12) * -1) calc(var(--spacing-12) * -1);
  border-radius: var(--fr, var(--radius-lg));
  background: var(--frame-shadow);
}
.frame > img {
  width: 100%; height: 100%; object-fit: cover;
  border: var(--border-frame-thin) solid var(--frame);
  border-radius: var(--fr, var(--radius-lg));
  background: var(--color-cream-soft);
}

/* ---------- cabecera / pie de maqueta ---------- */
.mast { background: var(--color-background); position: relative; z-index: 20; }
.mast__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 14px; }
.mast__brand { font-family: var(--font-display--family); font-size: 1.9rem; text-decoration: none; line-height: 1; color: var(--color-accent); }
.mast__nav { display: flex; gap: 1.4rem; font-size: .95rem; font-weight: 600; }
.mast__nav a { text-decoration: none; padding-block: .3rem; border-bottom: 2px solid transparent; }
.mast__nav a:hover, .mast__nav a[aria-current] { border-bottom-color: var(--color-cta); }
@media (max-width: 989px) { .mast__nav { display: none; } .mast__in { justify-content: center; } }
.foot { background: var(--color-accent); color: var(--color-background); overflow: hidden; padding-top: var(--spacing-64); }
.foot__nav { display: flex; flex-wrap: wrap; gap: .8rem 2rem; font-weight: 600; padding-bottom: var(--spacing-32); }
.foot__nav a { text-decoration: underline; text-underline-offset: 4px; }
.foot__word { font-family: var(--font-display--family); font-size: 12.4vw; line-height: .8; white-space: nowrap; margin: 0 0 .12em; text-align: center; }
.foot__legal { font-size: .8rem; opacity: .8; padding-block: 1rem; }

/* ---------- motion (CSS + IntersectionObserver). Todo bajo .motion ---------- */
.motion [data-r], .motion .ln {
  opacity: 0; transform: translateY(.45em);
  transition: opacity var(--motion-duration-1000) var(--motion-ease-out), transform var(--motion-duration-1000) var(--motion-ease-out);
  transition-delay: calc(var(--i, 0) * 130ms + var(--d, 0ms));
}
.motion [data-r] { transform: translateY(28px); }
.motion .is-in [data-r], .motion [data-r].is-in, .motion .is-in .ln, .motion .ln.is-in { opacity: 1; transform: none; }
.giant .ln:nth-child(2) { --i: 1; } .giant .ln:nth-child(3) { --i: 2; } .giant .ln:nth-child(4) { --i: 3; }

/* Marcas de rotulador (mismo vocabulario que .mk del theme) */
.mk { position: relative; display: inline-block; white-space: nowrap; }
.mk svg { position: absolute; overflow: visible; pointer-events: none; }
.mk svg path { fill: none; stroke: var(--mk); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mk-circle { padding-inline: .3em; margin-inline: -.3em; }
.mk-circle svg { inset: -.14em 0; width: 100%; height: calc(100% + .28em); }
.mk-circle svg path { stroke-width: 5px; }
.mk-underline svg { inset: auto -3% -.16em -3%; width: 106%; height: .26em; }
.mk-underline svg path { stroke-width: 6px; }
.mk-strike svg { inset: 46% -4% auto -4%; width: 108%; height: .28em; }
.mk-strike svg path { stroke-width: 6px; }
.mk-strike { --mk: var(--color-accent); }
.motion .mk svg { clip-path: inset(-30% 101% -30% -10%); transition: clip-path 1s var(--motion-ease-in-out); transition-delay: calc(var(--i, 1) * 130ms + 700ms); }
.motion .is-in .mk svg, .motion .mk.is-in svg { clip-path: inset(-30% -10% -30% -10%); }

/* Rotulador para frases que hacen salto de línea: barrido de fondo */
.hl {
  background: linear-gradient(color-mix(in srgb, var(--color-highlight) 80%, transparent), color-mix(in srgb, var(--color-highlight) 80%, transparent)) 0 88% / 100% .42em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  font-weight: 700;
}
.sf-cta .hl { background-image: linear-gradient(var(--color-background), var(--color-background)); }
.motion .hl { background-size: 0% .42em; transition: background-size 1.1s var(--motion-ease-in-out) .5s; }
.motion .is-in .hl, .motion .hl.is-in { background-size: 100% .42em; }

/* Foto insertada en la frase (Adcker, con las formas de marca) */
.ip {
  display: inline-block; vertical-align: -.06em;
  width: 1.7em; height: .8em; margin-inline: .06em;
  border: 4px solid var(--color-accent); border-radius: var(--radius-pill);
  box-shadow: 4px 5px 0 var(--color-accent);
  overflow: hidden; transform: rotate(-3deg);
}
.ip img { width: 100%; height: 100%; object-fit: cover; }
.motion .ip { width: 0; margin-inline: 0; border-width: 0; transition: width 1s var(--motion-ease-out) .5s, margin .8s .5s, border-width .1s .5s; }
.motion .is-in .ip, .motion .ip.is-in { width: 1.7em; margin-inline: .06em; border-width: 4px; }

/* Palabra a palabra (manifiesto): se ilumina al pasar por el centro */
.motion [data-words] .w { opacity: .3; transition: opacity .35s linear; }
.motion [data-words] .w.on { opacity: 1; }

/* Ticker */
.ticker { overflow: hidden; border-block: 2px solid var(--line); padding-block: .5em; white-space: nowrap; }
.ticker__track { display: inline-flex; width: max-content; }
.ticker__set { display: inline-flex; align-items: center; flex: none; }
.ticker__set > * { padding-inline: .5em; }
.ticker--big { font-family: var(--font-display--family); font-size: clamp(3rem, 8vw, 7.5rem); line-height: 1.05; }
.ticker__dot { width: .38em; height: .38em; flex: none; background: currentColor; border-radius: 50%; padding: 0 !important; margin-inline: .35em; }
.ticker__flower { width: 1em; height: 1em; flex: none; }
.motion .ticker__track { animation: tick var(--motion-marquee-duration) linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker--static .ticker__track { animation: none !important; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none !important; } .ticker { white-space: normal; } .ticker__track { width: auto; flex-wrap: wrap; } .ticker__set[aria-hidden] { display: none; } }

/* Pegatinas flotantes */
.stk { position: absolute; pointer-events: none; will-change: transform; }
.stk img { width: 100%; height: auto; }
.motion .stk { animation: bob 7s ease-in-out infinite; }
.stk--2 { animation-delay: -2.5s !important; } .stk--3 { animation-delay: -4.5s !important; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(4deg); } }
.spin { animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin, .stk { animation: none !important; } }

/* Cita a pantalla completa */
.fq {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center; justify-items: center; text-align: center;
  position: relative; overflow: hidden;
  padding: var(--section-padding-md) var(--gutter);
}
.fq__inner { position: relative; z-index: 2; max-width: 22ch; max-width: 1180px; }
.fq__kicker { font-family: var(--font-display--family); font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.fq__intro { max-width: 34rem; margin: 0 auto 2.5rem; }
.fq__text {
  font-family: var(--font-display--family); font-weight: 400;
  font-size: clamp(2.35rem, 6.4vw, 6.4rem); line-height: 1.06; text-wrap: balance;
}
.fq__text em { font-style: normal; }
.fq__glyph {
  position: absolute; z-index: 1; top: -.05em; left: 3vw;
  font-family: var(--font-display--family); font-size: clamp(14rem, 34vw, 32rem); line-height: 1; opacity: .13; pointer-events: none;
}
.fq__art { position: absolute; z-index: 1; pointer-events: none; }

/* Cifras */
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.fig { border-top: 2px solid var(--line); padding-top: 1.25rem; }
.fig__n { font-family: var(--font-display--family); font-size: clamp(4.5rem, 12vw, 11rem); line-height: .95; display: block; white-space: nowrap; }
.fig__l { font-size: clamp(1.15rem, 1.8vw, 1.5rem); max-width: 18em; display: block; margin-top: .5rem; }
@media (max-width: 749px) { .figs { grid-template-columns: 1fr; } }

/* Burbuja numerada (Fishwife) */
.bub {
  display: inline-grid; place-items: center; flex: none;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--color-cta); color: var(--color-foreground);
  border: 2px solid var(--color-accent); box-shadow: 3px 4px 0 var(--color-accent);
  font-family: var(--font-display--family); font-size: 1.75rem; line-height: 1;
}
.bub-label { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }

/* Lista numerada con vista previa al hover (móvil: acordeón) */
.hl-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.hl__list { list-style: none; margin: 0; padding: 0; }
.hl__item { border-top: 2px solid var(--line); }
.hl__item:last-child { border-bottom: 2px solid var(--line); }
.hl__btn {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 1.25rem;
  padding-block: 1.6rem 0.4rem;
  font-family: var(--font-display--family); font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.1;
  transition: opacity var(--motion-duration-600), transform var(--motion-duration-600) var(--motion-ease-out);
}
.hl__btn:focus-visible { outline: 3px solid var(--color-cta); outline-offset: 4px; border-radius: 8px; }
.hl__n { font-size: .5em; letter-spacing: .05em; font-family: var(--font-primary--family); font-weight: 600; opacity: .7; }
.hl__plus { display: none; width: 1.4rem; height: 1.4rem; position: relative; align-self: center; }
.hl__plus::before, .hl__plus::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 3px; background: currentColor; border-radius: 3px; transition: transform .3s; }
.hl__plus::after { transform: rotate(90deg); }
.hl__item.is-active .hl__plus::after { transform: rotate(0); }
.hl__body { display: grid; grid-template-rows: 1fr; padding-left: calc(1.25rem + 2.2rem); }
.hl__body > div { overflow: hidden; }
.hl__body p { padding-block: .4rem 1.6rem; max-width: 30rem; }
.hl__inline { display: none; }
.hl__stage { position: sticky; top: 6rem; aspect-ratio: 4 / 5; }
.hl__stage img {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.04);
  transition: opacity var(--motion-duration-600) var(--motion-ease-out), transform 1.2s var(--motion-ease-out);
}
.hl__stage img.is-active { opacity: 1; transform: none; }
@media (min-width: 990px) {
  .hl__list:has(.is-active) .hl__item:not(.is-active) .hl__btn { opacity: .42; }
  .hl__item.is-active .hl__btn { transform: translateX(10px); }
}
@media (max-width: 989px) {
  .hl-wrap { grid-template-columns: 1fr; }
  .hl__stage { display: none; }
  .hl__plus { display: block; }
  .hl__btn { padding-block: 1.3rem 1.3rem; }
  .hl__body { grid-template-rows: 0fr; padding-left: 0; transition: grid-template-rows .45s var(--motion-ease-out); }
  .hl__item.is-active .hl__body { grid-template-rows: 1fr; }
  .hl__body p { padding-top: 0; }
  .hl__inline { display: block; margin: .25rem 12px 1.6rem 0; aspect-ratio: 4 / 3; }
  .hl__inline img { width: 100%; height: 100%; object-fit: cover; border: var(--border-frame-thin) solid var(--frame); border-radius: var(--radius-lg); }
}

/* Sticky-scroll de pasos (solo Club) */
.steps { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.steps__pin { position: sticky; top: 5rem; }
.steps__count { font-family: var(--font-display--family); font-size: clamp(7rem, 16vw, 15rem); line-height: .9; display: block; margin-top: 1.5rem; }
.steps__count small { font-size: .28em; opacity: .55; }
.steps__phase { font-family: var(--font-display--family); font-size: clamp(1.8rem, 3.2vw, 3rem); margin-top: 1rem; }
.steps__bar { display: flex; gap: .5rem; margin-top: 1.5rem; }
.steps__bar i { flex: 1; height: 8px; border-radius: 8px; background: var(--line); transition: background .4s; }
.steps__bar i.on { background: var(--color-cta); }
.step { min-height: 78vh; display: flex; align-items: center; }
.step__card {
  width: 100%; background: var(--color-background-alt); color: var(--color-foreground);
  border: 3px solid var(--color-accent); border-radius: var(--radius-lg); box-shadow: -8px 8px 0 var(--color-accent);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  transition: transform .6s var(--motion-ease-out), opacity .6s;
}
.motion .step:not(.on) .step__card { opacity: .55; transform: scale(.97); }
.step__row + .step__row { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 2px dashed var(--color-hairline); }
.step__n { font-family: var(--font-display--family); font-size: clamp(4rem, 8vw, 7.5rem); line-height: 1; display: block; }
.step__l { font-size: 1.25rem; max-width: 22em; display: block; }
.step--redeem .step__card { background: var(--color-cta); }
@media (max-width: 989px) {
  .steps { grid-template-columns: 1fr; }
  .steps__pin { position: sticky; top: 0; z-index: 5; background: var(--color-background); margin-inline: calc(var(--gutter) * -1); padding: 1rem var(--gutter); border-bottom: 2px solid var(--line); }
  .steps__count { font-size: 3.6rem; display: inline-block; margin: 0 .75rem 0 0; vertical-align: middle; }
  .steps__phase { display: inline-block; margin: 0; vertical-align: middle; font-size: 1.6rem; }
  .steps__title, .steps__pin .eyebrow { display: none; }
  .steps__bar { margin-top: .75rem; }
  .step { min-height: 0; padding-block: 1rem; }
}

/* Foto anotada (Graza) */
.anno { display: grid; grid-template-columns: 1fr minmax(260px, 400px) 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: stretch; }
.anno__col { display: flex; flex-direction: column; justify-content: space-around; gap: 2rem; padding-block: 2rem; }
.anno__note { display: flex; align-items: center; gap: 1rem; font-family: var(--font-display--family); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.05; position: relative; }
.anno__note .bub { order: 2; }
.anno__note > span:not(.bub) { order: 1; }
.anno__col--l .anno__note { justify-content: flex-end; text-align: right; }
.anno__col--r .anno__note::after { order: -1; }
.anno__col--r .anno__note .bub { order: 1; }
.anno__col--r .anno__note > span:not(.bub) { order: 2; }
.anno__col--l .anno__note::after { order: 3; }
.anno__note::after { content: ''; flex: 1; min-width: 30px; border-top: 3px dashed var(--color-accent); opacity: .6; }
.anno__photo { position: relative; aspect-ratio: 3 / 4; }
.anno__dot { position: absolute; }
@media (max-width: 989px) {
  .anno { grid-template-columns: 1fr; }
  .anno__photo { order: -1; max-width: 340px; margin-inline: auto; }
  .anno__col { padding: 0; gap: 1rem; }
  .anno__col--l .anno__note, .anno__col--r .anno__note { text-align: left; justify-content: flex-start; }
  .anno__note .bub { order: 0 !important; } .anno__note > span:not(.bub) { order: 1 !important; }
  .anno__note::after { display: none; }
  .anno__dot { display: none; }
}

/* Banda con onda */
.wave-top, .wave-bot { display: block; width: 100%; height: clamp(24px, 4vw, 56px); color: var(--color-accent); }
.wave-top { margin-bottom: -1px; } .wave-bot { margin-top: -1px; transform: scaleY(-1); }

/* Bloque foto + texto en dos columnas */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--flip > :first-child { order: 2; }
@media (max-width: 989px) { .split { grid-template-columns: 1fr; } .split--flip > :first-child { order: 0; } }

/* Foto a sangre con tarjeta insertada */
.bleed { position: relative; min-height: 88vh; display: grid; align-items: end; overflow: hidden; }
.bleed > img.bleed__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed__card { position: relative; background: var(--color-background-alt); color: var(--color-foreground); border: 3px solid var(--color-accent); border-radius: var(--radius-lg); box-shadow: -10px 10px 0 var(--color-accent); padding: clamp(1.5rem, 3vw, 3rem); max-width: 34rem; margin: 3rem 0; }
@media (max-width: 749px) { .bleed { min-height: 0; } .bleed > img.bleed__img { position: relative; height: 70vw; } .bleed__card { margin: -2.5rem 0 3rem; box-shadow: -6px 6px 0 var(--color-accent); } }

/* Logos retail (solo nombres: no hay logos en assets) */
.chips { display: flex; flex-wrap: wrap; gap: .75rem; }
.chip { padding: .55em 1.3em; border: 2px solid var(--color-accent); border-radius: var(--radius-pill); box-shadow: 0 4px 0 var(--color-accent); background: var(--color-background-alt); font-weight: 600; }

/* Hero con pegatinas / cabeceras */
.hero { position: relative; overflow: hidden; }
.hero__sub { margin-top: clamp(1.5rem, 3vw, 3rem); }

.mov-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 989px) { .mov-grid { grid-template-columns: 1fr; } .mov-side { position: static !important; } }

/* Móvil: las pegatinas no tapan el titular; una sola, abajo a la derecha */
@media (max-width: 749px) {
  .hero .stk--2, .hero .stk--3 { display: none; }
  .hero .stk--1 { top: auto !important; left: auto !important; right: 1rem !important; bottom: .75rem; width: 64px !important; }
  .hero { padding-bottom: 6rem; }
}