/* ==========================================================================
   STYLES.CSS  ·  Estilos de Yuratours
   --------------------------------------------------------------------------
    1. Reset y base          8. Sobre nosotros + barras
    2. Utilidades            9. Estadísticas
    3. Títulos con carácter 10. Servicios
    4. Animaciones          11. Visas
    5. Encabezado           12. Beneficios
    6. Hero (fotos)         13. Testimonios
    7. Buscador + Destinos  14. Oficinas  15. Footer  16. Flotantes  17. Responsivo
   ========================================================================== */

/* ============================ 1. RESET Y BASE ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--fuente-texto); font-size: var(--texto-base); line-height: 1.65; color: var(--tinta); background: var(--nube); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { font-family: var(--fuente-titulo); line-height: 1.06; font-weight: var(--peso-semi); }
a { color: var(--azul); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--azul-profundo); }
img { max-width: 100%; display: block; }
section { padding: var(--esp-24) 0; }
.ico { display: inline-flex; }
.ico svg { width: 1em; height: 1em; display: block; }

/* ============================ 2. UTILIDADES ============================== */
.contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding-inline: var(--padding-lateral); }
.oculto { display: none !important; }

.boton { display: inline-flex; align-items: center; gap: var(--esp-2); padding: 0.9em 1.7em; border-radius: var(--radio-full); font-family: var(--fuente-texto); font-weight: var(--peso-semi); font-size: var(--texto-base); cursor: pointer; border: 2px solid transparent; white-space: nowrap; transition: transform var(--transicion), background var(--transicion), color var(--transicion), box-shadow var(--transicion); }
.boton .ico svg { width: 1.15em; height: 1.15em; }
.boton:hover { transform: translateY(-3px); }
.boton--primario { background: var(--sol); color: var(--azul-profundo); box-shadow: var(--sombra-sol); }
.boton--primario:hover { background: var(--sol-oscuro); color: var(--blanco); }
.boton--azul { background: var(--azul-marca); color: var(--blanco); }
.boton--azul:hover { background: var(--azul); }
.boton--contorno { background: transparent; border-color: var(--borde); color: var(--azul-marca); }
.boton--contorno:hover { background: var(--azul-marca); color: var(--blanco); border-color: var(--azul-marca); }
.boton--claro { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.5); backdrop-filter: blur(4px); }
.boton--claro:hover { background: #fff; color: var(--azul-marca); }
.boton--wa { background: var(--whatsapp); color: #fff; }
.boton--wa:hover { background: #1eb457; color: #fff; }

/* ==================== 3. TÍTULOS CON CARÁCTER ========================== */
/* Acento manuscrito (como el "Visítanos" de la marca) */
.kicker { display: inline-block; font-family: var(--fuente-script); font-size: 1.9rem; line-height: 1; color: var(--coral); margin-bottom: var(--esp-1); transform: rotate(-3deg); }
.kicker--claro { color: #9BD4F5; }

.titulo-seccion { font-size: var(--texto-3xl); color: var(--azul-marca); max-width: 24ch; position: relative; }
.titulo-seccion .marca { color: var(--sol-oscuro); font-style: italic; position: relative; }
/* Subrayado dibujado a mano bajo la palabra destacada */
.titulo-seccion .marca::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8 C50 2 150 2 198 6' stroke='%232E9BE0' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; background-size: 100% 100%; }
.subtitulo-seccion { color: var(--gris); font-size: var(--texto-lg); max-width: 60ch; margin-top: var(--esp-4); }
.encabezado-seccion { margin-bottom: var(--esp-12); }
.encabezado-seccion--centro { text-align: center; }
.encabezado-seccion--centro .titulo-seccion, .encabezado-seccion--centro .subtitulo-seccion { margin-inline: auto; }

/* ======================= 4. ANIMACIONES ================================ */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.revelar.visible { opacity: 1; transform: none; }
.revelar[data-delay="1"] { transition-delay: 0.08s; }
.revelar[data-delay="2"] { transition-delay: 0.16s; }
.revelar[data-delay="3"] { transition-delay: 0.24s; }

/* ============================ 5. ENCABEZADO ============================= */
/* Barra superior (contacto + idioma) */
.topbar { background: var(--azul-profundo); color: rgba(255,255,255,0.85); font-size: var(--texto-sm); transition: transform var(--transicion), opacity var(--transicion); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); padding-block: var(--esp-2); }
.topbar__contacto { display: flex; align-items: center; gap: var(--esp-6); }
.topbar__item { display: inline-flex; align-items: center; gap: var(--esp-2); color: rgba(255,255,255,0.85); }
.topbar__item:hover { color: #fff; }
.topbar__item .ico svg { width: 16px; height: 16px; color: #9BD4F5; }
.topbar__derecha { display: flex; align-items: center; gap: var(--esp-4); }
.topbar__redes { display: flex; gap: var(--esp-3); }
.topbar__redes a { color: rgba(255,255,255,0.7); }
.topbar__redes a:hover { color: #9BD4F5; }
.topbar__redes svg { width: 16px; height: 16px; }
/* Selector de idioma */
.idioma { position: relative; }
.idioma__btn { display: inline-flex; align-items: center; gap: var(--esp-2); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 0.3em 0.7em; border-radius: var(--radio-full); font-family: var(--fuente-texto); font-size: var(--texto-xs); font-weight: var(--peso-semi); cursor: pointer; letter-spacing: 0.05em; }
.idioma__btn svg { width: 14px; height: 14px; }
.idioma__menu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border-radius: var(--radio-sm); box-shadow: var(--sombra-lg); overflow: hidden; min-width: 130px; z-index: 70; display: none; }
.idioma__menu.abierto { display: block; }
.idioma__opcion { display: block; width: 100%; text-align: left; padding: 0.6em 1em; background: none; border: none; cursor: pointer; font-family: var(--fuente-texto); font-size: var(--texto-sm); color: var(--tinta); }
.idioma__opcion:hover { background: var(--azul-claro); color: var(--azul-marca); }

.cabecera { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; transition: background var(--transicion), box-shadow var(--transicion); }
.cabecera__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-6); padding-block: var(--esp-6); transition: padding var(--transicion); }
.cabecera.encogido { background: rgba(252,252,254,0.96); backdrop-filter: blur(12px); box-shadow: var(--sombra-sm); }
.cabecera.encogido .topbar { transform: translateY(-100%); opacity: 0; height: 0; overflow: hidden; padding: 0; }
.logo-img { height: 42px; width: auto; transition: transform var(--transicion), filter var(--transicion); }
/* En el hero (cabecera transparente) el logo va en blanco para contrastar */
.cabecera:not(.encogido) .logo-img { filter: brightness(0) invert(1); }
.cabecera:not(.encogido) .nav__links a { color: rgba(255,255,255,0.92); }
.cabecera:not(.encogido) .nav__toggle { color: #fff; }
.logo-link:hover .logo-img { transform: scale(1.04); }
.nav { display: flex; align-items: center; gap: var(--esp-8); }
.nav__links { display: flex; gap: var(--esp-6); list-style: none; }
.nav__links a { color: var(--tinta); font-weight: var(--peso-medio); font-size: var(--texto-sm); position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--sol); transition: width var(--transicion); }
.nav__links a:hover::after { width: 100%; }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; color: var(--azul-marca); }
.nav__toggle svg { width: 28px; height: 28px; }

/* ============================ 6. HERO (FOTOS) =========================== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero__slides { position: absolute; inset: 0; z-index: 0; background: var(--grad-marca); }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; background: var(--grad-marca); }
.hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide.activa { opacity: 1; }
.hero__slide.activa img { animation: kenburns 7s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
.hero__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,20,60,0.82) 0%, rgba(20,20,60,0.5) 45%, rgba(20,20,60,0.15) 100%), linear-gradient(0deg, rgba(20,20,60,0.6), transparent 40%); }
.hero__inner { position: relative; z-index: 3; max-width: 46ch; padding-block: var(--esp-24); }
.hero__badge { display: inline-flex; align-items: center; gap: var(--esp-2); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radio-full); padding: 0.45em 1.1em; font-size: var(--texto-sm); font-weight: var(--peso-medio); color: #fff; backdrop-filter: blur(6px); margin-bottom: var(--esp-6); }
.hero__badge .ico svg { width: 1.1em; height: 1.1em; color: #9BD4F5; }
.hero h1 { font-size: var(--texto-4xl); color: #fff; text-shadow: 0 2px 40px rgba(20,20,60,0.5); }
.hero h1 em { font-style: italic; color: #9BD4F5; }
.hero__texto { font-size: var(--texto-lg); color: rgba(255,255,255,0.92); margin-top: var(--esp-4); margin-bottom: var(--esp-8); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-4); }
/* Indicador de lugar + puntos */
.hero__lugar { position: absolute; right: var(--padding-lateral); bottom: calc(var(--esp-24) + var(--esp-8)); z-index: 3; display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-sm); color: rgba(255,255,255,0.9); letter-spacing: 0.02em; }
.hero__lugar .ico svg { width: 1.1em; height: 1.1em; color: #9BD4F5; }
.hero__puntos { position: absolute; left: var(--padding-lateral); bottom: var(--esp-16); z-index: 3; display: flex; gap: var(--esp-2); }
.hero__punto { width: 32px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.35); cursor: pointer; transition: background var(--transicion); }
.hero__punto.activo { background: var(--sol); }

/* ==================== 7. BUSCADOR + DESTINOS =========================== */
.buscador-wrap { position: relative; z-index: 5; margin-top: -46px; }
.buscador { background: rgba(255,255,255,0.98); border-radius: var(--radio-lg); box-shadow: var(--sombra-lg); padding: var(--esp-6); display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: var(--esp-4); align-items: end; border: 1px solid var(--borde); }
.campo { display: flex; flex-direction: column; gap: var(--esp-2); }
.campo label { font-size: var(--texto-xs); font-weight: var(--peso-semi); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gris); }
.campo select, .campo input { font-family: var(--fuente-texto); font-size: var(--texto-base); padding: 0.75em 0.9em; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--nube); color: var(--tinta); }
.campo select:focus, .campo input:focus { outline: 2px solid var(--azul-vivo); outline-offset: 1px; }

