/* =========================================================
   Proyecto Raíces — Hoja de estilos compartida
   Basada en la identidad visual del landing original.
   Paleta, tipografías y componentes base se conservan;
   se agregan componentes nuevos para la web completa.
   ========================================================= */

:root{
  /* Paleta de marca — fuente principal, no editar por página */
  --color-celeste:#8BA6B7; --color-marron:#8D4B12; --color-naranja:#FF5B28;
  --color-amarillo:#E9E073; --color-verde:#43612F; --color-verde-oliva:#6A7133;
  --color-crema:#F7F4EC; --color-tinta:#211D16;

  /* Color semántico — los componentes usan estos, no la paleta directa */
  --bg-primary:var(--color-crema);
  --bg-surface:#ffffff;
  --bg-dark:var(--color-tinta);
  --text-primary:var(--color-tinta);
  --text-secondary:#4a463c;
  --text-muted:#6b6656;
  --text-muted-on-dark:#9b967f;
  --text-on-dark:#ffffff;
  --text-on-dark-muted:#cfcabb;
  --color-accent:var(--color-naranja);
  --border-color:rgba(33,29,22,0.08);
  --border-color-strong:rgba(33,29,22,0.16);
  --focus-color:var(--color-naranja);

  /* Lienzo de Inicio (body[data-page="inicio"], ver "Home — lienzo de
     fondo" más abajo) — segunda combinación, deliberadamente distinta de
     la anterior (arena/oliva): marfil cálido, arena, salvia/petróleo
     (nota fría, para que Destinos y Catálogo se diferencien de verdad) y
     terracota/arcilla (nota cálida-tierra en Quiénes somos), usados como
     manchas orgánicas que se pintan UNA vez sobre <main>. */
  --canvas-base:#EAD9B8;
  --bg-ivory:#F3EDE0;
  --bg-sand:#E7D7B2;
  --bg-sage:#C6CFB9;
  --bg-petroleum:#AEC3C2;
  --bg-terracotta:#CD9D79;
  --bg-clay:#DABAAE;

  /* Lienzo de Destinos (body[data-page="destinos"]) — rediseño total de
     la página: la combinación acompaña el recorrido narrativo (Cusco →
     Patagonia → Norte Argentino), NO es la misma que la ronda anterior.
     Base ocre-arena cálida (altiplano); Cusco se lee en terracota/ocre,
     Patagonia enfría el recorrido con oliva/celeste, Norte Argentino
     vuelve a un marrón de tierra antes del cierre. Mismo sistema (main
     pintado una vez, secciones transparentes), otra paleta y otra
     composición de manchas. */
  --dest-canvas-base:#E4D5AE;
  --dest-terracota:#C1683F;
  --dest-ocre:#D9A05C;
  --dest-oliva:#4F5C27;
  --dest-celeste:#7FA3B8;
  --dest-marron:#7A4A22;

  /* Lienzo de Experiencias (Experiencias + Tours + Travesías + Paquetes:
     misma familia de página, mismo lienzo) — tercera combinación propia:
     base arena cálida, amarillo y marrón con fuerza (aventura, tierra) y
     un toque de naranja muy comedido como acento puntual, nunca como
     superficie completa. */
  --exp-canvas-base:#E6DCC0;
  --exp-amarillo:#E9E073;
  --exp-marron:#8D4B12;
  --exp-oliva:#6A7133;
  --exp-naranja:#FF5B28;

  /* Tipografía — familias */
  --font-heading:'Alte Haas Grotesk','Arial Rounded MT Bold',sans-serif;
  --font-body:'Cascadia Mono',monospace;
  --font-detail:'Arial Rounded MT Bold',sans-serif;

  /* Tipografía — escala (los títulos hero/portada mantienen su propio
     clamp() puntual: son composiciones únicas, no texto de escala) */
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:16px; --text-lg:18px;
  --text-xl:19px; --text-2xl:clamp(28px,4vw,42px); --text-3xl:clamp(34px,5vw,56px);

  /* Espaciado — múltiplos de 4px */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  /* Layout */
  --content-max:1180px;
  --gutter:32px;
  --gutter-mobile:20px;

  /* Radios */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-pill:999px;

  /* Sombras — con tinte cálido, nunca negro puro */
  --shadow-sm:0 10px 24px rgba(33,29,22,0.16);
  --shadow-md:0 16px 32px rgba(33,29,22,0.14);
  --shadow-lg:0 24px 48px rgba(33,29,22,0.16);
  --shadow-xl:0 30px 60px rgba(33,29,22,0.16);

  /* Movimiento */
  --ease:cubic-bezier(.4,0,.2,1);
  --duration-fast:0.2s;
  --duration-base:0.3s;
  --duration-slow:0.6s;

  /* Breakpoints de referencia (documental — las custom properties no
     pueden condicionar @media en CSS nativo, así que los media queries
     siguen escritos en px explícito; estos valores son la fuente de
     verdad para mantenerlos consistentes):
     mobile-sm 480 · mobile 640 · tablet 860 · desktop 960 · desktop-wide 1180 */
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
/* El menú mobile (.navlinks) vive fuera de pantalla vía position:fixed +
   translateX(100%): eso agranda el scrollWidth del documento aunque nada
   sea alcanzable al hacer scroll. overflow-x:hidden en html/body contiene
   ese ancho fantasma sin tocar el menú ni su animación. */
body{overflow-x:hidden; font-family:var(--font-body); background:var(--bg-primary); color:var(--text-primary); line-height:1.5;}
h1,h2,h3,.hero-title,.logo-text{font-family:var(--font-heading); font-weight:700; letter-spacing:-0.01em;}
img{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:var(--content-max); margin:0 auto; padding:0 var(--gutter);}

/* Skip link (accesibilidad) */
.skip-link{position:absolute; left:-999px; top:0; background:var(--bg-dark); color:#fff; padding:10px 16px; z-index:999; border-radius:0 0 6px 0;}
.skip-link:focus{left:0;}

/* ---------- Header / navegación ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(247,244,236,0.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--border-color);}
nav{display:flex; align-items:center; justify-content:space-between; padding:14px var(--gutter); max-width:var(--content-max); margin:0 auto; gap:16px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0;}
.brand img{height:34px; width:auto;}
.navlinks{display:flex; gap:26px; font-size:14px; letter-spacing:0.02em; align-items:center;}
.navlinks a{text-decoration:none; opacity:0.75; transition:opacity .2s; white-space:nowrap;}
.navlinks a:hover, .navlinks a.active{opacity:1;}
.navlinks a.active{border-bottom:2px solid var(--color-naranja); padding-bottom:2px;}
.nav-cta{flex-shrink:0;}

.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; flex-shrink:0;}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--bg-dark); margin:5px 0; transition:transform .2s, opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width: 860px){
  .nav-toggle{display:block;}
  .navlinks{
    position:fixed; inset:64px 0 0 0; height:calc(100vh - 64px);
    background:var(--bg-primary); flex-direction:column; align-items:flex-start;
    padding:28px 32px; gap:22px; font-size:17px;
    transform:translateX(100%); transition:transform .25s ease; overflow-y:auto;
  }
  .navlinks.open{transform:translateX(0);}
  .nav-cta{padding:9px 16px; font-size:13px;}
  body[data-page="inicio"] .navlinks.open a{color:var(--text-primary);}
}

/* ---------- Botones ---------- */
.btn{display:inline-block; padding:12px 26px; border-radius:999px; background:var(--color-naranja); color:#fff; text-decoration:none; font-family:var(--font-heading); font-weight:700; font-size:14px; letter-spacing:0.02em; border:none; cursor:pointer; transition:transform .2s, background .2s;}
.btn:hover{background:var(--color-marron); transform:translateY(-2px);}
.btn-outline{background:transparent; border:2px solid currentColor; color:inherit;}
.btn-outline.on-dark{color:#fff;}
.btn-outline.on-dark:hover{background:#fff; color:var(--color-verde);}
.btn-outline.on-light{color:var(--color-verde); border-color:var(--color-verde);}
.btn-outline.on-light:hover{background:var(--color-verde); color:#fff;}
.btn-sm{padding:9px 18px; font-size:13px;}
.btn-block{display:block; text-align:center;}
.btn-whatsapp{background:#25D366; font-size:15px; padding:14px 26px;}
.btn-whatsapp:hover{background:#1DA851;}

/* ---------- Hero genérico (páginas internas) ----------
   Sistema compartido de portadas: misma retícula, mismo
   tratamiento de imagen/overlay y mismo ritmo tipográfico
   en Destinos, Tours, Travesías, Paquetes, Nosotros, Galería
   y Contacto. Cada página sólo aporta su foto, su recorte
   (aspect-ratio + object-position inline) y su texto — el
   lenguaje visual lo define este bloque, una sola vez.
   La variante .page-hero--compact (Contacto) reduce escala
   para una portada más simple, sin duplicar reglas. */
.page-hero{position:relative; width:100%; min-height:440px; max-height:820px; display:flex; align-items:flex-end; overflow:hidden; background:var(--bg-dark); color:#fff;}
.page-hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.97); transform:scale(1); animation:heroZoom 22s ease-out forwards;}
.page-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,5,0) 0%, rgba(10,9,5,0) 42%, rgba(9,8,5,0.22) 62%, rgba(7,6,4,0.6) 100%); pointer-events:none;}
.page-hero .wrap{position:relative; z-index:2; width:100%; padding-bottom:96px; animation:heroRise .8s ease-out both;}
.page-hero .breadcrumb{margin-bottom:22px;}
.page-hero .eyebrow{color:var(--color-amarillo); font-weight:700; margin-bottom:14px; text-shadow:0 1px 2px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.75);}
.page-hero h1{font-size:clamp(52px,9vw,112px); line-height:0.98; max-width:880px; margin-bottom:20px; text-shadow:0 4px 18px rgba(0,0,0,0.45);}
.page-hero p{margin-top:0; max-width:560px; color:#f1eee3; font-size:17px; line-height:1.5; text-shadow:0 1px 10px rgba(0,0,0,0.35);}
.breadcrumb{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; opacity:0.8; margin-bottom:14px;}
.breadcrumb a{text-decoration:none; opacity:0.85;}
.breadcrumb a:hover{opacity:1; text-decoration:underline;}

@keyframes heroZoom{ from{transform:scale(1);} to{transform:scale(1.06);} }
@keyframes heroRise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){
  .page-hero img.bg{animation:none;}
  .page-hero .wrap{animation:none;}
}

/* ---------- Portadas editoriales ----------
   Reemplaza, en Destinos, Tours, Travesías, Paquetes, Nosotros,
   Galería y Contacto, el concepto de banner (foto de fondo +
   texto superpuesto) por una introducción editorial: tipografía
   protagonista sobre el fondo crema del sitio, con la fotografía
   integrada como parte de la composición en vez de como fondo.
   No depende de ninguna animación de entrada.

   .page-hero (arriba) NO se tocó: sigue siendo el componente que
   usan catalogo.html, guias.html, comentarios.html y propuesta.html,
   páginas fuera del alcance de este pedido.

   Reutiliza .wrap, .breadcrumb y .kicker ya existentes en vez de
   duplicarlos. Piezas del sistema:
   - .page-intro-text          bloque de texto (kicker + h1 + p)
   - .page-intro-text.compact  título más chico (Galería, Contacto)
   - .page-intro-grid          grilla texto + foto (2 columnas)
   - .page-intro-media         una sola foto, integrada en un marco
   - .page-intro-media.duo     dos fotos en composición asimétrica
   - .page-intro-lead          foto ancha que sigue al texto (Galería)
   - .page-intro.tight         portada mínima, sin foto (Contacto) */
.page-intro{background:var(--bg-primary); padding:60px 0 12px;}
.page-intro.tight{padding:48px 0 32px;}
.page-intro .breadcrumb{margin-bottom:18px;}
.page-intro-text h1{font-size:clamp(48px,6.5vw,96px); line-height:0.94; margin:14px 0 16px; color:var(--text-primary);}
.page-intro-text.compact h1{font-size:clamp(36px,5vw,60px); margin:10px 0 12px;}
.page-intro-text p{font-size:18px; line-height:1.55; color:var(--text-secondary); max-width:420px;}
.page-intro-text.center{text-align:center; max-width:640px; margin:0 auto;}
.page-intro-text.center .kicker{justify-content:center;}
.page-intro-text.center p{margin-left:auto; margin-right:auto;}

.page-intro-grid{display:grid; grid-template-columns:var(--intro-cols, 1fr 1fr); gap:64px; align-items:center; padding-bottom:52px;}

.page-intro-media{position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:0.9;}
.page-intro-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.page-intro-media:hover img{transform:scale(1.03);}
.page-intro-media .gal-placeholder{width:100%; height:100%;}

.page-intro-media.duo{display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:end; aspect-ratio:auto; box-shadow:none; border-radius:0; overflow:visible;}
.page-intro-media.duo .primary{position:relative; aspect-ratio:var(--intro-primary-ratio, 0.78); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg);}
.page-intro-media.duo .secondary{position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; box-shadow:0 16px 32px rgba(33,29,22,0.2); border:6px solid var(--bg-primary); transform:translateY(22px);}
.page-intro-media.duo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.page-intro-media.duo .primary:hover img, .page-intro-media.duo .secondary:hover img{transform:scale(1.05);}

.page-intro-lead{margin-top:8px; border-radius:14px; overflow:hidden;}
.page-intro-lead img{width:100%; height:auto; max-height:52vh; object-fit:cover; display:block;}

/* ---------- Hero de inicio ---------- */
.eyebrow{font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:0.15em; color:var(--color-amarillo); margin-bottom:18px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}

/* ---------- Hero de Inicio — composición dividida (foto + bloque editorial) ---------- */
/* Hero de Inicio — foto inmersiva a pantalla completa, sin tarjetas
   ni degradado pesado: sólo el mínimo necesario para leer el texto. */
/* Hero de Inicio — la navegación flota transparente sobre la foto
   (sin franja crema separada) para que el ingreso al sitio se sienta
   como una sola composición: foto + marca + navegación, no "banner
   arriba, contenido abajo". El scrim superior es funcional (legibilidad
   del logo/nav sobre cielo claro), no un overlay oscuro de fondo. */
body[data-page="inicio"] header{position:absolute; top:0; left:0; right:0; z-index:30; background:transparent; backdrop-filter:none; border-bottom:none;}
/* Antes: blanco a 0.75 de opacidad (heredado de .navlinks a base) —
   se leía gris/apagado sobre la foto. Ahora: opacidad casi plena +
   más peso, y el activo pasa a amarillo (no sólo el subrayado) para
   que la nav tenga presencia real desde el primer momento. */
body[data-page="inicio"] .navlinks a{color:#fdfbf4; opacity:0.92; font-weight:600; letter-spacing:0.02em;}
body[data-page="inicio"] .navlinks a:hover{opacity:1;}
body[data-page="inicio"] .navlinks a.active{opacity:1; color:var(--color-amarillo); border-bottom-color:var(--color-amarillo);}
body[data-page="inicio"] .nav-toggle span{background:#fdfbf4;}

/* Hero de Inicio — portada real a pantalla completa (100dvh), marca
   centrada como ancla visual. El overlay es un lavado parejo + un
   levísimo refuerzo hacia los bordes: existe únicamente para asegurar
   legibilidad del texto/logo sobre cualquier zona de la foto, no como
   recurso decorativo. */
.hero-inicio{position:relative; height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; padding-bottom:3vh; overflow:hidden;}
/* La foto no corta en seco: se desvanece (mask, no un rectángulo negro)
   sobre su ~18% inferior y deja ver, a través suyo, el mismo lienzo de
   <main> en el que "aterriza" Principales destinos — es la MISMA
   superficie, no un color imitado. Por eso .hero-inicio no tiene
   background propio: si lo tuviera, taparía el lienzo de main. */
.hero-inicio-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; mask-image:linear-gradient(180deg, black 0%, black 90%, transparent 100%); -webkit-mask-image:linear-gradient(180deg, black 0%, black 90%, transparent 100%);}
/* El velo ya no es negro/neutro: usa un oliva muy oscuro (arriba) que
   se funde con un marrón muy oscuro (abajo, zona de los CTAs) — los
   mismos tonos de la paleta llevados a su versión más profunda, así el
   overlay se siente parte de la foto (verdes de montaña, tierra) y no
   un degradado genérico puesto encima. */
.hero-inicio::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(22,27,13,0.24) 0%, rgba(22,27,13,0.24) 88%, transparent 100%); pointer-events:none;}
.hero-inicio::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(22,27,13,0.2) 0%, rgba(22,27,13,0) 20%, rgba(30,20,10,0.1) 50%, rgba(30,20,10,0.52) 68%, rgba(30,20,10,0.52) 90%, transparent 100%); pointer-events:none;}
/* Bloque simple (no flex): con flex-column + align-items:center cada
   hijo de texto toma su ancho "fit-content" y puede crecer más que el
   espacio disponible, recortándose contra el overflow:hidden del hero
   en pantallas angostas. Un bloque normal + text-align:center evita
   ese problema y wrappea el texto correctamente. */
