/* Side On · páginas de contenido compartidas por D1, D2 y D3: Novedades, una nota y Viajes.
   Se carga después de ../d-limpia/estilos.css y la sube al nivel de D1: fotos grandes,
   titulares expandidos y un solo detalle de viento side-on por página (de izquierda a derecha):
   - Novedades: la foto destacada se abre de izquierda a derecha y los meses de viento se encienden.
   - Nota: los meses de viento de Puclaro se encienden de septiembre a mayo.
   - Viajes: la ruta norte-sur marca la experiencia que miras, y el cambio ES/EN barre la frase. */

:root {
  --blanco: #FFFFFF;
  --rojo-sobre-negro: #E1545E;
  --noche: #161716;
  --noche-texto: #C9CCCA;
}

/* ---------- Ajustes de la base al nivel de D1 ---------- */
.t-2 { font-stretch: 110%; font-weight: 780; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); line-height: 1.06; letter-spacing: -0.02em; }
.t-3 { font-stretch: 106%; font-weight: 720; font-size: 1.25rem; line-height: 1.2; }
.idioma button { min-height: 44px; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.aviso { font-size: 0.875rem; }
.aviso a:focus-visible { outline-color: var(--fondo); outline-offset: -5px; }
@media (min-width: 600px) { .aviso { font-size: 0.9375rem; } }

.btn--tinta { background: var(--tinta); color: var(--fondo); }
.btn--tinta:hover { background: #000; }
.btn--claro { border-color: rgba(255,255,255,0.7); color: #fff; background: rgba(22, 23, 22, 0.25); }
.btn--claro:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.btn--grande { min-height: 60px; padding: 0 30px; font-size: 1.0625rem; }
.btn--chico { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.btn--ancho { width: 100%; }
.btn svg { transition: transform .25s var(--sale); }
.btn:hover svg:last-child:not(:first-child) { transform: translateX(3px); }

.enlace-flecha { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; text-decoration: none; }
.enlace-flecha svg { width: 20px; height: 20px; transition: transform .25s var(--sale); }
.enlace-flecha:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.enlace-flecha:hover svg { transform: translateX(4px); }
.enlace-boton { background: none; border: 0; padding: 10px 2px; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 0.22em; }

.sello { display: inline-block; padding: 6px 10px; border-radius: 3px; background: var(--fondo); color: var(--tinta); font-size: 0.8125rem; font-weight: 700; line-height: 1.3; }
.meta { font-size: 0.875rem; color: var(--tinta-2); }
.meta .ejemplo { margin-left: 2px; }

.pie__frase { margin-top: 12px; }
.pie ul li { padding: 0; }
.pie ul li a { display: inline-block; padding: 10px 0; }
.pie :focus-visible { outline-color: var(--fondo); }
.pie .logo .o { fill: var(--rojo-sobre-negro); }

/* Línea de viento bajo los enlaces de título: entra de izquierda a derecha, como el side-on */
.titulo-enlace, .destacada__titulo a, .nota-fila__titulo a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--sale);
}
.destacada__titulo a:hover, .nota-fila__titulo a:hover,
.destacada__titulo a:focus-visible, .nota-fila__titulo a:focus-visible { background-size: 100% 2px; }

/* Meses de viento (lo usan Novedades, la nota y Viajes) */
.meses { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 520px; }
.meses li { display: grid; place-items: center; height: 36px; border-radius: 2px; background: var(--fondo-2); 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); }
.meses--claro li { background: #DADFDF; }
.meses--noche li { background: rgba(255,255,255,0.1); color: #A7ABA9; }
.meses--noche li.si { background: var(--fondo); color: var(--tinta); }
/* Con JS, los meses con viento parten tenues y se encienden de septiembre a mayo al entrar en pantalla */
.js .meses[data-encender] li.si { transition: background-color .45s var(--sale), color .45s var(--sale); transition-delay: calc(var(--o, 0) * 70ms); }
.js .meses[data-encender]:not(.encendido) li.si { background: #9AA09F; color: var(--fondo); }
.js .meses--noche[data-encender]:not(.encendido) li.si { background: rgba(255,255,255,0.32); color: var(--tinta); }

/* Foto pendiente: un espacio diseñado, nunca una foto de stock */
.foto-pendiente { position: relative; display: grid; align-content: end; justify-items: start; padding: 14px; background: var(--tinta); color: rgba(255,255,255,0.22); overflow: hidden; }
.foto-pendiente__lineas { position: absolute; inset: 0; width: 100%; height: 100%; }
.foto-pendiente .sello { position: relative; }

/* Chips: radios y casillas con forma de pastilla */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(29,29,27,0.3); border-radius: 999px; font-weight: 600; line-height: 1.2; transition: background-color .18s var(--sale), color .18s var(--sale), border-color .18s var(--sale); }
.chip:hover span { border-color: var(--tinta); }
.chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.chip input[type="checkbox"]:checked + span::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.chip input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; }
.chip--oscuro span { border-color: rgba(255,255,255,0.4); color: var(--fondo); }
.chip--oscuro:hover span { border-color: var(--fondo); }
.chip--oscuro input:checked + span { background: var(--fondo); border-color: var(--fondo); color: var(--tinta); }
.chip--oscuro input:focus-visible + span { outline-color: var(--fondo); }

/* ============================================================
   Novedades
   ============================================================ */
.cab-pag { display: grid; gap: 14px; padding-block: clamp(36px, 6vw, 80px) clamp(20px, 3vw, 32px); }
.cab-pag__titulo { font-family: var(--f-titular); font-stretch: 125%; font-weight: 900; font-size: clamp(3rem, 1.2rem + 7vw, 7.5rem); line-height: 0.9; letter-spacing: -0.04em; }
.cab-pag__bajada { max-width: 52ch; }
@media (min-width: 900px) {
  .cab-pag { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 56px; }
  .cab-pag__bajada { padding-bottom: 12px; max-width: 34ch; }
}

.filtro-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 8px 28px; }
.filtro { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); }
.filtro::-webkit-scrollbar { display: none; }
.filtro button { flex: none; min-height: 44px; padding: 0 18px; border: 1.5px solid rgba(29,29,27,0.3); border-radius: 999px; background: none; font-weight: 600; transition: background-color .18s var(--sale), color .18s var(--sale), border-color .18s var(--sale); }
.filtro button:hover { border-color: var(--tinta); }
.filtro button[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.filtro__estado { font-size: 0.875rem; color: var(--tinta-2); }
@media (min-width: 700px) { .filtro { margin-inline: 0; padding-inline: 0; } }

.destacada { display: grid; gap: 24px; padding-bottom: clamp(48px, 7vw, 96px); }
.destacada__foto { position: relative; display: block; border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3; background: var(--fondo-2); }
.destacada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform 1.2s var(--sale); }
.destacada__foto:hover img { transform: scale(1.025); }
.destacada__sello { position: absolute; left: 14px; bottom: 14px; }
.destacada__texto { display: grid; gap: 16px; align-content: center; justify-items: start; }
.destacada__titulo { font-family: var(--f-titular); font-stretch: 116%; font-weight: 850; font-size: clamp(2rem, 1.1rem + 3.3vw, 3.75rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.destacada__bajada { font-size: 1.125rem; color: var(--tinta-2); max-width: 44ch; text-wrap: pretty; }
.destacada .meses { width: 100%; margin-top: 4px; }
.destacada__btn { margin-top: 8px; }
/* Momento firma: la foto destacada se abre de izquierda a derecha, como entra el viento side-on */
.js .destacada__foto img { animation: abre-viento 1.1s var(--sale) .15s both; }
@keyframes abre-viento { from { clip-path: inset(0 26% 0 0); opacity: .85; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (min-width: 900px) {
  .destacada { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; align-items: stretch; }
  .destacada__foto { aspect-ratio: auto; min-height: 520px; }
}

.notas-bloque { padding-bottom: clamp(56px, 8vw, 112px); }
.notas { border-top: 1px solid var(--tinta); }
.nota-fila { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 6px 18px; padding-block: 24px; border-bottom: 1px solid var(--linea); scroll-margin-top: 120px; }
.nota-fila__texto { display: grid; gap: 8px; align-content: start; }
.nota-fila__titulo { font-family: var(--f-titular); font-stretch: 110%; font-weight: 780; font-size: 1.3125rem; line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; }
.nota-fila__titulo a::after { content: ""; position: absolute; inset: 0; }
.nota-fila { position: relative; }
.nota-fila__bajada { color: var(--tinta-2); max-width: 58ch; text-wrap: pretty; }
.nota-fila__foto { position: relative; grid-row: 1; grid-column: 2; align-self: start; aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; background: var(--fondo-2); }
.nota-fila__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .8s var(--sale); }
.nota-fila:hover .nota-fila__foto img { transform: scale(1.04); }
.nota-fila__foto.foto-pendiente { padding: 8px; background: var(--tinta); }
.nota-fila__foto .sello { font-size: 0.6875rem; padding: 4px 6px; }
.nota-fila:target { background: linear-gradient(90deg, var(--fondo-2), transparent 70%); }
.notas__vacio { padding-block: 32px; font-size: 1.0625rem; color: var(--tinta-2); }
@media (min-width: 800px) {
  .nota-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 48px; padding-block: 36px; align-items: center; }
  .nota-fila__foto { grid-column: 1; aspect-ratio: 16 / 10; }
  .nota-fila__texto { grid-column: 2; grid-row: 1; }
  .nota-fila__titulo { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.125rem); }
  .nota-fila__foto.foto-pendiente { padding: 16px; }
  .nota-fila__foto .sello { font-size: 0.8125rem; padding: 6px 10px; }
}

.suscribe { background: var(--tinta); color: var(--fondo); padding-block: clamp(56px, 8vw, 112px); }
.suscribe ::selection { background: var(--fondo); color: var(--tinta); }
.suscribe :focus-visible { outline-color: var(--fondo); }
.suscribe__grilla { display: grid; gap: 32px; }
.suscribe__titulo { font-family: var(--f-titular); font-stretch: 118%; font-weight: 850; font-size: clamp(2rem, 1.1rem + 3.2vw, 3.5rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; max-width: 16ch; }
.suscribe__bajada { margin-top: 14px; color: var(--noche-texto); max-width: 44ch; }
.suscribe__form { display: grid; gap: 14px; align-content: start; }
.suscribe__etiqueta { font-weight: 700; }
.suscribe__fila { display: grid; gap: 10px; }
.suscribe input[type="email"] { min-height: 56px; padding: 0 16px; border: 1.5px solid rgba(255,255,255,0.45); border-radius: var(--radio); background: rgba(255,255,255,0.06); color: var(--fondo); caret-color: var(--rojo-sobre-negro); }
.suscribe input[type="email"]::placeholder { color: #A7ABA9; }
.suscribe input[type="email"]:hover { border-color: var(--fondo); }
.suscribe input[type="email"]:focus-visible { outline: 3px solid var(--fondo); outline-offset: 2px; border-color: var(--fondo); }
.suscribe input[aria-invalid="true"] { border-color: var(--rojo-sobre-negro); }
.suscribe__temas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.suscribe__temas legend { width: 100%; margin-bottom: 8px; font-weight: 700; }
.suscribe__ayuda { font-size: 0.8125rem; color: #B9BCBA; }
.suscribe__error { font-weight: 700; color: #F2A6AC; }
.suscribe__ok:not(:empty) { padding: 14px 16px; border-left: 1px solid var(--fondo); background: rgba(255,255,255,0.08); font-weight: 600; }
@media (min-width: 600px) { .suscribe__fila { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 900px) { .suscribe__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } }

.seguir { padding-block: clamp(48px, 6vw, 80px); }

/* ============================================================
   Una nota
   ============================================================ */
.nota__cab { display: grid; gap: 14px; padding-block: 24px clamp(24px, 4vw, 48px); max-width: calc(980px + 2 * var(--gutter)); margin-inline: 0 auto; }
@media (min-width: 1200px) { .nota__cab { margin-left: max(0px, calc((100vw - var(--ancho)) / 2 - var(--gutter))); } }
.nota__titulo { font-family: var(--f-titular); font-stretch: 118%; font-weight: 880; font-size: clamp(2.25rem, 1.1rem + 4.6vw, 5.25rem); line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance; }
.nota__entrada { margin-top: 6px; font-family: var(--f-texto); font-weight: 400; font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.4375rem); line-height: 1.5; color: var(--tinta-2); max-width: 46ch; text-wrap: pretty; }

.nota__foto figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--tinta-2); }
.nota__foto-marco { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3; background: var(--fondo-2); }
.nota__foto-marco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 800px) { .nota__foto-marco { aspect-ratio: 16 / 7; } }

.nota__grilla { display: grid; gap: 40px; padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 104px); }
.nota__cuerpo { display: grid; gap: 20px; align-content: start; max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; }
.nota__cuerpo > p { text-wrap: pretty; }
.nota__sub { margin-top: 20px; font-family: var(--f-titular); font-stretch: 110%; font-weight: 780; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.12; letter-spacing: -0.015em; }
.dato { margin-block: 12px; padding-block: 22px; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--linea); }
.dato .meses { max-width: none; }
.dato figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--tinta-2); }
.dato figcaption b { color: var(--tinta); }

