/* Side On · maqueta E «Mezcla».
   Un solo sistema: la base clara de D1 y D3 (fondo hueso, tinta, rojo solo en la acción principal),
   franjas oscuras a sangre para lo que viene de D2, y una sola familia de movimiento:
   arriba, Ariel responde a la puerta que eliges (D3); abajo, las fotos se abren por franjas de
   izquierda a derecha, como el viento side-on (D2). Sin JavaScript, con «Pausar movimiento» o con
   movimiento reducido, todo queda abierto y quieto. El orden cambia con data-temporada en <html>. */

:root {
  --fondo: #F5F6F3;
  --fondo-2: #E6EAEA;
  --tinta: #1D1D1B;
  --tinta-2: #4A4F50;
  --linea: rgba(29, 29, 27, 0.14);
  --rojo: #C3222D;
  --rojo-hondo: #A51C26;
  --rojo-claro: #E1545E;
  --arena: #48433E;

  --noche: #1D1D1B;
  --noche-2: #141413;
  --claro: #F5F6F3;
  --claro-2: #BFC2BF;
  --linea-clara: rgba(245, 246, 243, 0.2);

  --f-titular: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Merriweather Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;

  --gutter: clamp(16px, 5vw, 72px);
  --ancho: 1240px;
  --radio: 6px;
  --pad: clamp(72px, 10vw, 144px);
  --sale: cubic-bezier(0.16, 1, 0.3, 1);
  --alto-enc: 109px;

  color-scheme: light;
  scrollbar-color: var(--arena) var(--fondo);
}

/* Las cinco franjas de un panel: cada una va de 0 (cerrada) a 1 (abierta). */
@property --fa { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --fb { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --fc { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --fd { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --fe { syntax: '<number>'; inherits: false; initial-value: 1; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--rojo);
}
@media (min-width: 1000px) { body { font-size: 1.0625rem; } }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button, input, output { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 2px; }

::selection { background: var(--tinta); color: var(--fondo); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: var(--arena); border-radius: 12px; border: 3px solid var(--fondo); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }
.cap--noche :focus-visible, .banda :focus-visible, .preventa :focus-visible, .ariel__video :focus-visible,
.cierre :focus-visible, .pie :focus-visible, .aviso :focus-visible, .temporada :focus-visible { outline-color: var(--claro); }
.cap--noche ::selection, .cierre ::selection, .pie ::selection, .banda ::selection, .preventa ::selection { background: var(--claro); color: var(--tinta); }

.saltar { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--tinta); color: var(--fondo); padding: 10px 16px; border-radius: var(--radio); }
.saltar:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.marco { width: 100%; max-width: calc(var(--ancho) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ───────── Tipografía: una escala para todo el inicio ───────── */
.t-d { font-family: var(--f-titular); font-stretch: 122%; font-weight: 850; font-size: clamp(2.375rem, 1rem + 5.2vw, 5.75rem); line-height: 0.94; letter-spacing: -0.03em; text-wrap: balance; }
.t-1 { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.t-2 { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.bajada { font-size: 1.0625rem; color: var(--tinta-2); max-width: 48ch; text-wrap: pretty; }
.chico { font-size: 0.875rem; color: var(--tinta-2); }
.fuente { margin-top: 14px; font-size: 0.875rem; color: var(--tinta-2); }
.voz-chica { font-style: italic; font-weight: 300; font-size: 1.25rem; line-height: 1.4; color: var(--tinta); }
.voz-chica span { font-style: normal; font-weight: 700; font-size: 0.875rem; color: var(--tinta-2); margin-left: 6px; }

/* ───────── Encabezado (claro, de D3) ───────── */
.enc { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--fondo) 94%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--linea); }
.enc__fila { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.logo { display: inline-flex; padding: 8px 0; margin-right: auto; }
.logo svg { width: 120px; height: auto; }
.logo .l { fill: var(--tinta); }
.logo .o { fill: var(--rojo); }
.nav { display: none; gap: clamp(16px, 1.6vw, 28px); font-size: 0.9375rem; white-space: nowrap; }
.nav a { text-decoration: none; padding: 10px 0; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }
.idioma { display: flex; gap: 2px; font-size: 0.8125rem; }
.idioma button { background: none; border: 0; padding: 10px 6px; min-width: 32px; min-height: 44px; color: var(--tinta-2); }
.idioma button[aria-pressed="true"] { color: var(--tinta); font-weight: 700; text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: 0.3em; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: none; font-weight: 600; }
.menu-btn svg { width: 18px; height: 18px; }
.menu { border-top: 1px solid var(--linea); padding-block: 8px 20px; }
.menu a { display: block; padding: 12px 0; font-size: 1.125rem; text-decoration: none; border-bottom: 1px solid var(--linea); }
@media (min-width: 1000px) {
  .nav { display: flex; }
  .menu-btn, .menu { display: none !important; }
}

/* Preventa: una línea (D3), con el punto rojo de D2 */
.aviso { background: var(--tinta); color: var(--fondo); font-size: 0.875rem; }
.aviso a { display: block; min-height: 44px; padding: 11px var(--gutter); text-decoration: none; text-align: center; line-height: 1.4; }
.aviso strong::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--rojo-claro); vertical-align: 0.08em; }
@media (max-width: 420px) { .aviso strong::before { display: none; } }
.aviso__mas { margin-left: 8px; text-decoration: underline; text-decoration-color: var(--rojo-claro); text-underline-offset: 0.25em; white-space: nowrap; }

/* ───────── Botones y etiquetas ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: var(--radio); font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: background-color .2s var(--sale), border-color .2s var(--sale), color .2s var(--sale); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn svg:has(use[href="#i-flecha"]) { transition: transform .25s var(--sale); }
.btn:hover svg:has(use[href="#i-flecha"]) { transform: translateX(4px); }
.btn--primario { background: var(--rojo); color: #fff; }
.btn--primario:hover { background: var(--rojo-hondo); }
.btn--tinta { background: var(--tinta); color: var(--fondo); }
.btn--tinta:hover { background: #000; }
.btn--borde { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.btn--borde:hover { background: var(--tinta); color: var(--fondo); }
.btn--claro { border-color: var(--claro); color: var(--claro); background: transparent; }
.btn--claro:hover { background: var(--claro); color: var(--tinta); }
.btn--grande { min-height: 60px; padding: 0 28px; font-size: 1.0625rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.enlace-flecha { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration-color: var(--rojo); }
.enlace-flecha svg { width: 18px; height: 18px; transition: transform .25s var(--sale); }
.enlace-flecha:hover svg { transform: translateX(4px); }

.etiqueta, .ejemplo { display: inline-block; border-radius: 3px; font-family: var(--f-texto); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; }
.etiqueta { padding: 2px 8px; background: var(--tinta); color: var(--fondo); }
.ejemplo { margin-left: 6px; padding: 1px 6px; border: 1px solid currentColor; vertical-align: 0.2em; color: var(--tinta-2); }
.cap--noche .ejemplo { color: var(--claro-2); }

/* ───────── PORTADA (D3): Ariel te recibe ─────────
   Teléfono: retrato y voz lado a lado, como una conversación; debajo, la pregunta y las cinco puertas.
   Escritorio: retrato a toda la altura, con los créditos de la escuela encima (tono D2); a la derecha, voz, pregunta y puertas. */
.portada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
  grid-template-areas: "foto voz" "pregunta pregunta" "video video";
  column-gap: 16px;
  padding: 16px var(--gutter) 32px;
}
.retrato { grid-area: foto; position: relative; aspect-ratio: 0.64; border-radius: var(--radio); overflow: hidden; background: var(--fondo-2); }
.retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 22%; transform: scale(1.3); transform-origin: 54% 16%; }
.retrato .etiqueta { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0; padding: 4px 6px; text-align: center; font-size: 0.6875rem; }
.retrato__creditos { display: none; }

.voz { grid-area: voz; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding-bottom: 4px; }
.voz__linea { font-style: italic; font-weight: 400; font-size: 1.0625rem; line-height: 1.4; color: var(--tinta); text-wrap: pretty; min-height: calc(5 * 1.4em); display: flex; flex-direction: column; justify-content: flex-end; }
.voz__linea .frase { display: block; }
.voz__firma { font-size: 0.8125rem; line-height: 1.35; color: var(--tinta-2); }
.voz__firma b { display: block; color: var(--tinta); font-weight: 700; }
.voz__firma span { transition: color .25s var(--sale); }
.voz.habla .voz__firma span { color: var(--rojo); }

.pregunta { grid-area: pregunta; margin-top: 18px; }
.puertas { display: flex; flex-direction: column; margin-top: 10px; border-top: 1px solid var(--linea); }
.puerta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 16px; min-height: 56px; padding: 7px 4px; border-bottom: 1px solid var(--linea); text-decoration: none; transition: padding-left .3s var(--sale), background-color .3s var(--sale); }
.puerta__nombre { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: 1.25rem; line-height: 1.15; transition: color .2s var(--sale); }
.puerta__que { grid-column: 1; font-size: 0.875rem; color: var(--tinta-2); line-height: 1.35; }
.puerta svg { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; transition: transform .3s var(--sale); }
.puerta:hover, .puerta:focus-visible { padding-left: 12px; background: var(--fondo-2); }
.puerta:hover svg, .puerta:focus-visible svg { transform: translateX(4px); }
.puerta:hover .puerta__nombre, .puerta:focus-visible .puerta__nombre { color: var(--rojo); }
.puerta .puerta__que strong { color: var(--rojo); font-weight: 700; }

