/* =========================================================
   Proyecto Raíces — PAGES · Destinos (destinos.html + destino.html)
   ---------------------------------------------------------
   Listado de destinos agrupado por país (carruseles finitos) y
   ficha editorial de cada destino. Ambas páginas usan
   body[data-page="destinos"], así que comparten este lienzo.
   ========================================================= */

/* Destinos — mismo sistema que Inicio (un lienzo pintado una sola vez
   sobre <main>, secciones transparentes, sin cortes entre ellas), con
   una composición nueva que seguí el recorrido Cusco → Patagonia →
   Norte Argentino: primero calienta en terracota/ocre, se enfría en
   oliva/celeste hacia Patagonia y el interludio "Inspirate", y vuelve
   a un marrón de tierra en Norte Argentino antes del cta-band. */
body[data-page="destinos"] main{
  background-color:var(--canvas-base);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(64% 40% at 16% 10%, rgba(var(--marron-rgb),0.22) 0%, transparent 100%),
    radial-gradient(58% 38% at 86% 20%, rgba(var(--amarillo-rgb),0.18) 0%, transparent 100%),
    radial-gradient(60% 40% at 20% 34%, rgba(var(--verde-comp-rgb),0.4) 0%, transparent 100%),
    radial-gradient(62% 42% at 82% 48%, rgba(var(--celeste-rgb),0.2) 0%, transparent 100%),
    radial-gradient(56% 38% at 22% 60%, rgba(var(--crema-rgb),0.12) 0%, transparent 100%),
    radial-gradient(60% 40% at 84% 74%, rgba(var(--marron-rgb),0.2) 0%, transparent 100%),
    radial-gradient(58% 38% at 24% 90%, rgba(var(--naranja-rgb),0.1) 0%, transparent 100%);
  background-size:100% 100%;
  background-position:0 0;
}
body[data-page="destinos"] .destinos-lista{background:transparent;}
body[data-page="destinos"] .page-intro{background:transparent; padding-bottom:0;}
/* ---------- Destinos — listado editorial (destinos.html) ----------
   Una única experiencia "Destinos" (sin separar Argentina/Internacional
   como secciones), agrupada por país. No usa .dest-grid/.dest-card
   (ésas son del mosaico de Inicio). */
.destinos-lista{padding:28px 0 90px;}
.destinos-lista .kicker{margin-bottom:18px;}
.destinos-lead{font-family:var(--font-heading); font-weight:700; font-size:clamp(38px,5.6vw,76px); line-height:1.08; max-width:820px; color:var(--text-primary); margin-bottom:76px;}
.destinos-lead em{font-style:normal; color:var(--color-accent);}
/* Catálogo editorial de Destinos — agrupado por país/región. Escala a
   cualquier cantidad de destinos: cada país arma su propia grilla que
   crece en filas (nunca una lista vertical de bloques enormes). Foto
   protagonista y compacta, con el nombre integrado sobre la imagen
   (mismo lenguaje WAMANI ya usado en Experiencias/Catálogo) en vez de
   una card blanca separada. */
.destinos-group{margin-bottom:64px;}
.destinos-group:last-child{margin-bottom:0;}
.destinos-group-title{font-family:var(--font-body); font-size:var(--text-sm); font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--color-accent-2); display:flex; align-items:center; gap:14px; margin-bottom:24px;}
.destinos-group-title::after{content:""; flex:1; height:1px; background:var(--border-color-strong);}
/* Carrusel por país — finito: cada destino aparece una sola vez, sin
   clonado ni auto-scroll. Flechas + swipe nativo; el JS habilita y
   deshabilita cada flecha según el límite real del riel (ver
   assets/js/pages/destinos.js). Sólo se activa (flechas visibles) cuando el país
   realmente desborda su fila; con pocos destinos el riel queda quieto
   y sin flechas. */
/* Sin fondo propio (PRO-9): el carrusel se integra directo al fondo de
   su sección — antes .destinos-carousel tenía una "placa" traslúcida
   propia (background + radio) que se leía como una segunda superficie
   flotando sobre el lienzo de Destinos. Flechas y viewport comparten
   el mismo contenedor sólo para alinearse entre sí, no para pintar
   una superficie nueva. */
