/* =========================================================
   LANDING PAGES DE AVENTURA — estilos encapsulados, cargados
   solo en /landing/{slug} (ver $extraStyles en landing.php).
   Reutiliza las variables de diseño globales de style.css.
   ========================================================= */

/* ---- CTA único y fijo (reemplaza cualquier navegación — esto es una página de conversión) ---- */
.landing-cta-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:250; background:#fff;
  border-top:1px solid var(--borde); box-shadow:0 -10px 28px rgba(0,0,0,.10);
  padding:14px 24px; display:flex; align-items:center; justify-content:center; gap:22px;
}
.landing-cta-sticky-text{
  font-family:var(--font-display); font-weight:700; color:var(--verde-900); font-size:.96rem;
  display:flex; align-items:center; gap:8px;
}
.landing-cta-sticky-text i{color:var(--verde-600);}
.landing-cta-sticky-btn{white-space:nowrap;}
@media (max-width:640px){
  .landing-cta-sticky{padding:12px 16px;}
  .landing-cta-sticky-text{display:none;}
  .landing-cta-sticky-btn{width:100%; justify-content:center;}
}

/* ---- HERO de impacto ---- */
.landing-hero{
  position:relative; min-height:88vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background-size:cover; background-position:center; overflow:hidden; isolation:isolate;
}
.landing-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,26,18,.55) 0%, rgba(8,26,18,.72) 60%, rgba(8,26,18,.92) 100%);
}
.landing-hero-content{max-width:820px; padding:40px 24px; color:#fff;}
.landing-hero-content h1{
  color:#fff; font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:800; letter-spacing:-.01em; text-transform:uppercase;
  margin-bottom:.3em; animation:fadeInUp .8s var(--ease) both;
}
.landing-hero-lead{
  font-size:clamp(1.05rem, 2vw, 1.3rem); color:#e7f3ea; max-width:600px; margin:0 auto 34px;
  animation:fadeInUp .8s var(--ease) .12s both;
}
.landing-hero-btn{
  font-size:1.05rem; padding:18px 36px; animation:fadeInUp .8s var(--ease) .22s both;
  box-shadow:0 14px 34px rgba(232,138,62,.4);
}
.landing-hero-badges{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:34px;
  animation:fadeInUp .8s var(--ease) .32s both;
}
.landing-hero-badges span{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff;
  padding:9px 18px; border-radius:999px; font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:8px;
}
.landing-hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#fff; opacity:.75;
  animation:landingBounce 1.8s ease-in-out infinite;
}
@keyframes landingBounce{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);}}

/* ---- Secciones genéricas de la landing ---- */
.landing-section{padding:clamp(50px, 7vw, 88px) 0;}
.landing-section-compact{padding:clamp(34px, 4.5vw, 54px) 0;}
.landing-section-tinted{background:var(--verde-050);}
.landing-section .section-title{max-width:640px; margin:0 auto 40px; text-align:center;}
.landing-section .section-title p{color:var(--gris); font-size:1.02rem;}

/* ---- ¿Por qué...? destacados ---- */
.landing-destacados{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.landing-destacados-media{position:relative;}
.landing-destacados-media .grande{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radio-lg); box-shadow:var(--sombra-lg);}
.landing-destacados-media .chica{
  position:absolute; width:46%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radio); border:5px solid #fff;
  box-shadow:var(--sombra); bottom:-30px; right:-30px;
}
.landing-datos{display:flex; gap:28px; flex-wrap:wrap; margin-top:26px; border-top:1px solid var(--borde); padding-top:24px;}
.landing-datos strong{display:block; font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--verde-800);}
.landing-datos span{font-size:.8rem; color:var(--gris); text-transform:uppercase; letter-spacing:.03em;}

