/* =========================================================
   VAGARY — Agencia de Viajes
   Sistema de diseño — mobile-first
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  /* Colores de marca */
  --verde: #026827;
  --verde-oscuro: #014319;
  --verde-suave: #0c8a37;
  --dorado: #E5CC13;
  --dorado-oscuro: #C69C00;
  --verde-claro: #BDEAC8;
  --blanco: #FFFFFF;
  --negro: #0b0f0c;
  --crema: #FBFAF4;

  /* Texto */
  --texto: #16241a;
  --texto-suave: #52685a;
  --texto-invertido: #eef7ef;

  /* Tipografía */
  --f-titulo: 'League Spartan', sans-serif;
  --f-texto: 'Poppins', sans-serif;

  /* Espaciados fluidos */
  --seccion-py: clamp(3.5rem, 7vw, 8rem);
  --contenedor: 1280px;
  --radio: 28px;
  --radio-sm: 16px;

  /* Sombras (paralelas / drop-shadow como en manual) */
  --sombra-sm: 0 6px 18px rgba(2,20,8,.08);
  --sombra-md: 0 16px 40px rgba(2,20,8,.14);
  --sombra-lg: 0 30px 70px rgba(2,20,8,.22);
  --sombra-dorado: 0 14px 34px rgba(229,204,19,.35);

  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--f-texto);
  color: var(--texto);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

h1,h2,h3,h4{
  font-family: var(--f-titulo);
  font-weight:700;
  line-height:1.05;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; color: var(--texto-suave); line-height:1.7; }

.contenedor{
  width:100%;
  max-width: var(--contenedor);
  margin-inline:auto;
  padding-inline: 1.25rem;
}
@media(min-width:768px){ .contenedor{ padding-inline: 2.5rem; } }

section{ position:relative; }
.seccion{ padding-block: var(--seccion-py); }