.destinos-carousel{position:relative; display:flex; align-items:center; gap:8px; padding:6px;}
.destinos-carousel.sin-desborde .destinos-carousel-arrow{display:none;}
.destinos-carousel .testi-arrow{background:transparent; color:var(--text-primary); box-shadow:none; border:1.5px solid rgba(var(--crema-rgb),0.28);}
.destinos-carousel .testi-arrow:hover{background:var(--color-accent); border-color:var(--color-accent); color:var(--color-blanco);}
/* Indicador de continuidad: fundido lateral sutil en vez de un corte
   seco contra el borde — se apaga solo en la punta donde ya no hay más
   para ver (edge-start/edge-end, calculados en pages/destinos.js junto con
   el disabled de las flechas) y desaparece del todo si la fila no
   desborda. No es un overlay sobre la foto: es una máscara de opacidad,
   la fotografía en sí no cambia de color. */
.destinos-carousel-viewport{flex:1; min-width:0; overflow-x:auto; scroll-behavior:auto; scrollbar-width:none; -ms-overflow-style:none; padding:14px 14px 28px;
  mask-image:linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
}
.destinos-carousel-viewport.edge-start{mask-image:linear-gradient(to right, black, black calc(100% - 28px), transparent); -webkit-mask-image:linear-gradient(to right, black, black calc(100% - 28px), transparent);}
.destinos-carousel-viewport.edge-end{mask-image:linear-gradient(to right, transparent, black 28px, black); -webkit-mask-image:linear-gradient(to right, transparent, black 28px, black);}
.destinos-carousel-viewport.edge-start.edge-end,
.destinos-carousel.sin-desborde .destinos-carousel-viewport{mask-image:none; -webkit-mask-image:none;}
.destinos-carousel-viewport::-webkit-scrollbar{display:none;}
.destinos-carousel-track{display:flex; gap:22px; width:max-content;}
.destino-card{position:relative; display:block; aspect-ratio:0.88; border-radius:22px 6px 22px 6px; overflow:hidden; box-shadow:var(--shadow-md); text-decoration:none; color:inherit;}
.destinos-carousel-track .destino-card{flex:0 0 240px; width:240px;}
.destino-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.destino-card:hover img,
.destino-card:hover .exp-img-fallback{transform:scale(1.06);}
.destino-card:hover .exp-img-fallback::before{width:44px;}
.destino-card:active .exp-img-fallback{transform:scale(0.985);}
.destino-card .info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px;}
.destino-card h3{color:var(--color-blanco); font-size:var(--text-2xl); line-height:1.15; text-shadow:0 2px 8px rgba(var(--black-rgb),0.5);}
.destino-card .explorar{display:block; margin-top:6px; font-family:var(--font-heading); font-weight:700; font-size:var(--text-xs); color:var(--color-accent-2); text-shadow:0 2px 8px rgba(var(--black-rgb),0.5); opacity:0; transform:translateY(4px); transition:opacity .25s ease, transform .25s ease;}
.destino-card:hover .explorar{opacity:1; transform:translateY(0);}
.destino-card-flag{position:absolute; top:12px; left:12px; z-index:2; font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-label); color:var(--color-tinta); background:var(--color-accent-2); padding:5px 10px; border-radius:var(--radius-pill); font-weight:700;}
/* Próximamente: única excepción permitida al tratamiento de color de
   fotos (blanco y negro en vez de ocultar la imagen real). */