/* El video de Ariel invitando: un espacio diseñado, por grabar, sin play. */
.por-grabar { grid-area: video; display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.por-grabar__cuadro { flex: none; width: 54px; aspect-ratio: 9 / 16; border-radius: 4px; display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--tinta) 45%, transparent); background: var(--fondo-2); }
.por-grabar__cuadro svg { width: 60%; fill: var(--rojo); }
.por-grabar p { font-size: 0.875rem; line-height: 1.4; color: var(--tinta-2); }
.por-grabar b { display: block; color: var(--tinta); font-weight: 700; }

@media (min-width: 640px) {
  .portada { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); column-gap: 28px; }
  .voz__linea { font-size: 1.25rem; min-height: calc(4 * 1.4em); }
}
@media (min-width: 1000px) {
  .portada {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "foto ." "foto voz" "foto pregunta" "foto .";
    column-gap: 0; padding: 0;
    height: calc(100svh - var(--alto-enc)); min-height: 660px; max-height: 980px;
  }
  .retrato { aspect-ratio: auto; border-radius: 0; height: 100%; background: var(--noche); }
  .retrato img { object-position: 50% 30%; transform: none; }
  .retrato::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 17, 16, 0.86) 0%, rgba(17, 17, 16, 0.45) 22%, rgba(17, 17, 16, 0) 42%); pointer-events: none; }
  .retrato .etiqueta { left: 20px; top: 20px; right: auto; bottom: auto; z-index: 1; border-radius: 3px; padding: 2px 8px; font-size: 0.6875rem; }
  /* Los créditos de la película, sobre la foto (de D2) */
  .retrato__creditos { position: absolute; left: clamp(24px, 3vw, 48px); bottom: 36px; z-index: 1; display: grid; gap: 6px; max-width: min(56%, 360px); color: var(--claro); }
  .retrato__creditos b { font-family: var(--f-titular); font-stretch: 122%; font-weight: 850; font-size: clamp(1.75rem, 1rem + 1.4vw, 2.5rem); line-height: 0.98; letter-spacing: -0.025em; }
  .retrato__creditos b::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 14px; background: var(--rojo-claro); }
  .retrato__creditos span { font-size: 0.9375rem; line-height: 1.45; color: #E4E5E1; text-wrap: pretty; }

  .voz, .pregunta { padding-left: clamp(96px, 9vw, 136px); padding-right: max(var(--gutter), calc((100vw - var(--ancho)) / 2)); }
  .voz { padding-bottom: 0; }
  /* Un trazo une la cara con lo que dice. */
  .voz::before { content: ""; position: absolute; left: 0; bottom: 10px; width: calc(clamp(96px, 9vw, 136px) - 18px); height: 1px; background: var(--tinta); }
  .voz__linea { font-size: clamp(1.5rem, 0.9rem + 1.15vw, 2rem); line-height: 1.3; font-weight: 300; max-width: 26ch; min-height: calc(3 * 1.3em); }
  .voz__firma { font-size: 0.875rem; }
  .voz__firma b { display: inline; margin-right: 6px; }

  .pregunta { margin-top: 32px; }
  .pregunta .t-1 { font-size: clamp(3rem, 1.4rem + 2.6vw, 4.25rem); }
  .puertas { margin-top: 20px; max-width: 600px; }
  .puerta { min-height: 64px; padding-block: 10px; }
  .puerta__nombre { font-size: 1.5rem; }
  .puerta__que { font-size: 0.9375rem; }

  .por-grabar {
    position: absolute; left: calc(42% - 82px); bottom: 32px; z-index: 2;
    width: 164px; aspect-ratio: 9 / 16; margin: 0; padding: 14px;
    flex-direction: column; justify-content: space-between; align-items: stretch;
    border-radius: var(--radio); background: var(--fondo);
    box-shadow: 0 20px 44px -20px rgba(29, 29, 27, .5), 0 0 0 1px var(--linea);
  }
  .por-grabar__cuadro { width: 34px; aspect-ratio: auto; border: 0; background: none; place-items: start; }
  .por-grabar__cuadro svg { width: 100%; }
  .por-grabar p { font-size: 0.8125rem; line-height: 1.35; }
  .por-grabar b { margin-bottom: 4px; }
}
@media (min-width: 1000px) and (max-height: 760px) {
  .puerta { min-height: 56px; padding-block: 6px; }
  .pregunta { margin-top: 20px; }
  .por-grabar { width: 136px; padding: 12px; }
  .por-grabar p { font-size: 0.75rem; }
}

