/*
Theme Name: TDF Destinos v2
Theme URI: https://tiempodefondo.com
Author: Tiempo de Fondo
Author URI: https://tiempodefondo.com
Description: Tema a medida para Tiempo de Fondo, mayorista de turismo. Hero con globo 3D interactivo, catalogo de 29 destinos con itinerario completo y CTAs directos a WhatsApp y Email. Version optimizada: texturas WebP en dos niveles, animaciones que se pausan fuera de pantalla y retirada automatica de los viajes ya realizados.
Version: 2.8.3
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: tdf-destinos
*/

/* ============================================================
   TIEMPO DE FONDO — Design Tokens
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}

:root{
  /* Color */
  --navy-deep:#071B33;
  --navy:#0B2A4D;
  --navy-soft:#12406F;
  --gold:#C9A24B;
  --gold-soft:#E9D9AE;
  --ink:#101820;
  --slate:#5B6B7A;
  --slate-light:#8B98A5;
  --mist:#F6F7FA;
  --mist-deep:#EEF1F6;
  --white:#FFFFFF;
  --whatsapp:#25D366;
  --line:rgba(11,42,77,0.10);

  /* Type */
  --f-display:'Manrope',sans-serif;
  --f-body:'Inter',sans-serif;

  /* Shape / Motion */
  --r-lg:28px;
  --r-md:18px;
  --r-sm:10px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 2px 10px rgba(7,27,51,.06);
  --shadow-md:0 18px 50px rgba(7,27,51,.10);
  --shadow-lg:0 36px 90px rgba(7,27,51,.16);
}

body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--mist);
  overflow-x:hidden;
  position:relative;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;border:none;background:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--navy-deep);line-height:1.08;letter-spacing:-0.02em}
.container{max-width:1320px;margin:0 auto;padding:0 40px}
@media (max-width:720px){.container{padding:0 22px}}

/* ============================================================
   HEADER
   ============================================================ */
#site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:22px 0;transition:all .4s var(--ease);background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(150%);box-shadow:0 1px 0 var(--line)}
#site-header.scrolled{padding:14px 0;background:rgba(7,27,51,.75);backdrop-filter:blur(18px) saturate(160%);box-shadow:none}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.header-actions{display:flex;align-items:center;gap:6px}
.header-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--navy-deep);transition:all .35s var(--ease)}
.header-icon:hover{color:var(--gold)}
#site-header.scrolled .header-icon{color:rgba(255,255,255,.7)}
#site-header.scrolled .header-icon:hover{color:var(--white)}
.logo{display:flex;align-items:center}
.logo img{height:42px;width:auto;display:block}

.burger{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:0;flex-direction:column;background:rgba(255,255,255,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);position:relative;z-index:210;border:1px solid rgba(0,0,0,.06);transition:all .35s var(--ease)}
#site-header.scrolled .burger{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.burger span{width:20px;height:2px;background:var(--navy-deep);border-radius:2px;transition:all .35s var(--ease)}
#site-header.scrolled .burger span{background:var(--white)}
.burger span:nth-child(1){transform:translateY(-3.5px)}
.burger span:nth-child(3){transform:translateY(3.5px)}
.burger.open span:nth-child(1){transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg)}

/* ============================================================
   FULLSCREEN MENU
   ============================================================ */
#menu-overlay{position:fixed;inset:0;z-index:200;background:rgba(7,27,51,.72);backdrop-filter:blur(0px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease),backdrop-filter .5s var(--ease)}
#menu-overlay.open{opacity:1;pointer-events:auto;backdrop-filter:blur(14px)}
.menu-panel{position:absolute;top:0;right:0;height:100%;width:min(480px,92vw);background:linear-gradient(160deg,var(--navy-deep),var(--navy));padding:110px 52px 52px;transform:translateX(100%);transition:transform .55s var(--ease);overflow-y:auto}
#menu-overlay.open .menu-panel{transform:translateX(0)}
.menu-links{list-style:none;display:flex;flex-direction:column;gap:6px}
.menu-links li{overflow:hidden}
.menu-links a{display:block;font-family:var(--f-display);font-size:2rem;color:var(--white);padding:14px 0;opacity:0;transform:translateY(24px);transition:transform .5s var(--ease),opacity .5s var(--ease);border-bottom:1px solid rgba(255,255,255,.08)}
#menu-overlay.open .menu-links a{opacity:1;transform:translateY(0)}
.menu-links a:hover{color:var(--gold)}
.menu-links li:nth-child(1) a{transition-delay:.08s}
.menu-links li:nth-child(2) a{transition-delay:.14s}
.menu-links li:nth-child(3) a{transition-delay:.20s}
.menu-links li:nth-child(4) a{transition-delay:.26s}
.menu-links li:nth-child(5) a{transition-delay:.32s}
.menu-links li:nth-child(6) a{transition-delay:.38s}
.menu-foot{margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(16px);transition:all .5s var(--ease) .38s}
#menu-overlay.open .menu-foot{opacity:1;transform:translateY(0)}
.menu-foot a{display:flex;align-items:center;gap:10px;color:var(--gold-soft);font-size:.95rem;margin-bottom:12px}

/* ============================================================
   HERO — the globe is the protagonist
   ============================================================ */
#hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse 120% 80% at 70% 20%,#0F3A66 0%,var(--navy-deep) 55%,#050F1E 100%)}
#hero-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* El fondo se tine con la foto del destino que el globo esta visitando. Dos
   capas que se turnan para que una entre mientras la otra sale; cada una lee
   su imagen de una variable que pone el JS. El desenfoque es enorme a
   proposito: esto es atmosfera, no una foto. El scale evita que el blur deje
   los bordes transparentes, y la sombra interior mantiene legible el titulo. */
#hero-ambiente{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;box-shadow:inset 0 0 220px 90px var(--navy-deep)}
#hero-ambiente::before,#hero-ambiente::after{content:'';position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(38px) saturate(1.3);transform:scale(1.18);opacity:0;transition:opacity 1.6s var(--ease)}
#hero-ambiente::before{background-image:var(--foto-a)}
#hero-ambiente::after{background-image:var(--foto-b)}
#hero-ambiente.a::before{opacity:.40}
#hero-ambiente.b::after{opacity:.40}
.hero-grid{position:relative;z-index:5;width:100%;display:grid;grid-template-columns:0.85fr 1.3fr;align-items:center;gap:20px;padding-top:70px}
.hero-copy{color:var(--white);position:relative;z-index:6}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);font-weight:700;margin-bottom:26px}
.hero-eyebrow::before{content:'';width:26px;height:1px;background:var(--gold)}
.hero-logo{width:100%;max-width:420px;height:auto;display:block;margin:0 auto 28px}
.hero-copy h1{font-size:clamp(2.6rem,4.6vw,4.1rem);color:var(--white);margin-bottom:22px}
.hero-copy h1 em{font-style:normal;color:var(--gold);position:relative}
.hero-copy p{font-size:1.12rem;color:rgba(255,255,255,.72);max-width:420px;margin-bottom:34px;font-weight:300}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;width:100%;max-width:100%}
/* min-width:0 desactiva el minimo automatico de los flex items: sin el, un
   boton con texto largo se niega a encogerse y se sale del contenedor. */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:var(--navy-deep);font-weight:700;padding:18px 34px;border-radius:100px;font-size:1.05rem;max-width:100%;min-width:0;text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease);box-shadow:0 14px 40px rgba(201,162,75,.25)}
.btn-primary svg{flex:none}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(201,162,75,.35)}
.link-ghost{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-size:1rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px;transition:.3s}
.link-ghost:hover{color:var(--gold);border-color:var(--gold)}
.hero-stat-row{display:flex;gap:36px;margin-top:56px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14)}
.hero-stat b{font-family:var(--f-display);font-size:1.9rem;color:var(--white);display:block;font-variant-numeric:tabular-nums}
.hero-stat span{font-size:.78rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em}

.globe-stage{position:relative;width:100%;height:auto;aspect-ratio:1/1;max-height:90vh;min-height:400px;display:flex;align-items:center;justify-content:center;margin:auto}
.globe-stage::before,.globe-stage::after{content:'';position:absolute;width:2px;height:2px;border-radius:50%;background:transparent;pointer-events:none;z-index:0;box-shadow:
  120px 40px 0 0 rgba(255,255,255,.7), 260px 80px 0 0 rgba(255,255,255,.4), 80px 180px 0 0 rgba(255,255,255,.6), 340px 50px 0 0 rgba(255,255,255,.3),
  200px 320px 0 0 rgba(255,255,255,.5), 420px 140px 0 0 rgba(255,255,255,.4), 50px 360px 0 0 rgba(255,255,255,.7), 380px 280px 0 0 rgba(255,255,255,.3),
  160px 440px 0 0 rgba(255,255,255,.5), 480px 200px 0 0 rgba(255,255,255,.6), 100px 520px 0 0 rgba(255,255,255,.4), 300px 420px 0 0 rgba(255,255,255,.3),
  540px 60px 0 0 rgba(255,255,255,.5), 30px 220px 0 0 rgba(255,255,255,.6), 440px 380px 0 0 rgba(255,255,255,.4), 600px 160px 0 0 rgba(255,255,255,.3),
  220px 540px 0 0 rgba(255,255,255,.5), 380px 0 0 0 rgba(255,255,255,.4), 530px 340px 0 0 rgba(255,255,255,.6), 70px 480px 0 0 rgba(255,255,255,.3),
  320px 600px 0 0 rgba(255,255,255,.4), 150px 90px 0 0 rgba(255,255,255,.7), 490px 480px 0 0 rgba(255,255,255,.3), 580px 280px 0 0 rgba(255,255,255,.5),
  40px 140px 0 0 rgba(255,255,255,.5), 420px 540px 0 0 rgba(255,255,255,.4), 260px 200px 0 0 rgba(255,255,255,.6), 620px 100px 0 0 rgba(255,255,255,.3),
  180px 620px 0 0 rgba(255,255,255,.4), 350px 460px 0 0 rgba(255,255,255,.5), 500px 40px 0 0 rgba(255,255,255,.6), 90px 600px 0 0 rgba(255,255,255,.3)}