.hero-inicio-content{position:relative; z-index:2; padding:0 40px; max-width:820px; margin:0 auto; width:100%; color:#fff; text-align:center; box-sizing:border-box;}
.hero-inicio-logo{margin-left:auto; margin-right:auto;}
.hero-inicio .hero-ctas{justify-content:center;}
.hero-inicio .eyebrow{color:var(--color-amarillo); font-size:15px; font-weight:700; letter-spacing:0.24em; text-shadow:0 2px 8px rgba(0,0,0,0.5); margin-bottom:var(--space-6); width:100%;}
/* El logo vuelve a ser la pieza dominante y centrada del Hero; el
   tagline pasa a acompañamiento tipográfico menor debajo, con una
   distinción sutil (itálica) respecto del resto de textos del sitio. */
.hero-inicio-logo{display:block; height:clamp(215px,27vw,400px); width:auto; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.45)); margin-bottom:var(--space-6);}
/* Ancho completo (no max-width acotado) para que el texto quede
   centrado sobre el mismo eje que el logo, como un único bloque
   visual — un max-width angosto sin margin:auto desplazaba la caja
   hacia la izquierda en vez de centrarla. */
/* El archivo del logo (logo-amarillo.png) no tiene el dibujo centrado
   en su propio lienzo: le sobra margen a la izquierda, así que su
   centro visual (la tinta) cae unos px a la derecha del centro real
   de la caja. Se compensa acá, en el texto, para que ambos queden
   alineados sobre el mismo eje visual — el logo no se toca. */
.hero-inicio-tagline{display:block; font-family:var(--font-heading); font-weight:500; font-style:italic; letter-spacing:0.02em; font-size:clamp(16px,1.8vw,21px); line-height:1.35; color:rgba(247,244,236,0.92); white-space:normal; width:100%; margin:0; text-shadow:0 2px 10px rgba(0,0,0,0.45); transform:translateX(0.7%);}
.hero-inicio-tagline::before, .hero-inicio-tagline::after{content:none;}
/* CTAs claramente separados del bloque logo+tagline, aprovechando el
   espacio de la foto hacia abajo — misma pareja editorial de antes
   (píldora sólida + link subrayado), sólo cambia la separación. */
.hero-inicio .hero-ctas{gap:28px; align-items:center; justify-content:center; margin-top:var(--space-9);}
.hero-inicio .btn{font-family:var(--font-heading); padding:17px 36px; font-size:15px; letter-spacing:0.02em; display:inline-flex; align-items:center; gap:10px;}
.hero-inicio .btn::after{content:"→"; transition:transform var(--duration-base) var(--ease);}
.hero-inicio .btn:hover::after{transform:translateX(4px);}
.hero-inicio .btn-outline{background:none; border:none; padding:0 0 5px; border-bottom:1px solid rgba(233,224,115,0.45); border-radius:0; color:var(--color-amarillo); font-family:var(--font-heading); font-weight:700; font-size:15px; letter-spacing:0.02em; display:inline-flex; align-items:center; gap:8px; transition:border-color var(--duration-base) var(--ease);}
.hero-inicio .btn-outline::after{content:"→"; transition:transform var(--duration-base) var(--ease);}
.hero-inicio .btn-outline:hover{background:none; color:var(--color-amarillo); border-bottom-color:var(--color-amarillo); transform:none;}
.hero-inicio .btn-outline:hover::after{transform:translateX(4px);}