/* ---- Tarjetas de experiencia ---- */
.landing-experiencia-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px;}
.landing-experiencia-card{
  position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); aspect-ratio:3/4;
}
.landing-experiencia-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.landing-experiencia-card:hover img{transform:scale(1.08);}
.landing-experiencia-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,32,22,0) 35%, rgba(9,32,22,.88) 100%);}
.landing-experiencia-body{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; color:#fff;}
.landing-experiencia-body h3{color:#fff; font-size:1.1rem; margin-bottom:6px;}
.landing-experiencia-body p{color:#d9ecdf; font-size:.86rem; margin:0;}

/* ---- Galería editorial / masonry ---- */
.landing-galeria{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:130px; gap:12px;
}
.landing-galeria-item{border-radius:var(--radio); overflow:hidden; display:block; position:relative; box-shadow:var(--sombra-sm);}
.landing-galeria-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.landing-galeria-item:hover img{transform:scale(1.07);}
.landing-galeria-item::after{
  content:'\f00e'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; opacity:0;
  background:rgba(9,32,22,.35); transition:opacity .25s;
}
.landing-galeria-item:hover::after{opacity:1;}
.landing-galeria-item:nth-child(1){grid-column:span 2; grid-row:span 2;}
.landing-galeria-item:nth-child(4){grid-column:span 2;}

/* ---- Itinerario / timeline ---- */
.landing-timeline{max-width:820px; margin:0 auto; position:relative; padding-left:110px;}
.landing-timeline::before{content:''; position:absolute; left:52px; top:8px; bottom:8px; width:2px; background:var(--borde);}
.landing-timeline-item{position:relative; margin-bottom:34px;}
.landing-timeline-item:last-child{margin-bottom:0;}
.landing-timeline-marker{
  position:absolute; left:-110px; top:0; width:96px; text-align:center; background:var(--verde-700); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:.76rem; letter-spacing:.04em; padding:8px 0; border-radius:999px;
  box-shadow:var(--sombra-sm); z-index:2;
}
.landing-timeline-body{background:#fff; border-radius:var(--radio); border:1px solid var(--borde); box-shadow:var(--sombra-sm); padding:22px 26px;}
.landing-timeline-body h3{font-size:1.1rem; margin-bottom:8px;}
.landing-timeline-meta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px;}
.landing-timeline-meta span{font-size:.82rem; color:var(--verde-700); font-weight:700; display:flex; align-items:center; gap:6px;}
.landing-timeline-body p{color:var(--gris); margin:0; font-size:.94rem;}
.landing-inline-cta{text-align:center; margin-top:40px;}

/* ---- Dificultad ---- */
.landing-dificultad{max-width:760px; margin:0 auto; text-align:center;}
.landing-dificultad-escala{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:26px; border-radius:12px; overflow:hidden;}
.landing-dificultad-escala div{
  padding:16px 8px; color:#fff; font-family:var(--font-display); font-weight:700; font-size:.84rem;
  opacity:.4; transition:opacity .25s var(--ease), transform .25s var(--ease); position:relative;
}
.landing-dificultad-escala div:nth-child(1){background:#3fa34d;}
.landing-dificultad-escala div:nth-child(2){background:#d9a428;}
.landing-dificultad-escala div:nth-child(3){background:var(--naranja-600);}
.landing-dificultad-escala div:nth-child(4){background:var(--rojo-marca);}
.landing-dificultad-escala div.is-active{opacity:1; transform:scale(1.06); box-shadow:0 8px 20px rgba(0,0,0,.25); z-index:1;}
.landing-dificultad-texto{color:var(--texto); font-size:1.02rem; text-align:left; max-width:640px; margin:0 auto 18px;}
.landing-advertencia{
  background:#fff3e2; color:#9a5b1f; border-radius:10px; padding:14px 18px; font-size:.9rem; text-align:left;
  display:flex; gap:10px; align-items:flex-start; max-width:640px; margin:0 auto;
}

/* ---- ¿Es para ti? ---- */
.landing-para-quien{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.landing-para-quien > div{background:#fff; border-radius:var(--radio); border:1px solid var(--borde); box-shadow:var(--sombra-sm); padding:30px;}
.landing-para-quien h3{font-size:1.1rem; display:flex; align-items:center; gap:10px;}
.landing-para-quien .si h3{color:var(--verde-700);}
.landing-para-quien .no h3{color:#a33;}
.landing-para-quien ul{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
.landing-para-quien li{font-size:.94rem; padding-left:0;}

/* ---- Incluye / qué llevar ---- */
.landing-incluye-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px;}
.landing-incluye-item{
  background:#fff; border:1px solid var(--borde); border-radius:12px; padding:16px 18px; font-size:.92rem; font-weight:600;
  display:flex; align-items:flex-start; gap:12px; color:var(--verde-900);
}
.landing-incluye-item i{color:var(--verde-600); font-size:1.05rem; margin-top:2px;}
.landing-incluye-grid--llevar .landing-incluye-item i{color:var(--naranja);}
.landing-incluye-grid--no .landing-incluye-item i{color:var(--rojo-marca);}
.landing-subtitulo-lista{margin-top:40px; margin-bottom:18px; font-size:1.2rem;}

/* ---- Precio / cotización ---- */
.landing-precio-card{
  background:#fff; border-radius:var(--radio-lg); box-shadow:var(--sombra-lg); border:1px solid var(--borde);
  padding:44px; display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
}
.landing-precio-card h2{margin-bottom:10px;}
.landing-precio-box{background:var(--verde-050); border-radius:var(--radio); padding:28px; text-align:center;}
.landing-precio-valor{display:block; font-family:var(--font-display); font-size:2.1rem; font-weight:800; color:var(--verde-800); margin-bottom:18px;}
.landing-precio-consulta{display:block; font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--verde-800); margin-bottom:18px;}

/* ---- Confianza (puntos) ---- */
.landing-confianza-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px;}
.landing-confianza-item{
  display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid var(--borde); border-radius:12px;
  padding:18px 20px; font-weight:600; font-size:.94rem;
}
.landing-confianza-item i{color:var(--naranja); font-size:1.2rem; flex-shrink:0; margin-top:3px;}

/* ---- FAQ accordion ---- */
.landing-faq{display:flex; flex-direction:column; gap:12px;}
.landing-faq-item{background:#fff; border:1px solid var(--borde); border-radius:12px; padding:6px 22px; overflow:hidden;}
.landing-faq-item summary{
  list-style:none; cursor:pointer; padding:16px 0; font-family:var(--font-display); font-weight:700; font-size:.98rem;
  color:var(--verde-900); display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.landing-faq-item summary::-webkit-details-marker{display:none;}
.landing-faq-item summary i{transition:transform .25s; color:var(--gris); font-size:.85rem; flex-shrink:0;}
.landing-faq-item[open] summary i{transform:rotate(180deg);}
.landing-faq-item p{color:var(--gris); margin:0 0 18px; font-size:.94rem;}

/* ---- CTA final mega ---- */
.landing-cta-final{
  position:relative; border-radius:var(--radio-lg); overflow:hidden; background-size:cover; background-position:center;
  padding:clamp(70px,10vw,120px) 24px; text-align:center; color:#fff; isolation:isolate;
}
.landing-cta-final::before{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(9,32,22,.5), rgba(9,32,22,.88));}
.landing-cta-final h2{color:#fff; font-size:clamp(1.8rem, 4vw, 2.6rem); max-width:680px; margin:0 auto .4em;}
.landing-cta-final p{color:#dcf0e4; max-width:520px; margin:0 auto 32px; font-size:1.08rem;}
.landing-cta-final-btn{font-size:1.05rem; padding:18px 38px; box-shadow:0 14px 34px rgba(232,138,62,.4);}

/* ---- Pilares (identidad de marca — rojo) ---- */
.landing-section-rojo{background:var(--rojo-marca); background-image:linear-gradient(160deg, var(--rojo-marca) 0%, var(--rojo-marca-600) 100%);}
.landing-section-rojo .section-title h2{color:#fff;}
.landing-pilares-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:18px;}
.landing-pilar-card{
  position:relative; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--radio);
  padding:26px 20px; text-align:center; transition:transform .25s var(--ease), background .25s;
}
.landing-pilar-card:hover{background:rgba(255,255,255,.16); transform:translateY(-4px);}
.landing-pilar-num{position:absolute; top:14px; right:18px; font-family:var(--font-display); font-weight:800; font-size:.78rem; color:rgba(255,255,255,.5);}
.landing-pilar-ico{
  width:54px; height:54px; border-radius:50%; background:#fff; color:var(--rojo-marca); font-size:1.35rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.landing-pilar-card h3{color:#fff; font-size:.98rem; margin:0;}

/* ---- Tu aventura comienza con nosotros (usa .landing-destacados existente) ---- */
.landing-marca .landing-check-rojo{background:#fde3e3; color:var(--rojo-marca);}

/* ---- Confianza / MINCETUR (celeste) ---- */
.landing-section-celeste{background:var(--celeste); background-image:linear-gradient(160deg, var(--celeste) 0%, var(--celeste-600) 100%);}
.landing-mincetur{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.landing-mincetur h2{color:#fff; margin-bottom:8px;}
.landing-mincetur p{color:#eaf8ff; max-width:520px; margin:0;}
.landing-mincetur-btn{flex-shrink:0; background:#fff; color:var(--celeste-600) !important; box-shadow:0 10px 24px rgba(0,0,0,.15);}
.landing-mincetur-btn:hover{background:#eaf8ff;}

/* ---- Promoción / descuento ---- */
.landing-promo{max-width:640px; margin:0 auto; text-align:center;}
.landing-promo-icon{
  width:64px; height:64px; border-radius:50%; background:#fff3e2; color:var(--naranja); font-size:1.6rem;
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.landing-promo p{color:var(--gris); margin-bottom:26px; font-size:1.02rem;}

/* ---- Promoción con QR (2 columnas, fondo rojo/naranja) ---- */
.promo-qr-section{
  background:var(--naranja-600);
  background-image:linear-gradient(135deg, var(--naranja-600) 0%, var(--rojo-marca) 100%);
}
.promo-qr-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:center;}
.promo-qr-badge{
  display:inline-flex; align-items:baseline; gap:6px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  color:#fff; font-family:var(--font-display); font-weight:800; padding:8px 18px; border-radius:999px; margin-bottom:18px; font-size:1.3rem;
}
.promo-qr-badge span{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.9;}
.promo-qr-text h2{color:#fff; margin-bottom:.35em;}
.promo-qr-text p{color:#ffe8e0; font-size:1.05rem; max-width:480px;}
.promo-qr-card{
  background:#fff; border-radius:var(--radio-lg); box-shadow:var(--sombra-lg); padding:28px; text-align:center; justify-self:center;
}
.promo-qr-card img{width:170px; height:170px; object-fit:contain; margin:0 auto 12px;}
.promo-qr-card p{color:var(--gris); font-size:.82rem; margin:0; font-weight:600;}

/* ---- Marca Perú / MINCETUR con logo real ---- */
.landing-mincetur-logo{
  flex-shrink:0; background:#fff; border-radius:var(--radio); padding:18px 22px; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.landing-mincetur-logo img{height:64px; width:auto;}
.landing-mincetur-text{flex:1; min-width:240px;}

/* ---- Contacto ---- */
.landing-contacto-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:760px; margin:0 auto 30px;}
.landing-contacto-card{
  background:#fff; border:1px solid var(--borde); border-radius:var(--radio); padding:26px 18px; text-align:center;
  box-shadow:var(--sombra-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.landing-contacto-card:hover{transform:translateY(-4px); box-shadow:var(--sombra);}
.landing-contacto-card .ico{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.2rem;
}
.ico-verde{background:var(--verde-100); color:var(--verde-700);}
.ico-celeste{background:#e3f6ff; color:var(--celeste-600);}
.ico-rojo{background:#fde3e3; color:var(--rojo-marca);}
.landing-contacto-card h3{font-size:1rem; margin-bottom:4px; color:var(--verde-900);}
.landing-contacto-card p{color:var(--gris); margin:0; font-size:.86rem;}
.landing-contacto-meta{display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-bottom:30px; color:var(--gris); font-size:.9rem;}
.landing-contacto-meta i{color:var(--naranja); margin-right:6px;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px){
  .landing-destacados{grid-template-columns:1fr; gap:60px 0;}
  .landing-destacados-media{margin-bottom:20px;}
  .landing-destacados-media .chica{right:0;}
  .landing-para-quien{grid-template-columns:1fr;}
  .landing-precio-card{grid-template-columns:1fr; text-align:center; padding:32px;}
  .landing-galeria{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px;}
  .landing-galeria-item:nth-child(1){grid-column:span 2;}
  .landing-galeria-item:nth-child(4){grid-column:span 1;}
  .landing-pilares-grid{grid-template-columns:repeat(3,1fr);}
  .landing-contacto-grid{grid-template-columns:1fr;}
  .landing-mincetur{flex-direction:column; text-align:center;}
  .promo-qr-grid{grid-template-columns:1fr; text-align:center; gap:32px;}
  .promo-qr-text p{margin-left:auto; margin-right:auto;}
}
@media (max-width: 760px){
  .landing-hero{min-height:80vh;}
  .landing-pilares-grid{grid-template-columns:1fr 1fr;}
  .landing-timeline{padding-left:0;}
  .landing-timeline::before{left:27px;}
  .landing-timeline-marker{position:static; display:inline-block; margin-bottom:12px; width:auto; padding:7px 16px;}
  .landing-timeline-item{padding-left:56px; position:relative;}
  .landing-timeline-marker{position:absolute; left:0; top:0;}
  .landing-timeline-body{margin-left:0;}
  .landing-dificultad-escala{grid-template-columns:repeat(2,1fr);}
  .landing-subnav a{padding:12px 12px; font-size:.8rem;}
}
@media (max-width: 480px){
  .landing-destacados-media .chica{width:52%; right:0; bottom:-20px;}
}

/* ---- Lightbox simple ---- */
.landing-lightbox-overlay{
  position:fixed; inset:0; background:rgba(8,20,14,.94); z-index:500; display:flex; align-items:center; justify-content:center;
  padding:30px; opacity:0; pointer-events:none; transition:opacity .25s;
}
.landing-lightbox-overlay.is-open{opacity:1; pointer-events:auto;}
.landing-lightbox-overlay img{max-width:92vw; max-height:88vh; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.landing-lightbox-close{
  position:absolute; top:22px; right:26px; color:#fff; font-size:1.6rem; background:rgba(255,255,255,.12);
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
}

@media (prefers-reduced-motion: reduce){
  .landing-hero-content h1, .landing-hero-lead, .landing-hero-btn, .landing-hero-badges{animation:none;}
  .landing-hero-scroll{animation:none;}
}