/* ───────── Capítulos: claros por defecto, franjas oscuras a sangre ───────── */
.cap { position: relative; padding-block: var(--pad); overflow-x: clip; }
.cap--noche { background: var(--noche); color: var(--claro); }
.cap--noche .bajada { color: #D6D8D4; }
.novedades, .viajes { border-top: 1px solid var(--linea); }

/* El panel: foto o video a sangre, con las cinco franjas (D2) */
.panel { position: relative; overflow: hidden; background: var(--noche-2); }
.panel > img, .panel video { width: 100%; height: 100%; object-fit: cover; }
.franjas {
  clip-path: polygon(
    0 0, calc(var(--fa) * 100%) 0,
    calc(var(--fa) * 100%) 20%, calc(var(--fb) * 100%) 20%,
    calc(var(--fb) * 100%) 40%, calc(var(--fc) * 100%) 40%,
    calc(var(--fc) * 100%) 60%, calc(var(--fd) * 100%) 60%,
    calc(var(--fd) * 100%) 80%, calc(var(--fe) * 100%) 80%,
    calc(var(--fe) * 100%) 100%, 0 100%);
}

/* ───────── VEN A CHILE (D1 + D2): la banda a sangre, y la ruta de cada experiencia ───────── */
.chile { padding-top: 0; }
.banda { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(380px, 48vw, 640px); overflow: hidden; background: var(--noche); color: #fff; }
.banda__foto { position: absolute; inset: 0; z-index: -2; }
.banda__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.banda::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14, 15, 14, 0.86) 0%, rgba(14, 15, 14, 0.58) 38%, rgba(14, 15, 14, 0) 78%); }
.banda__cab { padding-block: 48px clamp(32px, 4.5vw, 64px); }
.banda .t-d { max-width: 13ch; }
.banda__en { margin-top: 16px; font-family: var(--f-titular); font-stretch: 108%; font-weight: 600; font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.375rem); color: #F0F1EE; }

.chile__rejilla { display: grid; gap: 48px; padding-top: clamp(40px, 5vw, 72px); }
.chile__texto .bajada { max-width: 40ch; }
.chile__incluye { margin-top: 20px; max-width: 42ch; }
.datos { margin-top: 28px; border-top: 1px solid var(--tinta); max-width: 460px; }
.datos div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.datos dt { font-weight: 700; }
.datos dd { color: var(--tinta-2); }
.chile__texto .acciones { margin-top: 28px; }

.experiencias { display: flex; flex-direction: column; border-top: 1px solid var(--tinta); }
.experiencias li { border-bottom: 1px solid var(--linea); }
.experiencia { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 20px; row-gap: 6px; padding: 22px 0; text-decoration: none; }
.experiencia > span { grid-column: 1; }
.experiencia__nombre { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); line-height: 1.08; letter-spacing: -0.015em; transition: font-stretch .45s var(--sale); }
.experiencia__que { color: var(--tinta-2); font-size: 0.9375rem; max-width: 50ch; }
.experiencia__flecha { grid-column: 2; grid-row: 1; width: 24px; height: 24px; margin-top: 6px; transition: transform .3s var(--sale); }
.experiencia::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tinta); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--sale); }
.experiencia:hover::after, .experiencia:focus-visible::after { transform: scaleX(1); }
.experiencia:hover .experiencia__flecha, .experiencia:focus-visible .experiencia__flecha { transform: translateX(4px); }
.experiencia:hover .experiencia__nombre, .experiencia:focus-visible .experiencia__nombre { font-stretch: 122%; }

/* La ruta: norte a sur, Puclaro · Costa · Corralco. El punto lleno es lo que incluye. */
.ruta { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 264px); margin-top: 8px; }
.ruta::before { content: ""; position: absolute; top: 6px; left: 16.66%; right: 16.66%; height: 2px; background: rgba(29, 29, 27, 0.18); }
.ruta--todo::before { background: var(--tinta); }
.ruta i { position: relative; display: grid; justify-items: center; padding-top: 20px; font-style: normal; font-size: 0.75rem; font-weight: 600; color: var(--tinta-2); line-height: 1.2; }
.ruta i::before { content: ""; position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid rgba(29, 29, 27, 0.4); background: var(--fondo); }
.ruta i.si { color: var(--tinta); font-weight: 800; }
.ruta i.si::before { border-color: var(--rojo); background: var(--rojo); }
.ruta--todo i.si::before { border-color: var(--tinta); background: var(--tinta); }