/* ---------- Secciones ---------- */
section{padding:100px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.kicker{font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:0.15em; color:var(--color-marron); margin-bottom:14px; display:flex; align-items:center; gap:10px;}
.section-head.center .kicker{justify-content:center;}
.kicker::before{content:""; width:26px; height:2px; background:var(--color-naranja); display:inline-block;}
.section-head h2{font-size:clamp(30px,4vw,46px); line-height:1.05;}
.section-head p{margin-top:16px; font-size:16px; color:var(--text-secondary); max-width:520px;}
.section-head.center p{margin-left:auto; margin-right:auto;}
.section-foot{margin-top:44px; text-align:center;}
.section-foot .btn, .section-foot .btn-outline{margin:0 6px 10px;}

/* ---------- Nosotros / About ---------- */
.about{background:#fff;}
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
.about-grid img{border-radius:6px;}
/* Lista de datos separada por hairlines en vez de 3 cajas iguales:
   son frases (no KPIs numéricos), así que un divisor fino lee mejor
   que una grilla de tarjetas repetida. */
.stat-row{display:flex; gap:0; margin-top:var(--space-7); border-top:1px solid var(--border-color); padding-top:var(--space-5);}
.stat{max-width:none; flex:1; padding:0 var(--space-5); border-left:1px solid var(--border-color);}
.stat:first-child{padding-left:0; border-left:none;}
.stat b{font-family:var(--font-heading); font-size:17px; line-height:1.25; display:block; color:var(--color-verde); margin-bottom:4px;}
.stat span{font-size:13px; color:var(--text-muted);}

/* Home — la foto de "Quiénes somos" gana proporción editorial (retrato,
   no una caja panorámica de altura fija) y el texto pasa a ser la
   columna dominante; Nosotros conserva su propio .about intacto. */
body[data-page="inicio"] .about{background:transparent;}
body[data-page="inicio"] .about-grid{grid-template-columns:0.9fr 1.1fr; gap:var(--space-8);}
body[data-page="inicio"] .about h2{font-size:clamp(34px,4.5vw,52px); line-height:1.05; max-width:520px;}
body[data-page="inicio"] .about-photo{border-radius:36px 12px 36px 12px; overflow:hidden; aspect-ratio:0.82; box-shadow:var(--shadow-sm);}
body[data-page="inicio"] .about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
body[data-page="inicio"] .about p{margin-top:var(--space-4); font-size:var(--text-md); line-height:1.7; max-width:460px;}
body[data-page="inicio"] .about p + p{margin-top:var(--space-3);}

/* Home — versión compacta de la grilla de equipo que ya existe completa
   en nosotros.html (mismo lenguaje: foto orgánica + nombre + rol/
   descripción pendientes), integrada dentro de la propia sección
   "Quiénes somos" en vez de ser un bloque nuevo. Fotos más chicas y
   cuadradas (acá prioriza reconocer a las personas rápido, no
   protagonismo de foto) y con el mismo radio asimétrico que ya usa
   .about-photo en esta página. */
/* .equipo-mini vive en su propio .wrap (misma clase/mismo --content-max
   que .about-grid arriba), así que NO se le pone un max-width propio a
   la grilla: debe llenar el mismo ancho que foto+contenido para
   compartir eje izquierdo/derecho con la composición de arriba, no un
   bloque angosto flotando adentro. El CTA se centra respecto de ese
   mismo ancho (text-align en el wrap, revertido adentro de la grilla
   para no centrar los nombres/textos de cada persona). */
body[data-page="inicio"] .equipo-mini{margin-top:var(--space-8); text-align:center;}
body[data-page="inicio"] .equipo-mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); text-align:left;}
body[data-page="inicio"] .equipo-mini-persona{margin:0;}
body[data-page="inicio"] .equipo-mini-foto{position:relative; aspect-ratio:1; border-radius:36px 12px 36px 12px; overflow:hidden; box-shadow:var(--shadow-sm);}
body[data-page="inicio"] .equipo-mini-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
body[data-page="inicio"] .equipo-mini-persona:hover .equipo-mini-foto img{transform:scale(1.04);}
body[data-page="inicio"] .equipo-mini-persona figcaption{margin-top:var(--space-3);}
body[data-page="inicio"] .equipo-mini-persona h3{font-size:17px; color:var(--text-primary);}
/* Perfil sin rol/bio cargados todavía: un tag "en preparación" (mismo
   lenguaje que ya usan los destinos sin foto/contenido real) en vez de
   dos líneas de texto genérico repetidas en las 3 personas. */
body[data-page="inicio"] .equipo-mini-pendiente{display:inline-block; margin-top:8px; font-family:var(--font-body); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-marron); border:1px dashed var(--color-marron); border-radius:999px; padding:4px 12px;}
body[data-page="inicio"] .equipo-mini-cta{display:inline-block; margin-top:var(--space-6);}
.valores-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px;}
.valor-card{background:var(--bg-primary); border-radius:8px; padding:28px;}
a.valor-card{display:block; text-decoration:none; color:inherit; cursor:pointer; position:relative; overflow:hidden; border:1.5px solid rgba(141,75,18,0.16); transition:transform .25s, box-shadow .25s, border-color .25s;}
a.valor-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--color-naranja); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;}
a.valor-card:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(33,29,22,0.14); border-color:var(--color-naranja);}
a.valor-card:hover::before{transform:scaleX(1);}
a.valor-card .corner-arrow{position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:50%; background:var(--color-naranja); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; transition:transform .3s ease, background .25s;}
a.valor-card:hover .corner-arrow{transform:rotate(-45deg) scale(1.1); background:var(--color-marron);}
a.valor-card .num{padding-right:40px;}
.valor-card .num{font-family:var(--font-heading); font-size:13px; color:var(--color-naranja); letter-spacing:0.1em; margin-bottom:10px; display:block;}
.valor-card h3{font-size:18px; margin-bottom:8px; transition:color .2s;}
a.valor-card:hover h3{color:var(--color-marron);}
.valor-card p{font-size:14px; color:var(--text-secondary);}
.valor-card .ver-mas{display:inline-block; margin-top:14px; font-size:13px; font-family:var(--font-heading); color:var(--color-verde); transition:transform .25s, color .2s;}
a.valor-card .ver-mas{font-weight:700; color:var(--color-naranja); text-decoration:underline; text-underline-offset:3px;}
a.valor-card:hover .ver-mas{color:var(--color-marron); transform:translateX(4px);}

/* ---------- Destinos ---------- */
.destinos{background:var(--bg-primary);}

/* Home — lienzo de fondo, segunda combinación: marfil/arena (Destinos),
   salvia/petróleo — nota fría deliberada para diferenciar Catálogo de
   Destinos — (Catálogo), terracota/arcilla (Quiénes somos, la mancha más
   grande de las cuatro: es el punto donde pedieron una transición con
   más presencia hacia Catálogo) y de nuevo marfil/arena para Comentarios
   (mismo recurso que Destinos pero en dirección/posición distinta, para
   no repetir el mismo efecto). Radial-gradients grandes y superpuestos
   (no linear-gradient, no franjas): cada mancha empieza en una sección y
   se apaga ya entrada la siguiente. El hero y el cta-band/footer pintan
   su propio fondo opaco encima, así que esto no se ve detrás de ellos. */
body[data-page="inicio"] main{
  background-color:var(--canvas-base);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(72% 48% at 20% 26%, rgba(231,215,178,0.55) 0%, transparent 100%),
    radial-gradient(62% 42% at 84% 34%, rgba(243,237,224,0.45) 0%, transparent 100%),
    radial-gradient(70% 46% at 86% 48%, rgba(174,195,194,0.5) 0%, transparent 100%),
    radial-gradient(64% 42% at 16% 56%, rgba(198,207,185,0.42) 0%, transparent 100%),
    radial-gradient(74% 48% at 22% 68%, rgba(205,157,121,0.4) 0%, transparent 100%),
    radial-gradient(50% 34% at 74% 72%, rgba(218,186,174,0.26) 0%, transparent 100%),
    radial-gradient(62% 40% at 78% 86%, rgba(243,237,224,0.48) 0%, transparent 100%),
    radial-gradient(58% 38% at 22% 92%, rgba(231,215,178,0.38) 0%, transparent 100%);
  background-size:100% 100%;
  background-position:0 0;
}

/* Home — superficie continua real: Destinos, Catálogo, Quiénes somos y
   Comentarios NO tienen fondo propio (transparent). Lo que se ve detrás
   es la composición orgánica pintada una sola vez en <main> (ver más
   abajo, "Home — lienzo de fondo"), que no respeta límites de sección:
   una mancha de color puede empezar en Destinos y terminar en Catálogo.
   El texto vuelve a sus colores de siempre (la base sigue siendo clara). */
body[data-page="inicio"] .destinos,
body[data-page="inicio"] .catalogo-home,
body[data-page="inicio"] .about,
body[data-page="inicio"] .testi{background:transparent;}
body[data-page="inicio"] .catalogo-home{padding-top:var(--space-6);}
body[data-page="inicio"] .catalogo-home .valores-grid{grid-template-columns:1.3fr 1fr 1fr;}
/* Tours/Travesías/Paquetes en Inicio — la foto manda: se saca la
   descripción larga y el "Ver más →" queda oculto hasta el hover, así
   la tarjeta en reposo es sólo categoría + frase corta, sin bloque de
   texto compitiendo con la imagen. */
body[data-page="inicio"] .catalogo-home .dest-card{height:460px; border-radius:var(--radius-lg); transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
body[data-page="inicio"] .catalogo-home .dest-card:hover{box-shadow:var(--shadow-lg);}
body[data-page="inicio"] .catalogo-home .dest-card.catalogo-feature{border-radius:36px 12px 36px 12px;}
body[data-page="inicio"] .catalogo-home .dest-card:nth-child(2){transform:translateY(30px); border-radius:12px 36px 12px 36px;}
body[data-page="inicio"] .catalogo-home .dest-card:nth-child(2):hover{transform:translateY(24px);}
body[data-page="inicio"] .catalogo-home .dest-card:nth-child(3){transform:translateY(-14px); border-radius:12px 36px 12px 36px;}
body[data-page="inicio"] .catalogo-home .dest-card:nth-child(3):hover{transform:translateY(-20px);}
body[data-page="inicio"] .catalogo-home .dest-card::after{background:linear-gradient(180deg, transparent 0%, transparent 62%, rgba(10,12,6,0.85) 100%);}
body[data-page="inicio"] .catalogo-home .dest-card .tag{font-size:11px; margin-bottom:4px;}
body[data-page="inicio"] .catalogo-home .dest-card h3{font-size:19px; line-height:1.25;}
body[data-page="inicio"] .catalogo-home .dest-card p{display:none;}
body[data-page="inicio"] .catalogo-home .dest-card .count{opacity:0; transform:translateY(4px); margin-top:6px; transition:opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
body[data-page="inicio"] .catalogo-home .dest-card:hover .count{opacity:1; transform:translateY(0);}
@media (hover: none){
  body[data-page="inicio"] .catalogo-home .dest-card .count{opacity:1; transform:none;}
}
.destinos-group-label{font-family:var(--font-heading); font-size:14px; text-transform:uppercase; letter-spacing:0.1em; color:var(--color-amarillo); margin:44px 0 20px;}
.destinos-group-label:first-of-type{margin-top:0;}
.dest-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}

/* Home — "Nuestros destinos" como mosaico editorial (1 foto protagonista +
   2 apiladas), no 3 cajas iguales. Misma data/links de DESTINOS, sólo
   cambia la composición vía :nth-child. */
/* Cusco protagonista: foto vertical grande a la izquierda (retrato,
   dramática), Patagonia y Norte Argentino la acompañan en horizontal
   a la derecha con alturas desiguales — ni cuadrados iguales ni
   simetría perfecta. Texto anclado abajo (misma lógica editorial que
   Catálogo), no centrado sobre la foto. */
#destinos-home{grid-template-columns:1.75fr 1fr; grid-template-rows:0.85fr 1.15fr; gap:var(--space-5); height:660px;}
#destinos-home .dest-card{height:100%; transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
#destinos-home .dest-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
#destinos-home .dest-card:first-child{grid-row:1 / 3; border-radius:36px 12px 36px 12px; margin-top:-14px;}
#destinos-home .dest-card:first-child h3{font-size:34px;}
#destinos-home .dest-card:not(:first-child){border-radius:12px 36px 12px 36px;}
#destinos-home .dest-card:nth-child(3){transform:translate(14px,14px);}
#destinos-home .dest-card:nth-child(3):hover{transform:translate(14px,10px);}
#destinos-home .dest-card .info{padding:28px 26px;}
.dest-card{position:relative; border-radius:8px; overflow:hidden; height:340px; display:flex; align-items:flex-end; text-decoration:none; color:inherit;}
.dest-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.dest-card:hover img{transform:scale(1.06);}
.dest-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, rgba(10,12,6,0.1) 25%, rgba(10,12,6,0.55) 60%, rgba(10,12,6,0.94) 100%);}
#destinos-home .dest-card::after{background:linear-gradient(180deg, rgba(10,12,6,0.28) 0%, rgba(10,12,6,0.5) 45%, rgba(10,12,6,0.88) 100%);}
.dest-card .info{position:relative; z-index:2; padding:26px;}
.dest-card .tag{font-family:var(--font-body); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-amarillo); margin-bottom:8px; display:block; text-shadow:0 1px 4px rgba(0,0,0,0.55);}
.dest-card h3{font-size:26px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.5);}
.dest-card p{font-size:14px; color:#e7e3d6; margin-top:8px; max-width:320px; text-shadow:0 1px 6px rgba(0,0,0,0.45);}
.dest-card .count{display:inline-block; margin-top:12px; font-family:var(--font-heading); font-size:13px; font-weight:700; letter-spacing:0.02em; color:var(--color-naranja); text-decoration:underline; text-underline-offset:4px; transition:transform .25s ease, color .2s ease;}
.dest-card:hover .count{color:var(--color-amarillo); transform:translateX(4px);}
.dest-card.placeholder{background:linear-gradient(135deg, var(--color-verde-oliva), var(--color-marron)); align-items:center; justify-content:center; text-align:center;}
.dest-card.placeholder .info{padding:28px 40px;}
.placeholder-flag{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; background:rgba(255,255,255,0.16); border:1px dashed rgba(255,255,255,0.5); padding:4px 10px; border-radius:999px; margin-top:10px;}

/* 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(--dest-canvas-base);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(64% 40% at 16% 10%, rgba(193,104,63,0.4) 0%, transparent 100%),
    radial-gradient(58% 38% at 86% 20%, rgba(217,160,92,0.34) 0%, transparent 100%),
    radial-gradient(60% 40% at 20% 34%, rgba(217,160,92,0.4) 0%, transparent 100%),
    radial-gradient(62% 42% at 82% 48%, rgba(127,163,184,0.36) 0%, transparent 100%),
    radial-gradient(56% 38% at 22% 60%, rgba(79,92,39,0.32) 0%, transparent 100%),
    radial-gradient(60% 40% at 84% 74%, rgba(122,74,34,0.36) 0%, transparent 100%),
    radial-gradient(58% 38% at 24% 90%, rgba(193,104,63,0.3) 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 — composición editorial (SOLO destinos.html) ----------
   Reemplaza la grilla de tarjetas (separada Argentina/Internacional) por
   una secuencia de destinos protagonistas, alternando el lado de la foto.
   No usa .dest-grid/.dest-card (esas siguen intactas para index.html). */
.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-naranja);}