.globe-stage::after{width:1px;height:1px;box-shadow:
  140px 120px 0 0 rgba(255,255,255,.5), 300px 60px 0 0 rgba(255,255,255,.3), 60px 300px 0 0 rgba(255,255,255,.4), 400px 180px 0 0 rgba(255,255,255,.3),
  240px 400px 0 0 rgba(255,255,255,.5), 460px 100px 0 0 rgba(255,255,255,.3), 20px 140px 0 0 rgba(255,255,255,.6), 340px 360px 0 0 rgba(255,255,255,.3),
  520px 240px 0 0 rgba(255,255,255,.4), 110px 440px 0 0 rgba(255,255,255,.3), 440px 440px 0 0 rgba(255,255,255,.5), 280px 140px 0 0 rgba(255,255,255,.3),
  560px 320px 0 0 rgba(255,255,255,.4), 170px 260px 0 0 rgba(255,255,255,.3), 620px 200px 0 0 rgba(255,255,255,.3), 80px 380px 0 0 rgba(255,255,255,.5),
  200px 580px 0 0 rgba(255,255,255,.3), 480px 400px 0 0 rgba(255,255,255,.4), 360px 560px 0 0 rgba(255,255,255,.3), 130px 560px 0 0 rgba(255,255,255,.4)}
#globe-canvas-wrap{position:absolute;inset:0;cursor:grab;border-radius:50%;overflow:hidden}
#globe-canvas-wrap:active{cursor:grabbing}
.globe-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.55);font-size:.75rem;background:rgba(255,255,255,.06);padding:9px 18px;border-radius:100px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.1);max-width:90%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.globe-hint{font-size:.64rem;padding:7px 14px;white-space:normal}}

/* Los filtros del catalogo apagan pines aqui arriba, a media pagina de
   distancia: sin este aviso el visitante vuelve al globo, lo ve con la mitad
   de los puntos y no tiene forma de saber por que. */
.globe-filtro{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:15;display:flex;align-items:center;gap:10px;max-width:92%;padding:9px 10px 9px 18px;border-radius:100px;font-size:.78rem;color:var(--white);background:rgba(61,224,200,.14);border:1px solid rgba(61,224,200,.45);backdrop-filter:blur(10px)}
.globe-filtro[hidden]{display:none}
.globe-filtro span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.globe-filtro button{width:22px;height:22px;flex:none;border-radius:50%;color:var(--white);background:rgba(255,255,255,.16);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}
.globe-filtro button:hover{background:rgba(255,255,255,.3)}
@media(max-width:600px){.globe-filtro{font-size:.68rem;padding:7px 8px 7px 14px}}

/* floating destination card that appears when a pin is clicked */
.pin-card{position:absolute;z-index:20;width:270px;background:rgba(10,32,58,.72);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.pin-card.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.pin-card img{width:100%;height:110px;object-fit:cover;border-radius:10px;margin-bottom:12px}
.pin-card h4{color:var(--white);font-size:1.02rem;margin-bottom:4px}
.pin-card .pin-meta{color:var(--gold-soft);font-size:.74rem;margin-bottom:12px;text-transform:uppercase;letter-spacing:.05em}
.pin-card-actions{display:flex;gap:8px}
.pin-card-actions a{flex:1;text-align:center;font-size:.74rem;font-weight:700;padding:9px 6px;border-radius:100px}
.pin-card-actions .pca-wa{background:var(--whatsapp);color:#fff}
.pin-card-actions .pca-more{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.pin-card-close{position:absolute;top:8px;right:10px;color:rgba(255,255,255,.5);font-size:1rem;line-height:1}

/* ============================================================
   TRUST BAR
   ============================================================ */
#trust-bar{position:relative;z-index:5;background:var(--white);margin-top:-1px;padding:34px 0;box-shadow:var(--shadow-sm)}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.trust-item{display:flex;align-items:center;gap:14px}
.trust-item .ic{width:44px;height:44px;border-radius:12px;background:var(--mist-deep);display:flex;align-items:center;justify-content:center;color:var(--navy);flex-shrink:0}
.trust-item b{display:block;font-family:var(--f-display);font-size:.92rem;color:var(--navy-deep)}
.trust-item span{font-size:.8rem;color:var(--slate)}

/* ============================================================
   TOURS SECTION
   ============================================================ */
#tours{padding:120px 0 90px;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:54px;gap:30px}
.section-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px;display:block}
.section-head h2{font-size:clamp(2rem,3.4vw,2.9rem)}
.section-head p{color:var(--slate);max-width:460px;margin-top:14px;font-size:1rem}
.search-wrap{position:relative;min-width:280px}
.search-wrap input{width:100%;padding:15px 20px 15px 46px;border-radius:100px;border:1px solid var(--line);background:var(--white);font-size:.92rem;color:var(--ink);box-shadow:var(--shadow-sm)}
.search-wrap input:focus{outline:none;border-color:var(--gold)}
.search-wrap svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--slate-light)}

/* ============================================================
   TOURS SECTION — Accordion by Continent
   ============================================================ */