/* ---------- Tipografía fluida ---------- */
.h-display{ font-size: clamp(2.6rem, 8vw, 5.6rem); font-weight:700; }
.h-1{ font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
.h-2{ font-size: clamp(1.7rem, 4vw, 2.6rem); }
.h-3{ font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.lead{ font-size: clamp(1.05rem, 1.6vw, 1.25rem); }

.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--f-titulo);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--verde);
  background: var(--verde-claro);
  padding:.45rem 1rem;
  border-radius: 100px;
  margin-bottom:1.1rem;
}
.kicker::before{
  content:'';
  width:7px; height:7px; border-radius:50%;
  background: var(--dorado-oscuro);
  flex:none;
}
.kicker--sobre-oscuro{ background: rgba(1,20,8,.55); border: 1px solid rgba(255,255,255,.18); color: var(--dorado); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kicker--sobre-oscuro::before{ background: var(--dorado); }

.texto-dorado{ color: var(--dorado-oscuro); }
.texto-verde{ color: var(--verde); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family: var(--f-titulo);
  font-weight:600;
  font-size:1rem;
  padding: 1rem 1.7rem;
  border-radius: 100px;
  border:2px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn:active{ transform: scale(.97); }

.btn--dorado{
  background: var(--dorado);
  color: var(--verde-oscuro);
  box-shadow: var(--sombra-dorado);
}
.btn--dorado:hover{ background: var(--dorado-oscuro); color:#fff; transform: translateY(-3px); box-shadow: 0 20px 40px rgba(198,156,0,.4); }

.btn--verde{
  background: var(--verde);
  color:#fff;
  box-shadow: 0 14px 30px rgba(2,104,39,.3);
}
.btn--verde:hover{ background: var(--verde-oscuro); transform: translateY(-3px); }

.btn--fantasma{
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color:#fff;
}
.btn--fantasma:hover{ border-color:#fff; background: rgba(255,255,255,.12); }

.btn--fantasma-oscuro{
  background: transparent;
  border-color: rgba(2,104,39,.3);
  color: var(--verde);
}
.btn--fantasma-oscuro:hover{ border-color: var(--verde); background: var(--verde-claro); }

.btn--sm{ padding: .7rem 1.3rem; font-size:.9rem; }
.btn--bloque{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.encabezado{
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  padding-block: 1.1rem;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.encabezado.solido{
  background: rgba(251,250,244,.85);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  padding-block: .65rem;
  box-shadow: 0 8px 30px rgba(2,20,8,.08);
  border-color: rgba(2,104,39,.08);
}
.encabezado__fila{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.marca{ display:flex; align-items:center; gap:.6rem; flex:none; }
.marca img{ height: 40px; width:auto; transition: height .4s var(--ease), filter .4s var(--ease); }
.encabezado:not(.solido) .marca img{ filter: brightness(0) invert(1); }
.encabezado.solido .marca img{ height:34px; }
.marca__wordmark{ height:16px !important; margin-top:2px; }

.nav-escritorio{ display:none; }
@media(min-width:1040px){
  .nav-escritorio{
    display:flex; align-items:center; gap:2.1rem;
    font-family: var(--f-titulo); font-weight:500; font-size:.98rem;
  }
  .nav-escritorio a{
    position:relative; padding-block:.3rem; color:#fff;
    transition: color .3s;
  }
  .encabezado.solido .nav-escritorio a{ color: var(--texto); }
  .nav-escritorio a::after{
    content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    background: var(--dorado-oscuro); transition: right .35s var(--ease);
  }
  .nav-escritorio a:hover::after, .nav-escritorio a.activo::after{ right:0; }
  .nav-escritorio a:hover{ color: var(--dorado); }
  .encabezado.solido .nav-escritorio a:hover{ color: var(--verde); }
}

.encabezado__acciones{ display:flex; align-items:center; gap:.8rem; }
.encabezado__cta{ display:none; }
@media(min-width:1040px){ .encabezado__cta{ display:inline-flex; } }

.btn-hamburguesa{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
  flex:none;
}
@media(min-width:1040px){ .btn-hamburguesa{ display:none; } }
.encabezado.solido .btn-hamburguesa{ border-color: rgba(2,104,39,.25); background: transparent; }
.btn-hamburguesa span{
  display:block; width:20px; height:2px; margin-inline:auto;
  background:#fff; border-radius:2px; transition: all .35s var(--ease);
}
.encabezado.solido .btn-hamburguesa span{ background: var(--verde); }
.menu-abierto .btn-hamburguesa span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-abierto .btn-hamburguesa span:nth-child(2){ opacity:0; }
.menu-abierto .btn-hamburguesa span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.menu-abierto .btn-hamburguesa{ border-color: rgba(255,255,255,.5) !important; }
.menu-abierto .btn-hamburguesa span{ background:#fff !important; }

/* ---------- Menú móvil pantalla completa ---------- */
.nav-movil{
  position: fixed; inset:0; z-index:490;
  background: var(--verde-oscuro);
  display:flex; flex-direction:column;
  padding: 6.5rem 1.5rem 2.5rem;
  clip-path: circle(2% at calc(100% - 3rem) 2.6rem);
  transition: clip-path .65s var(--ease);
  pointer-events:none;
}
.menu-abierto .nav-movil{
  clip-path: circle(150% at calc(100% - 3rem) 2.6rem);
  pointer-events:auto;
}
.nav-movil__lista{ display:flex; flex-direction:column; gap:.3rem; }
.nav-movil__lista a{
  font-family: var(--f-titulo); font-weight:600;
  font-size: clamp(2rem,9vw,2.6rem);
  color: #fff; opacity:0; transform: translateX(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  padding-block:.35rem;
  display:flex; align-items:baseline; gap:.6rem;
}
.nav-movil__lista a small{ font-family: var(--f-texto); font-size:.9rem; color: var(--dorado); }
.menu-abierto .nav-movil__lista a{ opacity:1; transform:none; }
.nav-movil__lista a:nth-child(1){ transition-delay:.08s; }
.nav-movil__lista a:nth-child(2){ transition-delay:.14s; }
.nav-movil__lista a:nth-child(3){ transition-delay:.2s; }
.nav-movil__lista a:nth-child(4){ transition-delay:.26s; }
.nav-movil__lista a:nth-child(5){ transition-delay:.32s; }
.nav-movil__lista a:nth-child(6){ transition-delay:.38s; }
.nav-movil__pie{
  margin-top:auto; padding-top:2rem; border-top:1px solid rgba(255,255,255,.15);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
}
.nav-movil__redes{ display:flex; gap:.9rem; }
.nav-movil__redes a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.nav-movil__redes svg{ width:18px; height:18px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height: 100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background: var(--verde-oscuro);
}
.hero__media{ position:absolute; inset:0; z-index:1; }
.hero__media img{ width:100%; height:100%; object-fit:cover; transform: scale(1.08); animation: heroZoom 18s ease-in-out infinite alternate; }
@keyframes heroZoom{ from{ transform:scale(1.08);} to{ transform:scale(1);} }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(1,25,10,.92) 4%, rgba(1,35,14,.55) 45%, rgba(1,35,14,.5) 100%),
    linear-gradient(100deg, rgba(1,35,14,.55) 0%, rgba(1,35,14,.1) 55%);
}
.hero::before{
  content:''; position:absolute; top:0; left:0; right:0; height:150px; z-index:2;
  background: linear-gradient(180deg, rgba(1,18,8,.6), rgba(1,18,8,0));
  pointer-events:none;
}

.hero__contenido{
  position:relative; z-index:3; width:100%;
  padding-block: 8rem 4.5rem;
}
.hero__ojo{ color: var(--texto-invertido); }
.hero__titulo{
  color:#fff; max-width: 16ch;
}
.hero__titulo em{
  font-style:normal; color: var(--dorado);
  position:relative;
}
.hero__parrafo{ color: rgba(238,247,239,.85); max-width:46ch; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

.hero__stats{
  position:relative; z-index:3;
  display:grid; grid-template-columns: repeat(3,1fr);
  gap:.9rem;
  margin-top: 3rem;
  padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero__stat b{ display:block; font-family:var(--f-titulo); font-size:clamp(1.4rem,3vw,2.1rem); color:#fff; }
.hero__stat span{ font-size:.78rem; color: rgba(238,247,239,.75); text-transform:uppercase; letter-spacing:.06em; }

.hero__scroll{
  position:absolute; right: 1.5rem; bottom: 1.6rem; z-index:4;
  display:none; flex-direction:column; align-items:center; gap:.6rem;
  color:#fff; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  writing-mode: vertical-rl;
}
@media(min-width:768px){ .hero__scroll{ display:flex; } }
.hero__scroll i{
  width:1px; height:46px; background: rgba(255,255,255,.5); position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--dorado); animation: hilo 2.2s ease-in-out infinite;
}
@keyframes hilo{ 0%{ top:-100%; } 50%{ top:0; } 100%{ top:100%; } }

.hero__insignia{
  position:absolute; z-index:3;
  background: rgba(1,20,8,.5);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radio-sm);
  padding: .9rem 1.15rem;
  display:flex; align-items:center; gap:.7rem;
  box-shadow: var(--sombra-lg);
  animation: flotar 6s ease-in-out infinite;
}
.hero__insignia svg{ width:26px; height:26px; color: var(--dorado); flex:none; }
.hero__insignia strong{ display:block; color:#fff; font-family:var(--f-titulo); font-size:1rem; }
.hero__insignia span{ color: rgba(238,247,239,.75); font-size:.76rem; }
.hero__insignia--1{ top: 7.5rem; right: 1.5rem; display:none; }
@media(min-width:900px){ .hero__insignia--1{ display:flex; } }
@keyframes flotar{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background: var(--dorado);
  overflow:hidden;
  padding-block: .9rem;
  transform: rotate(-1.2deg) scale(1.02);
  margin-block: -1.4rem;
  position:relative; z-index:5;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.marquee__pista{
  display:flex; width:max-content;
  animation: desfile 32s linear infinite;
}
.marquee__pista span{
  font-family: var(--f-titulo); font-weight:700; text-transform:uppercase;
  font-size: clamp(1.1rem,2.6vw,1.6rem);
  color: var(--verde-oscuro);
  padding-inline: 1.4rem;
  display:flex; align-items:center; gap:1.4rem;
  white-space:nowrap;
}
.marquee__pista span::after{ content:'✦'; color: var(--verde); font-size:.8em; }
@keyframes desfile{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
[data-revelar]{
  opacity:0; transform: translateY(48px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-revelar].visible{ opacity:1; transform:none; }
[data-revelar="izquierda"]{ transform: translateX(-60px); }
[data-revelar="izquierda"].visible{ transform:none; }
[data-revelar="derecha"]{ transform: translateX(60px); }
[data-revelar="derecha"].visible{ transform:none; }
[data-revelar="escala"]{ transform: scale(.85); }
[data-revelar="escala"].visible{ transform:none; }
[data-retraso="1"]{ transition-delay:.1s; }
[data-retraso="2"]{ transition-delay:.22s; }
[data-retraso="3"]{ transition-delay:.34s; }
[data-retraso="4"]{ transition-delay:.46s; }

/* =========================================================
   NOSOTROS — teaser home
   ========================================================= */
.teaser{
  background: var(--crema);
  overflow:hidden;
}
.teaser__grid{
  display:grid; gap: 3.5rem; align-items:center;
}
@media(min-width:960px){ .teaser__grid{ grid-template-columns: .9fr 1fr; gap:5vw; } }

.collage{
  position:relative;
  height: clamp(320px, 45vw, 460px);
  margin-inline:auto;
  max-width: 460px;
}
.collage__foto{
  position:absolute;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--sombra-lg);
  border: 6px solid #fff;
  transition: transform .5s var(--ease);
}
.collage__foto img{ width:100%; height:100%; object-fit:cover; }
.collage__foto--a{ width:62%; aspect-ratio:4/5; left:0; top:6%; transform: rotate(-6deg); z-index:2; }
.collage__foto--b{ width:52%; aspect-ratio:1/1; right:0; top:0; transform: rotate(5deg); z-index:1; }
.collage__foto--c{ width:48%; aspect-ratio:5/4; left:10%; bottom:0; transform: rotate(4deg); z-index:3; }
.collage:hover .collage__foto{ transform: rotate(0deg) translateY(-4px); }

.collage__insignia{
  position:absolute; z-index:4; bottom:8%; right:4%;
  width: clamp(96px,16vw,128px); aspect-ratio:1;
  border-radius:50%;
  background: var(--verde);
  color:#fff;
  display:flex; align-items:center; justify-content:center; text-align:center;
  flex-direction:column;
  box-shadow: var(--sombra-md);
  border: 4px solid var(--crema);
}
.collage__insignia b{ font-family: var(--f-titulo); font-size: clamp(1.3rem,3vw,1.7rem); }
.collage__insignia span{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; }

.teaser__texto p.lead{ color: var(--texto); }
.lista-check{ display:flex; flex-direction:column; gap:.85rem; margin-block:1.6rem 2rem; }
.lista-check li{ display:flex; align-items:flex-start; gap:.7rem; font-family:var(--f-titulo); font-weight:500; }
.lista-check svg{ width:22px; height:22px; flex:none; color: var(--verde); margin-top:.1em; }

/* =========================================================
   DESTINOS — scroller horizontal
   ========================================================= */
.destinos{ background:#fff; }
.destinos__cabecera{
  display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:flex-end;
  margin-bottom: 2.6rem;
}
.filtros{ display:flex; gap:.6rem; flex-wrap:wrap; }
.filtro{
  font-family: var(--f-titulo); font-weight:600; font-size:.88rem;
  padding: .55rem 1.15rem; border-radius:100px;
  border: 1.5px solid rgba(2,104,39,.18);
  background:#fff; color: var(--texto-suave);
  transition: all .3s var(--ease);
}
.filtro:hover{ border-color: var(--verde); color: var(--verde); }
.filtro.activo{ background: var(--verde); border-color: var(--verde); color:#fff; }

.scroller{
  display:flex; gap:1.4rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom: 1.4rem; margin: 0 -1.25rem; padding-inline:1.25rem;
  scrollbar-width:none;
  cursor:grab;
}
.scroller.arrastrando{ cursor:grabbing; scroll-snap-type:none; }
.scroller::-webkit-scrollbar{ display:none; }
@media(min-width:768px){ .scroller{ margin-inline:0; padding-inline:0; } }

.tarjeta-destino{
  position:relative;
  flex: 0 0 auto;
  width: min(78vw, 320px);
  aspect-ratio: 3/4.1;
  border-radius: var(--radio);
  overflow:hidden;
  scroll-snap-align:start;
  box-shadow: var(--sombra-md);
  transition: transform .4s var(--ease);
}
.tarjeta-destino:hover{ transform: translateY(-8px); }
.tarjeta-destino img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease);
}
.tarjeta-destino:hover img{ transform: scale(1.08); }
.tarjeta-destino::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(1,25,10,.92) 8%, rgba(1,25,10,.15) 55%, rgba(1,25,10,0) 75%);
  z-index:1;
}
.tarjeta-destino__tag{
  position:absolute; top:1.1rem; left:1.1rem; z-index:2;
  background: var(--dorado); color: var(--verde-oscuro);
  font-family:var(--f-titulo); font-weight:700; font-size:.72rem; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:100px;
}
.tarjeta-destino__info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 1.5rem;
  color:#fff;
}
.tarjeta-destino__info h3{ margin-bottom:.2rem; font-size:1.35rem; }
.tarjeta-destino__info p{ color: rgba(238,247,239,.8); margin:0; font-size:.86rem; }
.tarjeta-destino__flecha{
  position:absolute; z-index:2; top:1.1rem; right:1.1rem;
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition: background .3s, transform .3s;
}
.tarjeta-destino:hover .tarjeta-destino__flecha{ background: var(--dorado); color: var(--verde-oscuro); transform: rotate(45deg); }
.tarjeta-destino__flecha svg{ width:16px; height:16px; }

/* =========================================================
   EXPERIENCIAS — bento
   ========================================================= */
.bento{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(2,1fr);
}
@media(min-width:768px){
  .bento{ grid-template-columns: repeat(4,1fr); grid-auto-rows: 190px; }
  .bento__item--grande{ grid-column: span 2; grid-row: span 2; }
  .bento__item--ancho{ grid-column: span 2; }
}
.bento__item{
  position:relative; border-radius: var(--radio-sm); overflow:hidden;
  min-height:160px;
  box-shadow: var(--sombra-sm);
}
.bento__item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.bento__item:hover img{ transform: scale(1.07); }
.bento__item::before{
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(0deg, rgba(1,25,10,.85), rgba(1,25,10,.05) 60%);
}
.bento__texto{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.1rem 1.3rem;
  color:#fff;
}
.bento__texto svg{ width:26px; height:26px; color: var(--dorado); margin-bottom:.4rem; }
.bento__texto h4{ margin:0; font-size:1.05rem; }
.bento__item--grande .bento__texto h4{ font-size:1.4rem; }
.bento__texto p{ margin:0; font-size:.78rem; color: rgba(238,247,239,.8); }

/* =========================================================
   PROCESO
   ========================================================= */
.proceso{ background: var(--verde-oscuro); color:#fff; position:relative; overflow:hidden; }
.proceso::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.14) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  opacity:.5;
}
.proceso .contenedor{ position:relative; z-index:1; }
.proceso__lista{
  display:grid; gap:1.6rem; margin-top:3rem;
  grid-template-columns: 1fr;
}
@media(min-width:800px){ .proceso__lista{ grid-template-columns: repeat(4,1fr); } }
.paso{ position:relative; padding-top:1rem; }
.paso__numero{
  font-family: var(--f-titulo); font-weight:700;
  font-size: 3.4rem; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.35);
  line-height:1;
  margin-bottom: 1rem;
}
.paso h4{ color:#fff; margin-bottom:.4rem; }
.paso p{ color: rgba(238,247,239,.72); font-size:.92rem; }
.paso:not(:last-child)::after{
  content:''; position:absolute; top:2.1rem; left:calc(100% - 0.5rem); width: 2rem; height:1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 6px, transparent 6px 12px);
  display:none;
}
@media(min-width:800px){ .paso:not(:last-child)::after{ display:block; } }

/* =========================================================
   BLOG teaser
   ========================================================= */
.blog-grid{ display:grid; gap:1.6rem; grid-template-columns: 1fr; }
@media(min-width:720px){ .blog-grid{ grid-template-columns: repeat(3,1fr); } }
.tarjeta-blog{
  background:#fff; border-radius: var(--radio-sm); overflow:hidden;
  box-shadow: var(--sombra-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.tarjeta-blog:hover{ transform: translateY(-6px); box-shadow: var(--sombra-md); }
.tarjeta-blog__img{ aspect-ratio:16/10; overflow:hidden; }
.tarjeta-blog__img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.tarjeta-blog:hover .tarjeta-blog__img img{ transform: scale(1.08); }
.tarjeta-blog__cuerpo{ padding: 1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.tarjeta-blog__fecha{
  font-family: var(--f-titulo); font-weight:600; font-size:.74rem; text-transform:uppercase;
  color: var(--dorado-oscuro); letter-spacing:.06em; margin-bottom:.5rem;
}
.tarjeta-blog__cuerpo h4{ font-size:1.15rem; margin-bottom:.5rem; }
.tarjeta-blog__cuerpo p{ font-size:.9rem; flex:1; }
.tarjeta-blog__leer{
  font-family: var(--f-titulo); font-weight:600; font-size:.86rem; color: var(--verde);
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.6rem;
}
.tarjeta-blog__leer svg{ width:15px; height:15px; transition: transform .3s; }
.tarjeta-blog:hover .tarjeta-blog__leer svg{ transform: translateX(4px); }

/* =========================================================
   CTA banda dorada
   ========================================================= */
.cta-banda{
  background: linear-gradient(120deg, var(--dorado) 0%, #f2de5c 100%);
  position:relative; overflow:hidden;
  border-radius: clamp(24px,4vw,48px);
  margin-inline: 1.25rem;
}
@media(min-width:768px){ .cta-banda{ margin-inline:2.5rem; } }
.cta-banda__interior{
  position:relative; z-index:1;
  padding: clamp(2.6rem,6vw,5rem) clamp(1.5rem,6vw,4rem);
  display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between;
}
.cta-banda h2{ color: var(--verde-oscuro); max-width:16ch; margin:0; }
.cta-banda p{ color: rgba(1,25,10,.65); max-width:40ch; }
.cta-banda__icono{
  position:absolute; opacity:.5;
}
.cta-banda__icono svg{ width: 100%; height:100%; }
.cta-banda__icono--1{ width:180px; height:180px; top:-50px; right:-40px; color: rgba(255,255,255,.4); }
.cta-banda__icono--2{ width:120px; height:120px; bottom:-30px; left:10%; color: rgba(255,255,255,.35); }

/* =========================================================
   FOOTER
   ========================================================= */
.pie{
  background: var(--verde-oscuro);
  color: rgba(238,247,239,.78);
  padding-top: clamp(3.5rem,7vw,6rem);
  position:relative; overflow:hidden;
}
.pie__cenefa{
  position:absolute; top:0; left:0; right:0; height:10px;
  background: repeating-linear-gradient(90deg, var(--dorado) 0 24px, var(--verde-suave) 24px 48px);
}
.pie__grid{
  display:grid; gap:2.6rem;
  grid-template-columns: 1fr;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media(min-width:720px){ .pie__grid{ grid-template-columns: 1.3fr repeat(3,1fr); gap:2rem; } }
.pie__marca img{ height:38px; margin-bottom:1.1rem; }
.pie__marca p{ color: rgba(238,247,239,.65); max-width:32ch; }
.pie__slogan{
  font-family: var(--f-titulo); font-weight:600; color: var(--dorado);
  font-size:1.05rem; margin-top:1rem;
}
.pie h5{
  font-family: var(--f-titulo); color:#fff; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.2rem;
}
.pie ul{ display:flex; flex-direction:column; gap:.75rem; }
.pie ul a{ transition: color .3s, padding-left .3s; font-size:.95rem; }
.pie ul a:hover{ color: var(--dorado); padding-left:4px; }
.pie__redes{ display:flex; gap:.7rem; margin-top:1.3rem; }
.pie__redes a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; transition: all .3s;
}
.pie__redes a:hover{ background: var(--dorado); border-color: var(--dorado); color: var(--verde-oscuro); }
.pie__redes svg{ width:17px; height:17px; }
.pie__base{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-block: 1.6rem; font-size:.82rem; color: rgba(238,247,239,.55);
}
.pie__base a:hover{ color:#fff; }

/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */
.wa-flotante{
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index:600;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 34px rgba(37,211,102,.5);
  transition: transform .3s var(--ease);
}
.wa-flotante:hover{ transform: scale(1.08); }
.wa-flotante svg{ width:30px; height:30px; }
.wa-flotante::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border: 2px solid #25D366; animation: pulso 2.2s ease-out infinite;
}
@keyframes pulso{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.9); opacity:0;} }

/* =========================================================
   BANNER interno (páginas secundarias)
   ========================================================= */
.banner{
  position:relative; min-height: 62vh; display:flex; align-items:flex-end;
  overflow:hidden; background: var(--verde-oscuro);
}
.banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(1,25,10,.94) 10%, rgba(1,25,10,.4) 60%, rgba(1,25,10,.35));
}
.banner__contenido{ position:relative; z-index:1; padding-block: 8rem 3.5rem; color:#fff; }
.migas{ display:flex; gap:.5rem; align-items:center; font-size:.85rem; color: rgba(238,247,239,.7); margin-bottom:1rem; }
.migas a:hover{ color: var(--dorado); }

/* =========================================================
   Utilidades varias
   ========================================================= */
.flex-centro{ display:flex; align-items:center; justify-content:center; }
.pill-info{
  display:flex; align-items:center; gap:.8rem;
  background:#fff; border-radius: var(--radio-sm);
  padding: 1.1rem 1.3rem; box-shadow: var(--sombra-sm);
}
.pill-info svg{ width:22px; height:22px; color: var(--verde); flex:none; }
.pill-info strong{ display:block; font-family:var(--f-titulo); font-size:.95rem; }
.pill-info span{ font-size:.82rem; color: var(--texto-suave); }

.grano{
  background-image: radial-gradient(circle, rgba(2,104,39,.15) 1px, transparent 1px);
  background-size: 22px 22px;
}

::selection{ background: var(--dorado); color: var(--verde-oscuro); }