.grid-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--esp-6); }
.destino { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 3 / 4; color: #fff; box-shadow: var(--sombra); transition: transform var(--transicion-lenta), box-shadow var(--transicion-lenta); }
.destino:hover { transform: translateY(-8px) scale(1.01); box-shadow: var(--sombra-lg); }
.destino__imagen { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--transicion-lenta); }
.destino__imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destino:hover .destino__imagen { transform: scale(1.08); }
.destino::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(20,20,46,0.9)); }
.destino__contenido { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--esp-6); }
.destino__etiqueta { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.1em; color: #9BD4F5; font-weight: var(--peso-semi); }
.destino h3 { font-size: var(--texto-xl); margin-top: var(--esp-1); }
.destino__flecha { position: absolute; top: var(--esp-4); right: var(--esp-4); z-index: 2; width: 40px; height: 40px; border-radius: var(--radio-full); background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); display: grid; place-items: center; color: #fff; opacity: 0; transform: translateY(-6px); transition: var(--transicion); }
.destino__flecha svg { width: 18px; height: 18px; }
.destino:hover .destino__flecha { opacity: 1; transform: none; }

/* ==================== 7b. TOURS DESTACADOS ============================= */
.tours { background: var(--azul-niebla); }
.grid-tours { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--esp-8); }
.tarjeta-tour { background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-sm); display: flex; flex-direction: column; transition: transform var(--transicion), box-shadow var(--transicion); }
.tarjeta-tour:hover { transform: translateY(-8px); box-shadow: var(--sombra-lg); }
.tarjeta-tour__imagen { position: relative; height: 210px; background: var(--grad-marca); overflow: hidden; }
.tarjeta-tour__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicion-lenta); }
.tarjeta-tour:hover .tarjeta-tour__imagen img { transform: scale(1.06); }
.tarjeta-tour__dias { position: absolute; top: var(--esp-3); left: var(--esp-3); background: rgba(255,255,255,0.95); color: var(--azul-marca); font-size: var(--texto-xs); font-weight: var(--peso-semi); padding: 0.35em 0.8em; border-radius: var(--radio-full); z-index: 2; }
.tarjeta-tour__cuerpo { padding: var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-3); flex: 1; }
.tarjeta-tour__region { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sol-oscuro); font-weight: var(--peso-semi); }
.tarjeta-tour h3 { font-size: var(--texto-xl); color: var(--azul-marca); }
.tarjeta-tour__desc { color: var(--gris); font-size: var(--texto-sm); flex: 1; }
.tarjeta-tour__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding-top: var(--esp-4); border-top: 1px solid var(--borde); }
.tarjeta-tour__precio { display: flex; flex-direction: column; }
.tarjeta-tour__precio small { font-size: var(--texto-xs); color: var(--gris-claro); }
.tarjeta-tour__precio strong { font-size: var(--texto-xl); color: var(--azul-marca); font-family: var(--fuente-titulo); }