@media (min-width: 900px) {
  .chile__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .chile__texto { grid-column: 1 / 6; position: sticky; top: 120px; }
  .experiencias { grid-column: 7 / 13; }
  .experiencia { grid-template-columns: minmax(0, 1fr) 216px 24px; column-gap: 28px; align-items: center; padding-block: 28px; }
  .experiencia .ruta { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .experiencia__flecha { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}

/* ───────── TIENDA (D2) con las marcas reales y el buscador de medida (D1) ───────── */
.tienda { background: var(--fondo-2); }
.tienda__cab { display: grid; gap: 14px; }
.tienda__cab .acciones { margin-top: 10px; }
@media (min-width: 1000px) {
  .tienda__cab { grid-template-columns: 1fr auto; column-gap: 48px; align-items: end; }
  .tienda__cab .acciones { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* Las marcas, en letra: los logos llegan después */
.marcas { display: grid; margin-top: clamp(32px, 5vw, 56px); }
.marca-fila { display: grid; gap: 2px; padding-block: 16px 18px; border-top: 1.5px solid var(--tinta); }
.marca-fila dt { font-family: var(--f-titular); font-stretch: 125%; font-weight: 850; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; }
.marca-fila dd { color: var(--tinta-2); max-width: 36ch; }
@media (min-width: 700px) {
  .marcas { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

.vitrina { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 48px); }
.prod__enlace { display: grid; gap: 14px; text-decoration: none; color: inherit; }
.prod__foto { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--fondo); color: var(--tinta-2); }
.prod__foto .sil { width: 62%; height: auto; transition: transform .45s var(--sale); }
.prod__foto .etiqueta { position: absolute; left: 10px; top: 10px; background: var(--fondo-2); color: var(--tinta-2); }
.prod__texto { display: grid; gap: 4px; align-content: center; }
.prod__nombre { font-family: var(--f-titular); font-stretch: 108%; font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.prod__para { color: var(--tinta-2); }
.prod__dato { font-size: 0.9375rem; color: var(--tinta-2); }
.prod__dato b, .prod__preventa { color: var(--tinta); font-weight: 700; }
.prod__preventa::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--rojo); vertical-align: 0.08em; }
.prod__enlace:hover .prod__nombre { text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }
.prod__enlace:hover .sil { transform: translateX(6px) rotate(-2deg); }
.prod--destacado .prod__nombre { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); font-stretch: 115%; }
.prod--destacado .prod__foto { background: var(--fondo); }
@media (max-width: 699px) {
  .prod:not(.prod--destacado) .prod__enlace { grid-template-columns: 132px 1fr; align-items: center; }
  .prod:not(.prod--destacado) .prod__foto { aspect-ratio: 1; padding-bottom: 30px; }
  .prod:not(.prod--destacado) .sil { width: 86%; }
  .prod:not(.prod--destacado) .etiqueta { left: 6px; right: 6px; top: auto; bottom: 6px; padding: 3px 6px; font-size: 0.6875rem; letter-spacing: 0.03em; text-align: center; }
}
@media (min-width: 700px) {
  .vitrina { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; }
  .prod--destacado { grid-column: 1 / span 6; grid-row: 1 / span 3; }
  .prod--destacado .prod__enlace { height: 100%; grid-template-rows: 1fr auto; }
  .prod--destacado .prod__foto { aspect-ratio: auto; min-height: 340px; }
  .prod--destacado .sil { width: 72%; }
  .prod:not(.prod--destacado) { grid-column: 7 / -1; }
  .prod:not(.prod--destacado) .prod__enlace { grid-template-columns: minmax(150px, 200px) 1fr; column-gap: 22px; align-items: center; }
  .prod:not(.prod--destacado) .prod__foto { aspect-ratio: 5 / 4; padding-bottom: 30px; }
  .prod:not(.prod--destacado) .sil { width: 80%; }
  .prod:not(.prod--destacado) .etiqueta { left: 8px; right: 8px; top: auto; bottom: 8px; text-align: center; }
}

/* Buscador de medida (D1) */
.medida { display: grid; gap: 32px; margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 1.5px solid var(--tinta); }
.medida__tit { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.25rem); line-height: 1.08; letter-spacing: -0.018em; text-wrap: balance; }
.medida__texto .bajada { margin-top: 12px; }
.buscador { margin-top: 28px; display: grid; gap: 26px; max-width: 520px; }
.campo__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.campo label[for], .campo legend { font-weight: 700; }
.campo legend { margin-bottom: 10px; }
.campo output { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.buscador input[type="range"] { --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 4px 0 0; background: transparent; cursor: pointer; }
.buscador input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--tinta) var(--p), rgba(29,29,27,0.2) var(--p)); }
.buscador input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(29,29,27,0.2); }
.buscador input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--tinta); }
.buscador input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--tinta); border: 4px solid var(--fondo-2); box-shadow: 0 0 0 1.5px var(--tinta); }
.buscador input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); border: 4px solid var(--fondo-2); box-shadow: 0 0 0 1.5px var(--tinta); }
.viento-opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.viento-opciones label { position: relative; display: block; cursor: pointer; }
.viento-opciones input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.viento-opciones span { display: grid; gap: 2px; min-height: 60px; padding: 10px 12px; border: 1.5px solid rgba(29,29,27,0.3); border-radius: var(--radio); font-weight: 700; line-height: 1.2; transition: background-color .2s var(--sale), color .2s var(--sale), border-color .2s var(--sale); }
.viento-opciones small { font-size: 0.75rem; font-weight: 400; color: var(--tinta-2); }
.viento-opciones label:hover span { border-color: var(--tinta); }
.viento-opciones input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.viento-opciones input:checked + span small { color: var(--fondo-2); }
.viento-opciones input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; }
.sugerencia { background: var(--fondo); border-radius: var(--radio); padding: clamp(24px, 3.5vw, 44px); }
.sugerencia__tit { font-weight: 700; }
.sugerencia__medida { margin-top: 4px; display: flex; align-items: baseline; gap: 10px; font-family: var(--f-titular); font-stretch: 125%; font-weight: 900; font-size: clamp(4.5rem, 3rem + 5vw, 6rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sugerencia__medida small { font-size: 1.5rem; font-stretch: 110%; font-weight: 750; letter-spacing: 0; }
.regla { margin-top: 18px; display: flex; }
.regla li { flex: 1; padding-top: 8px; border-top: 3px solid rgba(29,29,27,0.16); text-align: center; font-size: 0.75rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; transition: border-color .3s var(--sale), color .3s var(--sale); }
.regla li + li { margin-left: 2px; }
.regla li.es { border-top-color: var(--rojo); color: var(--tinta); font-weight: 800; }
.sugerencia__nota { margin-top: 18px; color: var(--tinta-2); max-width: 42ch; }
.sugerencia .acciones { margin-top: 24px; }
@media (min-width: 900px) {
  .medida { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: center; }
}

.preventa { display: grid; gap: 18px; margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 4vw, 40px); background: var(--noche); color: var(--claro); }
.preventa__tit { font-family: var(--f-titular); font-stretch: 115%; font-weight: 850; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.05; }
.preventa__tit::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--rojo-claro); vertical-align: 0.12em; }
.pasos { display: grid; gap: 10px; counter-reset: paso; }
.pasos li { counter-increment: paso; display: flex; gap: 12px; align-items: baseline; color: #E2E3DF; }
.pasos li::before { content: counter(paso); font-family: var(--f-titular); font-stretch: 120%; font-weight: 850; font-size: 1.25rem; color: var(--rojo-claro); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) {
  .preventa { grid-template-columns: auto 1fr auto; align-items: center; column-gap: 48px; }
  .pasos { grid-auto-flow: column; column-gap: 32px; }
}

/* ───────── ARIEL (D2): los créditos de la película ───────── */
.ariel__rejilla { display: grid; gap: 32px; }
.ariel__nombre { font-size: clamp(3rem, 1rem + 8vw, 6rem); line-height: 0.88; }
.ariel__nombre span { display: block; }
.ariel__apellido { color: var(--rojo); }
.ariel__foto { aspect-ratio: 4 / 5; }
.ariel__foto img { object-position: 50% 24%; }
.ariel__foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px; font-size: 0.875rem; line-height: 1.4; color: #EEF0EE; background: linear-gradient(to top, rgba(17, 17, 16, 0.82), rgba(17, 17, 16, 0)); }
.ariel__bajada { font-size: 1.1875rem; line-height: 1.55; max-width: 40ch; text-wrap: pretty; }
.creditos { margin-top: 28px; border-top: 1.5px solid var(--tinta); }
.creditos div { display: grid; grid-template-columns: clamp(9.5rem, 6rem + 9vw, 14rem) 1fr; align-items: baseline; gap: 4px 20px; padding-block: 14px; border-bottom: 1px solid var(--linea); }
.creditos dd { order: -1; font-family: var(--f-titular); font-stretch: 120%; font-weight: 850; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.creditos dd small { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; color: var(--tinta-2); }
.creditos dt { color: var(--tinta-2); }

/* El otro video de Ariel: un visor de cámara, sin botón de play */
.ariel__video { position: relative; display: grid; align-content: center; justify-items: start; gap: 8px; min-height: 220px; padding: clamp(28px, 4vw, 48px); background: var(--noche); color: var(--claro); }
.ariel__video::before, .ariel__video::after { content: ""; position: absolute; width: 28px; height: 28px; border: 2px solid var(--rojo-claro); }
.ariel__video::before { left: 16px; top: 16px; border-right: 0; border-bottom: 0; }
.ariel__video::after { right: 16px; bottom: 16px; border-left: 0; border-top: 0; }
.ariel__video-tit { font-family: var(--f-titular); font-stretch: 115%; font-weight: 800; font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); line-height: 1.1; }
.ariel__video p:not(.ariel__video-tit) { color: var(--claro-2); max-width: 36ch; }
@media (min-width: 900px) {
  .ariel__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; align-items: start; }
  .ariel__nombre { grid-column: 1 / -1; grid-row: 1; }
  .ariel__foto { grid-column: 1 / span 5; grid-row: 2; aspect-ratio: auto; height: min(84vh, 760px); }
  .ariel__texto { grid-column: 7 / span 6; grid-row: 2; align-self: center; }
  .ariel__video { grid-column: 4 / span 9; grid-row: 3; aspect-ratio: 21 / 9; min-height: 0; }
}

