/* =========================================================
   Proyecto Raíces — PATTERNS
   ---------------------------------------------------------
   Composiciones compartidas entre páginas, armadas con los
   componentes: portadas (.page-hero / .page-intro), ritmo de
   secciones (section, .section-head, .kicker), bloques "about",
   aparición al scroll, lienzo de fondo de la familia de páginas
   interiores, Comunidad Raíces (Inicio + Galería) y la banda de
   CTA final. Lo exclusivo de una página vive en pages/.
   ========================================================= */

/* ---------- Portada con foto de fondo (.page-hero) ----------
   Foto a sangre + título superpuesto. Hoy la usa sólo
   comentarios.html; el resto de las páginas interiores pasó a la
   introducción editorial (.page-intro, abajo). */
.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:var(--color-blanco);}
.page-hero img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); animation:heroZoom 22s ease-out forwards;}
.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-accent-2); font-weight:700; margin-bottom:14px; text-shadow:0 1px 2px rgba(var(--black-rgb),0.9), 0 2px 8px rgba(var(--black-rgb),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(var(--black-rgb),0.45);}
.page-hero p{margin-top:0; max-width:560px; color:var(--color-crema-claro); font-size:17px; line-height:1.5; text-shadow:0 1px 10px rgba(var(--black-rgb),0.35);}
@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.

   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.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:var(--text-xl); line-height:1.55; color:var(--text-secondary); max-width:420px;}
.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:var(--radius-lg); 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.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:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);}
.page-intro-media.duo .secondary{position:relative; aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 16px 32px rgba(var(--shadow-rgb),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);}
/* ---------- Eyebrow y grupo de CTAs ---------- */
.eyebrow{font-family:var(--font-body); font-size:var(--text-sm); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--color-accent-2); margin-bottom:18px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
/* ---------- Secciones ---------- */
section{padding:var(--section-y) 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:var(--text-sm); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--color-accent-2); 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-accent); display:inline-block;}
.section-head h2{font-size:clamp(30px,4vw,46px); line-height:1.05;}
.section-head p{margin-top:16px; font-size:var(--text-lg); 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;}
/* ---------- About (Inicio + Nosotros) ---------- */
.about{background:transparent;}
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
.about-grid img{border-radius:var(--radius-sm);}
/* 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-accent-2); margin-bottom:4px;}
.stat span{font-size:var(--text-sm); color:var(--text-muted);}
.valores-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px;}
.dest-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
/* Aparición al hacer scroll — sutil, una vez, y desactivada por
   completo si el usuario prefiere menos movimiento (ver assets/js/pages/destinos.js). */
.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;}
}
/* ---------- Lienzo de las páginas interiores ----------
   Experiencias, Tours, Travesías, Paquetes, Nosotros, Galería,
   Contacto, Propuesta y Calendario: misma familia de página, mismo
   lienzo continuo pintado una sola vez sobre <main> (secciones sin
   fondo propio). Inicio y Destinos tienen su propia combinación en
   pages/inicio.css y pages/destinos.css. */
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="propuesta"] main,
body[data-page="calendario"] main{
  background-color:var(--canvas-base);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(64% 42% at 14% 18%, rgba(var(--amarillo-rgb),0.18) 0%, transparent 100%),
    radial-gradient(60% 40% at 86% 32%, rgba(var(--marron-rgb),0.18) 0%, transparent 100%),
    radial-gradient(62% 40% at 14% 50%, rgba(var(--verde-comp-rgb),0.4) 0%, transparent 100%),
    radial-gradient(52% 34% at 82% 64%, rgba(var(--naranja-rgb),0.1) 0%, transparent 100%),
    radial-gradient(58% 38% at 24% 76%, rgba(var(--crema-rgb),0.14) 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="propuesta"] main section,
body[data-page="calendario"] main section:not(.cta-band){background:transparent;}
/* ---------- Comunidad Raíces (Galería + entrada en Inicio) ---------- */
.comunidad{background:var(--color-accent-2); color:var(--color-tinta); --text-secondary:var(--text-secondary-on-paper); --text-muted:var(--text-secondary-on-paper);} /* amarillo: texto secundario oscuro (ver tokens) */
.comunidad .kicker{color:var(--color-verde);}
.comunidad-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;}
.comunidad-text{min-width:0;}
.comunidad-text h2{font-size:clamp(28px,4vw,42px); line-height:1.1; margin-bottom:20px;}
.comunidad-text p{font-size:var(--text-lg); line-height:1.7; color:var(--text-secondary); max-width:480px;}
.comunidad-text p + p{margin-top:14px;}
.comunidad-mail{display:inline-flex; align-items:center; gap:16px; margin-top:30px; background:var(--color-blanco); border:none; border-radius:var(--radius-pill); padding:10px 24px 10px 10px; text-decoration:none; color:var(--color-tinta); font:inherit; text-align:left; cursor:pointer; box-shadow:0 10px 24px rgba(var(--tinta-rgb),0.16); transition:transform .25s ease, box-shadow .25s ease;}
.comunidad-mail:hover{transform:translateY(-3px); box-shadow:0 16px 32px rgba(var(--shadow-rgb),0.24);}
.comunidad-mail-ico{width:42px; height:42px; border-radius:var(--radius-round); 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:var(--text-base);}
.comunidad-mail-text em{font-style:normal; font-size:12.5px; color:var(--text-muted);}
.comunidad-mail-arrow{font-size:var(--text-lg); 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:var(--radius-md); border:6px solid var(--color-blanco); box-shadow:0 16px 34px rgba(var(--shadow-rgb),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;}
/* ---------- CTA final genérico ---------- */
.cta-band{background:var(--bg-dark); color:var(--color-blanco); text-align:center;}
.cta-band h2{font-size:clamp(26px,4vw,38px); margin-bottom:16px;}
.cta-band p{color:var(--color-piedra); max-width:520px; margin:0 auto 30px;}
.cta-band .hero-ctas{justify-content:center;}
/* ---------- Responsive de patrones ---------- */
@media (max-width: 860px){
  .about-grid{grid-template-columns:1fr;}
  .dest-grid{grid-template-columns:1fr;}
  .valores-grid{grid-template-columns:1fr;}
  section{padding:var(--section-y-mobile) 0;}
  .page-hero{min-height:400px;}
  .page-hero .wrap{padding-bottom:60px;}
  .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;}
  .page-intro-media.duo{grid-template-columns:1.2fr 1fr; gap:14px;}
  .page-intro-media.duo .secondary{transform:translateY(14px);}
  .comunidad-grid{grid-template-columns:1fr; gap:40px;}
  .comunidad-stack{height:220px; width:100%; max-width:360px;}
  .comunidad-stack img{width:150px; height:180px;}
}
@media (max-width: 640px){
  .stat-row{flex-direction:column; gap:var(--space-4);}
  .stat{padding:0 0 0 var(--space-4); border-left:2px solid var(--border-color);}
  .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:var(--text-md); 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);}
  .page-intro-text p{font-size:var(--text-lg);}
  .page-intro-grid{gap:28px; padding-bottom:28px;}
  .page-intro-media{aspect-ratio:1.05;}
  .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;}
}