/* ==================== 8. SOBRE NOSOTROS + BARRAS ====================== */
.nosotros__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-16); align-items: center; }
.nosotros__foto { position: relative; border-radius: var(--radio-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--grad-marca); box-shadow: var(--sombra-lg); }
.nosotros__foto img { width: 100%; height: 100%; object-fit: cover; }
.nosotros__sello { position: absolute; right: -18px; bottom: -18px; width: 130px; height: 130px; border-radius: var(--radio-full); background: var(--grad-atardecer); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: var(--sombra); }
.nosotros__sello strong { font-family: var(--fuente-titulo); font-size: 2.2rem; line-height: 1; }
.nosotros__sello span { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.nosotros p { color: var(--gris); margin-top: var(--esp-4); }
.barras { margin-top: var(--esp-8); display: flex; flex-direction: column; gap: var(--esp-4); }
.barra__cab { display: flex; justify-content: space-between; font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--azul-marca); margin-bottom: var(--esp-2); }
.barra__pista { height: 8px; background: var(--azul-claro); border-radius: var(--radio-full); overflow: hidden; }
.barra__relleno { height: 100%; width: 0; background: var(--grad-atardecer); border-radius: var(--radio-full); transition: width 1.4s cubic-bezier(0.22,1,0.36,1); }

/* ============================ 9. ESTADÍSTICAS ========================= */
.stats { background: var(--grad-marca); color: #fff; padding: var(--esp-16) 0; }
.grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-8); text-align: center; }
.stat__num { font-family: var(--fuente-titulo); font-size: var(--texto-3xl); font-weight: var(--peso-negrita); color: #9BD4F5; line-height: 1; }
.stat__label { margin-top: var(--esp-2); font-size: var(--texto-sm); color: rgba(255,255,255,0.85); }

/* ============================ 10. SERVICIOS =========================== */
.grid-servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--esp-8); counter-reset: serv; }
.servicio { position: relative; overflow: hidden; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: var(--esp-8); counter-increment: serv; transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); }
.servicio::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--grad-atardecer); transform: scaleX(0); transform-origin: left; transition: transform var(--transicion-lenta); }
.servicio::after { content: counter(serv, decimal-leading-zero); position: absolute; top: var(--esp-4); right: var(--esp-6); font-family: var(--fuente-titulo); font-weight: var(--peso-negrita); font-size: 3.4rem; line-height: 1; color: var(--azul-claro); z-index: 0; }
.servicio:hover { transform: translateY(-8px); box-shadow: var(--sombra-lg); border-color: transparent; }
.servicio:hover::before { transform: scaleX(1); }
.servicio > * { position: relative; z-index: 1; }
.servicio__icono { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; background: var(--grad-marca); color: #fff; margin-bottom: var(--esp-6); box-shadow: var(--sombra); }
.servicio__icono svg { width: 32px; height: 32px; }
.servicio h3 { font-size: var(--texto-xl); color: var(--azul-marca); margin-bottom: var(--esp-4); }
.servicio ul { list-style: none; display: flex; flex-direction: column; gap: var(--esp-3); }
.servicio li { display: flex; align-items: flex-start; gap: var(--esp-3); font-size: var(--texto-sm); color: var(--gris); }
.servicio li .ico { color: #fff; background: var(--sol); border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; margin-top: 1px; flex-shrink: 0; }
.servicio li .ico svg { width: 12px; height: 12px; }

/* ============================ 11. VISAS ============================== */
.visas { background: var(--azul-niebla); }
.grid-visas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--esp-6); }
.visa { background: var(--blanco); border-radius: var(--radio); padding: var(--esp-8); text-align: center; border: 1px solid var(--borde); transition: transform var(--transicion), box-shadow var(--transicion); position: relative; overflow: hidden; }
.visa::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-atardecer); }
.visa:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.visa__icono { width: 54px; height: 54px; margin: 0 auto var(--esp-4); display: grid; place-items: center; border-radius: var(--radio-full); background: var(--azul-claro); color: var(--azul-marca); }
.visa__icono svg { width: 26px; height: 26px; }
.visa h3 { font-size: var(--texto-lg); color: var(--azul-marca); }
.visa span { font-size: var(--texto-sm); color: var(--gris); }

/* ============================ 12. BENEFICIOS ========================= */
.grid-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--esp-8); }
.beneficio { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-8); border-radius: var(--radio); background: var(--blanco); border: 1px solid var(--borde); transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion); }
.beneficio:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: transparent; }
.beneficio__icono { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radio-sm); background: var(--grad-atardecer); color: #fff; box-shadow: var(--sombra-sol); }
.beneficio__icono svg { width: 28px; height: 28px; }
.beneficio h3 { font-size: var(--texto-lg); color: var(--azul-marca); }
.beneficio p { color: var(--gris); font-size: var(--texto-sm); }

/* ============================ 13. TESTIMONIOS ======================== */
.testimonios { background: var(--azul-profundo); color: #fff; position: relative; overflow: hidden; }
.testimonios::before { content: ""; position: absolute; top: -30%; right: -10%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(91,91,214,0.45), transparent 70%); }
.testimonios .titulo-seccion { color: #fff; }
.testimonios .kicker { color: #9BD4F5; }
.grid-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--esp-6); position: relative; z-index: 2; }
.testimonio { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radio); padding: var(--esp-8); display: flex; flex-direction: column; gap: var(--esp-4); transition: transform var(--transicion); }
.testimonio:hover { transform: translateY(-6px); }
.testimonio__estrellas { display: flex; gap: 2px; color: #9BD4F5; }
.testimonio__estrellas svg { width: 18px; height: 18px; }
.testimonio__texto { font-size: var(--texto-base); line-height: 1.6; }
.testimonio__autor { display: flex; align-items: center; gap: var(--esp-3); margin-top: auto; }
.testimonio__avatar { width: 46px; height: 46px; border-radius: var(--radio-full); background: var(--grad-atardecer); color: #fff; display: grid; place-items: center; font-weight: var(--peso-negrita); flex-shrink: 0; }
.testimonio__nombre { font-weight: var(--peso-semi); display: block; }
.testimonio__ciudad { font-size: var(--texto-sm); color: rgba(255,255,255,0.6); }

/* ============================ 14. OFICINAS =========================== */
.oficinas .kicker { color: var(--coral); }
.grid-oficinas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-6); }
.oficina { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sombra-sm); transition: transform var(--transicion), box-shadow var(--transicion); }
.oficina:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.oficina__cuerpo { padding: var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-3); }
.oficina__ciudad { font-family: var(--fuente-titulo); font-size: var(--texto-xl); color: var(--azul-marca); }
.oficina__dato { display: flex; align-items: flex-start; gap: var(--esp-2); font-size: var(--texto-sm); color: var(--gris); }
.oficina__dato .ico { color: var(--sol-oscuro); margin-top: 2px; flex-shrink: 0; }
.oficina__dato .ico svg { width: 16px; height: 16px; }
.oficina__wa { margin-top: var(--esp-1); width: 100%; justify-content: center; padding: 0.6em; font-size: var(--texto-sm); }
.oficina__mapa { height: 150px; background: var(--azul-claro); border: 0; border-top: 1px solid var(--borde); width: 100%; }