img.placeholder{filter:grayscale(1);}
@media (hover: none){
  .destino-card .explorar{opacity:1; transform:none;}
}
@media (max-width:700px){
  .destinos-carousel-track .destino-card{flex:0 0 160px; width:160px;}
  .destinos-carousel-track{gap:14px;}
  .destinos-carousel-viewport{padding:14px 14px 26px;}
  /* .destinos-carousel-arrow{display:none} solo, con la misma
       especificidad que .testi-arrow{display:flex} (ambas 1 clase),
       perdía contra esa regla base por orden de aparición en el
       archivo — las flechas quedaban visibles en mobile. Selector
       compuesto (mismo par de clases que ya trae el botón) para no
       depender del orden. */
  .destinos-carousel-arrow.testi-arrow{display:none;}
  /* Sin flechas en mobile, el fundido lateral queda como único aviso de
       que hay más para ver — se refuerza con un "›"/"‹" chico y quieto
       (mismo criterio que el fundido: se apaga en la punta donde ya no
       hay más, vía las mismas clases edge-start/edge-end que ya pone el
       JS de pages/destinos.js). No agrega superficie: es sólo texto, sin
       fondo ni caja detrás. */
  .destinos-carousel::before,
  .destinos-carousel::after{content:"›"; position:absolute; top:50%; transform:translateY(-50%); z-index:2; font-family:var(--font-heading); font-size:var(--text-2xl); line-height:1; color:var(--color-accent-2); text-shadow:0 2px 6px rgba(var(--black-rgb),0.55); pointer-events:none; transition:opacity .2s ease;}
  .destinos-carousel::before{content:"‹"; left:2px;}
  .destinos-carousel::after{right:2px;}
  .destinos-carousel:has(.destinos-carousel-viewport.edge-start)::before{opacity:0;}
  .destinos-carousel:has(.destinos-carousel-viewport.edge-end)::after{opacity:0;}
  .destinos-carousel.sin-desborde::before,
  .destinos-carousel.sin-desborde::after{display:none;}
  .destino-card{border-radius:var(--radius-organic-sm);}
  .destino-card .info{padding:12px;}
  .destino-card h3{font-size:var(--text-lg);}
  .destinos-group{margin-bottom:44px;}
  .destinos-group-title{margin-bottom:16px;}
}
/* =========================================================
   PÁGINA EDITORIAL DE DESTINO (destino.html) — PRO-34
   ========================================================= */
/* "En este lugar" — composición editorial con foto protagonista +
   secundarias (reemplaza la fila justificada .gal-row acá: con sólo
   1 a 4 fotos por destino, una fila justificada se ve como una lista
   pegada al margen en vez de una composición intencional). Mismo
   radio orgánico y sombra que ya usa .about-photo en el resto del
   sitio; mismo mecanismo de lightbox ([data-lightbox]) sin tocar
   initLightbox(). data-fotos="1|2|3|4" define el reparto de columnas
   y filas; g-1 es siempre la foto protagonista. */
.destino-fotos{display:grid; gap:var(--space-3);}
.destino-fotos .g-foto{position:relative; overflow:hidden; border-radius:var(--radius-organic-md); box-shadow:var(--shadow-md); height:100%;}
.destino-fotos img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; transition:transform .5s ease;}
.destino-fotos .g-foto:hover img{transform:scale(1.035);}
/* La altura de cada fila/celda sale del aspect-ratio del CONTENEDOR (no
   de cada foto): así la fila protagonista puede ocupar dos filas sin
   depender de un "stretch" implícito sobre una altura que, si no está
   definida en algún punto de la cadena, termina colapsando en 0. */
.destino-fotos[data-fotos="1"]{grid-template-columns:1fr; aspect-ratio:2.1;}
.destino-fotos[data-fotos="2"]{grid-template-columns:1.35fr 1fr; aspect-ratio:2.5;}
.destino-fotos[data-fotos="3"]{grid-template-columns:1.4fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:1.9;}
.destino-fotos[data-fotos="3"] .g-1{grid-row:1 / 3;}
.destino-fotos[data-fotos="4"]{grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:2.3;}
.destino-fotos[data-fotos="4"] .g-1{grid-row:1 / 3;}
@media (max-width:860px){
  /* Tablet/mobile: la protagonista + secundarias deja de tener sentido con
     tan poco ancho — se simplifica a una grilla pareja de 2 columnas (o 1
     en mobile chico), cada foto con su propia proporción, sin spans. */
  .destino-fotos[data-fotos="2"],
  .destino-fotos[data-fotos="3"],
  .destino-fotos[data-fotos="4"]{grid-template-columns:1fr 1fr; grid-template-rows:none; aspect-ratio:auto;}
  .destino-fotos[data-fotos="2"] .g-foto,
  .destino-fotos[data-fotos="3"] .g-foto,
  .destino-fotos[data-fotos="4"] .g-foto{grid-row:auto; grid-column:auto; height:auto; aspect-ratio:1.2;}
}
@media (max-width:640px){
  .destino-fotos[data-fotos="1"],
  .destino-fotos[data-fotos="2"],
  .destino-fotos[data-fotos="3"],
  .destino-fotos[data-fotos="4"]{grid-template-columns:1fr; aspect-ratio:auto;}
  .destino-fotos[data-fotos="1"] .g-foto,
  .destino-fotos[data-fotos="2"] .g-foto,
  .destino-fotos[data-fotos="3"] .g-foto,
  .destino-fotos[data-fotos="4"] .g-foto{grid-row:auto; grid-column:auto; height:auto; aspect-ratio:1.35;}
}
/* ---------- Página editorial de destino — hero informativo (PRO-34) ----------
   El hero deja de ser sólo presentación visual: además de nombre + país +
   foto, incorpora la presentación editorial (protagonista, con más peso
   que el resto) y, como zona editorial secundaria — tipografía chica en
   amarillo, sin cards ni columnas iguales — los tres tópicos del destino:
   Cuándo ir / Cómo llegar / Naturaleza y cultura. Después del hero y la
   galería, Destino ya no duplica el catálogo: muestra una sola experiencia
   destacada como foto + nombre superpuesto (sin card comercial) y el
   mismo botón (.btn) que ya usan las cards del sitio. */