/* ───────── RESEÑAS (D2): los subtítulos, en franja oscura ───────── */
.resenas .t-2 { max-width: 20ch; }
.cita blockquote p { text-wrap: pretty; }
.cita figcaption { margin-top: 14px; font-size: 0.9375rem; color: var(--claro-2); }
.cita figcaption a { color: var(--claro); text-decoration-color: var(--rojo-claro); }
.cita--grande { margin-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--linea-clara); }
.cita--grande blockquote p { font-family: var(--f-titular); font-stretch: 108%; font-weight: 600; font-size: clamp(1.625rem, 1rem + 2.6vw, 3.25rem); line-height: 1.14; letter-spacing: -0.015em; max-width: 30ch; }
.citas { display: grid; gap: 36px; margin-top: clamp(36px, 5vw, 64px); }
.citas .cita { padding-top: 18px; border-top: 2px solid var(--rojo-claro); max-width: 46ch; }
.citas blockquote p { font-size: 1.125rem; line-height: 1.55; font-weight: 300; font-style: italic; }
@media (min-width: 800px) {
  .citas { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 7vw, 120px); row-gap: 56px; }
  .citas .cita:nth-child(even) { margin-top: 88px; }
  .citas .cita:nth-child(3) { margin-top: -40px; }
}

/* ───────── DÓNDE NAVEGAR: el mapa (D2) y el eje de nivel (D1) ───────── */
.mapa { background: var(--fondo-2); }
.mapa__cab { display: grid; gap: 20px; }
.mapa__cab .t-d { max-width: 14ch; }
.mapa__rejilla { display: grid; gap: 32px; margin-top: clamp(32px, 5vw, 64px); }
.mapa__dibujo { justify-self: center; width: min(100%, 210px); }
.mapa__dibujo svg { width: 100%; height: auto; overflow: visible; }
.mapa__dibujo figcaption { margin-top: 8px; text-align: center; }
.mapa__tierra { fill: url(#tierra); }
.mapa__andes { fill: none; stroke: var(--tinta-2); stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; }
.mapa__andes-t { font-family: var(--f-texto); font-size: 12px; font-style: italic; fill: var(--tinta-2); letter-spacing: 0.06em; }
.mapa__costa { fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linejoin: round; }
.mapa__mar { font-family: var(--f-texto); font-size: 13px; font-style: italic; fill: var(--tinta-2); letter-spacing: 0.08em; }
.mapa__ciudad circle { fill: var(--tinta-2); }
.mapa__ciudad text { font-family: var(--f-texto); font-size: 12px; fill: var(--tinta-2); }
.marca text { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: 19px; fill: var(--tinta); }
.marca__punto { fill: var(--rojo); }
.marca__aro { fill: none; stroke: var(--rojo); stroke-width: 1.5; opacity: 0.45; transform-box: fill-box; transform-origin: center; transition: transform .35s var(--sale), opacity .35s var(--sale); }
.mapa:has([data-zona="puclaro"]:hover) .marca--puclaro .marca__aro,
.mapa:has([data-zona="costa"]:hover) .marca--costa .marca__aro,
.mapa:has([data-zona="corralco"]:hover) .marca--corralco .marca__aro { transform: scale(1.6); opacity: 1; }

.zonas { border-top: 1.5px solid var(--tinta); }
.zona { display: grid; gap: 14px; padding-block: 26px 28px; border-bottom: 1px solid var(--linea); }
.zona__nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-family: var(--f-titular); font-stretch: 115%; font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.1; }
.zona__cuando { font-family: var(--f-texto); font-stretch: 100%; font-size: 0.9375rem; font-weight: 400; color: var(--tinta-2); }
.zona > p { color: var(--tinta-2); max-width: 56ch; }
.mapa__zonas .enlace-flecha { margin-top: 20px; }

/* El eje de nivel: de aprender a avanzar, en el orden en que se recorre la costa */
.nivel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin-top: 6px; }
.nivel__eje { grid-column: 1 / -1; position: relative; display: flex; justify-content: space-between; padding-bottom: 12px; font-size: 0.75rem; font-weight: 700; color: var(--tinta-2); }
.nivel__eje::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(29, 29, 27, 0.25), var(--tinta)); }
.nivel__eje::before { content: ""; position: absolute; right: -1px; bottom: -4px; width: 10px; height: 10px; border-top: 2px solid var(--tinta); border-right: 2px solid var(--tinta); transform: rotate(45deg); }
.nivel__spot { position: relative; padding-top: 22px; display: grid; gap: 2px; align-content: start; }
.nivel__spot::before { content: ""; position: absolute; top: -6px; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rojo); background: var(--fondo); }
.nivel__spot:nth-child(3)::before { background: linear-gradient(90deg, var(--rojo) 50%, var(--fondo) 50%); }
.nivel__spot:nth-child(4)::before { background: var(--rojo); }
.nivel__spot b { font-family: var(--f-titular); font-stretch: 108%; font-weight: 760; font-size: 1.0625rem; line-height: 1.2; }
.nivel__spot span { font-size: 0.8125rem; line-height: 1.4; color: var(--tinta-2); }

.meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 520px; }
.meses li { display: grid; place-items: center; height: 34px; border-radius: 2px; background: var(--fondo); color: var(--tinta-2); font-family: var(--f-titular); font-weight: 700; font-size: 0.75rem; }
.meses li.si { background: var(--tinta); color: var(--fondo); }

@media (min-width: 900px) {
  .mapa__cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; }
  .mapa__rejilla { grid-template-columns: minmax(240px, 0.75fr) 1.25fr; column-gap: clamp(48px, 7vw, 112px); align-items: center; }
  .mapa__dibujo { width: min(100%, 320px); }
  .nivel__spot b { font-size: 1.25rem; }
  .nivel__spot span { font-size: 0.9375rem; }
  .nivel__eje { font-size: 0.8125rem; }
}

/* ───────── NOVEDADES (D3): titulares en filas, como un índice de prensa ───────── */
.novedades__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.notas { display: flex; flex-direction: column; margin-top: clamp(28px, 4vw, 48px); }
.notas::before { content: ""; order: -10; display: block; height: 1.5px; background: var(--tinta); }
.nota { border-bottom: 1px solid var(--linea); }
.nota a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding-block: 22px 24px; text-decoration: none; transition: padding-left .3s var(--sale), background-color .3s var(--sale); }
.nota__tipo { grid-column: 1; font-size: 0.875rem; font-weight: 700; color: var(--tinta-2); }
.nota__tit { grid-column: 1; font-family: var(--f-titular); font-stretch: 108%; font-weight: 800; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.15; letter-spacing: -0.012em; text-wrap: balance; }
.nota__bajada { grid-column: 1; color: var(--tinta-2); max-width: 52ch; }
.nota svg { grid-column: 2; grid-row: 1 / span 3; width: 24px; height: 24px; transition: transform .3s var(--sale); }
.nota a:hover, .nota a:focus-visible { padding-left: 12px; background: var(--fondo-2); }
.nota a:hover .nota__tit { text-decoration: underline; text-decoration-color: var(--rojo); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.nota a:hover svg { transform: translateX(5px); }
@media (min-width: 1000px) {
  .nota a { grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr) auto; column-gap: 32px; align-items: baseline; padding-block: 28px; }
  .nota__tipo, .nota__tit, .nota__bajada { grid-row: 1; grid-column: auto; }
  .nota svg { grid-column: 4; grid-row: 1; align-self: center; }
}

/* ───────── VIAJA CON ARIEL, FUERA DE CHILE (D2) ───────── */
.viajes__rejilla { display: grid; gap: 28px; }
.viajes__foto { aspect-ratio: 3 / 2; }
.viajes__foto img { object-position: 50% 60%; }
.viajes__texto { display: grid; gap: 14px; align-content: start; }
.destinos { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 4px; font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: 1.25rem; }
.destinos li:not(:last-child)::after { content: "·"; margin-inline: 12px; color: var(--rojo); }
.viajes__texto .acciones { margin-top: 8px; }
@media (min-width: 900px) {
  .viajes__rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .viajes__foto { grid-column: 1 / span 7; }
  .viajes__texto { grid-column: 9 / span 4; }
}