/* 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:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.14em; color:var(--color-marron); 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 script
   en destinos.html). Sólo se activa (flechas visibles) cuando el país
   realmente desborda su fila; con pocos destinos el riel queda quieto
   y sin flechas. */
.destinos-carousel{position:relative; display:flex; align-items:center; gap:14px;}
.destinos-carousel.sin-desborde .destinos-carousel-arrow{display:none;}
.destinos-carousel-viewport{flex:1; min-width:0; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; padding:20px 20px 34px;}
.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, .destino-card .gal-placeholder{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.destino-card .gal-placeholder{display:flex; align-items:center; justify-content:center;}
.destino-card:hover img{transform:scale(1.06);}
.destino-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(10,8,4,0.82) 100%);}
.destino-card .info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px;}
.destino-card h3{color:#fff; font-size:20px; line-height:1.15; text-shadow:0 2px 8px rgba(0,0,0,0.5);}
.destino-card .explorar{display:block; margin-top:6px; font-family:var(--font-heading); font-weight:700; font-size:12px; color:var(--color-amarillo); 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:0.08em; color:#fff; background:rgba(20,18,12,0.55); padding:5px 10px; border-radius:999px;}
@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;}
  .destino-card{border-radius:16px 6px 16px 6px;}
  .destino-card .info{padding:12px;}
  .destino-card h3{font-size:16px;}
  .destinos-group{margin-bottom:44px;}
  .destinos-group-title{margin-bottom:16px;}
}
.destino-feature-text p{font-size:18px; line-height:1.6; color:var(--text-secondary); max-width:420px;}
.destino-feature-cta{display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:var(--font-heading); font-weight:700; font-size:15px; color:var(--color-naranja); text-decoration:underline; text-underline-offset:4px; transition:transform .25s ease, color .2s ease;}
.destino-feature-cta:hover{color:var(--color-marron); transform:translateX(4px);}
.destino-feature-flag{display:inline-block; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:#8a8470; border:1px dashed #c9c3ae; padding:5px 12px; border-radius:999px; margin-top:22px;}

/* Patagonia — foto grande con ficha superpuesta en el borde */
.destino-a{position:relative; max-width:900px; margin:0 0 170px;}
.destino-a-photo{aspect-ratio:1.5; border-radius:44px 12px 44px 12px; overflow:hidden; box-shadow:var(--shadow-xl);}
.destino-a-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease;}
.destino-a-photo:hover img{transform:scale(1.04);}
.destino-a-card{position:absolute; right:-48px; bottom:-86px; background:var(--bg-primary); border-radius:16px; padding:34px 38px; max-width:360px; box-shadow:0 24px 48px rgba(33,29,22,0.18); text-decoration:none; color:inherit; display:block;}
.destino-a-card h2{font-size:clamp(32px,4vw,44px); line-height:1; color:var(--text-primary); margin:6px 0 12px;}
.destino-a-card p{font-size:15px; line-height:1.55; color:var(--text-secondary);}

/* Norte Argentino — bloque contenido, texto al frente (contenido en preparación) */
.destino-b{display:flex; align-items:flex-end; gap:48px; margin:0 0 170px;}
.destino-b-text{flex:1.3 1 0;}
.destino-b-text h2{font-size:clamp(34px,5vw,56px); line-height:1; color:var(--text-primary); margin:6px 0 14px;}
.destino-b-photo{flex:0.8 1 0; max-width:360px; aspect-ratio:0.85; border-radius:12px 40px 12px 40px; overflow:hidden; box-shadow:0 22px 44px rgba(33,29,22,0.14);}
.destino-b-photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* Cusco — banda panorámica, cierre de la secuencia */
.destino-c{margin:0;}
.destino-c-photo{aspect-ratio:2.1; border-radius:44px 12px 44px 12px; overflow:hidden; margin-bottom:32px; box-shadow:var(--shadow-xl);}
.destino-c-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease;}
.destino-c-photo:hover img{transform:scale(1.03);}
.destino-c-text h2{font-size:clamp(34px,5vw,60px); line-height:1; color:var(--text-primary); margin:6px 0 14px;}
.destino-c-text p{max-width:520px;}

/* Portada de Destinos — introduce el concepto sin repetir el Hero de
   Inicio: más baja, texto chico abajo a la izquierda (no un título
   gigante), misma técnica de disolución hacia el lienzo de la página. */
.destinos-hero{position:relative; min-height:62vh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:64px;}
.destinos-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; z-index:0; mask-image:linear-gradient(180deg, black 0%, black 78%, transparent 100%); -webkit-mask-image:linear-gradient(180deg, black 0%, black 78%, transparent 100%);}
.destinos-hero::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(22,19,13,0.28) 0%, rgba(22,19,13,0.12) 40%, rgba(22,19,13,0.42) 100%); pointer-events:none;}
.destinos-hero-content{position:relative; z-index:2; width:100%; padding:0 48px; max-width:1400px; margin:0 auto; color:#fff;}
.destinos-hero-content .breadcrumb{font-size:13px; color:var(--text-on-dark-muted); margin-bottom:14px;}
.destinos-hero-content .breadcrumb a{color:var(--text-on-dark-muted);}
.destinos-hero-content .eyebrow{font-family:var(--font-body); font-size:15px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-amarillo); text-shadow:0 2px 8px rgba(0,0,0,0.5); max-width:420px;}

/* Cusco — mini-galería que amplía el destino protagonista con más
   fotos reales del lugar. scroll-snap nativo: teclado, touch y
   scrollbar funcionan solos, sin JS a medida. */
.destino-galeria{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 4px 10px 0; scrollbar-width:thin;}
.destino-galeria-item{flex:0 0 200px; aspect-ratio:0.8; border-radius:12px; overflow:hidden; scroll-snap-align:start; box-shadow:0 14px 28px rgba(33,29,22,0.16); display:block;}
.destino-galeria-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.destino-galeria-item:hover img{transform:scale(1.05);}

/* Interludio "Inspirate" entre Patagonia y Norte Argentino — corta el
   ritmo de bloque-a-bloque con un recorrido horizontal de las tres
   regiones antes del cierre. */
.destinos-inspirate{margin:0 0 170px;}
.destinos-inspirate-head{max-width:520px; margin-bottom:32px;}
.destinos-inspirate-head h2{font-family:var(--font-heading); font-size:clamp(28px,3.4vw,40px); line-height:1.1; color:var(--text-primary); margin-top:8px;}
.destinos-inspirate-track{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 4px 10px 0;}
.destinos-inspirate-item{position:relative; flex:0 0 280px; aspect-ratio:0.82; border-radius:12px 40px 12px 40px; overflow:hidden; scroll-snap-align:start; box-shadow:var(--shadow-lg); text-decoration:none; display:block;}
.destinos-inspirate-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
.destinos-inspirate-item:hover img{transform:scale(1.05);}
.destinos-inspirate-item span{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; font-family:var(--font-heading); font-weight:700; font-size:17px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5); background:linear-gradient(180deg, transparent, rgba(20,16,10,0.6));}

/* Aparición al hacer scroll — sutil, una vez, y desactivada por
   completo si el usuario prefiere menos movimiento (ver script). */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ---------- Experiencias (catálogo) ---------- */