#tours{padding:120px 0 90px;position:relative}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:54px;gap:30px}
.section-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px;display:block}
.section-head h2{font-size:clamp(2rem,3.4vw,2.9rem)}
.section-head p{color:var(--slate);max-width:460px;margin-top:14px;font-size:1rem}
.search-wrap{position:relative;min-width:280px}
.search-wrap input{width:100%;padding:15px 20px 15px 46px;border-radius:100px;border:1px solid var(--line);background:var(--white);font-size:.92rem;color:var(--ink);box-shadow:var(--shadow-sm)}
.search-wrap input:focus{outline:none;border-color:var(--gold)}
.search-wrap svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--slate-light)}

/* Accordion container */
.tours-accordion{display:flex;flex-direction:column;gap:16px}

/* Each continent accordion */
.continent{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .3s var(--ease)}
.continent:hover{box-shadow:var(--shadow-md)}

/* Toggle button (clickable header) */
.continent-toggle{width:100%;display:flex;align-items:center;gap:16px;padding:24px 28px;background:none;border:none;cursor:pointer;text-align:left;transition:background .25s var(--ease)}
.continent-toggle:hover{background:var(--mist)}
.continent-toggle:focus{outline:none}
.continent-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.ct-info{flex:1;min-width:0}
.ct-name{font-family:var(--f-display);font-size:1.35rem;color:var(--navy-deep);letter-spacing:-0.01em;line-height:1.2;margin:0}
.ct-sub{font-size:.82rem;color:var(--slate);margin-top:4px}
.ct-count{font-size:.78rem;font-weight:700;color:var(--gold);background:rgba(201,162,75,.1);padding:6px 16px;border-radius:100px;letter-spacing:.02em;flex-shrink:0;white-space:nowrap}
.ct-chevron{width:28px;height:28px;border-radius:50%;background:var(--mist-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s var(--ease),background .25s var(--ease)}
.ct-chevron svg{transition:transform .35s var(--ease)}
.continent.open .ct-chevron{background:var(--navy-deep)}
.continent.open .ct-chevron svg{transform:rotate(180deg)}
.continent.open .ct-chevron svg polyline{stroke:var(--white)}

/* Collapsible body */
.continent-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.continent.open .continent-body{max-height:5000px}
.continent-body-inner{padding:0 28px 28px}

/* Grid inside accordion */
.continent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width:1080px){.continent-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.continent-grid{grid-template-columns:1fr}}

/* No results */
.no-results{text-align:center;padding:60px 20px;color:var(--slate);font-size:1.05rem}

.tour-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .5s var(--ease),box-shadow .5s var(--ease);opacity:0;transform:translateY(28px)}
.tour-card.in{opacity:1;transform:translateY(0)}
.tour-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
/* Mientras la foto no llega el navegador pinta el texto alternativo: el titulo
   en blanco sobre el azul de la tarjeta. `color:transparent` lo calla y deja
   solo el degradado de carga, que se detiene cuando la imagen ya esta puesta. */
.tc-media{position:relative;height:250px;overflow:hidden;background:linear-gradient(100deg,#0B2A4D 32%,#17497C 50%,#0B2A4D 68%) 0 0/300% 100%;animation:tc-cargando 1.5s linear infinite}
.tc-media.lista{animation:none;background:var(--navy-deep)}
@keyframes tc-cargando{to{background-position:-300% 0}}
.tc-media img,.modal-hero img,.pin-card img{color:transparent}
.tc-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tour-card:hover .tc-media img{transform:scale(1.07)}
.tc-badge{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);color:var(--navy-deep);font-size:.72rem;font-weight:700;padding:7px 14px;border-radius:100px;letter-spacing:.02em}
.tc-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,51,0) 55%,rgba(7,27,51,.55) 100%)}
.tc-cities{position:absolute;bottom:14px;left:16px;right:16px;z-index:2;color:#fff;font-size:.76rem;font-weight:500;opacity:.9}

.tc-body{position:relative;padding:26px 26px 24px}
/* El aviso flota sobre la esquina superior derecha, encima de la primera linea
   del titulo. El hueco se reserva aqui para que ningun nombre largo quede
   tapado ("Gran Safari", "Temporada de Otoño"). Si cambia el tamano o la
   posicion del boton, este valor tiene que acompanarlo. */
.tc-body h3{font-size:1.32rem;margin-bottom:8px;padding-right:40px}
.tc-body p{color:var(--slate);font-size:.9rem;line-height:1.65;margin-bottom:18px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tc-more{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--navy);margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:2px}
.tc-more svg{transition:transform .3s}
.tc-more:hover svg{transform:translateX(3px)}
/* Aviso de la tarjeta: lleva informacion que el cliente necesita leer antes de
   cotizar, asi que se senala en vez de pasar desapercibido. */
.tc-info{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--gold);background:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy-deep);box-shadow:0 3px 10px rgba(201,162,75,.4);transition:transform .25s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);z-index:5}
.tc-info:hover,.tc-info:focus-visible{transform:scale(1.12);background:var(--gold-soft);box-shadow:0 5px 16px rgba(201,162,75,.55)}
.tc-info:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.tc-info:active{transform:scale(.96)}
.tc-info svg{display:block;position:relative;z-index:2}

/* Anillo que se expande en bucle para atraer la mirada. Un ciclo de 2,2 s es
   lento de sobra para no entrar en el rango de destellos problematicos. */
.tc-info::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--gold);animation:tdf-aviso 2.2s var(--ease) infinite;transition:opacity .35s var(--ease);pointer-events:none}