.comparte { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linea); display: grid; gap: 14px; }
.comparte__botones { display: flex; flex-wrap: wrap; gap: 10px; }

.llamado { align-self: start; display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radio); background: var(--tinta); color: var(--noche-texto); }
.llamado ::selection { background: var(--fondo); color: var(--tinta); }
.llamado :focus-visible { outline-color: var(--fondo); }
.llamado__titulo { font-family: var(--f-titular); font-stretch: 116%; font-weight: 850; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.375rem); line-height: 1; letter-spacing: -0.025em; color: var(--fondo); text-wrap: balance; }
.llamado__enlace { color: var(--fondo); font-size: 0.9375rem; }
.llamado__nota { font-size: 0.8125rem; color: #B9BCBA; }
@media (min-width: 1000px) {
  .nota__grilla { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 72px; }
  .llamado { position: sticky; top: 96px; }
}

.mas-notas { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 8vw, 104px); }
.mas-notas__cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.mas-notas__lista { display: grid; gap: 0; border-top: 1px solid var(--tinta); }
.mas-notas__lista li { border-bottom: 1px solid var(--linea); }
.mini { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 16px; align-items: center; padding-block: 16px; text-decoration: none; }
.mini__foto { grid-row: span 2; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--fondo-2); }
.mini__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform .8s var(--sale); }
.mini__foto.foto-pendiente { padding: 6px; background: var(--tinta); }
.mini__foto .sello { font-size: 0.6875rem; padding: 3px 5px; }
.mini__titulo { font-family: var(--f-titular); font-stretch: 108%; font-weight: 750; font-size: 1.125rem; line-height: 1.25; align-self: end; }
.mini .meta { align-self: start; }
.mini:hover .mini__titulo { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.mini:hover .mini__foto img { transform: scale(1.05); }
@media (min-width: 900px) {
  .mas-notas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; border-top: 0; }
  .mas-notas__lista li { border-top: 1px solid var(--tinta); border-bottom: 0; }
  .mini { grid-template-columns: 1fr; padding-block: 18px 0; }
  .mini__foto { grid-row: auto; aspect-ratio: 4 / 3; margin-bottom: 10px; }
  .mini__foto.foto-pendiente { padding: 14px; }
  .mini__foto .sello { font-size: 0.8125rem; padding: 6px 10px; }
  .mini__titulo { font-size: 1.3125rem; }
}