.filtros{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px;}
.filtros.center{justify-content:center;}
.filtro-btn{font-family:var(--font-body); font-size:13px; padding:9px 18px; border-radius:999px; border:1.5px solid #d9d4c4; background:#fff; cursor:pointer; color:var(--text-primary); transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;}
.filtro-btn:active{transform:scale(0.96);}
#prop-grid{transition:opacity .18s ease;}
#prop-grid.prop-grid-fading{opacity:0;}
.filtro-btn:hover{border-color:var(--color-naranja);}
.filtro-btn.active{background:var(--color-verde); border-color:var(--color-verde); color:#fff;}

.filtro-destino-group{display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:100%;}
.filtro-destino-label{font-family:var(--font-body); font-size:13px; color:var(--text-primary);}
.filtro-destino-select{font-family:var(--font-body); font-size:13px; padding:9px 34px 9px 18px; border-radius:999px; border:1.5px solid #d9d4c4; background:#fff; color:var(--text-primary); cursor:pointer; max-width:100%; appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%234a463c' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px;}
.filtro-destino-select:hover{border-color:var(--color-naranja);}

.exp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:40px 28px;}
/* Catálogo — mismo lenguaje ya usado en Tours/Travesías/Paquetes/
   Experiencias: sin caja blanca, foto con esquina orgánica y chip
   discreto en vez de card genérica. Base de .exp-card para cualquier
   página que no tenga su propia composición (hoy, sólo Catálogo). */
.exp-card{min-width:0; background:transparent; border-radius:0; overflow:visible; border:none; display:flex; flex-direction:column; transition:transform .25s ease;}
.exp-card:hover{transform:translateY(-3px);}
.exp-card .img-wrap{display:block; position:relative; height:auto; aspect-ratio:1.1; overflow:hidden; border-radius:36px 10px 36px 10px; box-shadow:0 14px 30px rgba(33,29,22,.14);}
.exp-card:nth-child(3n+1) .img-wrap{aspect-ratio:1.7;}
/* Catálogo (destino): mismo formato de card para las 3 columnas — sin
   esta excepción, la foto más ancha de cada 1º card por fila quedaba
   con una card más baja que el resto. La imagen se adapta con
   object-fit, la card no cambia de tamaño. */
body[data-page="catalogo"] .exp-card:nth-child(3n+1) .img-wrap{aspect-ratio:1.1;}
.exp-card .img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.exp-card:hover .img-wrap img{transform:scale(1.055);}
.exp-card .cat-badge{position:absolute; top:12px; left:12px; background:rgba(20,18,12,0.55); font-family:var(--font-body); font-weight:600; color:#fff; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; padding:6px 12px; border-radius:999px;}
.exp-card .body{padding:16px 2px 0; display:flex; flex-direction:column; gap:8px; flex:1;}
.exp-card .dest-tag{font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-marron);}
.exp-card h3{font-size:19px; line-height:1.2;}
.exp-card .resumen{font-size:13.5px; color:var(--text-secondary); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
/* Catálogo (destino): título y resumen reservan siempre el mismo alto
   (2 líneas), en vez de encogerse con texto corto — la card mezcla
   Tours/Travesías/Paquetes de un mismo destino y con esto queda pareja
   sin importar el largo del título o la foto de cada propuesta. */
body[data-page="catalogo"] .exp-card h3{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:46px;}
body[data-page="catalogo"] .exp-card .resumen{min-height:63px;}
.exp-card .meta{display:flex; gap:14px; font-size:11.5px; color:var(--text-muted); flex-wrap:wrap;}
.exp-card .meta span{display:flex; align-items:center; gap:5px;}
.exp-card .actions{display:flex; gap:10px; margin-top:4px; flex-wrap:wrap;}

/* ---------- Experiencias — carrusel de Inicio ----------
   Reutiliza .exp-card/.filtro-btn/.testi-arrow tal cual (mismo
   componente y mismos botones que ya usa el resto del sitio); sólo
   agrega el riel horizontal con auto-scroll continuo, pausado al
   interactuar. Ancho/alto fijos por card para que la simetría se
   sostenga aunque cambie el largo del texto real más adelante. */
body[data-page="inicio"] .exp-home{padding-top:8px; padding-bottom:16px; position:relative;}
body[data-page="inicio"] .destinos{padding-top:20px;}
/* Halo muy sutil detrás del carrusel — misma paleta del lienzo, sólo
   para dar algo de profundidad sin competir con las fotos. */
body[data-page="inicio"] .exp-carousel{position:relative; display:flex; align-items:center; gap:16px; margin-top:8px;}
body[data-page="inicio"] .exp-carousel::before{content:""; position:absolute; inset:-48px -24px; z-index:0; background:radial-gradient(60% 75% at 50% 48%, rgba(141,75,18,0.16) 0%, rgba(141,75,18,0.07) 55%, transparent 100%); pointer-events:none;}
/* Superficie levemente hundida detrás de las cards: un borde interno
   sutil arriba/abajo que separa el riel del resto del lienzo, sin caja
   ni sombra dura. */
body[data-page="inicio"] .exp-carousel-viewport{box-shadow:inset 0 24px 34px -30px rgba(33,29,22,0.22), inset 0 -24px 34px -30px rgba(33,29,22,0.22);}
/* Padding interno para que la sombra de cada card no quede recortada
   contra el borde del viewport con scroll (arriba/abajo y en los
   extremos), sin alterar el ancho de las cards. */
body[data-page="inicio"] .exp-carousel-viewport{position:relative; z-index:1; flex:1; min-width:0; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; padding:24px 24px 42px;}
body[data-page="inicio"] .exp-carousel-viewport.dragging{cursor:grabbing; scroll-behavior:auto;}
body[data-page="inicio"] .exp-carousel-viewport::-webkit-scrollbar{display:none;}
body[data-page="inicio"] .exp-carousel-track{display:flex; gap:26px; width:max-content;}
body[data-page="inicio"] .exp-carousel .exp-card{flex:0 0 300px; width:300px; min-height:480px; height:auto; display:flex; flex-direction:column;}
body[data-page="inicio"] .exp-carousel .exp-card .img-wrap,
body[data-page="inicio"] .exp-carousel .exp-card:nth-child(3n+1) .img-wrap{flex:none; aspect-ratio:1.15;}
body[data-page="inicio"] .exp-carousel .exp-card .body{flex:1; padding:16px 2px 4px;}
body[data-page="inicio"] .exp-carousel .exp-card .resumen{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
body[data-page="inicio"] .exp-carousel .exp-card .actions{margin-top:auto; padding-top:10px;}
@media (max-width:640px){
  body[data-page="inicio"] .exp-carousel .exp-card{width:76vw; flex-basis:76vw; min-height:440px; height:auto;}
  body[data-page="inicio"] .exp-carousel .testi-arrow{display:none;}
  body[data-page="inicio"] .exp-carousel-viewport{padding:18px 14px 34px;}
}

/* Experiencias + Tours + Travesías + Paquetes + Nosotros + Catálogo —
   misma familia de página, mismo lienzo continuo (sin fondo propio por
   sección), tercera combinación de color propia del sitio. Nosotros y
   Catálogo se suman acá (en vez de tener su propia combinación) porque
   ya comparten tipografía/composición con esta familia y evita que su
   fondo vuelva a leerse como blanco plano. */
body[data-page="experiencias"] main,
body[data-page="tours"] main,
body[data-page="travesias"] main,
body[data-page="paquetes"] main,
body[data-page="nosotros"] main,
body[data-page="galeria"] main,
body[data-page="contacto"] main,
body[data-page="catalogo"] main,
body[data-page="propuesta"] main{
  background-color:var(--exp-canvas-base);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(64% 42% at 14% 18%, rgba(233,224,115,0.4) 0%, transparent 100%),
    radial-gradient(60% 40% at 86% 32%, rgba(141,75,18,0.26) 0%, transparent 100%),
    radial-gradient(62% 40% at 14% 50%, rgba(106,113,51,0.3) 0%, transparent 100%),
    radial-gradient(52% 34% at 82% 64%, rgba(255,91,40,0.14) 0%, transparent 100%),
    radial-gradient(58% 38% at 24% 76%, rgba(233,224,115,0.34) 0%, transparent 100%);
  background-size:100% 100%;
  background-position:0 0;
}
body[data-page="experiencias"] main section:not(.cta-band),
body[data-page="tours"] main section:not(.cta-band),
body[data-page="travesias"] main section:not(.cta-band),
body[data-page="paquetes"] main section:not(.cta-band),
body[data-page="nosotros"] main section:not(.cta-band),
body[data-page="galeria"] main section:not(.cta-band):not(.comunidad),
body[data-page="contacto"] main section:not(.cta-band),
body[data-page="catalogo"] main section:not(.cta-band),
body[data-page="propuesta"] main section{background:transparent;}

/* Experiencias — catálogo visual: mismas tarjetas/datos que Tours,
   Travesías, Paquetes y Catálogo, sólo con más presencia fotográfica
   en esta página puntual (no afecta a las demás). */
/* Experiencias — catálogo editorial: cada experiencia ocupa su propia
   fila grande (foto + ficha), alternando el lado de la foto en vez de
   repetir la misma tarjeta chica. Misma data/markup que Tours,
   Travesías, Paquetes y Catálogo — sólo cambia la composición acá. */
body[data-page="experiencias"] .exp-grid{grid-template-columns:1fr; gap:96px; max-width:1080px; margin:0 auto;}
body[data-page="experiencias"] .exp-card{display:grid; align-items:center; gap:44px; background:transparent; border:none; border-radius:0; transition:none;}
body[data-page="experiencias"] .exp-card:hover{transform:none; box-shadow:none;}
body[data-page="experiencias"] .exp-card .img-wrap{height:auto; border-radius:44px 12px 44px 12px;}
body[data-page="experiencias"] .exp-card .cat-badge{background:rgba(20,18,12,0.55); font-family:var(--font-body); font-weight:600; letter-spacing:0.1em; font-size:10.5px; padding:6px 12px;}
body[data-page="experiencias"] .exp-card .body{padding:0;}
body[data-page="experiencias"] .exp-card h3{font-size:clamp(24px,2.4vw,32px); line-height:1.12;}
body[data-page="experiencias"] .exp-card .resumen, body[data-page="experiencias"] .exp-card .meta{display:none;}

/* Tours, Travesías y Paquetes ya no comparten una única composición
   alternada: cada tipo tiene su propio ritmo, coherente con lo que es
   vivir esa experiencia (salida corta y protagonista / recorrido con
   aire y verticalidad / viaje integral y amplio). */
body[data-page="experiencias"] .exp-card[data-tipo="tour"]{grid-template-columns:1.65fr 1fr;}
body[data-page="experiencias"] .exp-card[data-tipo="tour"] .img-wrap{aspect-ratio:1.25; border-radius:50px 14px 50px 14px;}
body[data-page="experiencias"] .exp-card[data-tipo="tour"] h3{font-size:clamp(28px,3.2vw,40px);}

body[data-page="experiencias"] .exp-card[data-tipo="travesia"]{grid-template-columns:0.8fr 1.2fr;}
body[data-page="experiencias"] .exp-card[data-tipo="travesia"] .img-wrap{order:2; aspect-ratio:0.74; max-width:360px; margin-left:auto; border-radius:14px 50px 14px 50px;}
body[data-page="experiencias"] .exp-card[data-tipo="travesia"] .body{order:1; padding-right:var(--space-7);}

body[data-page="experiencias"] .exp-card[data-tipo="paquete"]{grid-template-columns:1fr; gap:32px;}
body[data-page="experiencias"] .exp-card[data-tipo="paquete"] .img-wrap{aspect-ratio:2.3; border-radius:50px 14px 50px 14px;}
body[data-page="experiencias"] .exp-card[data-tipo="paquete"] .body{text-align:center; display:flex; flex-direction:column; align-items:center;}
body[data-page="experiencias"] .exp-card[data-tipo="paquete"] .actions{justify-content:center;}

/* Tours / Travesías / Paquetes — mismo componente .exp-card/.exp-grid
   que Catálogo, pero acá la foto gana protagonismo real: de 3 columnas
   chicas con marco a 2 columnas grandes sin caja, con el mismo chip
   discreto que ya usa Experiencias (misma familia visual, sin clonar
   su composición de filas alternadas). data-tipo-fijo sólo está
   presente en tours.html/travesias.html/paquetes.html — catalogo.html
   no se toca en esta etapa. */
body[data-tipo-fijo] .exp-grid{grid-template-columns:repeat(2,1fr); gap:var(--space-7);}
body[data-tipo-fijo] .exp-card{background:transparent; border:none; border-radius:0; box-shadow:none; transition:none;}
body[data-tipo-fijo] .exp-card:hover{transform:none; box-shadow:none;}
body[data-tipo-fijo] .exp-card .img-wrap{height:300px; border-radius:var(--radius-lg);}
/* La página ya está filtrada a un único tipo (Tours/Travesías/Paquetes):
   repetir esa misma etiqueta en cada card es redundante, así que se oculta acá. */
body[data-tipo-fijo] .exp-card .cat-badge{display:none;}
body[data-tipo-fijo] .exp-card .body{padding:var(--space-4) 0 0; gap:10px;}
body[data-tipo-fijo] .exp-card .dest-tag{font-size:12.5px; letter-spacing:0.1em;}
body[data-tipo-fijo] .exp-card h3{font-size:24px; line-height:1.22;}
body[data-tipo-fijo] .exp-card .resumen{font-size:14.5px; line-height:1.5; -webkit-line-clamp:3;}
body[data-tipo-fijo] .exp-card .meta{font-size:12.5px; gap:16px;}

.placeholder-badge{display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; background:var(--color-amarillo); color:var(--text-primary); padding:3px 9px; border-radius:999px; margin-bottom:6px; font-family:var(--font-body);}
.empty-state{text-align:center; padding:60px 20px; color:var(--text-muted);}

/* ---------- Detalle de experiencia ---------- */
.exp-detail-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start;}
.exp-gallery-main{border-radius:10px; overflow:hidden; margin-bottom:16px; height:420px;}
.exp-gallery-main img{width:100%; height:100%; object-fit:cover;}
.exp-gallery-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.exp-gallery-thumbs img{border-radius:6px; height:80px; width:100%; object-fit:cover;}
.exp-info-card{background:#fff; border:1px solid rgba(33,29,22,0.1); border-radius:10px; padding:28px; position:sticky; top:96px; min-width:0;}
.exp-info-card .dest-tag{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-marron);}
.exp-info-card h1{font-size:1.5em; margin:8px 0 0;}
.exp-info-card .info-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-color); font-size:14px;}
.exp-info-card .info-row:last-of-type{border-bottom:none;}
.exp-info-card .info-row span{flex:0 0 auto;}
.exp-info-card .info-row b{flex:1 1 auto; min-width:0; text-align:right; font-family:var(--font-heading); overflow-wrap:break-word;}
.exp-info-card .info-row .nota{display:block; font-family:var(--font-detail); font-weight:400; font-size:11px; color:var(--text-muted); margin-top:2px;}
.exp-info-card .btn{width:100%; text-align:center; margin-top:18px;}
.exp-body h2{font-size:24px; margin:40px 0 14px;}
.exp-body h2:first-child{margin-top:0;}
.exp-body ul{padding-left:20px; font-size:15px; color:#3a3626; line-height:1.8;}
.exp-body p{font-size:15px; color:#3a3626; line-height:1.8;}
.check-list li::marker{color:var(--color-verde);}
.cross-list li::marker{color:var(--color-naranja);}
.notice-box{background:var(--color-amarillo); border-radius:8px; padding:18px 22px; font-size:14px; margin-top:16px;}

/* ---------- Guías ---------- */
.guias-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.guia-card{background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--border-color); text-align:center;}
.guia-card .foto{height:220px; background:linear-gradient(135deg,var(--color-celeste),var(--color-verde-oliva)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-heading); font-size:15px; position:relative;}
.guia-card .foto img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.guia-card .body{padding:22px;}
.guia-card h3{font-size:18px;}
.guia-card .rol{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-marron); margin:6px 0 12px;}
.guia-card p{font-size:14px; color:var(--text-secondary);}

/* ---------- Galería — collage editorial ----------
   Reemplaza la grilla uniforme anterior (mismas proporciones, mismo
   tamaño) por un collage real: grid de 6 columnas angostas + filas
   chicas, donde cada foto ocupa 1 a 3 columnas y 2 a 4 filas según su
   propio peso en la composición (dos protagonistas grandes, el resto
   variado entre vertical/horizontal). object-fit:cover + esquinas y
   sombra ya usadas en el resto del sitio (--radius-md, --shadow-sm),
   sin overlays de color sobre las fotos. */
.galeria-head{max-width:640px; margin-bottom:var(--space-6);}
.galeria-head h1{font-size:clamp(36px,5vw,60px); line-height:0.94; margin:10px 0 12px; color:var(--text-primary);}
.galeria-head p{color:var(--text-secondary); font-size:var(--text-md); line-height:1.6; margin-top:var(--space-2);}
.gal-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3);}
.gal-row img{height:300px; width:auto; max-width:100%; border-radius:var(--radius-sm); box-shadow:var(--shadow-sm); cursor:zoom-in; display:block; transition:transform var(--duration-base) var(--ease);}
.gal-row img:hover{transform:translateY(-4px);}
/* Collage por columnas CSS (masonry real): cada foto conserva su
   proporción original — nada se recorta a la fuerza para encajar en
   una celda — así que verticales, horizontales y cuadradas conviven
   con alturas distintas sin dejar huecos (a diferencia de un grid con
   spans fijos, acá no hay combinación de tamaños que pueda "no
   cerrar"). Una foto protagonista arriba a todo el ancho y, más abajo
   en el flujo, una segunda (.gc-span) que corta las columnas para dar
   otro momento de protagonismo sin romper el masonry. */