/* ───────── SNOWKITE (D2): el salto y el video vertical ───────── */
.adrenalina .t-d { max-width: 13ch; }
.adrenalina__escena { display: grid; gap: 28px; margin-top: clamp(32px, 5vw, 64px); }
.adrenalina__salto { aspect-ratio: 4 / 5; }
.adrenalina__salto img { object-position: 50% 30%; }
.adrenalina__video { position: relative; }
.adrenalina__cuadro { aspect-ratio: 296 / 640; }
.adrenalina__texto { display: grid; gap: 14px; align-content: start; }
.adrenalina__texto p:not(.bajada) { color: var(--claro-2); max-width: 44ch; }
.adrenalina__texto .acciones { margin-top: 10px; }

.pausa { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(245, 246, 243, 0.5); border-radius: 999px; background: rgba(17, 17, 16, 0.72); color: var(--claro); font-size: 0.875rem; font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pausa:hover { background: var(--noche-2); border-color: var(--claro); }
.pausa svg { width: 16px; height: 16px; }
.pausa__play, .quieto .pausa__ii { display: none; }
.quieto .pausa__play { display: inline; }

@media (max-width: 699px) {
  /* En el teléfono el video vertical ES la pantalla: a sangre, sin recorte */
  .adrenalina__escena { padding-inline: 0; }
  .adrenalina__texto { padding-inline: var(--gutter); order: 2; }
  .adrenalina__video { order: 3; }
  .adrenalina__cuadro { aspect-ratio: auto; height: 100svh; max-height: calc(100vw * 640 / 296); }
}
@media (min-width: 700px) {
  .adrenalina__escena { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
  .adrenalina__salto { grid-column: 1 / span 7; grid-row: 1 / span 2; aspect-ratio: auto; align-self: stretch; min-height: min(88vh, 900px); }
  .adrenalina__video { grid-column: 9 / span 4; grid-row: 1; margin-top: 12vh; justify-self: end; width: min(100%, 330px); }
  .adrenalina__texto { grid-column: 9 / span 4; grid-row: 2; }
}

/* ───────── CIERRE (D2): el atardecer, y la conversación sigue por WhatsApp ───────── */
.cierre { position: relative; display: grid; min-height: 88svh; background: var(--noche); color: var(--claro); overflow: hidden; isolation: isolate; }
.cierre__foto { position: absolute; inset: 0; z-index: -1; }
.cierre__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 17, 16, 0.92) 0%, rgba(17, 17, 16, 0.6) 45%, rgba(17, 17, 16, 0.1) 80%); }
.cierre__texto { align-self: end; padding-block: 96px 64px; }
.cierre .bajada { margin-top: 16px; color: #E2E3DF; }
.cierre .btn { margin-top: 28px; }

/* ───────── Pie ───────── */
.pie { background: var(--noche); color: var(--claro-2); padding-block: 56px 104px; font-size: 0.9375rem; border-top: 1px solid rgba(245, 246, 243, 0.08); }
.pie a { color: var(--claro); }
.pie__fila { display: grid; gap: 28px; }
.pie .logo .l { fill: var(--claro); }
.pie .logo .o { fill: var(--rojo-claro); }
.pie__frase { margin-top: 12px; color: var(--claro); }
.pie ul li { padding: 3px 0; }
.pie ul a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pie ul a:hover { text-decoration: underline; text-decoration-color: var(--rojo-claro); }
.pie__pausa { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--claro); text-decoration: underline; text-decoration-color: var(--rojo-claro); text-underline-offset: 0.22em; }
.pie__legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(245, 246, 243, 0.14); font-size: 0.8125rem; color: #B9BCBA; }
@media (min-width: 800px) { .pie__fila { grid-template-columns: 1.4fr 1fr 1fr; } }

/* ───────── Orden por temporada ─────────
   <html data-temporada="verano|invierno">. El HTML va en el orden de verano; «order» lo recompone
   y app.js mueve el DOM al mismo orden, para que el teclado recorra lo que se ve. */
[data-temporada="verano"] [data-solo="invierno"],
[data-temporada="invierno"] [data-solo="verano"] { display: none !important; }

#contenido { display: flex; flex-direction: column; }
#contenido > * { min-width: 0; }
.aviso { order: 0; }
.portada { order: 1; }
.chile { order: 2; }
.tienda { order: 3; }
.ariel { order: 4; }
.resenas { order: 5; }
.mapa { order: 6; }
.novedades { order: 7; }
.viajes { order: 8; }
.adrenalina { order: 9; }
.cierre { order: 10; }
[data-temporada="invierno"] .adrenalina { order: 2; }
[data-temporada="invierno"] .chile { order: 6; }
[data-temporada="invierno"] .mapa { order: 8; }
[data-temporada="invierno"] .viajes { order: 9; }

/* Puertas. Verano: Aprender · Viajar · Equipo · Navegar · Quedarme. Invierno: Aprender · Equipo · Viajar · Navegar · Quedarme */
.p-aprender { order: 1; } .p-viajar { order: 2; } .p-equipo { order: 3; } .p-navegar { order: 4; } .p-quedarme { order: 5; }
[data-temporada="invierno"] .p-equipo { order: 2; }
[data-temporada="invierno"] .p-viajar { order: 3; }

/* Experiencias y notas también se ordenan por temporada */
.x-corralco { order: 1; } .x-puclaro { order: 2; } .x-costa { order: 3; } .x-completo { order: 4; }
[data-temporada="invierno"] .x-completo { order: 2; }
[data-temporada="invierno"] .x-puclaro { order: 3; }
.nota--puclaro { order: 1; } .nota--ariel { order: 2; } .nota--fest { order: 3; }
[data-temporada="invierno"] .nota--fest { order: 0; }

/* Verano: el snowkite baja y queda compacto; el salto conserva su apertura por franjas */
[data-temporada="verano"] .adrenalina { padding-block: clamp(56px, 7vw, 104px); }
[data-temporada="verano"] .adrenalina .t-d { font-size: clamp(2rem, 1.1rem + 3.2vw, 3.75rem); max-width: 16ch; }
[data-temporada="verano"] .adrenalina__escena { margin-top: clamp(24px, 3vw, 40px); }
[data-temporada="verano"] .adrenalina__salto { aspect-ratio: 1 / 1; }
[data-temporada="verano"] .adrenalina__salto img { object-position: 45% 40%; }
@media (max-width: 699px) {
  [data-temporada="verano"] .adrenalina__escena { padding-inline: var(--gutter); }
  [data-temporada="verano"] .adrenalina__texto { padding-inline: 0; }
}
@media (min-width: 700px) {
  [data-temporada="verano"] .adrenalina__salto { grid-column: 1 / span 4; grid-row: 1; min-height: 0; aspect-ratio: 4 / 5; }
  [data-temporada="verano"] .adrenalina__texto { grid-column: 6 / span 6; grid-row: 1; align-self: center; }
}