/* ============================================================
   Viajes
   ============================================================ */
.caminos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: 0; }
.camino { display: grid; gap: 2px; align-content: center; min-height: 56px; padding: 12px 12px 12px 0; text-decoration: none; border-bottom: 3px solid transparent; }
.camino + .camino { padding-left: 16px; border-left: 1px solid var(--linea); }
.camino b { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: 1.0625rem; line-height: 1.1; }
.camino span { display: none; font-size: 0.8125rem; line-height: 1.3; color: var(--tinta-2); }
.camino--activo { border-bottom-color: var(--rojo); }
.camino:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (min-width: 900px) {
  .caminos { grid-template-columns: auto auto 1fr; }
  .camino { padding-right: 40px; min-height: 72px; }
  .camino + .camino { padding-left: 40px; }
  .camino b { font-size: 1.25rem; }
  .camino span { display: block; font-size: 0.875rem; }
}

/* Portada de Ven a Chile */
.vac-portada { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(78svh, 720px); color: #fff; overflow: hidden; background: #2B2F2E; }
.vac-portada__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; }
.vac-portada__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14,15,14,0.86) 0%, rgba(14,15,14,0.55) 42%, rgba(14,15,14,0.12) 72%, rgba(14,15,14,0.3) 100%); }
.vac-portada__contenido { display: grid; gap: 18px; justify-items: start; padding-block: 88px 36px; }
.vac-portada ::selection { background: #fff; color: var(--tinta); }
.vac-portada :focus-visible { outline-color: #fff; }
.vac-titulo { display: grid; gap: 10px; }
.vac-titulo__grande { font-family: var(--f-titular); font-stretch: 125%; font-weight: 900; font-size: clamp(3.25rem, 1.2rem + 8vw, 8.5rem); line-height: 0.86; letter-spacing: -0.04em; }
.vac-titulo__linea { font-family: var(--f-titular); font-stretch: 112%; font-weight: 750; font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; }
.vac-portada__bajada { font-size: 1.0625rem; line-height: 1.55; color: #EEF0ED; max-width: 50ch; text-wrap: pretty; }
.vac-portada .acciones { margin-top: 6px; }

.lengua { position: absolute; top: 20px; right: var(--gutter); display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(22, 23, 22, 0.72); border: 1px solid rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lengua button { min-height: 40px; min-width: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: #fff; font-size: 0.875rem; font-weight: 700; transition: background-color .2s var(--sale), color .2s var(--sale); }
.lengua button[aria-pressed="true"] { background: #fff; color: var(--tinta); }
.lengua button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* El cambio de idioma barre la frase de izquierda a derecha */
.barrido { animation: barre .6s var(--sale) both; }
@keyframes barre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cambia { animation: aparece .35s var(--sale) both; }
@keyframes aparece { from { opacity: .2; } to { opacity: 1; } }

@media (min-width: 1000px) {
  .vac-portada { min-height: min(calc(100svh - 180px), 780px); }
  .vac-portada__foto { object-position: 50% 50%; }
  .vac-portada__velo { background: linear-gradient(100deg, rgba(14,15,14,0.82) 0%, rgba(14,15,14,0.5) 45%, rgba(14,15,14,0.05) 75%), linear-gradient(to top, rgba(14,15,14,0.5), transparent 40%); }
  .vac-portada__contenido { padding-block: 120px 64px; }
  .lengua { top: 28px; }
}

/* Experiencias */
.experiencias { padding-block: clamp(64px, 9vw, 128px) clamp(40px, 6vw, 80px); }
.experiencias__cab { display: grid; gap: 12px; margin-bottom: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .experiencias__cab { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; column-gap: 64px; } }
.experiencias__grilla { display: grid; gap: 0; }
.ruta-marco { display: none; }
.exps { display: grid; gap: 0; border-top: 1px solid var(--tinta); }
.exp { display: grid; gap: 20px; padding-block: 28px 36px; border-bottom: 1px solid var(--linea); scroll-margin-top: 96px; }
.exp__visual { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 10; background: var(--fondo-2); }
.exp__visual img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.exp__visual--pendiente { display: grid; grid-template-rows: 1fr auto 1fr; gap: 16px; padding: 20px; background: var(--tinta); color: rgba(255,255,255,0.22); }
.exp__visual--pendiente .meses { position: relative; grid-row: 2; max-width: none; }
.exp__visual--pendiente .meses li { height: 44px; font-size: 0.8125rem; }
.exp__visual--pendiente .sello { position: relative; grid-row: 3; align-self: end; justify-self: start; }
.exp__texto { display: grid; gap: 10px; align-content: start; justify-items: start; }
.exp__nombre { font-family: var(--f-titular); font-stretch: 118%; font-weight: 860; font-size: clamp(1.875rem, 1.3rem + 1.5vw, 2.5rem); text-wrap: balance; line-height: 0.96; letter-spacing: -0.03em; }
.exp__para { font-family: var(--f-titular); font-stretch: 106%; font-weight: 700; font-size: 1.125rem; line-height: 1.25; }
.exp__texto > p:not([class]) { color: var(--tinta-2); max-width: 52ch; text-wrap: pretty; }
.exp__dato { font-size: 0.9375rem; }
.exp__dato b { font-weight: 700; }
.exp__elegir { margin-top: 6px; }
.exp__elegir svg { width: 18px; height: 18px; }
.exp--elegida .exp__elegir { background: var(--tinta); color: var(--fondo); }

@media (min-width: 900px) {
  .experiencias__grilla { grid-template-columns: 220px minmax(0, 1fr); column-gap: 56px; }
  .ruta-marco { display: block; }
  .exp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 40px; }
  .exp:nth-child(even) .exp__visual { order: 2; }
  .exp__visual { aspect-ratio: 4 / 3; }
}

/* Ruta norte-sur: sigue a la experiencia que tienes en pantalla */
.ruta { position: sticky; top: 112px; display: grid; gap: 0; padding-left: 26px; }
.ruta::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: rgba(29,29,27,0.18); }
.ruta::after { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 2px; background: var(--tinta); transform: scaleY(var(--tramo, 0)); transform-origin: 50% var(--desde, 0%); transition: transform .7s var(--sale), transform-origin 0s; }
.ruta__punta { position: relative; padding-block: 2px; font-size: 0.75rem; font-weight: 700; color: var(--tinta-2); }
.ruta__punta::before { content: ""; position: absolute; left: -24px; top: 50%; width: 8px; height: 2px; background: rgba(29,29,27,0.4); }
.ruta__parada { position: relative; display: grid; gap: 2px; padding-block: 40px; transition: opacity .3s var(--sale); }
.ruta__parada::before { content: ""; position: absolute; left: -26px; top: calc(40px + 0.32em); width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tinta); background: var(--fondo); transition: background-color .3s var(--sale), transform .3s var(--sale), border-color .3s var(--sale); }
.ruta__parada b { font-family: var(--f-titular); font-stretch: 110%; font-weight: 780; font-size: 1.125rem; line-height: 1.15; }
.ruta__parada span { font-size: 0.8125rem; line-height: 1.35; color: var(--tinta-2); }
.ruta[data-activa] .ruta__parada { opacity: 0.45; }
.ruta[data-activa] .ruta__parada.activa { opacity: 1; }
.ruta__parada.activa::before { background: var(--rojo); border-color: var(--rojo); transform: scale(1.15); }
.ruta[data-activa="puclaro"] { --tramo: 0; }
.ruta[data-activa="costa"] { --tramo: 0; }
.ruta[data-activa="completo"] { --tramo: 1; }

/* Qué incluye */
.incluye { background: var(--fondo-2); padding-block: clamp(40px, 5vw, 64px); }
.incluye__grilla { display: grid; gap: 20px; }
.incluye__titulo { font-family: var(--f-titular); font-stretch: 112%; font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem); line-height: 1.05; letter-spacing: -0.02em; }
.incluye__lista { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.incluye__lista li { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: 1.0625rem; }
.incluye__lista svg { width: 28px; height: 28px; flex: none; }
@media (min-width: 1000px) { .incluye__grilla { grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; } .incluye__lista { justify-content: flex-end; } }

/* Formulario */
.arma { display: grid; gap: 36px; padding-block: clamp(64px, 9vw, 120px); scroll-margin-top: 72px; }
.arma__intro { display: grid; gap: 14px; align-content: start; }
.ariel-mini { margin-top: 18px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding-top: 20px; border-top: 1px solid var(--linea); }
.ariel-mini__foto { position: relative; aspect-ratio: 3 / 4; border-radius: 4px; overflow: hidden; background: var(--fondo-2); }
.ariel-mini__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.ariel-mini__foto .sello { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 3px 4px; font-size: 0.6875rem; text-align: center; }
.ariel-mini figcaption { color: var(--tinta-2); max-width: 36ch; }
.ariel-mini figcaption b { color: var(--tinta); }

.viaje-form { display: grid; gap: 24px; padding: clamp(20px, 3vw, 40px); border-radius: var(--radio); background: var(--blanco); box-shadow: 0 24px 48px -32px rgba(29,29,27,0.35), 0 1px 0 rgba(29,29,27,0.06); }
.campo { display: grid; gap: 8px; align-content: start; }
.campo > label, .campo > legend { font-weight: 700; }
.campo > legend { margin-bottom: 10px; }
.campo-par { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .campo-par { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo-par .campo__error { grid-column: 1 / -1; }
.viaje-form input[type="date"], .viaje-form input[type="text"], .viaje-form input[type="number"], .viaje-form select {
  width: 100%; min-width: 0; min-height: 52px; padding: 0 14px; border: 1.5px solid rgba(29,29,27,0.32); border-radius: var(--radio); background: var(--blanco); color: var(--tinta);
}
.viaje-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.viaje-form input::placeholder { color: #6B7071; }
.viaje-form input:hover, .viaje-form select:hover { border-color: var(--tinta); }
.viaje-form input:focus-visible, .viaje-form select:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; border-color: var(--tinta); }
.viaje-form input[aria-invalid="true"] { border-color: var(--rojo); }
.campo__error { font-size: 0.9375rem; font-weight: 700; color: var(--rojo-hondo); }

.contador { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; }
.contador button { min-height: 52px; border: 1.5px solid rgba(29,29,27,0.32); background: var(--fondo); font-size: 1.375rem; font-weight: 700; line-height: 1; }
.contador button:first-child { border-radius: var(--radio) 0 0 var(--radio); border-right: 0; }
.contador button:last-child { border-radius: 0 var(--radio) var(--radio) 0; border-left: 0; }
.contador button:hover { background: var(--fondo-2); }
.viaje-form .contador input { border-radius: 0; text-align: center; font-family: var(--f-titular); font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.contador input::-webkit-inner-spin-button, .contador input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.interruptor { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-weight: 700; cursor: pointer; justify-self: start; }
.interruptor input { position: absolute; opacity: 0; width: 52px; height: 30px; margin: 0; cursor: pointer; }
.interruptor__pista { position: relative; width: 52px; height: 30px; border-radius: 999px; background: rgba(29,29,27,0.22); transition: background-color .2s var(--sale); flex: none; }
.interruptor__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .25s var(--sale); }
.interruptor input:checked + .interruptor__pista { background: var(--tinta); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(22px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 3px solid var(--tinta); outline-offset: 3px; }

.viaje-form__enviar { display: grid; gap: 12px; justify-items: start; padding-top: 8px; border-top: 1px solid var(--linea); }
.viaje-form__enviar .btn { margin-top: 12px; }
.viaje-form__ok:not(:empty) { padding: 14px 16px; border-radius: 4px; background: var(--fondo-2); font-weight: 600; }
.viaje-form__ok a { font-weight: 800; }
@media (max-width: 420px) { .viaje-form__enviar .btn { width: 100%; padding-inline: 16px; font-size: 1rem; } }
@media (min-width: 1000px) {
  .arma { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 80px; align-items: start; }
  .arma__intro { position: sticky; top: 112px; }
}

/* Fuera de Chile */
.fuera { background: var(--fondo-2); padding-block: clamp(64px, 9vw, 128px); scroll-margin-top: 64px; }
.fuera .bajada { margin-top: 14px; }
.fuera__grilla { display: grid; gap: 40px; }
.fuera__fotos { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; align-items: end; }
.fuera__foto { border-radius: var(--radio); overflow: hidden; background: var(--fondo); }
.fuera__foto img { width: 100%; height: 100%; object-fit: cover; }
.fuera__foto--a { aspect-ratio: 4 / 5; }
.fuera__foto--a img { object-position: 45% 50%; }
.fuera__foto--b { aspect-ratio: 1; margin-bottom: 28px; }
.fuera__foto--b img { object-position: 30% 50%; }
.fuera__leyenda { grid-column: 1 / -1; }
.destinos { margin-block: 28px 20px; border-top: 1px solid var(--tinta); }
.destino { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding-block: 18px; border-bottom: 1px solid rgba(29,29,27,0.18); }
.destino__salida { grid-column: 1; font-size: 0.9375rem; }
.destino .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 48px; padding: 0 18px; }
@media (min-width: 900px) {
  .fuera__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .destino { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) auto; }
  .destino__salida { grid-column: 2; grid-row: 1; }
  .destino .btn { grid-column: 3; grid-row: 1; }
}

/* La barra fija del teléfono no tapa el campo con foco (WCAG 2.4.11) */
@media (max-width: 999px) { html { scroll-padding-bottom: 96px; } }

/* ============================================================
   Movimiento: estado quieto diseñado
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
  .js .destacada__foto img { animation: none; clip-path: none; }
  .barrido { animation: aparece .2s linear both !important; }
}