.gal-placeholder{display:flex; align-items:center; justify-content:center; background:#e7e3d3; border-radius:6px; color:var(--text-muted); font-size:13px; text-align:center; padding:10px;}
.lightbox{position:fixed; inset:0; background:rgba(20,18,12,0.92); display:none; align-items:center; justify-content:center; z-index:200; padding:32px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:6px;}
.lightbox-close{position:absolute; top:24px; right:32px; color:#fff; font-size:32px; background:none; border:none; cursor:pointer; line-height:1;}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,0.12); color:#fff; font-size:28px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.lightbox-nav:hover{background:rgba(255,255,255,0.24);}
.lightbox-prev{left:16px;}
.lightbox-next{right:16px;}
@media (max-width:640px){
  .lightbox-nav{width:40px; height:40px; font-size:22px;}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}
}

/* ---------- Comunidad Raíces (Galería) ---------- */
.comunidad{background:var(--color-amarillo);}
.comunidad .kicker{color:var(--color-verde);}
.comunidad-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
.comunidad-text h2{font-size:clamp(28px,4vw,42px); line-height:1.1; margin-bottom:20px;}
.comunidad-text p{font-size:16px; line-height:1.7; color:var(--text-secondary); max-width:480px;}
.comunidad-text p + p{margin-top:14px;}
.comunidad-text .comunidad-tagline{font-family:var(--font-heading); font-weight:700; color:var(--text-primary);}
.comunidad-mail{display:inline-flex; align-items:center; gap:16px; margin-top:30px; background:#fff; border-radius:999px; padding:10px 24px 10px 10px; text-decoration:none; color:var(--text-primary); box-shadow:0 10px 24px rgba(33,29,22,0.16); transition:transform .25s ease, box-shadow .25s ease;}
.comunidad-mail:hover{transform:translateY(-3px); box-shadow:0 16px 32px rgba(33,29,22,0.24);}
.comunidad-mail-ico{width:42px; height:42px; border-radius:50%; background:var(--color-verde); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
.comunidad-mail-text{display:flex; flex-direction:column; line-height:1.35;}
.comunidad-mail-text b{font-family:var(--font-heading); font-size:14px;}
.comunidad-mail-text em{font-style:normal; font-size:12.5px; color:var(--text-muted);}
.comunidad-mail-arrow{font-size:16px; color:var(--color-marron); transition:transform .25s ease;}
.comunidad-mail:hover .comunidad-mail-arrow{transform:translateX(4px);}
.comunidad-stack{position:relative; height:360px;}
.comunidad-stack img{position:absolute; width:230px; height:280px; object-fit:cover; border-radius:10px; border:6px solid #fff; box-shadow:0 16px 34px rgba(33,29,22,0.22);}
.comunidad-stack img:nth-child(1){top:8px; left:0; transform:rotate(-7deg); z-index:1;}
.comunidad-stack img:nth-child(2){top:46px; left:29%; transform:rotate(5deg); z-index:3;}
.comunidad-stack img:nth-child(3){top:2px; left:55%; transform:rotate(-3deg); z-index:2;}

/* ---------- Testimonios ---------- */
.testi{background:var(--color-amarillo);}
/* Home — Comentarios cierra el recorrido cálido: entra desde el tono
   tierra de Quiénes somos y se asienta en el amarillo de marca (no es
   un bloque de color nuevo, es el final de la misma transición). */
body[data-page="inicio"] .testi{background:transparent;}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.testi-card{background:#fff; border-radius:8px; padding:32px;}
.testi-card p{font-size:15px; color:#3a3626; margin-bottom:20px;}
.testi-name{font-family:var(--font-heading); font-weight:700; font-size:14px;}
.testi-role{font-size:12px; color:#8a8470;}
.stars{color:var(--color-naranja); margin-bottom:14px; font-size:14px; letter-spacing:2px;}
.testi-disclaimer{font-size:13px; color:#4a4020; background:rgba(255,255,255,0.5); border:1px dashed rgba(58,54,38,0.35); padding:14px 18px; border-radius:8px; margin-top:36px;}

/* ---------- Carrusel de testimonios (Inicio) ---------- */
.testi-carousel{display:flex; align-items:center; gap:20px; max-width:720px; margin:0 auto;}
.testi-viewport{flex:1; overflow:hidden;}
.testi-track{list-style:none; display:grid;}
.testi-slide{grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;}
.testi-slide.is-active{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:opacity .5s ease, transform .5s ease;}
.testi-track .testi-card{height:100%;}
.testi-arrow{width:44px; height:44px; border-radius:50%; border:none; background:#fff; color:var(--text-primary); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 16px rgba(33,29,22,0.14); transition:background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);}
.testi-arrow:hover{background:var(--color-verde); color:#fff; transform:scale(1.06);}
.testi-arrow:disabled{opacity:0.35; cursor:default; pointer-events:none; box-shadow:none;}
.testi-dots{display:flex; justify-content:center; gap:10px; margin-top:28px;}
.testi-dot{width:9px; height:9px; border-radius:50%; border:none; padding:0; background:rgba(33,29,22,0.25); cursor:pointer; transition:background .2s ease, transform .2s ease;}
.testi-dot:hover{background:rgba(33,29,22,0.45);}
.testi-dot.is-active{background:var(--color-marron); transform:scale(1.25);}
@media (prefers-reduced-motion: reduce){
  .testi-slide{transition:opacity .01s linear; transform:none;}
  .testi-slide.is-active{transition:opacity .01s linear;}
}

/* ---------- Contacto ---------- */
.contact-wrap{display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-9); align-items:start;}
#whatsapp-cta-holder{margin-bottom:var(--space-5);}
.contact-info .item{display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-4) 0; border-top:1px solid var(--border-color);}
.contact-info .item:first-of-type{border-top:none; padding-top:0;}
.contact-info .item .ico{width:40px; height:40px; border-radius:50%; background:rgba(255,91,40,0.12); color:var(--color-naranja); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;}
.contact-info .item b{display:block; font-family:var(--font-heading); font-size:15px; margin-bottom:2px;}
.contact-info .item span, .contact-info .item a{font-size:13.5px; color:var(--text-muted); text-decoration:none;}
.contact-info .item a:hover{color:var(--color-naranja);}

.contact-form-panel{background:var(--bg-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--space-7);}
form{display:grid; gap:var(--space-5);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5);}
label{font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:var(--space-2); display:block;}
input, select, textarea{width:100%; padding:14px 16px; border:1.5px solid var(--border-color-strong); border-radius:var(--radius-md); font-family:var(--font-body); font-size:14px; background:#fff; color:var(--text-primary); transition:border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--color-naranja); box-shadow:0 0 0 3px rgba(255,91,40,0.14);}
textarea{resize:vertical; min-height:130px;}
form .btn{justify-self:start; margin-top:var(--space-2); padding:14px 34px;}
.form-note{font-size:12px; color:var(--text-muted); margin-top:-8px; line-height:1.5;}
.form-status{font-size:14px; padding:12px 14px; border-radius:var(--radius-sm); display:none;}
.form-status.show{display:block;}
.form-status.ok{background:#e3ecdb; color:var(--color-verde);}

@media (max-width:640px){
  .contact-form-panel{padding:var(--space-5);}
  form .btn{justify-self:stretch; text-align:center;}
}

/* CTA final genérico */
.cta-band{background:var(--bg-dark); color:#fff; text-align:center;}
.cta-band h2{font-size:clamp(26px,4vw,38px); margin-bottom:16px;}
.cta-band p{color:#cfcabb; max-width:520px; margin:0 auto 30px;}
.cta-band .hero-ctas{justify-content:center;}

/* ---------- Footer ---------- */
footer{background:var(--bg-dark); color:#cfcabb; padding:64px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px;}
footer .brand img{height:32px;}
footer p{font-size:14px; margin-top:14px; color:#9b967f; max-width:280px;}
footer h4{font-family:var(--font-heading); font-size:14px; color:#fff; margin-bottom:16px; letter-spacing:0.02em;}
footer ul{list-style:none;}
footer li{margin-bottom:10px; font-size:14px;}
footer li a{text-decoration:none; color:#cfcabb; opacity:0.85;}
footer li a:hover{opacity:1; color:var(--color-amarillo);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; justify-content:space-between; font-size:12px; color:#7f7a66; flex-wrap:wrap; gap:10px;}

/* ---------- Botón flotante de WhatsApp (se activa solo si hay número cargado) ---------- */
.whatsapp-float{position:fixed; bottom:22px; right:22px; z-index:40; background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,0.25); font-size:26px;}

/* ---------- Utilidades ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .exp-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  #destinos-home{grid-template-columns:1fr; grid-template-rows:none; grid-auto-rows:auto; height:auto; gap:var(--space-4);}
  #destinos-home .dest-card{height:auto; aspect-ratio:1.5;}
  #destinos-home .dest-card:first-child{grid-row:auto; aspect-ratio:1.3; margin-top:0;}
  #destinos-home .dest-card:nth-child(3),
  #destinos-home .dest-card:nth-child(3):hover{transform:none;}
}
@media (max-width: 860px){
  .about-grid, .contact-wrap, .exp-detail-grid{grid-template-columns:1fr;}
  body[data-page="inicio"] .about-grid{grid-template-columns:1fr; gap:var(--space-6);}
  body[data-page="inicio"] .about-photo{aspect-ratio:1.3;}
  body[data-page="inicio"] .equipo-mini-grid{grid-template-columns:repeat(2,1fr); gap:var(--space-4);}
  .dest-grid{grid-template-columns:1fr;}
  .hero-inicio{padding-bottom:6vh;}
  .hero-inicio-content{padding:0 24px;}
  .hero-inicio-logo{height:clamp(110px,22vw,210px);}
  .hero-inicio .eyebrow{margin-bottom:var(--space-6); font-size:13px;}
  .hero-inicio-tagline{margin:var(--space-6) 0 var(--space-7);}
  body[data-page="experiencias"] .exp-grid{gap:56px;}
  body[data-page="experiencias"] .exp-card,
  body[data-page="experiencias"] .exp-card[data-tipo="tour"],
  body[data-page="experiencias"] .exp-card[data-tipo="travesia"],
  body[data-page="experiencias"] .exp-card[data-tipo="paquete"]{grid-template-columns:1fr; gap:22px;}
  body[data-page="experiencias"] .exp-card .img-wrap,
  body[data-page="experiencias"] .exp-card[data-tipo="tour"] .img-wrap,
  body[data-page="experiencias"] .exp-card[data-tipo="travesia"] .img-wrap{order:0; max-width:none; margin-left:0; aspect-ratio:1.5;}
  body[data-page="experiencias"] .exp-card .body,
  body[data-page="experiencias"] .exp-card[data-tipo="travesia"] .body{order:0; padding-right:0;}
  body[data-page="experiencias"] .exp-card[data-tipo="paquete"] .img-wrap{aspect-ratio:1.7;}
  .gal-row img{height:220px;}
  .testi-grid, .guias-grid, .valores-grid{grid-template-columns:1fr;}
  body[data-page="inicio"] .catalogo-home .valores-grid{grid-template-columns:1fr;}
  body[data-page="inicio"] .catalogo-home .dest-card:nth-child(2),
  body[data-page="inicio"] .catalogo-home .dest-card:nth-child(2):hover,
  body[data-page="inicio"] .catalogo-home .dest-card:nth-child(3),
  body[data-page="inicio"] .catalogo-home .dest-card:nth-child(3):hover{transform:none;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .form-row{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .page-hero{min-height:400px;}
  .page-hero .wrap{padding-bottom:60px;}
  .exp-info-card{position:static;}
  .page-intro{padding:48px 0 8px;}
  .page-intro-grid{grid-template-columns:1fr; gap:36px; padding-bottom:36px;}
  .page-intro-text h1{font-size:clamp(38px,8vw,64px);}
  .page-intro-media{aspect-ratio:1.3;}
  body[data-page="catalogo"] .page-intro{padding:36px 0 4px;}
  body[data-page="catalogo"] .page-intro-grid{gap:24px; padding-bottom:24px;}
  body[data-page="catalogo"] .page-intro-media{aspect-ratio:1.7;}
  .page-intro-media.duo{grid-template-columns:1.2fr 1fr; gap:14px;}
  .page-intro-media.duo .secondary{transform:translateY(14px);}
  .page-intro-lead img{max-height:38vh;}
  .comunidad-grid{grid-template-columns:1fr; gap:40px;}
  .comunidad-stack{height:220px; width:100%; max-width:360px;}
  .comunidad-stack img{width:150px; height:180px;}
  .destinos-lista{padding:0 0 64px;}
  .destinos-lead{margin-bottom:56px;}
  .destino-a{margin-bottom:120px;}
  .destino-a-card{right:0; bottom:-64px; max-width:88%; padding:26px 28px;}
  .destino-b{flex-direction:column-reverse; align-items:stretch; gap:24px; margin-bottom:120px;}
  .destino-b-photo{max-width:100%; aspect-ratio:1.5;}
  .destinos-hero{min-height:50vh; padding-bottom:44px;}
  .destinos-hero-content{padding:0 24px;}
  .destino-galeria-item{flex-basis:170px;}
  .destinos-inspirate{margin-bottom:120px;}
  .destinos-inspirate-item{flex-basis:230px;}
}
@media (max-width: 640px){
  .exp-grid{grid-template-columns:1fr;}
  body[data-tipo-fijo] .exp-grid{grid-template-columns:1fr; gap:var(--space-6);}
  body[data-tipo-fijo] .exp-card .img-wrap{height:220px;}
  .gal-row{gap:var(--space-2);}
  .gal-row img{height:140px;}
  body[data-page="experiencias"] .exp-grid{gap:44px;}
  body[data-page="experiencias"] .exp-card,
  body[data-page="experiencias"] .exp-card[data-tipo="tour"],
  body[data-page="experiencias"] .exp-card[data-tipo="travesia"],
  body[data-page="experiencias"] .exp-card[data-tipo="paquete"]{grid-template-columns:1fr; gap:18px;}
  body[data-page="experiencias"] .exp-card .img-wrap,
  body[data-page="experiencias"] .exp-card[data-tipo="tour"] .img-wrap,
  body[data-page="experiencias"] .exp-card[data-tipo="travesia"] .img-wrap{order:0; max-width:none; margin-left:0; aspect-ratio:1.35; border-radius:36px 12px 36px 12px;}
  body[data-page="experiencias"] .exp-card[data-tipo="paquete"] .img-wrap{border-radius:36px 12px 36px 12px;}
  body[data-page="experiencias"] .exp-card .body,
  body[data-page="experiencias"] .exp-card[data-tipo="travesia"] .body{order:0; padding-right:0;}
  .wrap{padding:0 var(--gutter-mobile);}
  nav{padding:14px var(--gutter-mobile);}
  .hero-inicio{padding-bottom:5vh;}
  .hero-inicio-content{padding:0 20px;}
  .hero-inicio .eyebrow{margin-bottom:var(--space-5); font-size:10.5px; letter-spacing:0.1em;}
  .hero-inicio-logo{height:clamp(92px,32vw,160px);}
  .hero-inicio-tagline{white-space:normal; font-size:16px; margin:var(--space-5) 0 var(--space-6);}
  .hero-inicio-tagline::before, .hero-inicio-tagline::after{width:16px; margin-top:12px;}
  .hero-inicio .hero-ctas{gap:18px; flex-direction:column; width:100%; max-width:300px;}
  .hero-inicio .hero-ctas .btn:not(.btn-outline){width:100%; justify-content:center; padding:15px 28px;}
  .hero-inicio .hero-ctas .btn-outline{padding-bottom:4px;}
  .stat-row{flex-direction:column; gap:var(--space-4);}
  .stat{padding:0 0 0 var(--space-4); border-left:2px solid var(--border-color);}
  body[data-page="inicio"] .equipo-mini{margin-top:var(--space-6);}
  body[data-page="inicio"] .equipo-mini-grid{grid-template-columns:1fr; gap:var(--space-5);}
  .stat:first-child{padding-left:var(--space-4); border-left:2px solid var(--border-color);}
  .page-hero{min-height:480px;}
  .page-hero .wrap{padding-bottom:36px;}
  .page-hero .breadcrumb{margin-bottom:16px;}
  .page-hero .eyebrow{margin-bottom:10px;}
  .page-hero h1{font-size:clamp(30px,9vw,42px); margin-bottom:12px;}
  .page-hero p{font-size:15px; line-height:1.45;}
  .page-intro{padding:36px 0 4px;}
  .page-intro.tight{padding:28px 0 16px;}
  .page-intro-text h1{font-size:clamp(32px,11vw,46px); margin:10px 0 12px;}
  .page-intro-text.compact h1{font-size:clamp(28px,10vw,36px);}
  .galeria-head h1{font-size:clamp(28px,10vw,36px);}
  .page-intro-text p{font-size:16px;}
  .page-intro-grid{gap:28px; padding-bottom:28px;}
  .page-intro-media{aspect-ratio:1.05;}
  /* Destino (catalogo.html): hero más bajo que el de Nosotros/Galería —
     acá abajo hay una grilla de experiencias esperando, así que la
     imagen no necesita tanta altura como en una página de una sola
     sección. */
  body[data-page="catalogo"] .page-intro{padding:28px 0 4px;}
  body[data-page="catalogo"] .page-intro-grid{gap:18px; padding-bottom:20px;}
  body[data-page="catalogo"] .page-intro-media{aspect-ratio:1.9;}
  .page-intro-media.duo{grid-template-columns:1fr; gap:14px;}
  .page-intro-media.duo .primary{aspect-ratio:1.3;}
  .page-intro-media.duo .secondary{width:58%; margin-left:auto; transform:none; aspect-ratio:1;}
  .page-intro-lead img{max-height:280px;}
  .testi-carousel{gap:10px;}
  .testi-arrow{width:34px; height:34px; font-size:18px;}
  .testi-carousel .testi-card{padding:24px 20px;}
  .destinos-lista{padding:0 0 48px;}
  .destinos-lead{margin-bottom:44px;}
  .destino-a{margin-bottom:64px;}
  .destino-a-photo{aspect-ratio:1.05; border-radius:12px;}
  .destino-a-card{position:static; margin-top:-40px; margin-left:16px; margin-right:16px; max-width:none; box-shadow:0 16px 32px rgba(33,29,22,0.14);}
  .destino-b{margin-bottom:64px;}
  .destino-b-photo{aspect-ratio:1.3; border-radius:12px;}
  .destino-c{margin-bottom:0;}
  .destino-c-photo{aspect-ratio:1.1; border-radius:12px;}
  .destino-feature-text p, .destino-a-card p, .destino-c-text p{font-size:16px;}
  .destinos-hero{min-height:44vh; padding-bottom:32px;}
  .destinos-hero-content{padding:0 var(--gutter-mobile);}
  .destinos-hero-content .eyebrow{font-size:13px; letter-spacing:0.12em;}
  .destino-galeria-item{flex-basis:150px;}
  .destinos-inspirate{margin-bottom:64px;}
  .destinos-inspirate-item{flex-basis:210px;}
  .destinos-inspirate-item span{font-size:15px; padding:14px 16px;}
}

/* ---------- Experiencias — explorador editorial (Etapa 1) ----------
   El explorador es SOLO selector de lugar: "¿Por dónde empezamos?"
   (País → Destino, foto + nombre) y termina ahí — no hay Tipo, ni
   Tours/Travesías/Paquetes, ni ningún encabezado intermedio dentro del
   explorador (eso se define en una etapa posterior). "Para inspirarte"
   es una puerta secundaria más abajo, con 3 experiencias reales
   sueltas, para quien todavía no decidió a dónde ir. El lienzo de
   fondo ya está resuelto arriba (body[data-page="experiencias"] main +
   section transparent) — acá sólo se agregan los "destino tiles" (foto
   + nombre, sin descripción: son punto de entrada visual, no ficha) y
   las cards mínimas de "Para inspirarte". */
body[data-page="experiencias"] .page-intro-media{max-width:560px; margin-left:auto;}
body[data-page="experiencias"] .exp-explorer{padding:var(--space-7) 0 var(--space-8);}
body[data-page="experiencias"] .exp-explorer-head{margin-bottom:var(--space-6);}
body[data-page="experiencias"] .exp-explorer-paises{margin-bottom:var(--space-7);}

.exp-explorer-destinos{display:flex; flex-wrap:wrap; gap:var(--space-4);}
.exp-destino-tile{position:relative; flex:0 0 auto; width:220px; aspect-ratio:1; display:block; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
.exp-destino-tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.exp-destino-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.exp-destino-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(10,8,4,0.78) 100%);}
.exp-destino-tile-label{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:16px; font-family:var(--font-heading); font-weight:700; font-size:18px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.5);}

/* "Para inspirarte" — deliberadamente chica y secundaria: sin kicker
   grande ni h2, sin carrusel (son sólo 3), tarjetas más chicas que las
   de arriba para que quede claro que este bloque acompaña, no compite
   con "¿Por dónde empezamos?". Mismo lenguaje visual (foto + overlay +
   info abajo) que .destino-card en Destinos, con su propia composición. */
body[data-page="experiencias"] .exp-inspirate{padding:0 0 var(--space-8);}
.exp-inspirate .kicker{margin-bottom:8px;}
.exp-inspirate h3{font-family:var(--font-heading); font-size:20px; color:var(--text-primary); max-width:440px; margin-bottom:var(--space-5);}
.exp-inspirate-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4);}
.exp-inspirate-card{position:relative; display:block; aspect-ratio:0.85; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
.exp-inspirate-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.exp-inspirate-card img,
.exp-inspirate-card .gal-placeholder{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.exp-inspirate-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(10,8,4,0.8) 100%);}
.exp-inspirate-card .cat-badge{position:absolute; top:12px; left:12px; z-index:2; background:rgba(20,18,12,0.55); font-family:var(--font-body); font-weight:600; color:#fff; font-size:10.5px; text-transform:uppercase; letter-spacing:0.1em; padding:6px 12px; border-radius:999px;}
.exp-inspirate-card-info{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px; display:flex; flex-direction:column; gap:4px;}
.exp-inspirate-card-dest{font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-amarillo);}
.exp-inspirate-card-name{font-family:var(--font-heading); font-weight:700; font-size:16px; color:#fff; line-height:1.2;}
.exp-inspirate-card-cta{font-family:var(--font-heading); font-weight:700; font-size:12px; color:#fff; opacity:0; transform:translateY(4px); transition:opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);}
.exp-inspirate-card:hover .exp-inspirate-card-cta{opacity:1; transform:none;}
@media (hover:none){
  .exp-inspirate-card-cta{opacity:1; transform:none;}
}

@media (max-width:860px){
  body[data-page="experiencias"] .page-intro-media{max-width:none;}
  .exp-destino-tile{width:200px;}
}
@media (max-width:640px){
  .exp-explorer-destinos{gap:var(--space-3);}
  .exp-destino-tile{width:45vw; max-width:200px;}
  .exp-inspirate-grid{grid-template-columns:1fr; gap:var(--space-3); max-width:340px;}
  .exp-inspirate-card{aspect-ratio:1.3;}
}

/* ---------- Nosotros — página editorial ----------
   La página tenía estilos sueltos inline (fondo blanco fijo en .about,
   un "var(--crema)" que no es un token real, tamaños/colores de texto
   hardcodeados) que rompían la superficie continua del resto del
   sitio. Ahora Nosotros se sumó a la familia Experiencias/Tours/
   Travesías/Paquetes (ver bloque de arriba) para su lienzo de fondo:
   sin eso, el fondo base (crema) se leía como blanco liso al no tener
   ningún lavado de color detrás. Acá sólo quedan los componentes
   propios: la foto orgánica de "Nuestra historia" (mismo radio
   asimétrico que destinos.html, para no clonar el de Inicio), la
   grilla de equipo integrada en la misma sección, y una versión más
   editorial (sin caja) de los .valor-card de "Nuestra propuesta". */
body[data-page="nosotros"] .about-photo{border-radius:12px 40px 12px 40px; overflow:hidden; aspect-ratio:0.86; box-shadow:var(--shadow-sm);}
body[data-page="nosotros"] .about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
body[data-page="nosotros"] .about-lead{margin-top:var(--space-5); font-size:var(--text-lg); color:var(--text-primary); line-height:1.7; max-width:460px;}
body[data-page="nosotros"] .about-lead + p{margin-top:var(--space-4); font-size:var(--text-md); color:var(--text-secondary); line-height:1.7; max-width:460px;}

/* Equipo — integrado dentro de "Nuestra historia" (mismo <section>,
   sin kicker+h2 propio) en vez de ser un bloque independiente. Fotos
   con proporción idéntica entre sí a propósito (a diferencia del
   resto de la página, acá se pidió consistencia, no asimetría) y el
   mismo radio orgánico que ya usa .about-photo arriba. Rol/descripción
   son placeholders reales marcados como tales (cursiva + tono apagado)
   — no hay biografías inventadas. */
body[data-page="nosotros"] .equipo{margin-top:var(--space-9);}
body[data-page="nosotros"] .equipo > .kicker{margin-bottom:var(--space-5);}
body[data-page="nosotros"] .equipo-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);}
body[data-page="nosotros"] .equipo-persona{margin:0;}
body[data-page="nosotros"] .equipo-foto{position:relative; aspect-ratio:0.86; border-radius:12px 40px 12px 40px; overflow:hidden; box-shadow:var(--shadow-sm);}
body[data-page="nosotros"] .equipo-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;}
body[data-page="nosotros"] .equipo-persona:hover .equipo-foto img{transform:scale(1.04);}
body[data-page="nosotros"] .equipo-persona figcaption{margin-top:var(--space-4);}
body[data-page="nosotros"] .equipo-persona h3{font-size:19px; color:var(--text-primary);}
body[data-page="nosotros"] .equipo-pendiente{display:inline-block; margin-top:10px; font-family:var(--font-body); font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-marron); border:1px dashed var(--color-marron); border-radius:999px; padding:5px 14px;}

/* "Nuestra propuesta" — de card en caja a bloques abiertos separados
   por un filete (mismo recurso que ya usa Destinos entre grupos de
   país), con un leve desnivel en la del medio para que no se sienta
   una grilla de precios de SaaS. Contenido intacto. */
body[data-page="nosotros"] .valor-card{background:transparent; border:none; box-shadow:none; padding:0; border-top:1px solid var(--border-color-strong); padding-top:var(--space-5);}
body[data-page="nosotros"] .valor-card h3{font-size:20px;}
body[data-page="nosotros"] .valor-card p{font-size:var(--text-md); line-height:1.6;}
body[data-page="nosotros"] .valores-grid > .valor-card:nth-child(2){margin-top:var(--space-6);}

@media (max-width:860px){
  body[data-page="nosotros"] .about-photo{aspect-ratio:1.15;}
  body[data-page="nosotros"] .equipo-grid{grid-template-columns:repeat(2,1fr);}
  body[data-page="nosotros"] .valores-grid > .valor-card:nth-child(2){margin-top:0;}
}
@media (max-width:640px){
  body[data-page="nosotros"] .about-photo{aspect-ratio:1.3; border-radius:12px 36px 12px 36px;}
  body[data-page="nosotros"] .about-lead,
  body[data-page="nosotros"] .about-lead + p{max-width:none;}
  body[data-page="nosotros"] .equipo{margin-top:var(--space-7);}
  body[data-page="nosotros"] .equipo-grid{grid-template-columns:1fr; gap:var(--space-5);}
  body[data-page="nosotros"] .equipo-foto{aspect-ratio:1.05;}
}