.destino-hero-intro{font-size:var(--text-2xl); line-height:1.55; color:var(--text-primary); max-width:480px;}
/* Los tres tópicos viven en la MISMA columna de texto del hero (kicker +
   h1 + presentación), inmediatamente después de la presentación: sin
   sección aparte ni salto grande, para que se lean como continuación del
   mismo bloque editorial. Un divisor sutil (misma línea que ya separa
   "En este lugar"/galería del resto) marca el paso de la presentación a
   los temas, y otro igual de discreto separa cada tema del siguiente —
   ritmo compacto, sin cards ni columnas. */
.destino-hero-topicos{margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid rgba(var(--crema-rgb),0.16); display:flex; flex-direction:column;}
.destino-hero-topico + .destino-hero-topico{margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid rgba(var(--crema-rgb),0.12);}
.destino-hero-topico h3{font-family:var(--font-heading); font-weight:700; font-size:var(--text-md); line-height:1.2; color:var(--color-accent-2); text-transform:uppercase; letter-spacing:0.09em; margin-bottom:3px;}
.destino-hero-topico p{font-size:var(--text-base); line-height:1.5; color:var(--text-secondary); max-width:44ch;}
/* Foto más ancha/cinematográfica (no casi cuadrada) y sin badge en pill
   (evitar "exceso de pills", regla 6 de CLAUDE.md): el texto que va sobre
   la foto es una sola composición tipográfica ("Tipo en Destino" +
   nombre), no una card con etiqueta suelta. */
.destino-exp-destacada{position:relative; display:block; max-width:560px; aspect-ratio:1.55; border-radius:28px 8px 28px 8px; overflow:hidden; text-decoration:none;}
.destino-exp-destacada img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.destino-exp-destacada:hover img,
.destino-exp-destacada:hover .exp-img-fallback{transform:scale(1.04);}
.destino-exp-destacada:hover .exp-img-fallback::before{width:44px;}
.destino-exp-destacada:active .exp-img-fallback{transform:scale(0.985);}
.destino-exp-destacada::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(var(--scrim-rgb),0) 28%, rgba(var(--scrim-rgb),0.85) 100%);}
.destino-exp-destacada-info{position:absolute; left:26px; right:26px; bottom:24px; z-index:2; display:flex; flex-direction:column; gap:6px;}
.destino-exp-destacada-tipo{font-family:var(--font-body); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:0.12em; color:var(--color-accent-2); text-shadow:0 2px 8px rgba(var(--black-rgb),0.5);}
.destino-exp-destacada h3{margin:0; color:var(--color-blanco); font-family:var(--font-heading); font-weight:700; font-size:clamp(26px,3.2vw,36px); line-height:1.12; text-shadow:0 2px 14px rgba(var(--black-rgb),0.6);}
.destino-exp-cta{margin-top:var(--space-5);}
@media (max-width: 860px){
  .destinos-lista{padding:0 0 64px;}
  .destinos-lead{margin-bottom:56px;}
}
@media (max-width: 640px){
  .destinos-lista{padding:0 0 48px;}
  .destinos-lead{margin-bottom:44px;}
  /* Conserva el resultado previo a la separación en capas: en mobile
     estos párrafos tomaban el tamaño de ".page-intro-text p" (16px)
     porque esa regla responsive venía después en la hoja única. Se
     deja explícito; unificar con el 14px de desktop es una decisión
     de diseño pendiente, no de esta reorganización. */
  .destino-hero-topico p{font-size:var(--text-lg); line-height:1.5;}
}