/* ==================== 14b. FRANJA CTA ================================ */
.cta { background: var(--grad-marca); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(46,155,224,0.25), transparent 40%), radial-gradient(circle at 80% 70%, rgba(143,208,242,0.25), transparent 45%); }
.cta__inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta h2 { font-size: var(--texto-3xl); color: #fff; margin-bottom: var(--esp-4); }
.cta p { color: rgba(255,255,255,0.9); font-size: var(--texto-lg); margin-bottom: var(--esp-8); }

/* ============================ 15. FOOTER ============================= */
.footer { background: #14143C; color: rgba(255,255,255,0.72); padding-block: var(--esp-16) var(--esp-8); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--esp-8); padding-bottom: var(--esp-12); border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer__logo { height: 40px; margin-bottom: var(--esp-4); }
.footer__intro { font-size: var(--texto-sm); }
.footer__contacto { display: flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-4); font-size: var(--texto-sm); }
.footer__contacto .ico { color: #9BD4F5; }
.footer__contacto .ico svg { width: 18px; height: 18px; }
.footer h4 { color: #fff; font-family: var(--fuente-texto); font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--esp-4); }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--esp-2); }
.footer a { color: rgba(255,255,255,0.72); font-size: var(--texto-sm); }
.footer a:hover { color: #9BD4F5; }
.footer__permisos { font-size: var(--texto-xs); color: rgba(255,255,255,0.5); line-height: 1.9; }
.footer__redes { display: flex; gap: var(--esp-3); margin-top: var(--esp-4); }
.footer__redes a { width: 38px; height: 38px; border-radius: var(--radio-full); background: rgba(255,255,255,0.1); display: grid; place-items: center; color: #fff; transition: background var(--transicion); }
.footer__redes a:hover { background: var(--sol); color: var(--azul-profundo); }
.footer__redes svg { width: 18px; height: 18px; }
.footer__base { padding-top: var(--esp-8); font-size: var(--texto-xs); color: rgba(255,255,255,0.5); text-align: center; }

/* ==================== 16. FLOTANTES ================================== */
.flotantes { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 60; display: flex; flex-direction: column; gap: var(--esp-3); }
.fab { width: 60px; height: 60px; border-radius: var(--radio-full); display: grid; place-items: center; box-shadow: var(--sombra-lg); cursor: pointer; border: none; transition: transform var(--transicion); position: relative; color: #fff; }
.fab:hover { transform: scale(1.1); }
.fab svg { width: 30px; height: 30px; }
.fab--whatsapp { background: var(--whatsapp); }
.fab--whatsapp::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio-full); border: 2px solid var(--whatsapp); animation: pulso 2s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
.fab--chat { background: var(--azul-marca); }

/* ============================ 17. RESPONSIVO ========================= */
@media (max-width: 980px) {
  .grid-stats { grid-template-columns: repeat(2, 1fr); gap: var(--esp-12) var(--esp-8); }
  .nosotros__grid { grid-template-columns: 1fr; gap: var(--esp-12); }
  .grid-oficinas { grid-template-columns: repeat(2, 1fr); }
  .topbar__contacto .topbar__texto { display: none; }
}
@media (max-width: 900px) { .buscador { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  section { padding: var(--esp-16) 0; }
  .nav__links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--nube); border-bottom: 1px solid var(--borde); padding: var(--esp-6) var(--padding-lateral); gap: var(--esp-4); display: none; box-shadow: var(--sombra); }
  .nav__links.abierto { display: flex; }
  .cabecera:not(.encogido) .nav__links a { color: var(--tinta); }
  .nav__toggle { display: block; }
  .buscador { grid-template-columns: 1fr; }
  .grid-stats { grid-template-columns: 1fr 1fr; }
  .grid-oficinas { grid-template-columns: 1fr; }
  .hero__lugar { bottom: calc(var(--esp-16) + var(--esp-12)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; }
  .barra__relleno { transition: none; }
}

/* ==========================================================================
   18. DECORACIÓN  ·  Fondos, texturas, ondas y color
   --------------------------------------------------------------------------
   Utilidades para dar riqueza visual sin ensuciar el HTML:
   - .seccion-deco : contenedor de decoraciones (recorta lo que sobresale)
   - .textura-topo : patrón de curvas de nivel (mapa), muy sutil
   - .orbe         : manchas de color difuminadas y flotantes
   - .divisor      : ondas de transición entre secciones
   - .bg-*         : fondos de sección
   ========================================================================== */

/* El contenido siempre por encima de las decoraciones */
section { position: relative; }
section > .contenedor { position: relative; z-index: 2; }
.seccion-deco { overflow: hidden; }

/* ----- Fondos de sección ----- */
.bg-suave   { background: linear-gradient(180deg, var(--blanco) 0%, var(--azul-niebla) 100%); }
.bg-niebla  { background: var(--azul-niebla); }
.bg-claro   { background: var(--azul-claro); }

/* ----- Textura topográfica (curvas de nivel) ----- */
.textura-topo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23303078' stroke-width='1.4' opacity='0.05'%3E%3Cpath d='M-20 90 Q140 30 280 90 T580 90'/%3E%3Cpath d='M-20 150 Q140 90 280 150 T580 150'/%3E%3Cpath d='M-20 210 Q140 150 280 210 T580 210'/%3E%3Cpath d='M-20 270 Q140 210 280 270 T580 270'/%3E%3Cpath d='M-20 330 Q140 270 280 330 T580 330'/%3E%3Cpath d='M-20 390 Q140 330 280 390 T580 390'/%3E%3Cpath d='M-20 450 Q140 390 280 450 T580 450'/%3E%3Cpath d='M-20 510 Q140 450 280 510 T580 510'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 560px;
}

/* ----- Orbes de color flotantes ----- */
.orbe { position: absolute; z-index: 0; border-radius: 50%; filter: blur(50px); pointer-events: none; opacity: 0.55; }
.orbe--sol   { background: radial-gradient(circle, rgba(46,155,224,0.75), transparent 70%); }
.orbe--coral { background: radial-gradient(circle, rgba(79,176,230,0.6), transparent 70%); }
.orbe--azul  { background: radial-gradient(circle, rgba(91,91,214,0.55), transparent 70%); }
.orbe--rosa  { background: radial-gradient(circle, rgba(143,208,242,0.5), transparent 70%); }
.orbe--flota  { animation: flotar 16s ease-in-out infinite; }
.orbe--flota2 { animation: flotar 22s ease-in-out infinite reverse; }
@keyframes flotar { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-30px) scale(1.08); } }

/* ----- Ondas de transición ----- */
.divisor { position: absolute; left: 0; width: 100%; line-height: 0; z-index: 3; pointer-events: none; }
.divisor svg { width: 100%; height: 70px; display: block; }
.divisor svg path { fill: var(--c, #FCFCFE); }
.divisor--top { top: -1px; }
.divisor--bottom { bottom: -1px; }
@media (max-width: 680px) { .divisor svg { height: 40px; } }

/* ----- Variantes de aparición al scroll ----- */
.revelar--izq  { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.revelar--der  { opacity: 0; transform: translateX(40px);  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.revelar--zoom { opacity: 0; transform: scale(0.92);        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.revelar--izq.visible, .revelar--der.visible, .revelar--zoom.visible { opacity: 1; transform: none; }

/* Tarjetas hijas con aparición escalonada */
.aparece > * { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.aparece.visible > * { opacity: 1; transform: none; }
.aparece.visible > *:nth-child(1) { transition-delay: 0.05s; }
.aparece.visible > *:nth-child(2) { transition-delay: 0.12s; }
.aparece.visible > *:nth-child(3) { transition-delay: 0.19s; }
.aparece.visible > *:nth-child(4) { transition-delay: 0.26s; }
.aparece.visible > *:nth-child(5) { transition-delay: 0.33s; }
.aparece.visible > *:nth-child(6) { transition-delay: 0.40s; }
.aparece.visible > *:nth-child(7) { transition-delay: 0.47s; }
.aparece.visible > *:nth-child(8) { transition-delay: 0.54s; }
.aparece.visible > *:nth-child(9) { transition-delay: 0.61s; }

/* Beneficios: ahora con tarjetas de vidrio sobre fondo de color */
.beneficios-deco { background: linear-gradient(135deg, var(--azul-marca) 0%, var(--azul-profundo) 100%); color: #fff; }
.beneficios-deco .titulo-seccion { color: #fff; }
.beneficios-deco .kicker { color: #9BD4F5; }
.beneficios-deco .beneficio { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.beneficios-deco .beneficio:hover { background: rgba(255,255,255,0.12); }
.beneficios-deco .beneficio h3 { color: #fff; }
.beneficios-deco .beneficio p { color: rgba(255,255,255,0.8); }

@media (prefers-reduced-motion: reduce) {
  .orbe--flota, .orbe--flota2 { animation: none !important; }
  .revelar--izq, .revelar--der, .revelar--zoom, .aparece > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   19. PÁGINAS INTERNAS  ·  Banner, migas, filtros, galería, formulario
   ========================================================================== */

/* ----- Banner de página (hero pequeño de páginas internas) ----- */
.banner { position: relative; overflow: hidden; padding-top: calc(var(--esp-24) + 60px); padding-bottom: var(--esp-16); background: linear-gradient(135deg, var(--azul-marca) 0%, var(--azul-profundo) 100%); color: #fff; text-align: center; }
.banner__inner { position: relative; z-index: 2; }
.banner .kicker { color: #9BD4F5; }
.banner h1 { font-size: var(--texto-4xl); color: #fff; }
.banner h1 em { font-style: italic; color: #9BD4F5; }
.banner p { color: rgba(255,255,255,0.88); font-size: var(--texto-lg); max-width: 56ch; margin: var(--esp-4) auto 0; }
.migas { display: inline-flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-6); font-size: var(--texto-sm); color: rgba(255,255,255,0.7); }
.migas a { color: rgba(255,255,255,0.7); }
.migas a:hover { color: #9BD4F5; }
.migas .ico svg { width: 14px; height: 14px; }

/* ----- Filtros (destinos) ----- */
.filtros { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; margin-bottom: var(--esp-12); }
.filtro { padding: 0.55em 1.3em; border-radius: var(--radio-full); border: 1px solid var(--borde); background: var(--blanco); color: var(--gris); font-family: var(--fuente-texto); font-weight: var(--peso-semi); font-size: var(--texto-sm); cursor: pointer; transition: all var(--transicion); }
.filtro:hover { border-color: var(--azul-vivo); color: var(--azul-marca); }
.filtro.activo { background: var(--azul-marca); color: #fff; border-color: var(--azul-marca); }

/* ----- Galería ----- */
.grid-galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-4); }
.galeria__item { position: relative; border-radius: var(--radio); overflow: hidden; aspect-ratio: 1; margin: 0; background: var(--grad-marca); box-shadow: var(--sombra-sm); }
.galeria__item:nth-child(4n+1) { grid-row: span 2; aspect-ratio: auto; }
.galeria__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicion-lenta); }
.galeria__item:hover .galeria__img { transform: scale(1.08); }
.galeria__pie { position: absolute; inset: auto 0 0 0; padding: var(--esp-4); background: linear-gradient(transparent, rgba(20,20,60,0.85)); color: #fff; font-size: var(--texto-sm); font-weight: var(--peso-semi); opacity: 1; transition: var(--transicion); }
.galeria__item:hover .galeria__pie { background: linear-gradient(transparent, rgba(20,20,60,0.95)); }

/* ----- Contacto: formulario ----- */
.contacto__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-16); align-items: start; }
.formulario { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: var(--esp-12); box-shadow: var(--sombra); }
.formulario h3 { font-size: var(--texto-2xl); color: var(--azul-marca); margin-bottom: var(--esp-6); }
.formulario .campo { margin-bottom: var(--esp-4); }
.formulario label { font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--gris); margin-bottom: var(--esp-2); display: block; }
.formulario input, .formulario select, .formulario textarea { width: 100%; font-family: var(--fuente-texto); font-size: var(--texto-base); padding: 0.8em 1em; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--nube); color: var(--tinta); }
.formulario textarea { resize: vertical; min-height: 120px; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: 2px solid var(--azul-vivo); outline-offset: 1px; }
.formulario .boton { width: 100%; justify-content: center; margin-top: var(--esp-2); }
.contacto__info { display: flex; flex-direction: column; gap: var(--esp-6); }
.contacto__intro { color: var(--gris); }

/* ----- Ajustes responsivos de páginas internas ----- */
@media (max-width: 980px) {
  .grid-galeria { grid-template-columns: repeat(3, 1fr); }
  .contacto__grid { grid-template-columns: 1fr; gap: var(--esp-12); }
}
@media (max-width: 680px) {
  .grid-galeria { grid-template-columns: repeat(2, 1fr); }
  .galeria__item:nth-child(4n+1) { grid-row: span 1; aspect-ratio: 1; }
  .banner { padding-top: calc(var(--esp-16) + 70px); }
  .formulario { padding: var(--esp-8); }
}

/* ==========================================================================
   20. FICHA DE TOUR
   ========================================================================== */
.tour-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; padding-top: 100px; }
.tour-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.tour-hero__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,20,60,0.55) 0%, rgba(20,20,60,0.15) 40%, rgba(20,20,60,0.9) 100%); }
.tour-hero__inner { position: relative; z-index: 2; padding-bottom: var(--esp-16); }
.tour-hero .migas { color: rgba(255,255,255,0.8); margin-bottom: var(--esp-4); }
.tour-hero .migas a { color: rgba(255,255,255,0.8); }
.tour-hero .migas a:hover { color: #9BD4F5; }
.tour-hero h1 { font-size: var(--texto-4xl); color: #fff; margin: var(--esp-2) 0 var(--esp-6); text-shadow: 0 2px 30px rgba(20,20,60,0.5); }
.tour-chips { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.tour-chip { display: inline-flex; align-items: center; gap: var(--esp-2); background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(6px); border-radius: var(--radio-full); padding: 0.5em 1.1em; font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.tour-chip .ico { color: #9BD4F5; } .tour-chip .ico svg { width: 16px; height: 16px; }

.tour-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--esp-16); align-items: start; }
.tour-contenido .titulo-seccion { font-size: var(--texto-2xl); }
.tour-desc { color: var(--gris); font-size: var(--texto-lg); margin: var(--esp-4) 0 var(--esp-12); }
.tour-sub { display: flex; align-items: center; gap: var(--esp-3); font-size: var(--texto-xl); color: var(--azul-marca); margin: var(--esp-12) 0 var(--esp-6); }
.tour-sub .ico { color: var(--sol-oscuro); } .tour-sub .ico svg { width: 24px; height: 24px; }

/* Itinerario tipo línea de tiempo */
.itin { position: relative; padding-left: 8px; }
.itin__paso { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: var(--esp-4); padding-bottom: var(--esp-8); }
.itin__paso::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -6px; width: 2px; background: var(--borde); }
.itin__paso:last-child::before { display: none; }
.itin__marca { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-marca); color: #fff; display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: var(--peso-negrita); z-index: 1; }
.itin__dia { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--sol-oscuro); font-weight: var(--peso-semi); }
.itin__cuerpo h4 { font-size: var(--texto-lg); color: var(--azul-marca); margin: 2px 0 var(--esp-2); font-family: var(--fuente-titulo); }
.itin__cuerpo p { color: var(--gris); font-size: var(--texto-sm); }

/* Incluye / no incluye */
.incluye-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-8); margin-top: var(--esp-8); }
.incluye h4 { font-size: var(--texto-lg); color: var(--azul-marca); margin-bottom: var(--esp-4); }
.incluye ul { list-style: none; display: flex; flex-direction: column; gap: var(--esp-3); }
.incluye li { display: flex; align-items: flex-start; gap: var(--esp-3); font-size: var(--texto-sm); color: var(--gris); }
.incluye .ico { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex-shrink: 0; margin-top: 1px; }
.incluye .ico svg { width: 12px; height: 12px; }
.incluye .ico--si { background: #2BA45E; } .incluye .ico--no { background: #D0505A; }
.tour-contenido .grid-galeria { margin-top: var(--esp-6); }

/* Tarjeta de reserva (fija al hacer scroll) */
.tour-reserva { position: sticky; top: 120px; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: var(--esp-8); box-shadow: var(--sombra); display: flex; flex-direction: column; gap: var(--esp-4); }
.tour-reserva__precio { display: flex; flex-direction: column; padding-bottom: var(--esp-4); border-bottom: 1px solid var(--borde); }
.tour-reserva__precio small { font-size: var(--texto-xs); color: var(--gris-claro); text-transform: uppercase; letter-spacing: 0.08em; }
.tour-reserva__precio strong { font-family: var(--fuente-titulo); font-size: var(--texto-3xl); color: var(--azul-marca); line-height: 1; }
.tour-reserva__dato { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-sm); color: var(--gris); }
.tour-reserva__dato .ico { color: var(--sol-oscuro); } .tour-reserva__dato .ico svg { width: 18px; height: 18px; }
.tour-reserva .boton { width: 100%; justify-content: center; margin-top: var(--esp-2); }

@media (max-width: 900px) {
  .tour-layout { grid-template-columns: 1fr; gap: var(--esp-12); }
  .tour-reserva { position: static; }
  .incluye-grid { grid-template-columns: 1fr; }
}

/* ----- Destino sin tours ----- */
.sin-tours { text-align: center; max-width: 520px; margin: 0 auto; padding: var(--esp-16) 0; }
.sin-tours p { color: var(--gris); font-size: var(--texto-lg); margin-bottom: var(--esp-6); }
.sin-tours .boton { display: inline-flex; }

/* ==========================================================================
   21. CHATBOT (Nivel 1)
   ========================================================================== */
.fab--chat.activo { background: var(--azul-profundo); }
.chatbot { position: fixed; right: clamp(1rem,3vw,2rem); bottom: calc(clamp(1rem,3vw,2rem) + 76px); z-index: 65; width: 360px; max-width: calc(100vw - 2rem); height: 520px; max-height: calc(100vh - 130px); background: #fff; border-radius: 20px; box-shadow: var(--sombra-lg); display: flex; flex-direction: column; overflow: hidden; animation: chatEntra 0.3s cubic-bezier(0.22,1,0.36,1); }
@keyframes chatEntra { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } }
.chatbot__cab { background: var(--grad-marca); color: #fff; padding: var(--esp-4) var(--esp-6); display: flex; align-items: center; justify-content: space-between; }
.chatbot__marca { display: flex; align-items: center; gap: var(--esp-3); }
.chatbot__avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); display: grid; place-items: center; }
.chatbot__avatar svg { width: 22px; height: 22px; }
.chatbot__marca strong { display: block; font-family: var(--fuente-titulo); font-size: 1.05rem; }
.chatbot__estado { font-size: 0.75rem; color: rgba(255,255,255,0.8); display: flex; align-items: center; gap: 5px; }
.chatbot__estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.chatbot__cerrar { background: none; border: none; color: #fff; cursor: pointer; opacity: 0.85; }
.chatbot__cerrar svg { width: 22px; height: 22px; }
.chatbot__mensajes { flex: 1; overflow-y: auto; padding: var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-3); background: var(--azul-niebla); }
.chatbot__msg { max-width: 82%; padding: 0.7em 1em; border-radius: 16px; font-size: 0.9rem; line-height: 1.5; }
.chatbot__msg--bot { background: #fff; color: var(--tinta); border-bottom-left-radius: 4px; box-shadow: var(--sombra-sm); align-self: flex-start; }
.chatbot__msg--yo { background: var(--azul-marca); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chatbot__typing { display: flex; gap: 4px; }
.chatbot__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gris-claro); animation: typing 1s infinite; }
.chatbot__typing span:nth-child(2) { animation-delay: 0.2s; } .chatbot__typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
.chatbot__opciones { padding: var(--esp-3) var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); border-top: 1px solid var(--borde); max-height: 210px; overflow-y: auto; }
.chatbot__op { text-align: left; background: var(--azul-claro); border: 1px solid transparent; color: var(--azul-marca); padding: 0.6em 0.9em; border-radius: 12px; font-family: var(--fuente-texto); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--transicion); display: flex; align-items: center; gap: 0.5em; }
.chatbot__op:hover { background: var(--azul-marca); color: #fff; }
.chatbot__op--wa { background: var(--whatsapp); color: #fff; justify-content: center; font-weight: 600; }
.chatbot__op--wa:hover { background: #1eb457; }
.chatbot__op .ico svg { width: 16px; height: 16px; }
.chatbot__nota { padding: 0.6em var(--esp-4); font-size: 0.72rem; color: var(--gris-claro); text-align: center; border-top: 1px solid var(--borde); }
@media (max-width: 480px) { .chatbot { right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; height: 85vh; max-height: 85vh; border-radius: 20px 20px 0 0; } }

/* ==========================================================================
   22. CHECKOUT (visual, listo para Kushki)
   ========================================================================== */
.checkout { position: fixed; inset: 0; z-index: 110; background: rgba(20,20,60,0.6); display: grid; place-items: center; padding: 1.5rem; overflow-y: auto; }
.checkout__card { background: #fff; border-radius: 20px; width: 100%; max-width: 520px; box-shadow: 0 30px 70px rgba(0,0,0,0.35); overflow: hidden; animation: chatEntra 0.3s ease; }
.checkout__cab { display: flex; align-items: center; justify-content: space-between; padding: var(--esp-6); border-bottom: 1px solid var(--borde); }
.checkout__cab h2 { font-family: var(--fuente-titulo); font-size: 1.3rem; color: var(--azul-marca); }
.btn-icono2 { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--gris); }
.btn-icono2:hover { color: var(--azul-marca); }
.btn-icono2 svg { width: 18px; height: 18px; }
.checkout__pasos { display: flex; padding: var(--esp-4) var(--esp-6); gap: var(--esp-2); border-bottom: 1px solid var(--borde); }
.checkout__paso { display: flex; align-items: center; gap: 0.5em; font-size: 0.82rem; color: var(--gris-claro); font-weight: 600; flex: 1; }
.checkout__num { width: 26px; height: 26px; border-radius: 50%; background: var(--azul-claro); color: var(--gris); display: grid; place-items: center; font-size: 0.8rem; }
.checkout__paso.activo { color: var(--azul-marca); }
.checkout__paso.activo .checkout__num { background: var(--azul-marca); color: #fff; }
.checkout__paso.hecho .checkout__num { background: #2BA45E; color: #fff; }
.checkout__cuerpo { padding: var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-4); }
.ck-resumen__dato { display: flex; align-items: center; gap: 0.5em; font-size: 0.9rem; color: var(--gris); margin-bottom: var(--esp-2); }
.ck-resumen__dato .ico { color: var(--sol-oscuro); } .ck-resumen__dato .ico svg { width: 17px; height: 17px; }
.ck-resumen__desc { color: var(--gris); font-size: 0.9rem; margin-top: var(--esp-2); }
.ck-cant { display: flex; align-items: center; justify-content: space-between; padding: var(--esp-4); background: var(--azul-niebla); border-radius: 12px; font-weight: 600; color: var(--azul-marca); }
.ck-cant__control { display: flex; align-items: center; gap: var(--esp-3); }
.ck-cant__btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--azul-marca); }
.ck-cant__btn:hover { background: var(--azul-marca); color: #fff; }
.ck-cant__num { min-width: 24px; text-align: center; }
.checkout__total, .ck-pago__total { display: flex; align-items: center; justify-content: space-between; padding-top: var(--esp-4); border-top: 1px solid var(--borde); }
.checkout__total strong, .ck-pago__total strong { font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--azul-marca); }
.campo-ck { display: flex; flex-direction: column; gap: 0.4em; }
.campo-ck label { font-size: 0.82rem; font-weight: 600; color: var(--gris); }
.campo-ck input { padding: 0.7em 0.9em; border: 1px solid var(--borde); border-radius: 10px; background: var(--nube); font-family: var(--fuente-texto); font-size: 0.92rem; }
.campo-ck input:focus { outline: 2px solid var(--azul-vivo); }
.checkout__cuerpo .fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); }
.ck-metodo { display: flex; align-items: center; gap: 0.6em; padding: 0.8em 1em; border: 2px solid var(--azul-marca); border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: var(--azul-marca); }
.ck-metodo .ico svg { width: 20px; height: 20px; }
.ck-aviso { display: flex; gap: 0.6em; align-items: flex-start; background: #FFF7E6; border: 1px solid #FCE4B6; border-radius: 12px; padding: 0.8em 1em; font-size: 0.8rem; color: #8A6D1B; }
.ck-aviso .ico { color: var(--sol-oscuro); flex-shrink: 0; } .ck-aviso .ico svg { width: 17px; height: 17px; }
.checkout__pie { display: flex; gap: var(--esp-3); padding: var(--esp-6); border-top: 1px solid var(--borde); }
.btn-ck { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 1.2em; border-radius: 12px; border: none; font-family: var(--fuente-texto); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all var(--transicion); }
.btn-ck .ico svg { width: 18px; height: 18px; }
.btn-ck--primario { background: var(--sol); color: var(--azul-profundo); }
.btn-ck--primario:hover { background: var(--sol-oscuro); color: #fff; }
.btn-ck--pago { background: #2BA45E; color: #fff; } .btn-ck--pago:hover { background: #23934f; }
.btn-ck--fantasma { flex: 0 0 auto; background: transparent; border: 1px solid var(--borde); color: var(--gris); }
.btn-ck--fantasma:hover { background: var(--nube); color: var(--azul-marca); }
.btn-ck--wa { background: var(--whatsapp); color: #fff; text-decoration: none; }
.btn-ck--wa:hover { background: #1eb457; color: #fff; }
.checkout__exito { padding: var(--esp-16) var(--esp-8); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--esp-4); }
.checkout__exito-ico { width: 70px; height: 70px; border-radius: 50%; background: #2BA45E; color: #fff; display: grid; place-items: center; }
.checkout__exito-ico svg { width: 36px; height: 36px; }
.checkout__exito h3 { font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--azul-marca); }
.checkout__exito p { color: var(--gris); font-size: 0.92rem; max-width: 40ch; }
.checkout__exito .btn-ck { flex: 0 0 auto; margin-top: var(--esp-2); padding-inline: 2rem; }

/* Enlace de administración en el footer */
.footer__admin { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--esp-4); font-size: var(--texto-xs); color: rgba(255,255,255,0.4); }
.footer__admin:hover { color: #9BD4F5; }
.footer__admin svg { width: 13px; height: 13px; }

/* ==========================================================================
   23. AJUSTES v2  ·  hero exp, buscador, collage, promos, IG, footer anim
   ========================================================================== */

/* ----- Años de experiencia en el hero ----- */
.hero__exp { display: flex; align-items: center; gap: var(--esp-4); margin-top: var(--esp-12); }
.hero__exp strong { font-family: var(--fuente-titulo); font-size: clamp(3.5rem, 6vw, 5rem); line-height: 0.9; color: var(--acento-claro); text-shadow: 0 2px 30px rgba(20,20,60,0.5); }
.hero__exp span { max-width: 16ch; font-size: var(--texto-base); color: rgba(255,255,255,0.9); font-weight: var(--peso-medio); }

/* ----- Buscador más arriba + 7 campos ----- */
.buscador-wrap { margin-top: clamp(-140px, -9vw, -90px); }
.buscador { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; }
.buscador__enviar { align-self: end; height: fit-content; }
@media (min-width: 981px) { .buscador { grid-template-columns: repeat(4, 1fr); } .buscador__enviar { grid-column: 1 / -1; justify-self: center; padding-inline: 3rem; } }

/* ----- Collage de tours (tamaños aleatorios) ----- */
.grid-tours { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; grid-auto-flow: dense; gap: var(--esp-4); }
.collage__item { position: relative; overflow: hidden; border-radius: var(--radio); grid-row: span 2; box-shadow: var(--sombra-sm); color: #fff; transition: transform var(--transicion-lenta), box-shadow var(--transicion-lenta); }
.collage__item:hover { transform: translateY(-6px); box-shadow: var(--sombra-lg); }
.collage__item.tile--tall { grid-row: span 3; }
.collage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicion-lenta); }
.collage__item:hover .collage__img { transform: scale(1.07); }
.collage__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,20,46,0.88)); }
.collage__contenido { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--esp-6); }
.collage__etiqueta { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--acento-claro); font-weight: var(--peso-semi); }
.collage__contenido h3 { font-size: var(--texto-xl); margin-top: var(--esp-1); }
@media (max-width: 900px) { .grid-tours { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-tours { grid-template-columns: 1fr; grid-auto-rows: 150px; } .collage__item, .collage__item.tile--tall { grid-row: span 2; } }

/* ----- Promociones ----- */
.grid-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--esp-8); }
.promo { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--blanco); box-shadow: var(--sombra-sm); display: flex; flex-direction: column; transition: transform var(--transicion), box-shadow var(--transicion); }
.promo:hover { transform: translateY(-8px); box-shadow: var(--sombra-lg); }
.promo__img { width: 100%; height: 190px; object-fit: cover; }
.promo__badge { position: absolute; top: var(--esp-4); left: var(--esp-4); background: var(--grad-atardecer); color: #fff; font-family: var(--fuente-titulo); font-weight: var(--peso-negrita); font-size: var(--texto-lg); padding: 0.3em 0.8em; border-radius: var(--radio-full); box-shadow: var(--sombra-sol); }
.promo__cuerpo { padding: var(--esp-6); }
.promo__cuerpo h3 { font-size: var(--texto-xl); color: var(--azul-marca); margin-bottom: var(--esp-2); }
.promo__cuerpo p { color: var(--gris); font-size: var(--texto-sm); }

/* ----- Instagram (slideshow) ----- */
.ig__carrusel { position: relative; display: flex; align-items: center; gap: var(--esp-3); }
.ig__ventana { overflow: hidden; flex: 1; }
.ig__track { display: flex; gap: var(--esp-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--esp-2); }
.ig__track::-webkit-scrollbar { display: none; }
.ig__item { position: relative; flex: 0 0 clamp(200px, 24vw, 280px); aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; scroll-snap-align: start; box-shadow: var(--sombra-sm); }
.ig__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicion-lenta); }
.ig__item:hover .ig__img { transform: scale(1.08); }
.ig__hover { position: absolute; inset: 0; background: rgba(48,48,120,0.55); display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity var(--transicion); }
.ig__hover svg { width: 34px; height: 34px; }
.ig__item:hover .ig__hover { opacity: 1; }
.ig__flecha { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--borde); background: #fff; color: var(--azul-marca); cursor: pointer; display: grid; place-items: center; box-shadow: var(--sombra-sm); transition: all var(--transicion); }
.ig__flecha:hover { background: var(--azul-marca); color: #fff; }
.ig__flecha::before { content: ""; width: 11px; height: 11px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.ig__flecha--izq::before { transform: rotate(-135deg); margin-left: 4px; }
.ig__flecha--der::before { transform: rotate(45deg); margin-right: 4px; }
@media (max-width: 560px) { .ig__flecha { display: none; } }

/* ----- Oficinas: enlaces de mapa ----- */
.oficina__dato--link:hover { color: var(--azul); }
.oficina__dato--link:hover .ico { color: var(--azul); }
.oficina__acciones { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-2); }
.oficina__mapa-link { width: 100%; justify-content: center; padding: 0.6em; font-size: var(--texto-sm); }

/* ----- Footer que se "extiende" al llegar ----- */
.footer { border-radius: 40px 40px 0 0; transform: translateY(40px) scaleX(0.96); opacity: 0; transform-origin: bottom center; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), opacity 0.8s ease, border-radius 0.8s ease; }
.footer--visible { transform: none; opacity: 1; border-radius: 0; }
.footer--visible .footer__grid > * { animation: subeFooter 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.footer--visible .footer__grid > *:nth-child(2) { animation-delay: 0.08s; }
.footer--visible .footer__grid > *:nth-child(3) { animation-delay: 0.16s; }
.footer--visible .footer__grid > *:nth-child(4) { animation-delay: 0.24s; }
@keyframes subeFooter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .footer { transform: none; opacity: 1; border-radius: 0; } }

/* ==========================================================================
   24. AJUSTES DE PULIDO (consistencia final)
   ========================================================================== */
/* En móvil el buscador no debe tapar el contenido del hero */
@media (max-width: 680px) {
  .buscador-wrap { margin-top: var(--esp-6); }
  .hero__exp { margin-top: var(--esp-8); }
}
/* Separación clara cuando dos secciones oscuras van seguidas */
.stats + .beneficios-deco { border-top: 1px solid rgba(255,255,255,0.12); }