@keyframes tdf-aviso{
  0%{transform:scale(.9);opacity:.85}
  70%{transform:scale(1.45);opacity:0}
  100%{transform:scale(1.45);opacity:0}
}

/* Una vez abierto, el aviso cumplio su trabajo y deja de llamar la atencion. */
.tc-info.visto::after{animation:none;opacity:0}
.tc-info.visto{background:var(--white);color:var(--gold);box-shadow:none}

@media (prefers-reduced-motion:reduce){
  .tc-info::after{animation:none;opacity:0}
}
.tc-info-tip{position:absolute;top:56px;right:18px;width:260px;max-width:calc(100% - 36px);background:var(--navy-deep);color:#fff;font-size:.78rem;line-height:1.6;padding:14px 16px;border-radius:12px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(-6px);transition:all .25s var(--ease);z-index:10}
.tc-info-tip::before{content:'';position:absolute;top:-6px;right:20px;width:12px;height:12px;background:var(--navy-deep);transform:rotate(45deg)}
.tc-info-tip p{color:#fff;margin:0;display:block;-webkit-line-clamp:unset;overflow:visible}
.tc-info-tip.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.tc-actions{display:flex;gap:10px}
.tc-actions a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 10px;border-radius:100px;font-size:.82rem;font-weight:700;transition:.3s}
.tc-wa{background:var(--whatsapp);color:#fff}
.tc-wa:hover{background:#1fb857;transform:translateY(-2px)}
.tc-email{background:var(--mist-deep);color:var(--navy-deep)}
.tc-email:hover{background:var(--navy-deep);color:#fff;transform:translateY(-2px)}

/* ============================================================
   PRÓXIMOS DESTINOS
   ============================================================ */
#proximos{padding:100px 0 40px;position:relative;background:linear-gradient(180deg,var(--mist) 0%,#eef1f6 100%)}
#proximos .section-head{margin-bottom:36px}

/* Month filter buttons */
.proximos-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.filter-btn{padding:10px 24px;border-radius:100px;font-size:.85rem;font-weight:600;color:var(--slate);background:var(--white);border:1.5px solid var(--line);cursor:pointer;transition:all .3s var(--ease);font-family:var(--f-display)}
.filter-btn:hover{border-color:var(--gold);color:var(--navy-deep)}
.filter-btn.active{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);box-shadow:0 4px 16px rgba(201,162,75,.25)}

/* Proximos grid */
.proximos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:1080px){.proximos-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.proximos-grid{grid-template-columns:1fr}}

/* ---- Tarjeta de salida confirmada: un pasabordo ----
   La fecha manda, y una salida con fecha se lee como un billete. El talon va
   separado del cuerpo por una linea de puntos con dos muescas troqueladas en
   los costados; las muescas son dos circulos del color del fondo de la
   seccion, asi que si cambia ese fondo tienen que cambiar con el. */
.proximos-card{position:relative}
.pase-talon{position:relative;display:flex;align-items:center;gap:16px;padding:16px 22px;background:var(--navy-deep);color:var(--white)}
.pase-talon::before,.pase-talon::after{content:'';position:absolute;bottom:-11px;width:22px;height:22px;border-radius:50%;background:#eef1f6}
.pase-talon::before{left:-11px}
.pase-talon::after{right:-11px}
.pase-fecha{display:flex;align-items:baseline;gap:7px;flex-shrink:0}
.pase-fecha b{font-family:var(--f-display);font-size:2.5rem;line-height:.9;color:var(--gold);font-variant-numeric:tabular-nums}
.pase-fecha span{font-size:.6rem;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.65);line-height:1.25}
.pase-datos{display:flex;gap:20px;flex:1;min-width:0;padding-left:16px;border-left:1px dashed rgba(255,255,255,.22)}
.pase-datos div{min-width:0}
.pase-datos span{display:block;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:700}
.pase-datos b{display:block;font-size:.82rem;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pase-cuenta{display:flex;align-items:center;gap:5px;flex-shrink:0;font-size:.66rem;font-weight:700;padding:6px 11px;border-radius:100px;background:rgba(255,255,255,.1);color:var(--gold-soft);letter-spacing:.02em}
.pase-cuenta.urgente{background:rgba(224,90,70,.22);color:#FFB3A6}
.pase-cuenta.enviaje{background:rgba(61,224,200,.18);color:#8FF0E0}
/* La perforacion, justo bajo el talon. */
.proximos-card .tc-body{border-top:2px dashed var(--line);padding-top:24px}
@media(max-width:420px){
  .pase-datos{display:none}
  .pase-talon{justify-content:space-between}
}

/* ============================================================
   MODAL — full itinerary
   ============================================================ */
#modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(7,20,38,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);display:flex;align-items:center;justify-content:center;padding:24px}
#modal-overlay.open{opacity:1;pointer-events:auto}
.modal-box{background:var(--white);width:min(880px,100%);max-height:88vh;overflow-y:auto;border-radius:var(--r-lg);position:relative;transform:translateY(24px) scale(.98);transition:transform .4s var(--ease);box-shadow:var(--shadow-lg)}
#modal-overlay.open .modal-box{transform:translateY(0) scale(1)}
.modal-hero{height:280px;position:relative}
.modal-hero img{width:100%;height:100%;object-fit:cover}
.modal-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,27,51,.1),rgba(7,27,51,.75))}
.modal-hero-copy{position:absolute;bottom:22px;left:32px;right:32px;z-index:2;color:#fff}
.modal-hero-copy span{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold-soft)}
.modal-hero-copy h3{color:#fff;font-size:2rem;margin-top:6px}
.modal-close{position:absolute;top:18px;right:18px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.modal-body{padding:32px}
.modal-tabs{display:flex;gap:6px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.modal-tab{padding:12px 20px;font-size:.88rem;font-weight:700;color:var(--slate);border-bottom:2px solid transparent}
.modal-tab.active{color:var(--navy-deep);border-color:var(--gold)}
.modal-pane{display:none}
.modal-pane.active{display:block}
.itin-day{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.itin-day:last-child{border-bottom:none}
.itin-day .num{font-family:var(--f-display);font-weight:800;color:var(--gold);font-size:1.3rem;min-width:44px}
.itin-day p{color:var(--slate);font-size:.9rem}
.chk-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.chk-list li{display:flex;gap:12px;font-size:.92rem;color:var(--ink);align-items:flex-start}
.chk-list li svg{flex-shrink:0;margin-top:2px}
.chk-list.excl li svg{color:#C0392B}
.chk-list.incl li svg{color:var(--whatsapp)}
.modal-cta{display:flex;gap:12px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.modal-cta a,.modal-cta button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:100px;font-weight:700;font-size:.92rem;font-family:inherit;transition:.3s}

/* ============================================================
   TEST: ¿CUÁL ES TU VIAJE IDEAL?
   ============================================================ */
.btn-test{display:inline-flex;align-items:center;gap:9px;padding:16px 28px;border-radius:100px;border:1.5px solid rgba(255,255,255,.4);color:var(--white);font-family:var(--f-display);font-weight:700;font-size:.95rem;background:rgba(255,255,255,.06);backdrop-filter:blur(6px);transition:all .35s var(--ease)}
.btn-test:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}

#test-overlay{position:fixed;inset:0;z-index:300;background:rgba(7,20,38,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);display:flex;align-items:center;justify-content:center;padding:24px}
#test-overlay.open{opacity:1;pointer-events:auto}
.test-box{background:var(--white);width:min(640px,100%);max-height:88vh;overflow-y:auto;border-radius:var(--r-lg);position:relative;padding:44px 40px 40px;transform:translateY(24px) scale(.98);transition:transform .4s var(--ease);box-shadow:var(--shadow-lg)}
#test-overlay.open .test-box{transform:translateY(0) scale(1)}
.test-box .modal-close{background:var(--mist-deep);color:var(--navy-deep)}
.test-progreso{position:absolute;top:0;left:0;right:0;height:4px;background:var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.test-progreso span{display:block;height:100%;width:0;background:var(--gold);transition:width .4s var(--ease)}
.test-paso h3{font-size:1.5rem;margin:8px 0 26px}
.test-ayuda{display:block;margin:-18px 0 16px;color:var(--slate);font-size:.85rem}
.test-opciones{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.test-opciones button{padding:18px 20px;border-radius:var(--r-md);border:1.5px solid var(--line);background:var(--white);color:var(--ink);font-family:var(--f-display);font-weight:700;font-size:.95rem;text-align:left;transition:all .3s var(--ease)}
.test-opciones button:hover{border-color:var(--gold);background:var(--mist-deep);transform:translateY(-2px)}
.test-opciones button.activo{border-color:var(--gold);background:var(--mist-deep);box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn-test-continuar{display:block;margin:22px 0 0 auto;padding:14px 28px;border-radius:100px;border:none;background:var(--navy-deep);color:var(--white);font-family:var(--f-display);font-weight:700;font-size:.9rem;transition:all .3s var(--ease)}
.btn-test-continuar:hover{background:var(--gold);color:var(--navy-deep)}
.test-resultado-grid{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.test-card{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:var(--r-md);padding:10px;cursor:pointer;transition:all .3s var(--ease)}
.test-card:hover{border-color:var(--gold);box-shadow:var(--shadow-sm)}
.test-card img{width:72px;height:72px;border-radius:14px;object-fit:cover;flex-shrink:0}
.test-card h4{font-size:1.02rem;margin-bottom:4px}
.test-card span{font-size:.82rem;color:var(--slate)}
.link-ghost-navy{display:inline-flex;color:var(--navy-deep);font-size:.9rem;font-weight:700;border-bottom:1px solid var(--line);padding-bottom:3px}
.link-ghost-navy:hover{color:var(--gold);border-color:var(--gold)}
@media(max-width:600px){
  .test-box{padding:36px 22px 28px}
  .test-opciones{grid-template-columns:1fr}
}

/* ============================================================
   CUSTOM QUOTE / CTA STRIP
   ============================================================ */
#quote-strip{margin:100px 0;padding:0 40px}
.quote-inner{max-width:1320px;margin:0 auto;background:linear-gradient(120deg,var(--navy-deep),var(--navy-soft));border-radius:var(--r-lg);padding:56px 60px;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.quote-inner::before{content:'';position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.25),transparent 70%)}
.quote-copy{position:relative;z-index:2}
.quote-copy span{color:var(--gold-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.quote-copy h3{color:#fff;font-size:1.9rem;margin-top:10px;max-width:480px}
.quote-copy p{color:rgba(255,255,255,.65);margin-top:10px;font-size:.96rem}

/* ============================================================
   ABOUT / SOBRE NOSOTROS
   ============================================================ */
#sobre-nosotros{padding:100px 0 80px;position:relative}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:50px 0 60px}
.about-card{background:var(--white);border-radius:var(--r-lg);padding:36px 30px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.about-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.about-icon{width:54px;height:54px;border-radius:16px;background:var(--mist-deep);display:flex;align-items:center;justify-content:center;color:var(--gold);margin-bottom:20px}
.about-card h3{font-size:1.2rem;margin-bottom:10px}
.about-card p{color:var(--slate);font-size:.9rem;line-height:1.7}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;padding-top:50px;border-top:1px solid var(--line)}
.stat b{font-family:var(--f-display);font-size:2.1rem;color:var(--navy-deep);display:block;font-variant-numeric:tabular-nums}
.stat span{font-size:.82rem;color:var(--slate)}

/* ============================================================
   PRIVACY MODAL
   ============================================================ */
#privacy-overlay,#terms-overlay,#clausulas-overlay{position:fixed;inset:0;z-index:400;background:rgba(7,20,38,.7);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease);display:flex;align-items:center;justify-content:center;padding:24px}
#privacy-overlay.open,#terms-overlay.open,#clausulas-overlay.open{opacity:1;pointer-events:auto}
.privacy-box{background:var(--white);width:min(720px,100%);max-height:85vh;overflow-y:auto;border-radius:var(--r-lg);padding:50px 44px;position:relative;transform:translateY(24px) scale(.98);transition:transform .4s var(--ease);box-shadow:var(--shadow-lg)}
.clausulas-box{width:min(820px,100%)}
#privacy-overlay.open .privacy-box,#terms-overlay.open .privacy-box,#clausulas-overlay.open .privacy-box{transform:translateY(0) scale(1)}
.privacy-box h3{font-size:1.6rem;margin-bottom:6px}
.privacy-box h4{font-size:1.05rem;margin-top:24px;margin-bottom:8px;color:var(--navy)}
.privacy-box p{color:var(--slate);font-size:.9rem;line-height:1.7;margin-bottom:8px}
.privacy-box ul{color:var(--slate);font-size:.9rem;line-height:1.7;margin:8px 0 8px 20px}
.privacy-box li{margin-bottom:4px}
.privacy-box em{color:var(--slate-light);font-size:.82rem}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--navy-deep);color:rgba(255,255,255,.6);padding:70px 0 30px;position:relative;z-index:5}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-grid h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px}
.footer-grid p{font-size:.88rem;line-height:1.7;max-width:320px}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:10px;font-size:.88rem}
.footer-grid a:hover{color:var(--gold)}
.footer-bottom{padding-top:26px;display:flex;justify-content:space-between;font-size:.8rem;flex-wrap:wrap;gap:12px}

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.wa-float{position:fixed;bottom:26px;right:26px;z-index:150;background:var(--whatsapp);color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(37,211,102,.4);transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}

/* La cuenta atrás vive ahora en el talón del pasabordo (.pase-cuenta). */
.pase-cuenta svg{flex:none}

/* ============================================================
   FILTROS DEL CATÁLOGO
   ============================================================ */
.catalogo-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.filtro-grupo{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filtro-label{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--slate-light);white-space:nowrap}
.filtro-row{display:flex;flex-wrap:wrap;gap:8px}
.filtro-row .filter-btn{padding:8px 18px;font-size:.8rem}
.tour-count{margin-left:auto;font-size:.85rem;font-weight:600;color:var(--slate-light);font-family:var(--f-display);white-space:nowrap}
.tour-count.filtrando{color:var(--gold)}
.btn-sorpresa{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:100px;border:1.5px dashed var(--gold);background:none;color:var(--gold);font-family:var(--f-display);font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.btn-sorpresa:hover{background:var(--gold);color:var(--navy-deep);transform:translateY(-2px)}
.btn-sorpresa svg{flex-shrink:0}

/* Bloques que estaban fijos (barra de confianza, tarjetas de "sobre nosotros",
   cifras): suben al entrar en pantalla. El retraso escalonado lo pone app.js
   segun el sitio de cada uno en su fila. */
/* La animacion con 5s de retraso es la red de seguridad: si el JS no llega a
   correr, este texto aparece igual en vez de quedarse invisible para siempre.
   Cuando si corre, .in ya lo mostro y la animacion acaba en los mismos valores,
   asi que no se nota. */
.revelar{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);animation:revelar-red 1ms linear 5s forwards}
.revelar.in{opacity:1;transform:none}
@keyframes revelar-red{to{opacity:1;transform:none}}

/* ============================================================
   COMPARTIR
   ============================================================ */
.tc-share{background:var(--navy-deep);color:#fff;border:none;cursor:pointer}
.tc-share:hover{background:var(--navy-soft);transform:translateY(-2px)}
.tc-share.copiado{background:var(--whatsapp)}
.tc-share svg{flex:none}

/* ============================================================
   MAPA DE LA RUTA
   ============================================================ */
.ruta-wrap{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--navy-deep);box-shadow:var(--shadow-sm)}
/* touch-action:none es lo que deja que el dedo arrastre y pellizque el mapa en
   vez de desplazar el modal. */
#modal-ruta{display:block;width:100%;height:auto;touch-action:none;cursor:grab}
#modal-ruta.arrastrando{cursor:grabbing}
.ruta-zoom{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:2}
.ruta-zoom button{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(233,217,174,.28);border-radius:9px;background:rgba(7,27,51,.82);backdrop-filter:blur(6px);color:var(--gold-soft);font-size:1.05rem;font-weight:700;line-height:1;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.ruta-zoom button:hover,.ruta-zoom button:focus-visible{background:var(--gold);color:var(--navy-deep)}
.ruta-pista{margin:0;padding:8px 14px;font-size:.7rem;color:rgba(233,217,174,.72);background:rgba(7,27,51,.92);border-top:1px solid rgba(233,217,174,.12)}
.ruta-aviso:empty{display:none}
.ruta-aviso{margin:0;padding:9px 14px;font-size:.76rem;color:var(--gold-soft);background:rgba(7,27,51,.92);border-top:1px solid rgba(233,217,174,.16)}
.ruta-lista{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none;counter-reset:parada}
.ruta-lista li{counter-increment:parada;display:flex;align-items:center;gap:7px;padding:6px 14px 6px 6px;border-radius:100px;background:var(--mist-deep);font-size:.82rem;font-weight:600;color:var(--navy-deep)}
.ruta-lista li::before{content:counter(parada);width:21px;height:21px;border-radius:50%;background:var(--gold);color:var(--navy-deep);display:grid;place-items:center;font-size:.7rem;font-weight:800;flex:none}
/* Cada ciudad de la lista lleva el mapa hasta ella. */
.ruta-lista li:hover{background:var(--gold-soft)}
.ruta-lista button{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center;padding-top:130px}
  .hero-copy p{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-stat-row{justify-content:center;gap:24px}
  .globe-stage{aspect-ratio:1/1;max-height:none;min-height:300px;width:100%;max-width:480px;margin:0 auto}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .section-head{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
  .about-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .quote-inner{flex-direction:column;text-align:center;padding:40px 28px}
  .privacy-box{padding:36px 24px}
  .continent-toggle{padding:20px 22px;gap:12px}
  .ct-name{font-size:1.15rem}
  .ct-count{font-size:.72rem;padding:5px 12px}
  .continent-body-inner{padding:0 22px 22px}
  .modal-hero{height:220px}
  .proximos-card .tc-badge-date{font-size:.68rem;padding:5px 10px}
}
@media (max-width:550px){
  .hero-logo{max-width:280px}
  .hero-stat-row{flex-wrap:wrap;gap:16px 24px}
  .hero-stat{flex:1 0 40%}
  .hero-stat b{font-size:1.3rem}
  .hero-stat span{font-size:.64rem}
  .continent-toggle{padding:18px 16px;gap:10px;flex-wrap:wrap}
  .ct-name{font-size:1.05rem}
  .ct-sub{font-size:.75rem}
  .ct-count{font-size:.68rem;padding:4px 10px}
  .ct-chevron{width:24px;height:24px}
  .ct-chevron svg{width:14px;height:14px}
  .continent-body-inner{padding:0 16px 18px}
  .search-wrap{min-width:100%}
  .section-head{gap:16px}
  .proximos-filters{gap:8px}
  .filter-btn{padding:8px 18px;font-size:.8rem}
  /* En movil los botones de accion no caben en fila: se apilan. */
  .modal-cta{flex-direction:column}
  .catalogo-filtros{gap:12px 18px}
  .filtro-grupo{width:100%;align-items:flex-start;flex-direction:column;gap:8px}
  .tour-count{margin-left:0}
  .filtro-row .filter-btn{padding:7px 15px;font-size:.76rem}
  .ruta-lista li{font-size:.77rem}
  .trust-row{grid-template-columns:1fr}
  .trust-item{gap:10px}
  .trust-item .ic{width:38px;height:38px}
  .trust-item b{font-size:.82rem}
  .trust-item span{font-size:.72rem}
  .modal-hero{height:200px}
  .modal-hero-copy h3{font-size:1.3rem}
  .modal-body{padding:20px}
  .modal-tabs{gap:0}
  .modal-tab{padding:10px 14px;font-size:.82rem}
  .quote-copy h3{font-size:1.3rem}
  .about-card{padding:28px 22px}
  .stat b{font-size:1.5rem}
  /* Los dos botones del hero se apilan. align-items:stretch, en vez del center
     heredado, fija el ancho del boton al del contenedor: con center el eje
     cruzado queda a criterio del navegador y Chrome en Android lo desbordaba
     hacia la derecha. */
  .hero-actions{flex-direction:column;align-items:stretch;gap:14px}
  .btn-primary{width:100%;font-size:1rem;padding:16px 20px}
  .link-ghost{align-self:center;font-size:.9rem}
  .menu-links a{font-size:1.5rem}
  .menu-panel{padding:90px 28px 28px}
}