/* Control de maqueta: fijo, pequeño y marcado con borde punteado; no es parte del sitio final */
.temporada { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 14px; border: 1.5px dashed var(--rojo-claro); border-radius: 999px; background: rgba(17, 17, 16, 0.94); color: var(--claro); font-size: 0.8125rem; box-shadow: 0 8px 28px rgba(17, 17, 16, 0.3); }
.temporada__tit { margin-right: 6px; color: var(--claro-2); }
.temporada a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: background-color .2s var(--sale), color .2s var(--sale); }
.temporada a:hover { background: rgba(245, 246, 243, 0.12); }
[data-temporada="verano"] .temporada [data-temp="verano"],
[data-temporada="invierno"] .temporada [data-temp="invierno"] { background: var(--claro); color: var(--tinta); }
@media (max-width: 699px) {
  /* En el teléfono no tapa las cinco puertas: aparece cuando la primera pantalla ya pasó */
  .temporada { right: 10px; bottom: 10px; padding-left: 12px; font-size: 0.75rem; }
  .temporada a { padding: 0 12px; }
  .js .temporada { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; transition: transform .35s var(--sale), opacity .35s var(--sale), visibility 0s .35s; }
  .js .temporada.temporada--ve, .js .temporada:focus-within { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--sale), opacity .35s var(--sale), visibility 0s; }
}

/* ───────── Movimiento: una sola familia ─────────
   1. Arriba, la voz de Ariel: la frase sale borrosa y la nueva entra palabra por palabra,
      de izquierda a derecha, como el viento (D3).
   2. Abajo, las fotos se abren por cinco franjas con su propio desfase: primero la del medio,
      después las vecinas, como una racha que entra a la foto (D2). */
.js .voz__linea { transition: opacity .14s ease-out, filter .14s ease-out, transform .14s ease-out; }
.js .voz__linea.sale { opacity: 0; filter: blur(4px); transform: translateY(-3px); }
.pal { display: inline-block; animation: entra .56s var(--sale) both; animation-delay: calc(var(--i) * 20ms); }
@keyframes entra {
  from { opacity: 0; filter: blur(6px); transform: translateX(-0.45em); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; filter: blur(0); transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }

@keyframes abrir-franjas {
  0%   { --fa: 0; --fb: 0; --fc: 0; --fd: 0; --fe: 0; }
  8%   { --fb: 0; }
  14%  { --fd: 0; }
  22%  { --fa: 0; }
  28%  { --fe: 0; }
  64%  { --fc: 1; }
  74%  { --fb: 1; }
  82%  { --fd: 1; }
  92%  { --fa: 1; }
  100% { --fa: 1; --fb: 1; --fc: 1; --fd: 1; --fe: 1; }
}
@keyframes acercar { from { transform: scale(1.14) translateX(-2%); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Teléfono y respaldo: una sola apertura al entrar en pantalla (la marca el IntersectionObserver).
     Cerradas dejan una hebra de 2 % a la izquierda: por ahí entra el viento. */
  .js:not(.cine):not(.quieto) .franjas:not(.visto) { --fa: 0.02; --fb: 0.02; --fc: 0.02; --fd: 0.02; --fe: 0.02; }
  .js:not(.cine):not(.quieto) .franjas {
    transition: --fc .8s var(--sale) 0s, --fb .8s var(--sale) .07s, --fd .8s var(--sale) .12s, --fa .8s var(--sale) .18s, --fe .8s var(--sale) .24s;
  }
  /* Escritorio con soporte: el scroll es la cámara */
  @supports (animation-timeline: view()) {
    .cine:not(.quieto) .franjas:not(.visto) {
      animation: abrir-franjas linear both;
      animation-timeline: view();
      animation-range: cover 6vh cover 60vh;
      animation-timing-function: cubic-bezier(0.3, 0.6, 0.25, 1);
    }
    .cine:not(.quieto) .franjas:not(.visto) > img {
      animation: acercar linear both;
      animation-timeline: view();
      animation-range: cover 6vh cover 60vh;
    }
  }
}

/* Estado quieto: con «menos movimiento» o con «Pausar movimiento», la voz cambia por fundido,
   las fotos quedan abiertas y nada se desplaza. */
.quieto .pal { animation: aparece .2s linear both; animation-delay: 0ms; }
.quieto .voz__linea.sale { filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .voz__linea { transition: opacity .16s linear !important; }
  .js .voz__linea.sale { filter: none; transform: none; }
  .pal { animation: aparece .2s linear both; animation-delay: 0ms; }
}

/* Vitrina con fotos reales de Reedin (fondo transparente, contenidas) */
.prod__foto--real img { position: absolute; top: 8%; left: 8%; width: 84%; height: calc(84% - 22px); object-fit: contain; transition: transform .45s var(--sale); }
.panel.prod__foto--real > img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.prod__enlace:hover .prod__foto--real img { transform: scale(1.04); }
.prod__foto--real .etiqueta { left: auto; right: 10px; top: auto; bottom: 10px; padding: 2px 7px; background: transparent; text-transform: none; letter-spacing: 0; font-weight: 600; }
.vitrina__nota { margin-top: 24px; font-size: 0.875rem; line-height: 1.5; color: var(--tinta-2); max-width: 74ch; }
.sugerencia__reedin { margin-top: 12px; font-size: 0.9375rem; max-width: 44ch; }
.sugerencia__reedin a { font-weight: 700; }
.sugerencia__reedin span { color: var(--tinta-2); font-size: 0.8125rem; }
@media (max-width: 699px) {
  .prod:not(.prod--destacado) .prod__foto--real .etiqueta { left: 6px; right: 6px; background: transparent; }
}
.quieto .prod__enlace:hover .prod__foto--real img { transform: none; }