/* Full Viajes y Turismo — hoja de estilos del sitio publico
   Un solo archivo, cacheado por el navegador y compartido entre la
   home y las paginas de cada viaje. */

:root{/* ── Marca Full Viajes ──────────────────────────────────────────────────
     Azul marino (la noche de la salida) + celeste (el amanecer al llegar)
     + dorado (reservado para precio y acción principal, nada más). */
  --void:#0a1530;--void2:#0e1c3a;--void3:#13234a;--cyan:#3fcbe8;--blue:#2c9fd8;--amber:#f4ad3c;--gold:#e89421;--amber-d:rgba(244,173,60,.12);--amber-g:rgba(244,173,60,.28);--gold-glow:rgba(244,173,60,.35);--ice:#f5f7fc;--ice-d:rgba(242,245,250,.86);--ice-g:rgba(234,239,247,.06);--mu:rgba(228,234,244,.76);--bd:rgba(255,255,255,.10);--bda:rgba(244,173,60,.24);--cd:rgba(255,255,255,.03);--serif:'Instrument Serif',Georgia,serif;--mono:'DM Mono',monospace;--sh:0 8px 40px rgba(0,0,0,.45);--shl:0 0 80px rgba(244,173,60,.18);--glass:rgba(14,28,58,.72);--glass-border:rgba(255,255,255,.10);/* Alias de nombres viejos que quedaron usados en el HTML sin estar
     definidos: esos textos venían heredando el color y a veces no se leían. */
  --wh:var(--ice);--ac:var(--amber);--sf:var(--serif);--ss:var(--sans);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{color:var(--ice);font-weight:400;line-height:1.6;overflow-x:hidden;}
img{display:block;max-width:100%;}a{text-decoration:none;color:inherit;}button{cursor:pointer;}
/* El atributo hidden esconde, siempre. Antes cada bloque que se escondia
   desde el JavaScript necesitaba su propia regla porque un display: de mas
   se lo comia: eran nueve reglas repartidas por toda la hoja. */
[hidden]{display:none!important;}
/* NOISE */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;}
/* GRID LINES */
body::after{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(232,237,245,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(232,237,245,.018) 1px,transparent 1px);background-size:80px 80px;pointer-events:none;z-index:0;}
/* SCROLLBAR */
::-webkit-scrollbar{width:3px;}::-webkit-scrollbar-track{background:var(--void);}::-webkit-scrollbar-thumb{background:var(--amber);border-radius:3px;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:22px 60px;border-bottom:1px solid transparent;transition:all .35s cubic-bezier(.4,0,.2,1);}
nav.sc{padding:14px 60px;border-bottom:1px solid rgba(255,255,255,.06);}
.nl img{transition:transform .3s ease;}
.nl:hover img{transform:scale(1.03);}
.navlinks li a{position:relative;transition:color .2s;}
.navlinks li a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--amber);transition:width .25s ease;}
.navlinks li a:hover::after{width:100%;}
.ncta{padding:9px 20px!important;border-radius:50px!important;box-shadow:0 4px 20px rgba(212,146,42,.3)!important;}
.ncta:hover{transform:translateY(-1px)!important;box-shadow:0 6px 28px rgba(212,146,42,.45)!important;}
.nl{font-family:var(--sans);font-size:19px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;}

.navlinks{display:flex;gap:34px;list-style:none;align-items:center;}
.navlinks a{font-family:'Inter',var(--sans);font-weight:700;letter-spacing:.01em;transition:color .2s;padding:0 6px;}

.ncta{background:var(--amber)!important;color:var(--void)!important;padding:10px 22px;border-radius:5px;font-weight:700!important;transition:all .2s!important;}
.ncta:hover{background:var(--ice)!important;transform:translateY(-1px);}
.burger{display:none;flex-direction:column;gap:4px;background:none;border:none;}
.burger span{width:21px;height:1.5px;background:var(--ice);display:block;transition:all .3s;}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
/* ── EL MENÚ DEL CELULAR TIENE QUE PODER DESPLAZARSE ───────────────────────
   Este menú arranca a 60px del borde de arriba (debajo de la barra) y mide
   618px de alto: doce links más los dos de redes y el botón de WhatsApp. En
   un celular de pantalla baja —un 320x454 o un 360x640— los últimos links
   quedaban abajo del borde de la pantalla y NO había forma de llegar: la
   página de atrás está bloqueada mientras el menú está abierto y el menú, al
   no tener tope de altura, tampoco se desplazaba. Los tres links legales
   (términos, cancelaciones, privacidad) eran justo los que se perdían, que
   son los que busca quien está por transferir.
   Con esto el menú nunca pasa del alto disponible (100dvh menos los 60px de
   la barra) y, si el contenido no entra, se desplaza adentro.
   · 100dvh es el alto REAL visible del celular: descuenta la barra del
     navegador, que en el iPhone tapa unos 60-90px. Se deja 100vh antes como
     respaldo para los navegadores viejos que no entienden dvh.
   · -webkit-overflow-scrolling hace que el desplazamiento sea suave en iOS.
   · overscroll-behavior evita que, al llegar al final del menú, el dedo
     siga arrastrando la página de atrás. */
.mmenu{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(4,3,10,.98);border-bottom:1px solid var(--bd);z-index:199;padding:22px;flex-direction:column;gap:0;
  max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.mmenu.open{display:flex;}
.mmenu a{font-family:'Inter',var(--sans);font-size:16px;font-weight:700;letter-spacing:.01em;color:var(--mu);padding:13px 0;border-bottom:1px solid var(--bd);transition:color .2s;}
.mmenu a:hover{color:var(--ice);}
.mm-cta{background:var(--amber);color:var(--void);text-align:center;border-radius:7px;margin-top:12px;font-weight:700;border:none;padding:14px;}

/* HERO */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;}
.hbg{position:absolute;inset:0;z-index:0;}
/* ── CUÁNTA LUZ LLEGA A LA FOTO DE PORTADA ─────────────────────────────────
   Acá decía brightness(.66): la foto se dibujaba con un tercio de su luz. Y
   ENCIMA iba el velo negro de abajo, que del medio a la derecha tapaba otro
   60-66%. Multiplicando las dos cosas, un cielo bien celeste llegaba a la
   pantalla casi negro: quedaba alrededor del 22% de su brillo real. Por eso la
   portada se veía apagada y la foto que el dueño elegía con cuidado no se
   distinguía. Se sube a .92 —la foto se ve como es, apenas asentada para que
   no compita con el título— y se le da un poco de color y contraste, que es lo
   que hace que una foto de viaje "entre por los ojos". */
.hbg-img{position:absolute;inset:0;filter:saturate(1.08) brightness(.96) contrast(1.08);transform:scale(1.03);animation:heroZoom 20s ease-in-out infinite alternate;}
/* El velo que va ENCIMA de la foto. Tiene UN solo trabajo: que el título se
   lea sobre CUALQUIER foto, incluso una de nieve o de cielo a pleno sol. Ese
   trabajo es SÓLO del lado izquierdo, que es donde está el texto (medido: el
   texto termina cerca del 46% del ancho en escritorio).
   Antes el velo seguía tapando fuerte hasta el borde derecho, donde no hay
   una sola letra que proteger: oscurecía la foto porque sí. Ahora:
   · hasta el 46% se mantiene igual de oscuro que antes (el texto no pierde
     ni un punto de legibilidad),
   · del 46% en adelante se abre rápido y termina casi limpio, así la mitad
     derecha de la foto se ve de verdad. */
/* El orden de las capas importa: la primera es la de más arriba.
   1) FRANJA DE ARRIBA (nueva). El menú es fijo, transparente y sus links son
      blancos: apoyado sobre el sector de la foto que ahora se ve, se volvía
      difícil de leer. Esta franja oscurece sólo los primeros 130px de alto, que
      es donde vive el menú, y se desvanece enseguida. Medido: el menú queda
      MÁS legible que antes de todo este cambio (contraste 15 contra 10,5).
      Va en píxeles y no en porcentaje a propósito: así acompaña al alto del
      menú, que es fijo, y no al alto de la portada, que cambia.
   2) VELO LATERAL: protege el título. Fuerte hasta el 48% del ancho —donde
      termina el texto— y de ahí se abre rápido hasta quedar casi limpio.
   3) VELO DE ABAJO: para que el renglón de la próxima salida y los botones se
      lean, y para que la portada apoye contra el resto de la página.
   4) El resplandor ámbar de siempre, del lado del texto. */
.hbg-gr{position:absolute;inset:0;background:
  linear-gradient(to bottom,rgba(4,3,15,.70) 0,rgba(4,3,15,.42) 72px,rgba(4,3,15,0) 132px),
  linear-gradient(100deg,rgba(4,3,15,.95) 0%,rgba(4,3,15,.88) 32%,rgba(4,3,15,.64) 48%,rgba(4,3,15,.18) 64%,rgba(4,3,15,.04) 82%,rgba(4,3,15,.02) 100%),
  linear-gradient(to top,rgba(4,3,15,.62) 0%,rgba(4,3,15,.12) 30%,transparent 54%),
  radial-gradient(ellipse 70% 90% at 5% 55%,rgba(212,146,42,.10) 0%,transparent 60%);}
/* ── EN CELULAR EL TEXTO OCUPA TODO EL ANCHO ───────────────────────────────
   Así que ahí no se puede abrir el velo hacia la derecha: no hay "derecha
   libre", el título pasa por encima de toda la foto. Se usa un velo parejo,
   más suave que el de antes (la foto se ve bastante más) pero sin bajar de lo
   que hace falta para leer el título blanco y el renglón de la próxima salida. */
@media(max-width:860px){
  .hbg-img{filter:saturate(1.08) brightness(.90) contrast(1.07);}
  /* La franja de arriba también va acá: en el celular el menú está sobre la
     foto igual que en la computadora, y es lo primero que se ve. */
  .hbg-gr{background:
    linear-gradient(to bottom,rgba(4,3,15,.68) 0,rgba(4,3,15,.40) 62px,rgba(4,3,15,0) 118px),
    linear-gradient(180deg,rgba(4,3,15,.52) 0%,rgba(4,3,15,.46) 40%,rgba(4,3,15,.72) 100%),
    radial-gradient(ellipse 90% 70% at 50% 60%,rgba(212,146,42,.10) 0%,transparent 65%);}
}
.hbg-grain{position:absolute;inset:0;opacity:.028;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px;}
.hbg-lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 59px,rgba(232,237,245,.02) 60px);}
.horb{position:absolute;top:8%;right:3%;width:480px;height:480px;background:radial-gradient(circle,rgba(232,160,32,.1) 0%,transparent 70%);border-radius:50%;animation:orbP 9s ease-in-out infinite;pointer-events:none;}
@keyframes orbP{0%,100%{transform:scale(1) translateY(0);opacity:.5;}50%{transform:scale(1.18) translateY(-22px);opacity:1;}}
.hc{position:relative;z-index:2;max-width:800px;}
/* (Acá estaban .htag y .hsub: el sello "Concepción del Uruguay · Salidas
   propias · desde 2021" y el subtítulo "Micro, hotel y coordinación incluidos".
   El dueño mandó sacar los dos del HTML, así que estas reglas quedaron sin uso
   y se eliminaron —junto con la animación "blink", que sólo usaba el puntito
   del sello—. En su lugar va .hprox, el renglón de la salida más próxima, más
   abajo en este archivo.) */
.hero h1{font-family:'Inter',var(--sans);font-weight:800;letter-spacing:-.035em;animation:fuA .9s .1s cubic-bezier(.16,1,.3,1) both;text-shadow:0 2px 24px rgba(4,3,15,.55);}
.hero h1 .sl{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--amber);display:block;text-shadow:0 0 80px rgba(212,146,42,.35),0 2px 4px rgba(0,0,0,.3);}
.hbtns{animation:fuA .8s .3s ease both;}
/* (Acá estaban .hstats / .hs / .hsn / .hsl: la tira de números del hero.
   Se sacó el bloque del HTML a pedido del dueño y estas reglas quedaron sin
   uso, así que se eliminaron.) */

/* BUTTONS */
.bp{border:none;font-family:'Inter',var(--sans);font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all .28s cubic-bezier(.4,0,.2,1);text-decoration:none;}

.bp:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important;}
.bg{border:1px solid rgba(255,255,255,.12);padding:15px 28px;border-radius:50px;font-family:'Inter',var(--sans);font-weight:600;letter-spacing:.01em;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all .28s ease;text-decoration:none;backdrop-filter:blur(12px);}
.bg:hover{transform:translateY(-1px);}
.bs{background:rgba(255,255,255,.04);color:var(--mu);border:1px solid var(--bd);padding:14px 20px;border-radius:5px;font-family:'Inter',var(--sans);font-size:14px;font-weight:600;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;}
.bs:hover{border-color:var(--amber);color:var(--amber);}

/* SEARCH */
.search-section{background:var(--void2);padding:0 60px;border-bottom:1px solid var(--bd);}
.sdock{display:flex;align-items:stretch;background:rgba(6,5,20,.75);border:1px solid rgba(255,255,255,.09);overflow:hidden;backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px);}
.sf{flex:1;padding:20px 24px;border-right:1px solid rgba(255,255,255,.06);}
.sf:last-of-type{border-right:none;}
.sf label{display:block;font-family:'Inter',var(--sans);font-size:12px;font-weight:700;color:var(--amber);letter-spacing:.01em;margin-bottom:4px;}
.sf input,.sf select{background:transparent;border:none;outline:none;color:var(--ice);font-family:var(--sans);font-size:14px;width:100%;}
.sf select option{background:#090817;}
.sf input::placeholder{color:var(--mu);}
.sgo{border:none;padding:0 30px;font-family:'Inter',var(--sans);font-size:14px;letter-spacing:.01em;cursor:pointer;transition:background .2s;}
.sgo:hover{background:var(--ice);}

/* SECTIONS */
section{position:relative;}
.eyebrow{font-family:'Inter',var(--sans);font-size:12px;font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:12px;}
.eyebrow::before{content:'';width:32px;height:1px;}
.stitle{font-family:'Inter',var(--sans);font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.05;}
.stitle em{font-family:var(--serif);font-style:italic;color:var(--amber);font-weight:400;}

/* FILTERS */
.filters{display:flex;gap:6px;flex-wrap:wrap;}
.fb{background:transparent;border:1px solid var(--bd);border-radius:4px;font-family:'Inter',var(--sans);font-weight:700;letter-spacing:.01em;transition:all .2s;}

.fb.active{background:var(--amber);border-color:var(--amber);}

/* TRIPS */
.tgrid{display:grid;}
.tc{border:1px solid rgba(255,255,255,.07);cursor:pointer;position:relative;backdrop-filter:blur(8px);}
.tc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,160,32,.05),transparent);opacity:0;transition:opacity .3s;z-index:1;pointer-events:none;}
.tc:hover{transform:translateY(-4px);}
.tc:hover::before{opacity:1;}
.tc.hidden{display:none;}

.tcim img{transition:transform .6s ease;}
.tc:hover .tcim img{transform:scale(1.07);}
.tcov{position:absolute;inset:0;}
.tcbg{position:absolute;display:flex;gap:5px;z-index:2;}

.bh{background:var(--amber);color:var(--void);}
.bp2{backdrop-filter:blur(8px);}

.tcb{position:relative;z-index:2;}

.tcf{justify-content:space-between;}

.tcp strong{line-height:1;}
.tcp span{font-family:'Inter',var(--sans);font-size:11px;color:var(--mu);}
.bver{background:transparent;color:var(--amber);border:1px solid rgba(212,146,42,.35);padding:9px 18px;border-radius:6px;font-family:'Inter',var(--sans);font-size:13px;font-weight:700;letter-spacing:.01em;transition:all .2s;white-space:nowrap;}
.bver:hover{background:var(--amber);color:var(--void);}
#nores{display:none;text-align:center;}

.tan{font-size:13px;font-weight:700;}

/* GALLERY */
.ggrid{display:grid;}
.gi{overflow:hidden;cursor:pointer;position:relative;}

.gi img,.gi video{width:100%;height:100%;object-fit:cover;transition:transform .4s;filter:saturate(.75);}
.gi:hover img,.gi:hover video{transform:scale(1.06);filter:saturate(1.1);}
.gov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;font-size:24px;}
.gi:hover .gov{opacity:1;}

/* PROXIMOS */
.proxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px;}
.proxcard{border-radius:8px;overflow:hidden;position:relative;cursor:pointer;transition:all .3s;border:1px solid var(--bd);background:var(--cd);}
.proxcard:hover{transform:translateY(-3px);border-color:var(--bda);box-shadow:var(--sh);}
.proxcard img{width:100%;height:185px;object-fit:cover;filter:saturate(.75);transition:all .4s;display:block;}
.proxcard:hover img{filter:saturate(1);transform:scale(1.04);}
.proxov{position:absolute;top:0;left:0;right:0;height:185px;background:linear-gradient(to bottom,transparent 40%,var(--void3) 100%);pointer-events:none;}
.proxbody{padding:16px 18px;background:var(--void3);}
.proxdest{font-size:18px;letter-spacing:-.02em;margin-bottom:4px;}
.proxdesc{font-size:13px;margin-bottom:5px;}
.proxprice{font-family:'Inter',var(--sans);font-size:13px;font-weight:700;color:var(--amber);margin-bottom:13px;}
.banotar{background:transparent;border:1px solid var(--bda);color:var(--amber);padding:8px 16px;border-radius:4px;font-family:'Inter',var(--sans);font-size:13px;font-weight:700;letter-spacing:.01em;width:100%;transition:all .2s;}
.banotar:hover{background:var(--amber);color:var(--void);}

/* CUPOS PROGRESS BAR */
.proxcupos{margin:8px 0 12px;}
.proxcupos-bar{height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-bottom:4px;}
.proxcupos-fill{height:100%;border-radius:4px;background:var(--amber);transition:width 1s ease;}
.proxcupos-fill.urgente{background:#f87171;}
.proxcupos-label{display:flex;justify-content:space-between;font-family:'Inter',var(--sans);font-size:11px;letter-spacing:.01em;}
.proxcupos-label span:first-child{color:rgba(234,239,247,.45);}
.proxcupos-label span:last-child{color:var(--amber);}
.proxcupos-label span.urgente{color:#f87171;}

/* OFICINAS */
.ogrid{display:grid;}
.ocard{border:1px solid var(--bd);background:var(--ice-g);transition:all .2s;position:relative;}
.ocard::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber);opacity:0;transition:opacity .2s;}
.ocard:hover{border-color:var(--bda);}
.ocard:hover::after{opacity:1;}
.ociu{font-family:var(--sans);font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px;}
.oinf{font-family:'Inter',var(--sans);font-size:13px;color:var(--mu);line-height:2;}
.oinf a{color:var(--amber);}

/* CONTACTO */
.cwrap{margin:0 auto;}
.fg{margin-bottom:13px;}
.fg label{display:block;font-family:'Inter',var(--sans);font-size:12px;font-weight:700;color:var(--amber);letter-spacing:.01em;margin-bottom:6px;}
.fg input,.fg select{width:100%;background:var(--ice-g);border:1px solid var(--bd);border-radius:5px;padding:12px 15px;color:var(--ice);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s;}
.fg input:focus,.fg select:focus{border-color:var(--amber);}
.fg select option{background:var(--void2);}
.fg input::placeholder{color:var(--mu);font-size:13px;}

/* FOOTER */
footer{background:var(--void2);border-top:1px solid var(--bd);}
.fgrid{display:grid;}
.fbrand .logo{font-family:var(--sans);font-size:20px;font-weight:800;color:var(--ice);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.fbrand p{font-size:13px;color:rgba(234,239,247,.6);line-height:1.75;}
.fcol h4{font-family:'Inter',var(--sans);font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--amber);margin-bottom:14px;}
.fcol a{display:block;font-size:13px;color:rgba(234,239,247,.58);margin-bottom:9px;transition:color .2s;}
.fcol a:hover{color:var(--ice);}
.fbot{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--bd);font-family:'Inter',var(--sans);font-size:12px;color:var(--mu);}

/* MODAL DETALLE */
.ov{position:fixed;inset:0;z-index:300;background:rgba(4,3,10,.9);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s;}
.ov.open{opacity:1;pointer-events:all;}

/* MODAL RESERVA */
.res-ov{position:fixed;inset:0;z-index:400;background:rgba(4,3,10,.95);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .3s;}
.res-ov.open{opacity:1;pointer-events:all;}
.res-box{background:var(--void3);border:1px solid rgba(255,255,255,.07);border-radius:20px;width:100%;max-width:555px;max-height:96vh;overflow-y:auto;box-shadow:0 0 120px rgba(232,160,32,.1);transform:translateY(14px);transition:transform .3s;}
.res-ov.open .res-box{transform:translateY(0);}
#rsteps{display:flex;padding:22px 26px 0;gap:0;}
.rsi{flex:1;text-align:center;position:relative;}
.rsi-num{border-radius:4px;border:1px solid var(--bd);background:var(--void);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-family:'Inter',var(--sans);font-size:13px;font-weight:700;color:var(--mu);transition:all .3s;}
.rsi.active .rsi-num{background:var(--amber);border-color:var(--amber);color:var(--void);}
.rsi.done .rsi-num{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.35);color:#4ade80;}
.rsi-lbl{font-family:'Inter',var(--sans);font-size:12px;font-weight:600;color:var(--mu);letter-spacing:.01em;}
.rsi.active .rsi-lbl{color:var(--amber);}
.rsi-line{position:absolute;left:50%;right:-50%;height:1px;background:var(--bd);z-index:-1;}
.rsi:last-child .rsi-line{display:none;}
#rcon{padding:18px 26px 30px;}
/* La cabecera del formulario viaja con el scroll.
   El paso 1 con un pasajero mide 1.383 px en una ventana de 808, y con seis
   pasajeros 3.909 px: casi cinco pantallas. La ✕ se iba para arriba y a los
   575 px de scroll ya no estaba en pantalla; el paso 1 tampoco tiene "Volver",
   así que el único escape era la franja de 16 px de los costados o el gesto de
   atrás del celular. Con position:sticky el título y la ✕ quedan siempre a
   mano. Los márgenes negativos son para que el fondo tape de borde a borde el
   padding de 18/26 px de #rcon: si no, el contenido se vería pasar por los
   costados y por arriba de la cabecera. */
.rhdr{display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:6;
  background:var(--void3);
  margin:-18px -26px 16px;padding:16px 26px 13px;
  border-bottom:1px solid rgba(255,255,255,.07);}
.rhdr h3{font-family:var(--sans);font-size:19px;font-weight:800;letter-spacing:-.02em;}
/* El segundo renglón de la cabecera: "Faltan N datos". Aparece sólo cuando
   hay campos en rojo y se va solo a medida que se corrigen. Con 20 pasajeros
   —62 campos— es la única manera de saber cuánto queda sin scrollear doce
   pantallas. Va pegado arriba junto con el título, así que se ve siempre. */
.rhdr-t{min-width:0;}
.rhdr-sub{font-family:'Inter',var(--sans);font-size:13px;font-weight:700;
  color:#f87171;margin-top:2px;line-height:1.3;}
.rclose{background:none;border:none;color:var(--mu);font-size:20px;line-height:1;transition:color .2s;}
.rclose:hover{color:var(--amber);}
/* El renglón de términos y cancelaciones, abajo del botón de confirmar.
   Chico y gris, pero con los enlaces subrayados para que se vean. */
.rlegal{font-family:'Inter',var(--sans);font-size:13px;line-height:1.55;
  color:var(--mu);text-align:center;margin-top:12px;}
.rlegal a{color:var(--mu);text-decoration:underline;text-underline-offset:2px;}
.rlegal a:hover{color:var(--amber);}
.vbar{background:var(--ice-g);border:1px solid var(--bd);border-radius:7px;padding:11px 15px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;}
.vbarn{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.01em;}
.vbarp{text-align:right;}
.vpm{font-family:var(--sans);font-size:21px;font-weight:800;color:var(--amber);line-height:1;letter-spacing:-.02em;}
.vpl{font-family:'Inter',var(--sans);font-size:12px;color:var(--mu);letter-spacing:.01em;}
.rf{margin-bottom:12px;}
.rf label{display:block;font-family:'Inter',var(--sans);font-size:13px;font-weight:600;color:var(--amber);letter-spacing:.01em;margin-bottom:5px;}
.rf input,.rf select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:5px;padding:11px 13px;color:var(--ice);font-family:var(--sans);font-size:14px;outline:none;transition:border-color .2s;}
.rf input:focus,.rf select:focus{border-color:var(--amber);}
.rf select option{background:var(--void2);}
.rf input::placeholder{color:var(--mu);font-size:13px;}
.rf input[type=date]{color-scheme:dark;}
.rfrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.rferr{font-family:'Inter',var(--sans);color:#f87171;margin-top:4px;}
.pms{display:flex;gap:7px;margin-bottom:14px;}
.pm{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:7px;padding:13px 7px;text-align:center;cursor:pointer;transition:all .2s;}
.pm:hover{border-color:var(--bda);}
.pm.sel{border-color:var(--amber);background:var(--amber-d);}
.pmico{font-size:21px;margin-bottom:4px;}
.pmlbl{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--mu);}
.pm.sel .pmlbl{color:var(--amber);}
/* ── EL RENGLONCITO DE ABAJO DE CADA FORMA DE PAGO ────────────────────────
   "Link de cobro", "Precio publicado", "Precio publicado". Estaban escritos
   en el HTML con opacity:.5, que además del gris de --mu deja el texto en
   3,05 sobre 1 contra el fondo del cuadro. El mínimo para leer cómodo es 4,5;
   por debajo de eso, con luz de día en la calle, esos tres renglones no se
   ven — y son justo los que explican qué pasa si tocás cada botón.
   Se saca la transparencia y el color se pone acá, medido: 5,4 sobre 1 cuando
   el botón está apagado y 15,5 cuando está elegido. Se sigue leyendo como un
   dato secundario porque es más chico y no va en negrita, no porque esté
   medio borrado. */
.pmsub{display:block;font-size:10px;font-weight:400;color:rgba(228,234,244,.62);}
.pm.sel .pmsub{color:var(--amber);}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px;}
.cbtn{border:1px solid var(--bd);border-radius:6px;padding:11px 13px;cursor:pointer;transition:all .2s;background:rgba(255,255,255,.02);}
.cbtn:hover{border-color:var(--bda);}
.cbtn.sel{border-color:var(--amber);background:var(--amber-d);}
.cbn{font-family:'Inter',var(--sans);font-size:12px;font-weight:600;color:var(--mu);letter-spacing:.01em;margin-bottom:2px;}
.cbl{font-family:'Inter',var(--sans);font-size:12px;color:var(--amber);}
.cbt{font-family:var(--sans);font-size:16px;font-weight:800;color:var(--ice);letter-spacing:-.02em;}
.wbadge{background:var(--amber-d);border:1px solid var(--bda);border-radius:6px;padding:8px 12px;font-family:'Inter',var(--sans);font-size:13px;color:var(--amber);margin-top:7px;display:flex;align-items:center;gap:8px;}
.ibox{background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:7px;padding:15px;}
.iboxt{font-family:'Inter',var(--sans);font-size:14px;font-weight:700;color:var(--amber);letter-spacing:.01em;margin-bottom:11px;}
.irow{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid var(--bd);}
.irow:last-child{border-bottom:none;}
.irow span:first-child{color:var(--mu);}
.iaddr{font-size:13px;color:var(--mu);line-height:1.7;}
.ctab{background:rgba(255,255,255,.03);border:1px solid var(--bd);border-radius:7px;padding:15px;margin-bottom:13px;}
.ctabt{font-family:'Inter',var(--sans);font-size:14px;font-weight:700;color:var(--amber);letter-spacing:.01em;margin-bottom:11px;}
.crow{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:1px solid var(--bd);}
.crow:last-child{border-bottom:none;}
.crow span:first-child{color:var(--mu);}
.crowtotal{border-top:1px solid var(--bda);margin-top:6px;padding-top:10px!important;font-weight:700;font-size:15px!important;}
.crowtotal span:last-child{color:var(--amber);}
/* ── Datos para copiar dígito por dígito ──────────────────────────────────
   CBU, alias, CUIT y número de reserva. Acá la letra monoespaciada NO es un
   adorno de terminal: todos los caracteres miden lo mismo, así que se leen y
   se tipean sin equivocarse, y el bloque se parece a lo que es: un dato
   bancario. Es el único lugar del sitio para el cliente donde queda. */
.dato{font-family:var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;}
/* El CBU va un punto mas grande que el resto: es el dato que la persona
   copia caracter por caracter para transferir. */
.ibox .dato-cbu{font-size:15px;}

/* ── LA CAJA BANCARIA: para usar con UNA sola mano ────────────────────────
   Es la pantalla donde la persona tiene el celular en una mano y la app del
   banco esperando. Antes el alias y los 22 dígitos del CBU eran texto suelto
   que había que seleccionar con el dedo, el WhatsApp era texto sin enlace y el
   importe estaba arriba de todo, fuera de la caja. Ahora cada dato se copia de
   un toque, el WhatsApp es un botón y el importe está adentro. */
.ibox-banco{ text-align:left; }
/* El importe va primero y destacado: es el número que tiene que quedar bien
   copiado, no un renglón más de la lista. */
.irow-imp span:last-child{ color:var(--amber); font-weight:800; font-size:16px; }
/* Rótulo a la izquierda; el dato y su botón viajan juntos a la derecha. */
.irow-cp .irow-v{ display:flex; align-items:center; gap:9px; min-width:0; }
.irow-cp .irow-v .dato{ color:var(--ac); font-weight:600; word-break:break-all; }
.bcopy{ flex:0 0 auto; background:rgba(255,255,255,.06); border:1px solid var(--bd);
  color:var(--ice); font-family:'Inter',var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.02em; padding:7px 11px; border-radius:8px; cursor:pointer;
  min-height:36px; transition:background .18s,border-color .18s,color .18s; }
.bcopy:hover{ border-color:var(--bda); background:rgba(255,255,255,.1); }
.bcopy:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.bcopy.ok{ background:rgba(74,222,128,.14); border-color:rgba(74,222,128,.45); color:#7fdca4; }
/* La aclaración de quién es el titular de la cuenta y el aviso del CUIT. */
.inota{ font-size:13px; line-height:1.6; color:rgba(234,239,247,.55); margin:6px 0 10px; }
/* El botón del comprobante: mismo verde de WhatsApp que el resto del sitio. */
.bwa-comp{ display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; min-height:48px; padding:0 16px; border-radius:10px;
  background:rgba(37,211,102,.13); border:1px solid rgba(37,211,102,.32);
  color:#4ade80; text-decoration:none; font-family:'Inter',var(--sans);
  font-size:14px; font-weight:700; text-align:center; }
.bwa-comp:hover{ background:rgba(37,211,102,.2); }
/* En celular el dato bancario necesita el renglón entero: el rótulo arriba, y
   abajo el número con su botón de copiar al costado. */
@media(max-width:520px){
  .irow-cp{ flex-wrap:wrap; }
  .irow-cp .irow-v{ width:100%; justify-content:space-between; margin-top:4px; }
}
/* Y en 320 px (el celular más chico que sigue en uso) ni siquiera así entran
   los 22 dígitos del CBU al lado del botón: se parten en dos renglones justo
   donde la persona los está mirando. Se le da el ancho entero al dato y el
   botón de copiar pasa abajo, a todo lo ancho, que además se toca mejor. */
@media(max-width:360px){
  .irow-cp .irow-v{ flex-wrap:wrap; gap:6px; }
  .irow-cp .irow-v .dato{ width:100%; }
  .irow-cp .bcopy{ width:100%; }
}
/* El renglón de cada acompañante en la pantalla de confirmar: separa un
   pasajero del anterior sin tener que dibujar una caja por cada uno. */
.crow-pax{ border-top:1px solid var(--bda); margin-top:6px; padding-top:9px!important; }
.crow-pax span:first-child{ color:var(--amber); font-weight:700; }

/* En 320 px (el celular más chico que todavía se usa) el CBU medía 205 px
   dentro de una fila de 199 y se salía 22 px de la caja, justo en la pantalla
   donde la persona lo copia para transferir. Un punto menos de cuerpo y sin
   separación entre caracteres, y entra entero. */
@media(max-width:340px){
  .ibox .dato{font-size:13px;letter-spacing:0;}
  /* Aun al cuerpo mas chico que permite el sitio, el CBU de 22 digitos no
     entra al lado de su rotulo en 199 px. Se le deja pasar al renglon de
     abajo, donde tiene el ancho entero: se lee y se copia mejor. */
  .ibox .irow{flex-wrap:wrap;}
  .ibox .irow .dato-cbu{width:100%;}
}

/* ── Las fotos reales de los grupos, justo abajo de los viajes ────────────
   Antes esta sección se metía ADENTRO de la grilla, entre la tarjeta 2 y la 3,
   y partía la lista de viajes al medio con una pantalla entera de fotos. Ahora
   está donde tiene que estar: pegada abajo de la última tarjeta.
   Se le saca el respiro de arriba que traen todas las secciones para que se
   lea como la continuación de los viajes y no como un capítulo nuevo. */
#gallery{ padding-top:6px!important; }
#gallery .ghead{ margin-bottom:14px; }
/* El renglón del descuento por grupo. Va en verde y con el número en negrita
   porque es la única línea del resumen que resta plata: si se ve igual que
   las demás, se pierde entre los datos y el cliente no se entera de que se lo
   aplicamos. Un descuento que no se ve no vende. */
.crowdesc span:first-child{color:#7fdca4;}
.crowdesc span:last-child{color:#7fdca4;font-weight:700;}

/* FLOTANTES */
.wa-fab{position:fixed;z-index:250;background:#25D366;align-items:center;justify-content:center;box-shadow:0 4px 22px rgba(37,211,102,.4);transition:all .2s;}
.wa-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 30px rgba(37,211,102,.5);}
.wa-fab svg{width:25px;height:25px;fill:white;}

/* IMAGEN PLACEHOLDER */
.tcim-placeholder{flex-direction:column;gap:8px;}
.tcim-placeholder span{font-size:42px;}
.tcim-placeholder small{font-family:'Inter',var(--sans);font-size:11px;color:rgba(234,239,247,.3);letter-spacing:.01em;}

/* REVEAL */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@keyframes heroZoom{0%{transform:scale(1.04);}100%{transform:scale(1.0);}}
@keyframes fuA{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes slideIn{from{opacity:0;transform:translateX(-15px);}to{opacity:1;transform:translateX(0);}}

/* RESPONSIVE */
@media(max-width:960px){
  nav{padding:15px 20px;}nav.sc{padding:11px 20px;}
  .navlinks{display:none;}.burger{display:flex;}
  .hero{padding:96px 22px 56px;}
  
  .search-section{padding:0 22px;}.sdock{flex-direction:column;transform:translateY(-13px);}
  .sf{border-right:none;border-bottom:1px solid var(--bd);}
  .sf:last-of-type{border-bottom:none;}
  .sgo{padding:13px;border-radius:0 0 7px 7px;}
  
  .fgrid{grid-template-columns:1fr;gap:22px;}
  .rfrow{grid-template-columns:1fr;}
  .cgrid{grid-template-columns:1fr 1fr;}

  .hbtns{flex-direction:column;gap:10px;}.bp,.bg{justify-content:center;width:100%;padding:16px 24px;font-size:14px;min-height:52px;}.bg{min-height:48px;}
}
@media(max-width:480px){
  .tgrid{grid-template-columns:1fr;}
  .ggrid{grid-template-columns:1fr 1fr;}
  .pms{flex-direction:column;}.cgrid{grid-template-columns:1fr;}
  .proxgrid{grid-template-columns:1fr;}
}

@media print{nav,.burger,.fv-bar,.wa-fab{display:none!important;}body{background:#fff!important;color:#000!important;}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}
@media(hover:none) and (pointer:coarse){.tc:hover{transform:none!important;}}

/* ═══════════════════════════════════════════════════════════════
   MEJORAS DE LEGIBILIDAD, CONTRASTE Y CALIDAD VISUAL — v2 (2026-06)
   Bloque al final: estas reglas ganan sobre las de arriba.
   ═══════════════════════════════════════════════════════════════ */
/* Cuerpo de texto en Inter (más legible que la display Syne); suavizado */
body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* Bajar el grano que ensucia la lectura */
body::before{opacity:.14;}
/* Párrafos: más contraste y más aire */
.proxdesc{color:rgba(238,242,249,.87)!important;line-height:1.78;}
.eyebrow,.sf label,.tcp span,.tcp small{color:rgba(234,239,247,.70)!important;}
.stitle,.tcn,.proxdest{color:#f5f8fc;}

/* BOTONES — más grandes, legibles y visibles */
.bp{font-size:13px;padding:17px 34px;}

.bg{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#fff;font-size:13px;}
.bg:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.38);}
.bver,.banotar{border-color:rgba(240,169,43,.55);color:var(--amber);font-weight:800;}
.bver:hover,.banotar:hover{background:var(--amber);color:var(--void);}
/* Filtros y navegación más visibles */
.fb{border-color:rgba(234,239,247,.18);color:rgba(234,239,247,.80);}
.fb:hover{border-color:var(--amber);color:var(--amber);}
.fb.active{color:var(--void);}
.navlinks a{color:rgba(234,239,247,.80);}

/* Tarjetas con borde más definido */

/* Accesibilidad: foco visible al navegar con teclado */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

/* ── TARJETAS DE VIAJE MÁS VENDEDORAS (fecha + escasez) ── */
.tc-date{top:11px;right:11px;z-index:3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;}
.tc-date .tc-date-x{color:var(--amber);font-weight:700;}

.tc-avail{color:#6fe39a;}

@keyframes availPulse{0%,100%{opacity:1}50%{opacity:.5}}
.tc:hover .tc-date{border-color:rgba(212,146,42,.4);}

/* ═══════════════════════════════════════════════════════════════
   REFRESH VISUAL v3 — más premium, moderno y vendedor (2026-06)
   ═══════════════════════════════════════════════════════════════ */
/* Fondo con profundidad: resplandores dorados sutiles */
body{background-attachment:fixed;}
/* Botón primario PREMIUM: degradé dorado + brillo interior */
.bp{background:linear-gradient(135deg,#f9c659 0%,#e89b1f 100%);color:#1c1305;border-radius:14px;letter-spacing:.04em;box-shadow:0 10px 34px rgba(242,176,58,.42),0 1px 0 rgba(255,255,255,.4) inset;}
.bp:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 16px 48px rgba(242,176,58,.58),0 1px 0 rgba(255,255,255,.45) inset;}
/* Títulos con acento dorado en degradé */
.stitle em,.hero h1 .sl{background:linear-gradient(115deg,#f9c659,#e89b1f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Tarjetas más redondeadas y con vidrio sutil */

/* Nav glass más pulido al hacer scroll */
nav.sc{background:rgba(6,4,15,.88);backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);}
/* Buscador (search dock) más premium */
.sdock{border-radius:20px;border-color:rgba(255,255,255,.11);box-shadow:0 28px 70px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.07) inset;}
.sgo{background:linear-gradient(135deg,#f9c659,#e89b1f);color:#1c1305;font-weight:800;}

/* ═══════════════════════════════════════════════════════════════
   AJUSTES FINOS (feedback cliente, jun 2026)
   ═══════════════════════════════════════════════════════════════ */
/* HERO más compacto + foto real del micro (si existe uploads/hero-micro.jpg) */
.hero{padding:116px 60px 58px;}

@media(max-width:760px){.hero{padding:90px 22px 42px;}}

/* TARJETAS DE VIAJE — destino legible/centrado, imagen destacada, Reservar full */

.tcim img{filter:saturate(1.04);}
.tc:hover .tcim img{filter:saturate(1.2);}

.tcn{margin-bottom:8px;}

.tc-avail{justify-content:center;}

.tcf .bver{justify-content:center;padding:13px 14px;}
.bver-main{background:linear-gradient(135deg,#f9c659,#e89b1f)!important;color:#1c1305!important;border-color:transparent!important;font-weight:800;box-shadow:0 6px 20px rgba(242,176,58,.32);}
.bver-main:hover{filter:brightness(1.05);}

/* SECCIÓN GRUPOS / DESCUENTOS — más compacta */
#grupos-sec{padding:52px 60px!important;}
#grupos-sec .stitle{margin-bottom:12px!important;font-size:clamp(24px,3vw,34px)!important;}
#grupos-sec p{margin-bottom:18px!important;}
@media(max-width:760px){#grupos-sec{padding:40px 22px!important;}#grupos-sec>div{grid-template-columns:1fr!important;gap:24px!important;}}

/* ═══════════════════════════════════════════════════════════════
   REBRAND — Azul marino + celeste + dorado (logo nuevo, jun 2026)
   ═══════════════════════════════════════════════════════════════ */
body{background:
  radial-gradient(ellipse 72% 55% at 10% -8%, rgba(63,203,232,.10) 0%, transparent 55%),
  radial-gradient(ellipse 60% 50% at 100% 0%, rgba(244,173,60,.06) 0%, transparent 50%),
  var(--void)!important;}
/* Acento de marca: celeste en eyebrows, hover y detalles */
.eyebrow{color:var(--cyan)!important;}
.eyebrow::before{background:linear-gradient(90deg,var(--cyan),transparent)!important;}
.navlinks a:hover{color:var(--cyan)!important;}
.tc-soon,.tc-date .tc-date-x{color:var(--cyan)!important;}

/* Superficies navy */
.tc{background:rgba(14,26,56,.66)!important;border-color:rgba(255,255,255,.09)!important;}
.tc:hover{border-color:rgba(63,203,232,.4)!important;box-shadow:0 18px 46px rgba(0,0,0,.5),0 0 0 1px rgba(63,203,232,.18)!important;}
.tband{background:var(--void2)!important;}
/* CTAs y precios siguen dorados (convierten y combinan con el logo) */
.bp,.bver-main,.sgo{background:linear-gradient(135deg,#f7c14e,#e89421)!important;}

/* ═══ COMPACTAR LA WEB (menos larga, más ancha, cómoda en celular) ═══ */
section{padding:54px 60px!important;}
.stitle{margin-bottom:22px!important;}
.eyebrow{margin-bottom:9px!important;}
#faq>div{max-width:940px!important;}
.cwrap{max-width:680px!important;}
footer{padding:36px 60px 18px!important;}
.fgrid{margin-bottom:24px!important;}
@media(max-width:960px){ section{padding:44px 26px!important;} }
@media(max-width:760px){
  section{padding:34px 18px!important;}
  .stitle{margin-bottom:15px!important;}
  footer{padding:28px 18px 16px!important;}
  .fgrid{gap:20px!important;margin-bottom:18px!important;}
}

/* ═══════════════════════════════════════════════════════════════
   FASE 1 — CONVERSIÓN Y CONFIANZA (2026-08)
   Bloque final: estas reglas ganan sobre todo lo anterior.
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra fija de acción ──────────────────────────────────────
   El botón flotante de WhatsApp estaba apagado (display:none) y en
   celular no quedaba ninguna vía de contacto después del hero.
   Esta barra aparece al pasar el hero y se esconde al scrollear
   hacia arriba, para no tapar contenido. */
.fv-bar{position:fixed;left:0;right:0;bottom:0;z-index:260;
  background:rgba(10,21,48,.94);backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -8px 30px rgba(0,0,0,.45);
  transform:translateY(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));}
.fv-bar.on{transform:translateY(0);}
.fv-bar-in{display:flex;align-items:center;gap:12px;max-width:1100px;margin:0 auto;}
.fv-bar-p{flex:1 1 auto;min-width:0;line-height:1.15;}
.fv-bar-p small{display:block;color:rgba(234,239,247,.62);}
.fv-bar-p strong{display:block;font-family:'Inter',var(--sans);font-size:20px;font-weight:800;
  color:var(--amber);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fv-bar-p span{color:rgba(234,239,247,.66);}
.fv-bar-b{display:flex;gap:8px;flex:0 0 auto;}
.fvb-wa,.fvb-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 16px;border-radius:12px;border:none;cursor:pointer;font-family:'Inter',var(--sans);font-weight:800;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:filter .18s,transform .18s;}
.fvb-wa{background:#25D366;color:#04210f;}
.fvb-cta{background:linear-gradient(135deg,#f7c14e,#e89421);color:#1c1305;}
.fvb-wa:hover,.fvb-cta:hover{filter:brightness(1.06);transform:translateY(-1px);}
.fvb-wa:focus-visible,.fvb-cta:focus-visible{outline:2px solid #fff;outline-offset:2px;}
body.fv-bar-on{padding-bottom:74px;}
@media(max-width:380px){.fvb-wa,.fvb-cta{padding:0 12px;font-size:12.5px;}.fv-bar-p strong{font-size:18px;}}

/* Burbuja de WhatsApp: vuelve, pero solo en escritorio (en celular manda la barra) */
.wa-fab{display:flex!important;border-radius:50%;width:56px;height:56px;bottom:26px;right:22px;
  transition:bottom .28s cubic-bezier(.4,0,.2,1),transform .2s,box-shadow .2s;}
@media(max-width:860px){.wa-fab{display:none!important;}}

/* ── EL GLOBITO NO PUEDE QUEDAR DEBAJO DE LA BARRA ─────────────────────────
   En escritorio pasaba esto: la barra fija de abajo (.fv-bar) aparece al pasar
   el hero, mide unos 66px de alto y va en z-index 260. El globito está a 26px
   del piso, mide 56 y va en 250. O sea que la barra le pasaba por ENCIMA justo
   en la franja donde está el globito: se veía el verde asomando, pero el clic
   se lo llevaba la barra. Un botón que se ve y no se puede tocar es peor que
   uno que no está.
   Ahora, cuando la barra se muestra, el globito sube y queda apoyado arriba de
   ella (mismo tiempo de animación que la barra, así suben juntos). La cuenta:
   66px de barra + los 26 de siempre + un respiro de 8. env(safe-area-inset)
   suma el borde de abajo en los iPhone.
   Abajo de 861px el globito no existe (lo tapa la barra a propósito: ahí el
   botón de WhatsApp ya está adentro de la barra), así que de 320 a 860 no hay
   nada que corregir. */
body.fv-bar-on .wa-fab{bottom:calc(100px + env(safe-area-inset-bottom));}

/* ── Tarjetas fantasma mientras cargan los viajes ──────────────
   La altura tiene que ser la MISMA que la de la tarjeta de verdad. Estaba en
   394 px cuando la tarjeta real mide unos 600: al llegar los viajes, todo lo
   de abajo pegaba un salto de 200 px por tarjeta. Eso hace que la gente toque
   el botón equivocado, y Google lo mide y lo penaliza. */
.tc-skel{border-radius:18px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(100deg,rgba(255,255,255,.035) 30%,rgba(255,255,255,.075) 50%,rgba(255,255,255,.035) 70%);background-size:220% 100%;animation:skel 1.35s ease-in-out infinite;}
@keyframes skel{0%{background-position:120% 0;}100%{background-position:-20% 0;}}
@media(prefers-reduced-motion:reduce){.tc-skel{animation:none;}}
/* En pantallas anchas entran 3 tarjetas por fila: con más de 3 fantasmas se
   reservaba una fila entera de más y quedaba un hueco enorme. */
@media(min-width:961px){.tc-skel:nth-child(n+4){display:none;}}

/* ── Escala única de disponibilidad ──────────────────────────── */
.tc-avail{font-family:'Inter',var(--sans);font-weight:700;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid transparent;}
.tc-avail.ok{color:#6fe39a;background:rgba(111,227,154,.10);border-color:rgba(111,227,154,.24);}
.tc-avail.pocos{color:#ffcf6b;background:rgba(255,207,107,.11);border-color:rgba(255,207,107,.26);}
.tc-avail.urgente{color:#ff8a80;background:rgba(255,138,128,.12);border-color:rgba(255,138,128,.30);animation:none;}
.tc-avail.lleno{color:rgba(234,239,247,.66);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);}
.tc-consultar{font-family:'Inter',var(--sans);font-weight:800;color:var(--cyan);}

/* Contraste mínimo: nada de texto por debajo de 12px en el sitio público */
.tb-lbl,.vpl{font-size:11.5px!important;}

/* Datos de decisión en la tarjeta y conteo en los filtros */
.tc-datos{font-family:'Inter',var(--sans);line-height:1.5;}
.tc-datos span{display:inline-flex;align-items:center;white-space:nowrap;}
.fb-n{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;
  background:rgba(255,255,255,.10);font-family:'Inter',var(--sans);font-size:11px;font-weight:700;}
.fb.active .fb-n{background:rgba(0,0,0,.18);}

/* ── Hero: la foto en el tamaño que hace falta ────────────────────────────
   image-set deja que el navegador elija WebP si lo soporta, y la variante
   chica en celular. En 4G son ~59 KB en vez de 295 KB.

   OJO con las rutas: esta hoja vive en /assets/, así que una ruta relativa
   como 'uploads/...' la busca en /assets/uploads/ y da 404 — que es lo que
   pasaba: la portada del sitio se veía sin foto. Van con barra inicial. */
.hbg-img{background:
  image-set(url('/uploads/hero-1280.webp') type('image/webp'), url('/uploads/hero-1280.jpg') type('image/jpeg'))
  center 42%/cover no-repeat,
  linear-gradient(150deg,#0e1c3a,#0a1530)!important;}
@media(max-width:860px){
  .hbg-img{background:
    image-set(url('/uploads/hero-760.webp') type('image/webp'), url('/uploads/hero-760.jpg') type('image/jpeg'))
    center 42%/cover no-repeat,
    linear-gradient(150deg,#0e1c3a,#0a1530)!important;}
}
/* Respaldo para navegadores sin image-set */
@supports not (background-image: image-set(url('x.webp') type('image/webp'))){
  .hbg-img{background:url('/uploads/hero-1280.jpg') center 42%/cover no-repeat,linear-gradient(150deg,#0e1c3a,#0a1530)!important;}
}
/* Respaldo para SERVIDORES sin .webp ─────────────────────────────────────
   Distinto del de arriba: no es que al navegador le falte image-set, es que
   los archivos .webp NO EXISTEN en el hosting. image-set elige por formato
   soportado, no por archivo presente: Chrome pide el .webp, recibe un 404 y
   nunca prueba el .jpg, así que la portada quedaba con el degradado plano.
   La clase .sin-webp la pone index.html después de probar de verdad si se
   puede cargar /uploads/hero-760.webp. Cubre celular y escritorio. */
html.sin-webp .hbg-img{background:url('/uploads/hero-1280.jpg') center 42%/cover no-repeat,linear-gradient(150deg,#0e1c3a,#0a1530)!important;}
@media(max-width:860px){
  html.sin-webp .hbg-img{background:url('/uploads/hero-760.jpg') center 42%/cover no-repeat,linear-gradient(150deg,#0e1c3a,#0a1530)!important;}
}

.sub-prox{font-size:15px;color:rgba(234,239,247,.78);max-width:56ch;}
.proxcard{display:flex;flex-direction:column;}
.proxbody{display:flex;flex-direction:column;flex:1;}
.proxdest{font-family:'Inter',var(--sans);font-weight:800;}
.proxnota{font-family:'Inter',var(--sans);font-size:12px;color:var(--cyan);letter-spacing:.01em;margin-bottom:12px;}
.banotar{margin-top:auto;min-height:44px;}

/* --- Estilos que estaban sueltos dentro del body --- */
.tband{padding:34px 60px;background:var(--void2);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);}
.tband-row{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;}
.tb-item{display:flex;align-items:center;font-family:'Inter',var(--sans);color:var(--ice-d);font-weight:500;}
.tb-item b{color:var(--amber);font-weight:800;}
.tb-sep{width:1px;height:20px;background:var(--bd);}
.tb-pays{max-width:1100px;margin:18px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
/* Los dos renglones que sobrevivieron de "Por que elegirnos": van en el medio
   de la franja, en texto corrido, no en tres tarjetas de 300 px cada una. */
.tb-mas{max-width:70ch;margin:14px auto 0;text-align:center;font-family:'Inter',var(--sans);font-size:15px;line-height:1.65;color:var(--ice-d);}
.tb-mas a{display:inline-block;min-height:44px;line-height:44px;padding:0 4px;color:var(--amber);font-weight:700;white-space:nowrap;}
.tb-mas a:hover{text-decoration:underline;}
.tb-lbl{color:var(--mu);}
.tb-pay{color:var(--ice-d);border:1px solid var(--bd);background:var(--ice-g);}
@media(max-width:640px){.tb-sep{display:none;}}
#lightbox{position:fixed;inset:0;z-index:600;background:rgba(2,2,8,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;opacity:0;pointer-events:none;transition:opacity .25s;}
#lightbox.open{opacity:1;pointer-events:all;}
#lb-content{max-width:1000px;display:flex;align-items:center;justify-content:center;animation:lbIn .3s ease;}
@keyframes lbIn{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
#lb-cap{font-family:'Inter',var(--sans);font-size:13px;color:var(--ice-d);letter-spacing:.01em;text-align:center;}
.lb-close{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:50%;font-size:17px;cursor:pointer;transition:all .2s;}
.lb-close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg);}

#faq .faq-item{border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;background:var(--ice-g);overflow:hidden;transition:border-color .2s,background .2s;}
    #faq .faq-item[open]{border-color:var(--bda);background:var(--amber-d);}
    #faq summary{cursor:pointer;list-style:none;padding:17px 22px;font-family:'Inter',var(--sans);font-weight:600;color:var(--ice);display:flex;justify-content:space-between;align-items:center;gap:14px;}
    #faq summary::-webkit-details-marker{display:none;}
    #faq summary::after{content:'+';font-size:22px;color:var(--amber);font-weight:400;flex-shrink:0;line-height:1;}
    #faq .faq-item[open] summary::after{content:'\2212';}
    #faq .faq-a{padding:0 22px 18px;color:rgba(234,239,247,.78);line-height:1.7;}
    #faq .faq-a a{color:var(--amber);text-decoration:underline;}

/* La tarjeta de viaje es un enlace real (para compartir y para Google),
   pero se sigue viendo y comportando como una tarjeta. */
a.tc{display:block;color:inherit;text-decoration:none;}
a.tc:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
.bver-main{display:inline-flex;align-items:center;justify-content:center;}

/* ===============================================================
   LEGIBILIDAD - piso de tamano de texto (2026-08)
   Habia 78 textos por debajo de 12 px, varios en 9-10 px. En un
   celular al sol eso no se lee. Se sube el piso sin romper el diseno.
   =============================================================== */
.eyebrow,.tb-lbl,.tb-pay,.tc-date,.proxnota,.banotar,.sgo,.fb,.navlinks a,.ncta,.vpl,.cbn,.cbl,.fg label,.rf label,.sf label,.fcol h4,.fbot,.oinf,.tcp small,.tcp span,.fv-bar-p small,.fv-bar-p span{font-size:12px!important;}
.rsi-lbl,.rsi-num,.fb-n{font-size:11.5px!important;}

.eyebrow,.tb-lbl,.fg label,.rf label,.sf label,.fcol h4{letter-spacing:.10em;}

/* Areas tactiles comodas en celular (minimo recomendado: 44 px) */
@media(max-width:760px){
  .fb,.banotar,.bver,.bs,.sgo{min-height:44px;}
  .navlinks a,.mmenu a{min-height:44px;display:flex;align-items:center;}
}

/* ===============================================================
   AUDITORIA 2026-08 — arreglos de maquetado
   =============================================================== */

/* ── 1. Se iba de pantalla en celular ─────────────────────────────
   (Acá vivían los arreglos de la sección "¿Cómo funciona?", que tenía
   4 columnas fijas y estiraba la página a 542 px en cualquier celular.
   Esa sección se sacó entera de la portada: no vendía, no informaba
   nada nuevo y ocupaba 672 px de pantalla. Con ella se van sus
   parches. Lo que queda abajo es la red de contención, que sigue
   haciendo falta.) */

/* Red de contencion: que ningun bloque futuro vuelva a estirar la pagina. */
html{overflow-x:hidden;}
img,video,iframe,table,pre{max-width:100%;}

/* ── 2. El sello del hero ─────────────────────────────────────────
   (Acá había tres reglas para que el sello de arriba del hero no se
   cortara en el celular. El sello ya no existe: el dueño lo mandó sacar.
   OJO: esta hoja es PÚBLICA — cualquiera la abre entrando a
   /assets/estilos.css. No escribas acá adentro ningún dato de la agencia:
   ni el legajo, ni el CUIT, ni el CBU, ni nada que no quieras que se lea.
   El comentario anterior tenía el número de legajo escrito y se leía
   desde el navegador.) */

/* Aire entre el logo y los links del menu: en escritorio se leia
   "Full ViajesVIAJES" todo junto. */
nav{gap:26px;}
.navlinks{margin-left:8px;}

/* ── 3. El hero, en celular, en una sola columna ──────────────────
   (Este bloque acomodaba además la tira de números del hero, que ya
   no existe. Lo que queda es lo que sigue haciendo falta: que el
   texto del hero ocupe todo el ancho y no quede una columna flaca.) */
@media(max-width:960px){
  .hero{flex-wrap:wrap;align-items:flex-start;align-content:flex-start;}
  .hc{flex:1 1 100%;max-width:100%;}
}

.tc{display:flex;flex-direction:column;}
.tcb{display:flex;flex-direction:column;flex:1;}

/* ── 6. Escritorio: que no quede media pantalla vacia ─────────────
   El texto del hero se cortaba a 460 px y sobraba un vacio enorme
   a la derecha en monitores anchos. */
@media(min-width:1200px){
  .hc{max-width:900px;}
  section,.tband,#grupos-sec{padding-left:max(60px,calc((100vw - 1240px) / 2))!important;
    padding-right:max(60px,calc((100vw - 1240px) / 2))!important;}
  .search-section{padding-left:max(60px,calc((100vw - 1240px) / 2));
    padding-right:max(60px,calc((100vw - 1240px) / 2));}
  footer{padding-left:max(60px,calc((100vw - 1240px) / 2))!important;
    padding-right:max(60px,calc((100vw - 1240px) / 2))!important;}
}

/* ── 7. Galeria navegable con teclado ─────────────────────────── */
.gi:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* ═══════════════════════════════════════════════════════════════
   QUE LO PUEDA USAR CUALQUIERA (2026-08-27)
   El dueño lo pidió así: "gente de todas las edades va a entrar,
   hasta personas mayores". Lo de abajo sale de medir el sitio real,
   no de una lista teorica: se revisaron los tamaños de letra que
   quedaban abajo de 15 px y las cosas que hay que tocar con el dedo
   y medían menos de 44 px.
   ═══════════════════════════════════════════════════════════════ */

/* ── Los desplegables medían 21 px de alto ────────────────────────
   Elegir "Mes de salida" con el dedo era una porquería, y con la
   vista cansada ni se veía que fuera un desplegable. Ahora tienen
   altura cómoda y se nota que se pueden abrir. */
.sf select,.sf input,
.fg select,.fg input,.fg textarea,
.rf select,.rf input{
  min-height:50px;
  font-size:16px;                /* 16 px evita que el celular haga zoom solo al tocar */
  line-height:1.4;
}
.sf select,.fg select,.rf select{
  -webkit-appearance:none;appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4ad3c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:17px;
  cursor:pointer;
}
.sf{padding-top:12px;padding-bottom:12px;}

/* ── Las etiquetas de los campos ──────────────────────────────────
   Ahora están unidas a su casillero (atributo for), así que tocar
   la palabra pone el cursor adentro. Se les da area de toque. */
.sf label,.fg label,.rf label{
  display:inline-block;padding:4px 0;cursor:pointer;
  font-size:13px!important;letter-spacing:.08em;
}

/* ── Textos que NO son rotulos y estaban en 13 px ─────────────────
   Un rotulo en mayusculas ("SALIDA", "DURACION") puede ir chico
   porque es una referencia. Pero el precio en cuotas, el descuento
   y el tipo de viaje son informacion para decidir: van legibles. */
.tc-datos,.proxnota,.tb-pay,.oinf{font-size:15px!important;line-height:1.6;}
.fb{font-size:15px!important;}
.badge{font-size:12.5px!important;}

/* ── Enlaces de texto: area de toque ──────────────────────────────
   Cosas como "Ver todas las salidas", el telefono de una sucursal o
   los links del pie medían 18-26 px de alto. Con el dedo se erra. */
.fcol a,.oinf a,.faq-a a,.sres-b{
  display:inline-block;min-height:44px;line-height:44px;
}
.fbot a{display:inline-block;min-height:40px;line-height:40px;}

/* ── Que se note que un boton es un boton ─────────────────────────
   Los que eran solo texto de color ahora tienen borde. */

/* ── Foco bien visible al navegar con el teclado ──────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[role=button]:focus-visible{
  outline:3px solid var(--cyan);outline-offset:2px;border-radius:4px;
}

/* ── Errores de formulario: que se vean ───────────────────────── */
.rferr{font-size:14px!important;font-weight:600;display:none;}
.rferr::before{content:'⚠ ';}

/* ── 8. Que la pagina no "salte" cuando llegan las fuentes ────────
   Las fuentes vienen de Google y tardan. Mientras tanto el navegador
   escribe con la letra del sistema, que ocupa distinto: al llegar la
   definitiva, todo el texto cambiaba de tamano y empujaba lo de abajo.
   En un celular eso hace que toques el boton equivocado, y Google lo
   mide y lo tiene en cuenta para el posicionamiento.
   Se define una letra de espera con las MISMAS medidas que Inter, asi
   el cambio es invisible. */
@font-face{
  font-family:'Inter respaldo';
  src:local('Arial'),local('Helvetica'),local('Liberation Sans');
  size-adjust:107%;
  ascent-override:90%;
  descent-override:22.43%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Syne respaldo';
  src:local('Arial Bold'),local('Arial'),local('Liberation Sans');
  size-adjust:104%;
  ascent-override:97%;
  descent-override:24%;
  line-gap-override:0%;
}
:root{
  --sans:'Syne','Syne respaldo',system-ui,sans-serif;
}
body,.hero h1,.stitle,.tcn,.tc-datos,.tc-avail,.proxdest,.proxdesc,.tb-item,.fv-bar-p strong,.bp,.bg,.bver,.fvb-wa,.fvb-cta{
  font-family:'Inter','Inter respaldo',system-ui,sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   PEDIDOS DEL DUEÑO (2026-08) — bloque final: manda sobre todo
   lo de arriba. Tres cosas: hero más corto, buscador que se nota
   y sucursales que se cargan desde el panel.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. HERO MÁS COMPACTO ──────────────────────────────────────────────────
   "Esa parte del inicio me gustaría que sea más breve." Antes ocupaba casi
   toda la pantalla y no se veía un solo viaje sin scrollear. Ahora queda en
   torno al 65% del alto de la pantalla en escritorio: se alcanza a ver el
   borde de las tarjetas de viaje sin mover nada. En celular, el primer viaje
   queda a un scroll corto.
   Se toca padding, tamaño del título y aire entre bloques — nada de colores. */

@media(max-width:760px){.hero{padding-top:88px!important;padding-bottom:20px!important;}}

/* Un bloque escondido (un dato que no se puede calcular, como el año de
   inicio si no está cargado) no tiene que dejar la línea divisoria colgada.
   Hace falta decirlo: cuando una regla le pone display a un elemento, el
   atributo "hidden" del HTML solo no alcanza para esconderlo. */
/* Sin la tira de números, entre el subtítulo, los botones y el buscador
   quedaba un hueco: el hero ahora cierra justo debajo de los botones. */
.hbtns{margin-bottom:0;}
@media(max-width:760px){
  /* Botones un poco más bajos: en celular eran 52 px cada uno y, apilados,
     empujaban los viajes fuera de la pantalla. */
  .hero .bp,.hero .bg{min-height:48px!important;padding:14px 22px!important;}
  .hbtns{gap:8px;}
  
  
}
/* El encabezado de "Próximas salidas" también se aprieta un poco: entre el
   hero y la primera tarjeta había casi 300 px de títulos y botones de filtro.
   Con esto, en una pantalla de escritorio se alcanza a ver el borde superior
   de las tarjetas sin mover el dedo. */

#viajes>div:first-of-type{margin-bottom:6px!important;}
#viajes .filters{margin-bottom:14px;}
@media(max-width:760px){#viajes{padding-top:18px!important;}}
/* El buscador tenía 20 px de aire arriba y abajo de cada campo: se veía
   enorme y empujaba los viajes fuera de la pantalla. */
/* (Acá había una regla para recortar el sello del hero en pantallas chicas.
   El sello ya no existe.) */

/* ── 2. BUSCADOR QUE SE NOTA ───────────────────────────────────────────────
   "No funciona el botón de búsqueda": filtraba bien, pero los resultados
   quedaban fuera de la pantalla. Ahora el botón baja hasta los viajes y arriba
   de la grilla aparece este renglón contando lo que quedó. */
/* Al bajar hasta los viajes, el menú de arriba (que es fijo) tapaba el
   primer renglón. Se deja ese espacio reservado. */
#sres,#viajes{scroll-margin-top:96px;}
@media(max-width:760px){#sres,#viajes{scroll-margin-top:80px;}}
#sres{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  margin:0 0 16px;padding:12px 16px;border-radius:12px;
  background:rgba(63,203,232,.07);border:1px solid rgba(63,203,232,.22);}
.sres-n{font-family:'Inter',var(--sans);font-weight:800;color:var(--ice);}
.sres-n.sres-cero{color:#ffcf6b;}
.sres-f{font-family:'Inter',var(--sans);font-size:13px;color:rgba(234,239,247,.72);}
.sres-b{margin-left:auto;background:transparent;border:1px solid rgba(244,173,60,.55);
  color:var(--amber);font-family:'Inter',var(--sans);font-size:12.5px;font-weight:800;
  padding:8px 16px;border-radius:9px;min-height:40px;transition:all .2s;}
.sres-b:hover{background:var(--amber);color:var(--void);}

/* Botón "Limpiar filtros": aparece solo cuando hay algún filtro puesto.
   En escritorio se apoya en el hueco que ya deja el buscador, así que aparecer
   y desaparecer no mueve nada de lugar mientras se escribe. */
.search-section{position:relative;}
@media(min-width:961px){
  .sclear{position:absolute;left:0;right:0;bottom:9px;margin:0 auto!important;width:fit-content;}
}
.sclear{display:block;margin:-18px auto 10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);color:rgba(234,239,247,.82);
  font-family:'Inter',var(--sans);font-size:12.5px;font-weight:700;
  padding:9px 18px;border-radius:999px;min-height:40px;transition:all .2s;}
.sclear:hover{background:rgba(255,255,255,.14);color:#fff;}
@media(max-width:960px){.sclear{margin:-2px auto 14px;}}

/* El mensaje de "no encontramos nada" tenía el mismo tamaño que un pie de
   página. Si el visitante no lo ve, cree que el sitio se rompió. */
#nores{padding:26px 18px;border:1px dashed rgba(255,255,255,.16);border-radius:14px;
  background:rgba(255,255,255,.03);font-size:15px;color:var(--ice-d);margin-top:6px;}

/* ── 3. SUCURSALES DINÁMICAS ───────────────────────────────────────────────
   Las oficinas ahora salen del panel y pueden tener foto. Las tarjetas se ven
   bien con foto y sin foto: sin foto simplemente empiezan por el nombre. */
.ogrid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;}
.ocard{padding:0;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;}
.ocard .ofoto{margin:0;line-height:0;}
.ocard .ofoto img{width:100%;height:170px;object-fit:cover;display:block;filter:saturate(.95);
  transition:transform .5s ease,filter .3s ease;}
.ocard:hover .ofoto img{transform:scale(1.04);filter:saturate(1.1);}
.ocard .ocuerpo{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.ocard .ociu{font-family:'Inter',var(--sans);font-size:19px;font-weight:800;
  letter-spacing:-.01em;margin:0 0 12px;color:#f5f8fc;}
/* Sin foto, un puntito de color arriba para que la tarjeta no arranque seca. */
.ocard:not(.con-foto) .ociu::before{content:'📍 ';}
/* El !important es para ganarle al piso de 12 px de más arriba: acá el texto
   es la dirección y el horario, tiene que leerse cómodo. */
.ocard .oinf{font-family:'Inter',var(--sans);color:rgba(234,239,247,.82);display:flex;flex-direction:column;gap:8px;}
.ofila{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start;}
.ofila a{color:var(--cyan);}
.ofila.onota{color:rgba(234,239,247,.66);font-style:italic;}
.obtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:16px;}
.obtn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 14px;border-radius:11px;text-decoration:none;
  font-family:'Inter',var(--sans);font-size:13px;font-weight:800;
  transition:filter .2s,transform .2s,background .2s;white-space:nowrap;}
.obtn-wa{background:#25D366;color:#04210f;}
.obtn-map{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--ice);}
.obtn:hover{filter:brightness(1.06);transform:translateY(-1px);}
.obtn-map:hover{background:rgba(255,255,255,.14);}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGIBILIDAD PARA TODAS LAS EDADES (2026-08)
   ───────────────────────────────────────────────────────────────────────────
   El dueño lo pidió así: "gente de todas las edades va a entrar a la web,
   hasta personas mayores". Este bloque va último, así que le gana a todo lo
   de arriba (incluidos los pisos viejos de 11,5 y 12 px con !important).

   Cuatro reglas simples, y ningún color de marca se toca:
     · Texto que se LEE: nunca menos de 15 px.
     · Rótulos en MAYÚSCULA (los renglones cortos tipo "DESDE", "DESTINO"):
       pueden quedar en 13 px — son etiquetas, no lectura.
     · Párrafos con interlineado 1.7 o más.
     · Todo lo que se toca (botón o enlace) mide 48 px de alto como mínimo,
       que es el dedo de una persona real, y se nota que es un botón.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. RÓTULOS EN MAYÚSCULA — 13 px ──────────────────────────────────────
   Van todos juntos porque son la misma cosa: una palabra corta que rotula
   lo de al lado. Antes estaban en 9, 10 y 11 px. */
.eyebrow,.tb-lbl,.tcp small,.vpl,.cbn,.rsi-lbl,.fg label,.rf label,.sf label,.fcol h4,.ctabt,.iboxt,.fv-bar-p small,.fb-n,.badge,.ncta,.mm-cta{font-size:13px!important;letter-spacing:.09em;}

/* ── 2. TEXTO QUE SE LEE — piso de 15 px ──────────────────────────────────
   Datos, precios chicos, fechas, direcciones, avisos. Todo esto antes
   estaba entre 10 y 13,5 px. */
.proxdesc,.tc-datos,.tc-avail,.tc-date,.tcp span,.tb-item,.tb-pay,.proxnota,.fbot,.oinf,.fv-bar-p span,.cbl,.crow,.irow,.iaddr,.vbarn,.rferr,.pmlbl,.wbadge,.sres-f,#nores,.sub-prox,.pmlbl span,.rsi-num{font-size:15px!important;}
/* El círculo del paso 1-2-3-4 crece para que el número entre cómodo. */
.rsi-num{width:32px;height:32px;}
.rsi-line{top:16px;}
/* Sucursales: la dirección y el horario son de lo más importante del sitio. */
.ocard .oinf{font-size:15px!important;line-height:1.75;}
.ociu,.ocard .ociu{font-size:20px;}

/* Textos con tamaño escrito a mano dentro del HTML: hay que insistir. */
#grupos-sec p{font-size:15.5px!important;line-height:1.75!important;}
#sin-viajes p{font-size:15px!important;line-height:1.7!important;}
.cwrap .fg>div{font-size:14px!important;color:rgba(234,239,247,.72)!important;}
.cwrap>p{font-size:13px!important;}
#c-ok{font-size:15px!important;}

/* Campos de formulario: 16 px. Además de leerse mejor, es el tamaño a partir
   del cual el iPhone NO hace zoom solo al tocar el campo — antes la pantalla
   pegaba un salto y la persona se perdía. */
.fg input,.fg select,.rf input,.rf select,.sf input,.sf select,
.cwrap textarea,#pax-forms input,#prox-modal input{font-size:16px!important;}
.fg input,.fg select,.rf input,.rf select,
.cwrap textarea,#pax-forms input,#prox-modal input{min-height:50px;padding:13px 14px;}
.fg input::placeholder,.rf input::placeholder,.sf input::placeholder{font-size:15px;}

/* ── 3. PÁRRAFOS CON AIRE ─────────────────────────────────────────────────
   1.7 de interlineado: los renglones dejan de pegarse y el ojo no se pierde
   de línea, que es lo primero que cuesta a partir de cierta edad. */
p,.proxdesc,.fbrand p,#faq .faq-a,.oinf,.tb-item{line-height:1.75;}

#faq .faq-a{font-size:16px!important;}
#faq summary{font-size:17px!important;min-height:56px;}

/* ── 4. LO QUE SE TOCA: 48 px Y QUE SE VEA QUE ES UN BOTÓN ────────────────
   El mínimo recomendado es 44 px; acá vamos a 48 porque el público es de
   todas las edades. Nada de esto cambia colores: solo alto y borde. */
.bp,.bg,.bs,.bver,.fb,.banotar,.sgo,.obtn,.sres-b,.sclear,.fvb-wa,.fvb-cta,.ncta,.lb-close{min-height:48px!important;}
.bp,.bg,.bs,.bver,.fb,.banotar,.obtn,.sres-b,.sclear,.fvb-wa,.fvb-cta{
  display:inline-flex;align-items:center;justify-content:center;}
.fb,.bver,.banotar,.sres-b,.sclear,.bs{font-size:14px!important;}
.bp,.bg,.sgo{font-size:15px!important;}
.fvb-wa,.fvb-cta{font-size:15px!important;}
/* Enlaces del menú y del pie: también son cosas que se tocan. */
.navlinks a,.mmenu a,.fcol a{display:flex;align-items:center;min-height:48px;}
.navlinks a{font-size:13px!important;}
.mmenu a,.fcol a{font-size:15px!important;}
/* Los filtros son botones, no texto suelto: se les nota el borde siempre. */
.fb{border-width:1px;padding:0 20px;}
/* Un enlace dentro de un párrafo tiene que verse que es un enlace. */
.faq-a a,.fbrand p a,.ofila a{text-decoration:underline;text-underline-offset:3px;}

/* Botones que hoy son solo un texto de color (el "Ver todos" del buscador
   vacío, el "Cerrar" y el "Empezar de nuevo" del formulario de reserva, la
   cruz de cerrar): pasan a tener fondo y borde para que se entienda que son
   botones. El !important es porque el tamaño y el fondo estaban escritos
   directamente en el HTML. */
#nores button,
#rcon button:not(.bp):not(.bs){
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(255,255,255,.24)!important;
  color:var(--ice)!important;
  border-radius:11px!important;
  min-height:48px!important;padding:0 18px!important;
  font-family:'Inter',var(--sans)!important;
  font-size:15px!important;font-weight:700!important;
  display:inline-flex;align-items:center;justify-content:center;
}
#nores button:hover,#rcon button:not(.bp):not(.bs):hover{
  background:rgba(255,255,255,.16)!important;border-color:var(--amber)!important;}
/* La cruz de cerrar queda cuadrada, no un rectángulo largo. */
.rclose{width:48px;padding:0!important;}

/* El aviso de resultados y el "no encontramos nada" también se leen. */
.sres-n{font-size:16px!important;}

/* En celular todo esto tiene que seguir entrando: se achica el aire, nunca
   la letra. */
@media(max-width:760px){
  /* El aire de los botones de filtro en celular se decide en un solo lugar:
     el bloque "LOS FILTROS TIENEN QUE ENTRAR EN LA PANTALLA", más abajo.
     Acá había una segunda medida (0 15px) que decía otra cosa. */
  /* El menú de escritorio no se ve en celular, así que acá no hay nada que
     achicar: la letra se queda como está. */
}

/* Un par de elementos con el tamaño escrito directamente en el HTML y que
   ninguna de las reglas de arriba alcanza: el cartel del dólar, el botón de
   "Ver en USD" y el pie de foto de la galería. */

.gi>div[style]{font-size:13px!important;}
/* El botón de menú (las tres rayitas) medía 13 px de alto: había que apuntarle
   con la punta del dedo. Ahora tiene 48x48 de área para tocar, aunque las
   rayitas se sigan viendo igual. */
.burger{min-width:48px;min-height:48px;align-items:center;justify-content:center;}
/* El renglón chico del bloque de opiniones de Google quedaba por debajo del
   piso de tamaño de letra. (Acá también se ajustaba el sello del hero, que ya
   no existe.) */

/* Las tarjetas fantasma (las que se ven mientras cargan los viajes) tienen que
   medir lo MISMO que la tarjeta de verdad. Con la letra más grande la tarjeta
   pasó de ~640 a ~700 px: si el fantasma se queda corto, al llegar los viajes
   todo lo de abajo pega un salto y la gente toca el botón equivocado. */

/* "Consultanos por el tuyo" es un enlace adentro de un párrafo: no se le
   puede dar 44 px de alto sin desarmar el texto, pero sí más superficie
   y dejarlo bien marcado como enlace. */
.faq-a a{padding:3px 2px;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:2px;}

/* Los íconos de redes del menú medían 30x30. */

/* (Acá se arreglaba el sello de arriba, que en un celular de 390 px se
   cortaba contra el borde. El dueño lo mandó sacar entero, así que el
   problema y su arreglo se fueron juntos.) */

/* ── La barra fija de abajo cortaba el precio ──────────────────────
   En un celular de 390 px entraban "Desde $300.000" + dos botones y el
   precio quedaba en "Desde $...". Justo el precio, que es lo que la
   persona está mirando cuando decide si escribe o no.
   Solución: en pantallas chicas los botones se achican y el precio se
   queda con el lugar que necesita. */
@media(max-width:430px){
  .fv-bar{padding-left:10px;padding-right:10px;}
  .fv-bar-in{gap:8px;}
  .fv-bar-p{flex:1 1 auto;min-width:0;}
  .fv-bar-p strong{font-size:18px;}
  .fv-bar-p small{font-size:13px!important;letter-spacing:.05em;}
  .fv-bar-b{gap:6px;}
  .fvb-wa,.fvb-cta{padding:0 12px;font-size:13.5px;min-height:48px;}
}
/* Debajo de 400 px (la mayoría de los celulares) el precio y los dos
   botones no entran juntos, y lo que se comía era el precio.
   OJO CON EL SELECTOR: va con #fv-bar (el id), NO con .fv-bar (la clase).
   La clase la comparten DOS barras distintas:
     · la de la portada  (id="fv-bar")  → el segundo botón dice "Ver viajes"
     · la de la ficha del viaje (sin id) → el segundo botón dice "RESERVAR"
   Con la clase se escondían las dos, y en la ficha eso dejaba sin el botón
   de reservar justo mientras la persona lee la descripción larga: es la
   barra que la acompaña todo el scroll. En la portada esconderlo no cuesta
   nada, porque los viajes están ahí nomás en la pantalla. */
@media(max-width:400px){
  #fv-bar .fvb-cta{display:none;}
  .fv-bar-p strong{font-size:20px;}
  .fvb-wa{padding:0 18px;font-size:14.5px;}
}
/* En la ficha del viaje entran los tres, pero justos: se compactan. */
@media(max-width:400px){
  body:not(:has(#fv-bar)) .fv-bar-b{gap:6px;}
  body:not(:has(#fv-bar)) .fvb-wa,
  body:not(:has(#fv-bar)) .fvb-cta{padding:0 12px;font-size:13.5px;}
  body:not(:has(#fv-bar)) .fv-bar-p strong{font-size:18px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTADA NUEVA (2026-08) — pedido del dueño
   "En el inicio me gustaría que se mejore la primera impresión, que sea más
    vendedora"  +  "poder cambiar la imagen de portada… administrar cuáles se
    ven y editar los segundos"  +  sacar el sello y el subtítulo.

   Va al final del archivo a propósito: más arriba hay bloques con !important
   que le ganarían a estas reglas.

   OJO CON EL ALTO: el dueño ya pidió DOS VECES que la portada sea corta y que
   se vean las tarjetas de viaje apenas se baja un poco. Sacando el sello y el
   subtítulo se liberaron unos 100 px; lo que se agrega acá (el renglón de la
   próxima salida y los puntitos) ocupa menos que eso. La portada quedó igual
   o más corta que antes: no crece.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Las fotos que se van pasando ──────────────────────────────────────
   Un fundido de 1 segundo y nada más. Sin deslizamientos ni efectos: tiene
   que verse caro y tranquilo, no un banner de los de 2005.
   Las fotos van todas apiladas en el mismo lugar; se ve la que tiene .on. */
.hbg-slides{position:absolute;inset:0;}
.hbg-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out;}
.hbg-slide.on{opacity:1;}
.hbg-slide picture{position:absolute;inset:0;display:block;}
/* El mismo encuadre y el mismo tratamiento que tenía la foto de siempre, para
   que al cambiar a las fotos del panel no se note un salto de estilo. */
/* Mismo criterio que .hbg-img de arriba: la foto se ve, el velo se encarga de
   que el título se lea. Los dos valores tienen que ir SIEMPRE iguales, porque
   .hbg-img es la foto de fábrica y ésta las que sube el dueño: si se cambia
   una sola, la portada cambia de brillo al pasar de una foto a la otra. */
.hbg-slide img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 42%;
  filter:saturate(1.08) brightness(.96) contrast(1.08);}
@media(max-width:860px){
  .hbg-slide img{filter:saturate(1.08) brightness(.90) contrast(1.07);}
}
/* Con una sola foto no hay carrusel: se le deja el acercamiento lento de
   siempre para que la portada no quede muerta. */
.hbg-slide.hbg-solo img{transform:scale(1.03);animation:heroZoom 20s ease-in-out infinite alternate;}

/* ── 2. El renglón de la salida más próxima ──────────────────────────────
   Ocupa el lugar del subtítulo viejo. No es una promesa: es la primera salida
   publicada de verdad, con destino, fecha y desde cuánto, y lleva directo a
   esa página. Lo escribe pintarProximaSalida() en index.html. */
.hprox{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px 11px;padding:9px 16px;min-height:44px;max-width:100%;border-radius:14px;text-decoration:none;background:linear-gradient(100deg,rgba(212,146,42,.17),rgba(212,146,42,.05));border:1px solid rgba(240,169,43,.34);box-shadow:0 6px 26px rgba(0,0,0,.30);backdrop-filter:blur(6px);animation:fuA .9s .2s cubic-bezier(.16,1,.3,1) both;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s;}
.hprox:hover{border-color:rgba(240,169,43,.62);transform:translateY(-1px);
  box-shadow:0 12px 34px rgba(0,0,0,.38);}
.hprox:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}
/* "PRÓXIMA SALIDA" es un rótulo: 13 px, el piso que fijó el sitio. */
.hprox-l{font-family:'Inter',var(--sans);font-size:13px;font-weight:800;
  letter-spacing:.01em;color:var(--amber);white-space:nowrap;}
.hprox-t{font-family:'Inter',var(--sans);font-size:16px;font-weight:500;
  color:var(--ice);line-height:1.45;}
.hprox-t b{font-weight:800;color:#fff;}
.hprox-sep{color:rgba(234,239,247,.42);}
.hprox-p{font-weight:800;color:#fff;white-space:nowrap;}
.hprox-urg{color:#ffcf6b;font-weight:800;}
.hprox-go{font-size:18px;line-height:1;color:var(--amber);white-space:nowrap;}
/* Mientras cargan los viajes, una barra gris del mismo alto. Sin esto, al
   llegar el catálogo aparecería el renglón de golpe y empujaría los dos
   botones para abajo justo cuando la persona va a tocarlos. */
.hprox-esperando{pointer-events:none;background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);box-shadow:none;}
.hprox-esperando .hprox-l{color:rgba(234,239,247,.42);}
.hprox-skel{display:block;width:min(230px,48vw);height:13px;border-radius:7px;
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.16),rgba(255,255,255,.07));
  background-size:220% 100%;animation:hproxSkel 1.5s ease-in-out infinite;}
@keyframes hproxSkel{0%{background-position:220% 0;}100%{background-position:-220% 0;}}

/* ── 3. Pie de la portada: título de la foto + puntitos ───────────────────
   Los puntitos sólo aparecen si hay más de una foto activa. Cada uno tiene
   44 px de área para tocar (entra gente mayor), aunque el punto que se ve
   sea chico. */
.hpie{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-top:4px;}
.hpie-tit{font-family:'Inter',var(--sans);font-size:13px;letter-spacing:.02em;
  color:rgba(234,239,247,.74);}
.hpie-tit:empty{display:none;}
.hdots{display:flex;align-items:center;gap:2px;margin-left:-10px;}
.hdot{width:44px;height:44px;min-width:44px;padding:0;margin:0;border:0;
  background:transparent;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.hdot::before{content:'';display:block;width:9px;height:9px;border-radius:50%;
  background:rgba(255,255,255,.32);border:1px solid rgba(255,255,255,.3);
  transition:width .25s ease,background .25s ease,border-radius .25s ease;}
.hdot.on::before{width:26px;border-radius:5px;background:var(--amber);border-color:transparent;}
.hdot:hover::before{background:rgba(255,255,255,.62);}
.hdot.on:hover::before{background:var(--amber);}
.hdot:focus-visible{outline:2px solid var(--amber);outline-offset:-8px;border-radius:12px;}

/* ── 4. Los dos botones de la portada, más grandes ────────────────────────
   Son LA acción de la página ("Ver próximas salidas" y "Consultar por
   WhatsApp"): tienen que verse antes que cualquier otra cosa. Suben un poco
   respecto de los botones del resto del sitio, pero sin pasarse: en celular
   van apilados y cada píxel de más empuja los viajes fuera de la pantalla. */
.hbtns .bp{font-size:14px;padding:18px 34px;min-height:56px;}
.hbtns .bg{font-size:14px;padding:16px 28px;min-height:52px;}
@media(max-width:760px){
  /* Le gana a la regla de más arriba que los dejaba en 48 px: ahora que no
     están el sello ni el subtítulo, hay lugar para cuatro píxeles más. */
  .hero .bp{min-height:52px!important;padding:14px 24px!important;font-size:14.5px;}
  .hero .bg{min-height:50px!important;padding:13px 22px!important;font-size:14px;}
  .hprox{margin:12px 0 15px;padding:8px 13px;gap:3px 9px;width:100%;}
  .hprox-t{font-size:15px;line-height:1.4;}
  .hdots{margin-left:-12px;}
}
/* En pantallas muy chicas el renglón entra en dos líneas: el rótulo arriba y
   el dato abajo. Es preferible eso a achicar la letra por debajo del piso. */
@media(max-width:430px){
  .hprox{flex-wrap:wrap;}
  .hprox-l{flex:1 1 100%;}
  /* Acá el dato real ("Próxima salida" arriba, destino + fecha + precio abajo)
     entra en DOS renglones y el cartel mide 84 px. La barra gris de espera
     medía 55 px, así que al llegar los viajes toda la página bajaba 29 px de
     golpe: el buscador y la primera tarjeta se movían con la persona ya
     mirando la pantalla (era el único salto de maquetado que quedaba, CLS
     0,034). Reservando los mismos 84 px, no se mueve nada.
     El alto incluye el borde y el relleno porque todo el sitio usa
     box-sizing:border-box. */
  .hprox-esperando{min-height:84px;}
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDISEÑO DE LA PORTADA (2026-08-27)
   ───────────────────────────────────────────────────────────────────────────
   Va último del archivo a propósito: más arriba hay una docena de bloques que
   fijan medidas con !important y le ganarían a todo lo que sigue.

   El orden de prioridades es el que pidió el dueño:
     PRIMERA IMPRESIÓN → DESEO → CONFIANZA → CONVERSIÓN.

   Lo que se midió antes de tocar nada, en un celular de 390x844:
     · La primera foto de un destino aparecía recién a 1.081 px de altura:
       había que bajar una pantalla y media para ver una sola foto.
     · El buscador se comía 372 px, el 44% de lo que se ve al entrar.
     · La página entera medía 15.131 px = 18 pantallas.
     · Cada tarjeta medía 655 px y sólo 232 eran foto (35%).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. UN SOLO ANCHO PARA TODA LA PÁGINA ─────────────────────────────────
   En escritorio las secciones usaban cinco anchos distintos (1240, 1100,
   1080, 900 y 780 px) y el margen izquierdo saltaba entre 100, 170, 180 y
   270 px al bajar. El caso más visible era el bloque de preguntas frecuentes:
   780 px de contenido dentro de una franja de 1240, o sea pegado a la
   izquierda con 460 px vacíos a la derecha.
   Ahora hay una sola medida y un solo margen. Lo que cambia de sección a
   sección es el contenido de adentro, no el marco. */
:root{
  --maxw:1180px;   /* ancho máximo del contenido en escritorio */
  --pad:60px;      /* margen lateral mínimo */
  --secy:56px;     /* aire arriba y abajo de cada sección */
}
@media(max-width:960px){ :root{ --pad:24px; --secy:42px; } }
@media(max-width:760px){ :root{ --pad:18px; --secy:34px; } }

body > section,
body > .tband,
body > footer,
body > .search-section,
body > #grupos-sec{        /* lleva su propio padding con id, hay que nombrarlo */
  padding-left:max(var(--pad), calc((100vw - var(--maxw)) / 2))!important;
  padding-right:max(var(--pad), calc((100vw - var(--maxw)) / 2))!important;
}
body > section,
body > .tband,
body > #grupos-sec{ padding-top:var(--secy)!important; padding-bottom:var(--secy)!important; }
/* La franja de confianza tenía su propio ancho de 1.100 px y quedaba 40 px
   más adentro que todo lo demás: se notaba el escalón. */
.tband-row,.tb-pays{ max-width:100%; }
body > .search-section{ padding-top:0!important; padding-bottom:0!important; }
body > footer{ padding-top:calc(var(--secy) - 8px)!important; padding-bottom:18px!important; }
/* Los contenedores internos que tenían su propio ancho: ahora se centran
   dentro del marco común en vez de quedar pegados a la izquierda. */
#faq > div,
#grupos-sec > div{ max-width:100%!important; margin-left:0; margin-right:0; }
/* El formulario de contacto sí se centra: es un bloque suelto y su sección
   tiene el título centrado. */
#contacto .cwrap{ max-width:640px!important; margin-left:auto; margin-right:auto; }
/* Las preguntas arrancan en el mismo borde izquierdo que su título, como
   todas las demás secciones. Lo único que se limita es el ancho de la
   RESPUESTA: un renglón de 1.180 px es incómodo de leer. */
#faq .faq-a{ max-width:78ch; }
/* Mismo criterio para el párrafo de "¿Viajás en grupo?": desde que se fueron
   las dos placas de la derecha, el texto se quedaba con los 1.177 px de ancho
   de la sección y un renglón así no se lee, se barre con la vista. */
#grupos-sec p{ max-width:78ch; }

/* ── 1. LA PORTADA, MÁS CORTA ─────────────────────────────────────────────
   Todo lo que ocupa la portada es altura que la primera foto de destino tarda
   en aparecer. Se recorta al hueso: identidad (el logo del menú), la salida
   más próxima de verdad —destino, fecha y desde cuánto— y dos botones.
   Nada decorativo. */
.hero{ padding-top:86px!important; padding-bottom:16px!important; min-height:auto; }
@media(max-width:960px){ .hero{ padding-top:84px!important; padding-bottom:14px!important; } }
.hero h1{ font-size:clamp(31px,5vw,58px); line-height:1; margin-bottom:2px; }
.hero h1 .sl{ font-size:clamp(35px,5.6vw,66px); }
.hprox{ margin:13px 0 15px; }
/* Los dos botones, en una sola fila. Apilados sumaban 112 px de la primera
   pantalla del celular; en fila son 52. */
.hbtns{ display:flex; flex-direction:row!important; flex-wrap:wrap; gap:10px; }
.hbtns .bp,.hbtns .bg{ width:auto!important; flex:1 1 auto; min-width:140px;
  min-height:52px!important; padding:0 20px!important; font-size:15px!important;
  justify-content:center; }
.bg-wa svg{ width:19px; height:19px; flex:0 0 auto; }
.bg-wa{ color:#fff; gap:9px; }
@media(max-width:760px){
  .hbtns .bp,.hbtns .bg{ min-height:52px!important; padding:0 14px!important; font-size:15px!important; }
  .hero h1{ font-size:clamp(30px,8.4vw,40px); }
  .hero h1 .sl{ font-size:clamp(33px,9.4vw,45px); }
}
/* Debajo de 340 px de ancho los dos botones no entran en una fila. Ahí, y
   sólo ahí, se vuelven a apilar. */
@media(max-width:339px){ .hbtns .bp,.hbtns .bg{ flex:1 1 100%; } }

/* ── 2. EL BUSCADOR, FUERA DE LA PRIMERA PANTALLA EN CELULAR ──────────────
   Se comía 372 px: el 44% de lo que ve alguien que llega de un anuncio, y
   todavía sin haber mostrado una sola foto. Con siete viajes en cartel la
   persona quiere VER, no filtrar.
   En celular queda en un renglón que se toca y se abre; en escritorio, donde
   el espacio sobra, sigue abierto de entrada. */
.sopen{ display:none; }
.sdock{ transform:none; }
@media(min-width:961px){
  .sdock{ transform:translateY(-26px); }
  .sf{ padding:12px 22px; }
}
@media(max-width:960px){
  .search-section{ padding-top:10px!important; padding-bottom:10px!important; }
  .sopen{ display:flex; align-items:center; gap:11px; width:100%;
    min-height:52px; padding:0 16px; border-radius:14px;
    background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
    color:rgba(238,242,249,.9); font-family:'Inter',var(--sans);
    font-size:15px; font-weight:600; text-align:left;
    transition:border-color .2s, background .2s; }
  .sopen:hover{ background:rgba(255,255,255,.09); border-color:rgba(63,203,232,.4); }
  .sopen svg{ width:19px; height:19px; flex:0 0 auto; color:var(--cyan); }
  .sopen-t{ flex:1 1 auto; }
  /* La flechita: gira cuando el buscador está abierto. */
  .sopen-c{ width:10px; height:10px; flex:0 0 auto; border-right:2px solid var(--cyan);
    border-bottom:2px solid var(--cyan); transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s ease; }
  .search-section.abierto .sopen-c{ transform:rotate(-135deg) translate(-3px,-3px); }
  .sdock{ display:none; margin-top:10px; }
  .search-section.abierto .sdock{ display:flex; }
  .sf{ padding:6px 0; }
}

/* ── 3. EL ENCABEZADO DE LOS VIAJES, APRETADO ─────────────────────────────
   Entre el título y los filtros había casi 280 px antes de la primera tarjeta.
   Acá también estaban los estilos del botón "Ver en USD" y del cartelito de la
   cotización (.vhead-usd, #dolar-badge, #btn-usd). Ese botón ya no existe: los
   precios van en pesos, así que las reglas se borraron en vez de dejarlas
   colgadas sin nada que pintar. */
.vhead{ display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:10px 16px; margin-bottom:12px!important; }
#viajes{ padding-top:16px!important; }
.filters{ margin-bottom:16px; }
/* ── LOS FILTROS TIENEN QUE ENTRAR EN LA PANTALLA ─────────────────────────
   Acá los filtros iban en UN renglón que se desliza con el dedo, para
   ahorrarse los 102 px de un segundo renglón. El problema es que la última
   palabra es "Internacionales" y no entra: en un celular de 390 px el botón
   quedaba cortado 22 px y el globito con el número aparecía partido al medio.
   Cortado así no se lee y, salvo que a alguien se le ocurra deslizar una fila
   de botones —que no es un gesto que la gente pruebe—, ese filtro directamente
   no existe.
   Ahora los botones bajan de renglón cuando no entran. Se ven todos enteros
   desde 320 px para arriba, con la cantidad de categorías que haya. Cuesta un
   renglón más de alto en el celular; que un botón se vea entero vale más que
   esos 48 px. */
@media(max-width:760px){
  .filters{ flex-wrap:wrap; margin-bottom:14px; }
  /* Se achica el aire de los costados —nunca la letra— para que en los
     celulares más comunes entren igual de a dos o tres por renglón. */
  .fb{ flex:0 0 auto; padding:0 12px; }
}
/* El número nunca se separa de su etiqueta ni queda partido: el botón entero
   se trata como una sola palabra. */
.fb{ white-space:nowrap; }

/* ═══ 4. LA TARJETA DE DESTINO ════════════════════════════════════════════
   El dueño la llamó "uno de los elementos más atractivos de toda la web", y
   tenía razón: es donde se decide todo. Antes era 35% foto y 65% texto, con
   el mismo dato escrito hasta tres veces (el flyer ya trae impresa la fecha y
   la duración, se las volvíamos a pegar encima en un chip, y abajo se
   escribían por tercera vez).
   Ahora la foto manda, el nombre del destino va encima de la foto, y abajo
   sólo queda lo que hace falta para decidir. Se lee en este orden y sin
   pensar: foto → destino → fecha → qué incluye → precio → botón. */
.tgrid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.tc{ border-radius:20px; overflow:hidden; container-type:inline-size;
  transition:transform .3s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .3s; }
.tc:active{ transform:scale(.985); }

/* La foto: cuadrada. Las portadas que sube el dueño son flyers verticales de
   Instagram (400x500, 400x533, 400x600). Metidas en la caja apaisada que
   había antes se les recortaba entre el 48% y el 61% del alto: en RIO HONDO
   se cortaba el título del flyer arriba y la fila de íconos abajo.
   Cuadrada, y encuadrando hacia arriba, entra casi todo el flyer — y una foto
   apaisada de paisaje, el día que suba una, también se ve bien. */
.tcim{ height:auto!important; aspect-ratio:1/1; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#13234a,#0a1530); }
.tcim img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
/* El degradado tiene que garantizar que el nombre del destino se lea sobre
   CUALQUIER foto, incluso una de nieve o de cielo a pleno sol. */
.tcov{ background:linear-gradient(to bottom,
  rgba(4,8,20,.30) 0%, rgba(4,8,20,0) 26%,
  rgba(4,8,20,.42) 58%, rgba(6,12,28,.93) 100%); }

/* El bloque que va sobre la foto: fecha, destino y —si están cargados— tipo
   y duración. Los tres datos que se miran juntos, juntos. */
.tc-sobre{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 16px 13px; text-align:left; pointer-events:none; }
.tcn{ font-family:'Inter',var(--sans); font-size:21px!important; font-weight:800;
  line-height:1.15; letter-spacing:-.02em; color:#fff; margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.65); }
.tcm{ display:flex; flex-wrap:wrap; align-items:center; gap:0 8px; margin-top:5px;
  font-family:'Inter',var(--sans); font-size:14px; font-weight:600;
  color:rgba(255,255,255,.86); text-shadow:0 1px 8px rgba(0,0,0,.6); }
.tcm-s{ color:rgba(255,255,255,.45); }

/* El chip de fecha. Estaba arriba a la derecha y ahí chocaba con el sello:
   en "SALTA+JUJUY" tapaba media palabra de "MÁS VENDIDO". Ahora va con el
   nombre del destino, que es donde el ojo lo busca. */
.tc-date{ position:static; display:inline-flex; align-items:center; gap:7px;
  margin:0 0 9px; font-family:'Inter',var(--sans)!important; font-size:14px!important;
  font-weight:600; padding:6px 11px; border-radius:10px; letter-spacing:0;
  background:rgba(6,10,24,.72); border:1px solid rgba(255,255,255,.20);
  box-shadow:0 4px 16px rgba(0,0,0,.35); }
.tc-date b{ font-weight:800; color:#fff; }
.tc-date .ic{ width:15px; height:15px; color:var(--cyan); flex:0 0 auto; }
/* El chip de los viajes que todavía no tienen fecha cargada. Mismo lugar y
   mismo tamaño que el de una salida con fecha, pero apagado: se lee que ese
   dato falta y no que la salida es inminente. Sin él, esas tarjetas quedaban
   idénticas a las reservables. */
.tc-date-sf{ background:rgba(6,10,24,.62); border-color:rgba(255,255,255,.14); }
.tc-date-sf b{ color:rgba(255,255,255,.82); font-weight:700; }
.tc-date-sf .ic{ color:rgba(255,255,255,.5); }
.tc-soon{ color:#ffd27a!important; font-weight:700; }
.tcbg{ top:12px; left:12px; }
.badge{ border-radius:8px; padding:6px 11px; font-family:'Inter',var(--sans);
  font-weight:800; letter-spacing:.06em; }
/* El sello "PROMO"/"ÚLTIMOS LUGARES" estaba apoyado en un 10% de blanco
   translúcido: sobre una foto clara la letra casi blanca quedaba en 2,4:1 y
   había que adivinarla (la norma pide 4,5:1). Era el único texto del sitio que
   no llegaba. Ahora el sello lleva fondo propio oscuro, así que se lee igual
   sobre una foto de nieve que sobre una de noche, y sigue viéndose liviano
   porque el fondo es translúcido y el borde finito. */
.bp2{ background:rgba(8,10,20,.74)!important; color:#fff!important;
  border:1px solid rgba(255,255,255,.30)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45); }
/* El sello verde "NUEVO" corría el mismo riesgo sobre una foto clara. */
.bn{ background:rgba(8,10,20,.74)!important; color:#8ff0b4!important;
  border:1px solid rgba(111,227,154,.42)!important; }

/* Cuando la foto no está cargada: una placa tranquila, en vez del rectángulo
   negro con el ícono de imagen rota que se veía en 4 de los 7 viajes
   publicados. El nombre del destino no se repite acá: ya está escrito abajo,
   sobre la misma placa. */
.tcim.sin-foto{ background:
  radial-gradient(ellipse 80% 60% at 50% 38%, rgba(63,203,232,.10), transparent 70%),
  linear-gradient(145deg,#16294f 0%,#0c1a38 55%,#111a3a 100%); }
.tcim-placeholder{ position:absolute; inset:0; height:auto; display:flex;
  align-items:center; justify-content:center; padding:0 0 70px;
  background:none; }
.tcim-placeholder svg{ width:46px; height:46px; color:rgba(63,203,232,.34); }

/* El cuerpo: sólo lo que sirve para decidir. */
.tcb{ padding:14px 16px 16px!important; text-align:left; }
.tc-datos{ display:flex; flex-wrap:wrap; justify-content:flex-start;
  gap:4px 14px; margin:0 0 12px; font-size:14.5px!important;
  color:rgba(234,239,247,.84); }
.tc-datos span{ gap:6px; }
.tc-datos .ic{ width:16px; height:16px; flex:0 0 auto; color:var(--cyan); opacity:.85; }
.tc-avail{ margin:0 0 12px!important; font-size:14px!important; }
.tc-avail .ic{ width:15px; height:15px; flex:0 0 auto; }

/* El pie: precio y botón. Cuando la tarjeta es lo bastante ancha van uno al
   lado del otro (ahorra unos 60 px por tarjeta); cuando es angosta, apilados.
   Se mide el ancho de la TARJETA, no el de la pantalla: así funciona igual de
   bien con una columna en el celular que con tres en el monitor. */
.tcf{ display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:auto; }
@container (min-width:340px){
  .tcf{ flex-direction:row; align-items:center; justify-content:space-between; gap:10px; }
  .tcf-btns{ flex:0 0 auto; }
  /* Y por las dudas, el precio se adapta al ancho real de la tarjeta. */
  .tcp strong{ font-size:clamp(22px, 7.2cqw, 28px)!important; }
}
.tcp{ text-align:left; min-width:0; flex:1 1 auto; line-height:1.2; }
/* Ese "290" salió de medir: un precio de siete cifras ("$1.550.000") pide
   150 px, y con menos ancho de tarjeta el número se cortaba en pantallas de
   360 y 375 px. Con 340 el precio siempre entra entero. */
.tcp small{ display:block; font-family:'Inter',var(--sans)!important; font-size:13px!important;
  font-weight:600; letter-spacing:.01em;
  color:rgba(234,239,247,.62)!important; margin-bottom:1px; }
/* El precio en la tipografía de texto, no en la monoespaciada: se lee mejor y
   deja de parecer la salida de una terminal. */
.tcp strong{ font-family:'Inter',var(--sans)!important; font-size:28px!important;
  font-weight:800; letter-spacing:-.025em; color:var(--amber); display:block;
  font-variant-numeric:tabular-nums; }
/* Antes esta clase se llamaba .tcp-usd porque pintaba el precio en dólares
   debajo del precio en pesos. Ese segundo precio ya no se publica; lo único
   que queda con este estilo es el "Te lo pasamos por WhatsApp" de los viajes
   sin precio cargado, así que la clase pasó a llamarse por lo que hace. */
.tcp-nota,.tcp-cuota{ display:block; font-family:'Inter',var(--sans)!important;
  font-size:13.5px!important; line-height:1.35; margin-top:4px; }
.tcp-nota{ color:rgba(234,239,247,.68); }
.tcp-cuota{ color:var(--amber); font-weight:600; }
/* El total financiado, debajo de la cuota. Se distingue por el color y el
   grosor, NO por el tamaño: el sitio tiene un piso de 15 px para todo el texto
   que se lee (regla ".tcp span" de más arriba, puesta para que lo pueda leer
   gente con la vista cansada) y bajarlo acá lo rompería. La cuota sigue siendo
   lo que engancha —va en ámbar y en negrita— y el total completo queda a la
   vista, en gris, en vez de estar escondido en la ficha del viaje. */
.tcp-tot{ display:block; font-family:'Inter',var(--sans)!important;
  font-weight:500; line-height:1.35; margin-top:3px;
  color:rgba(234,239,247,.62); letter-spacing:0; }
.tc-consultar{ font-size:23px!important; }
.tcf-btns{ display:flex; gap:8px; align-items:stretch; }
/* El botón de la tarjeta sale de MAYÚSCULAS SEPARADAS a texto normal: se lee
   más rápido, ocupa un tercio menos de ancho —ese ancho se lo lleva el precio,
   que es lo que se está mirando— y suena a persona, no a planilla. */
.tcf .bver{ border-radius:12px; font-size:15px!important; font-weight:800;
  min-height:48px!important; text-transform:none; letter-spacing:.005em;
  white-space:nowrap; }
/* El botón se ajusta al texto: cada píxel que no usa es un píxel que le queda
   al precio y a la cuota, que es lo que la persona está mirando. */
.bver-main{ flex:0 0 auto; padding:0 15px!important; }
.bver-share{ flex:0 0 48px; width:48px; padding:0!important;
  background:rgba(37,211,102,.10)!important; border:1px solid rgba(37,211,102,.34)!important;
  color:#25D366!important; }
.bver-share svg{ width:20px; height:20px; }
.bver-share:hover{ background:rgba(37,211,102,.20)!important; }

/* ── 5. LA FRANJA DE CONFIANZA ────────────────────────────────────────────
   Corta, de un vistazo, sin párrafos y sin nada inventado. */
.tb-item{ font-size:15px!important; gap:9px; }
.tb-item .ic{ width:19px; height:19px; flex:0 0 auto; color:var(--cyan); }
.tb-pays{ margin-top:16px; gap:8px 9px; }
.tb-pay{ font-family:'Inter',var(--sans)!important; font-size:14px!important;
  font-weight:600; letter-spacing:.01em; padding:8px 14px; border-radius:10px;
  flex:0 0 auto; }
.tb-pay-ok{ border-color:rgba(111,227,154,.35); color:#6fe39a; }
.tb-lbl{ font-family:'Inter',var(--sans)!important; font-size:13px!important;
  font-weight:700; letter-spacing:.1em; }
/* El enlace a las opiniones de Google. Antes vivía en una sección propia de
   511 px que no tenía una sola opinión adentro, le pedía una reseña a alguien
   que todavía no viajó, y lo mandaba fuera del sitio justo cuando estaba
   decidiendo. Acá abajo, chiquito, hace lo único que tiene que hacer. */
.tb-google{ display:inline-flex; align-items:center; gap:9px; min-height:48px;
  padding:0 16px; border-radius:10px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14); color:rgba(238,242,249,.88);
  font-family:'Inter',var(--sans); font-size:14px; font-weight:600;
  transition:background .2s, border-color .2s; }
.tb-google svg{ width:17px; height:17px; flex:0 0 auto; }
.tb-google:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); }

/* ── 7. LAS FOTOS DE LOS VIAJEROS ─────────────────────────────────────────
   Es la prueba social más fuerte que tiene el sitio y no cuesta nada: son
   fotos reales de grupos reales, ya cargadas. El mosaico era desparejo (una
   foto de 535 px al lado de otra de 265) y en dos de ellas el pie de foto
   quedaba cortado contra el borde derecho. Ahora todas miden lo mismo. */
.ghead{ margin-bottom:20px; }
.ggrid{ grid-template-columns:repeat(4,1fr); gap:12px; }
.gi{ aspect-ratio:1/1; border-radius:14px; }

.gov{ background:rgba(4,8,20,.42); }
.gov svg{ width:26px; height:26px; color:#fff; }
@media(max-width:960px){ .ggrid{ grid-template-columns:repeat(3,1fr); gap:9px; } }
@media(max-width:520px){ .ggrid{ grid-template-columns:repeat(2,1fr); gap:8px; } }
/* La cruz de cerrar la foto ampliada medía 42x48. */
.lb-close{ width:48px!important; height:48px!important; top:16px; right:16px; }

/* ── 8. PRÓXIMAMENTE, EN UNA TIRA ─────────────────────────────────────────
   Ocupaba 1.372 px arriba de la franja de confianza para mostrar tres
   destinos que NO se pueden comprar: no tienen ni fecha ni precio. Ahora es
   una tira que se desliza con el dedo y vive debajo de "Nosotros". */
#proximos .proxgrid{ display:flex; gap:12px; overflow-x:auto;
  scroll-snap-type:x proximity; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  margin-left:calc(var(--pad) * -1); margin-right:calc(var(--pad) * -1);
  padding:2px var(--pad) 6px; }
#proximos .proxgrid::-webkit-scrollbar{ display:none; }
#proximos .proxcard{ flex:0 0 clamp(230px,74vw,290px); scroll-snap-align:start;
  border-radius:16px; }
/* Segunda pasada de compactado: sigue siendo la seccion de los tres destinos
   que NO se pueden comprar, asi que no puede pesar como una que si se vende.
   Media 589 px en un celular de 375: el alto de una pantalla entera. */
#proximos{ padding-top:26px!important; padding-bottom:26px!important; }
#proximos .proxcard img{ height:104px; }
#proximos .proxov{ height:104px; }
#proximos .proxbody{ padding:10px 14px 12px; }
.sub-prox{ margin:0 0 12px; }
/* "Fecha y precio a confirmar" y el botón estaban en la monoespaciada y en
   MAYÚSCULAS SEPARADAS: el botón se partía en dos renglones y medía 100 px de
   alto. En la tipografía de texto entra en uno solo y se lee mejor. */
#proximos .proxnota{ font-family:'Inter',var(--sans)!important; font-size:14px!important;
  letter-spacing:0; margin-bottom:10px; color:rgba(234,239,247,.72); }
#proximos .proxdest{ font-size:17px; line-height:1.3; }
#proximos .banotar{ font-family:'Inter',var(--sans); text-transform:none;
  letter-spacing:.005em; font-size:14.5px!important; font-weight:800;
  border-radius:11px; white-space:nowrap; }

/* ── 9. GRUPOS Y EGRESADOS ────────────────────────────────────────────────
   Eran cuatro tarjetitas; dos de ellas repetían por cuarta y quinta vez los
   medios de pago. Quedan las dos que dicen algo propio de esta sección. */
#grupos-sec > div{ grid-template-columns:1.15fr .85fr!important; gap:34px!important; }
/* (Acá vivían .gcards / .gcard / .gcard-n / .gcard-l: las dos placas de
   "¿Viajás en grupo?" que repetían, a tres centímetros, lo mismo que el
   párrafo de al lado. Se fueron las placas y con ellas sus estilos.) */
@media(max-width:760px){
  #grupos-sec > div{ grid-template-columns:1fr!important; gap:22px!important; }
}

/* ── 10. EL PIE ───────────────────────────────────────────────────────────
   El contenido llegaba hasta x=355 de 1440 px: todo amontonado a la
   izquierda con dos tercios de la pantalla vacíos. */
.fgrid{ grid-template-columns:1.6fr 1fr 1fr 1fr!important; gap:30px 40px!important; }
.fbrand p{ max-width:36ch; }
@media(max-width:760px){ .fgrid{ grid-template-columns:1fr 1fr!important; } }
@media(max-width:420px){ .fgrid{ grid-template-columns:1fr!important; } }

/* ── 11. LO QUE SE TOCA CON EL DEDO ───────────────────────────────────────
   Quedaban trece áreas por debajo de 44 px. Estas son las que faltaban. */
nav a[aria-label]{ min-width:44px!important; min-height:44px!important; }
/* En un celular de 320 px, el logo + los tres íconos de redes + el botón de
   menú sumaban 332 px: el botón de menú quedaba 23 px FUERA de la pantalla y
   el menú no se podía abrir. En pantallas chicas queda sólo WhatsApp arriba
   (que es el que se usa); Instagram y Facebook pasaron adentro del menú, así
   que no se pierde ningún enlace. */
@media(max-width:430px){
  nav a[aria-label="Instagram"], nav a[aria-label="Facebook"]{ display:none!important; }
}
.mm-red{ font-size:15px!important; }

/* ── 12. FEEDBACK AL TOCAR ────────────────────────────────────────────────
   Sutil: la tarjeta y los botones se hunden un poco cuando se los aprieta.
   Es lo que le dice a la persona "sí, te escuché", sobre todo en un celular
   con señal lenta donde la página siguiente tarda un segundo en abrir. */
.bp:active,.bg:active,.bver:active,.fb:active,.obtn:active,
.fvb-wa:active,.fvb-cta:active,.sopen:active,.sgo:active{ transform:scale(.97); }
.gi{ transition:transform .25s ease; }
.gi:active{ transform:scale(.97); }
@media(prefers-reduced-motion:reduce){
  .tc:active,.bp:active,.bg:active,.bver:active,.fb:active,.obtn:active,
  .fvb-wa:active,.fvb-cta:active,.sopen:active,.sgo:active,.gi:active{ transform:none; }
  .hbg-slide.hbg-solo img{ animation:none; }
  .horb{ animation:none; }
}

/* ── 13. LA VENTANA DE RESERVA, DORMIDA ───────────────────────────────────
   Estaba montada y con display:flex desde que carga la página: una capa fija
   del tamaño de la pantalla, con desenfoque, que el navegador tenía que
   mantener viva en todas las visitas aunque nadie fuera a reservar.
   No toca en nada el funcionamiento: sólo la deja invisible de verdad
   mientras está cerrada. */
.res-ov{ visibility:hidden; }
.res-ov.open{ visibility:visible; }

/* ── 14. LA BARRA FIJA DE ABAJO ───────────────────────────────────────────
   Es lo que acompaña a la persona todo el scroll en el celular, así que tiene
   que verse como el resto del sitio: la tipografía de texto en vez de la
   monoespaciada (que hacía ver el precio como la salida de una terminal) y el
   dibujo de WhatsApp en vez del emoji del globito. */
.fv-bar-p small{ font-family:'Inter',var(--sans)!important; font-size:13px!important;
  font-weight:600; letter-spacing:.07em; }
.fv-bar-p span{ font-family:'Inter',var(--sans)!important; font-size:14px!important; }
.fvb-wa svg{ width:18px; height:18px; flex:0 0 auto; }
.fvb-wa{ gap:8px; }

/* ── 15. LOS BOTONES DE LA PORTADA EN ESCRITORIO ──────────────────────────
   En un monitor ancho no tienen por qué medir 280 px cada uno: se ajustan al
   texto. En celular siguen repartiéndose el ancho, que ahí sí hace falta. */
@media(min-width:961px){
  .hbtns .bp,.hbtns .bg{ flex:0 0 auto; min-width:0; padding:0 30px!important; }
}

/* ── 16. LAS TARJETAS FANTASMA ────────────────────────────────────────────
   Tienen que medir lo MISMO que la tarjeta de verdad, si no, al llegar los
   viajes todo lo de abajo pega un salto y la gente toca el botón equivocado.
   Con el rediseño la tarjeta pasó de 655 px a unos 500 (medido en 320, 360,
   375, 390, 414 y 768 px: entre 488 y 560). */
.tc-skel{ height:550px; }
@media(min-width:961px){ .tc-skel{ height:550px; } }
/* (Re-medido después de sumarle a la tarjeta el total financiado debajo de la
   cuota: ahora va de 526 a 581 px segun el ancho —320, 360, 390, 414, 768,
   1024, 1440 y 1920—, así que el hueco reservado pasa de 505 a 550. Con 505
   quedaba corto en todos los anchos.) */

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECCIONES DE LA REVISIÓN (2026-08-27)
   Va al final del archivo a propósito: más arriba hay bloques que fijan
   medidas con !important y le ganarían a todo lo que sigue.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Renglón de confianza, pegado abajo de la portada ──────────────────────
   La persona que llega de un anuncio se pregunta "¿serán confiables?" en la
   primera pantalla, no en la sexta. Esto es un renglón fino, no una franja:
   no puede empujar la primera foto de destino fuera de la vista.
   En celular los datos van uno abajo del otro (leer tres cosas separadas por
   puntos en un renglón de 375 px es imposible); en PC van en fila. */
.hconf{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px;
  /* El margen lateral es EL MISMO que el de todas las secciones: sale de las
     variables --pad y --maxw que definen el marco único de la página. Con un
     ancho propio quedaba 51 px corrido respecto del título y del buscador, y
     el escalón se veía. */
  padding-left:max(var(--pad), calc((100vw - var(--maxw)) / 2));
  padding-right:max(var(--pad), calc((100vw - var(--maxw)) / 2));
  padding-top:14px; padding-bottom:4px; margin:0;
  font-family:'Inter',var(--sans); font-size:15px; line-height:1.45;
  color:rgba(234,239,247,.74); }
.hconf-i{ display:inline-flex; align-items:center; gap:8px; }
.hconf-i b{ color:#fff; font-weight:700; }
.hconf .ic{ width:17px; height:17px; flex:0 0 auto; color:var(--cyan); }
@media(min-width:961px){
  .hconf{ padding-top:16px; padding-bottom:0; gap:10px 30px; }
}
/* En un celular los tres datos separados por puntos en un solo renglón no se
   leen: van uno abajo del otro. */
@media(max-width:520px){
  .hconf{ flex-direction:column; align-items:flex-start; gap:7px;
    padding-top:12px; padding-bottom:2px; }
}

/* ── El bloque "Quién viaja" del formulario de reserva ─────────────────────
   El DNI y la fecha de nacimiento bajaron acá desde arriba de todo. Se
   agrupan y se encuadran para que se lea como una sola pregunta ("¿quién
   viaja?") y no como un interrogatorio suelto. */
.rdoc{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:14px 14px 4px; margin:4px 0 16px; }
.rdoc-t{ font-family:'Inter',var(--sans); font-size:14px; font-weight:800;
  letter-spacing:.02em; color:var(--wh); margin-bottom:4px; }
/* Prose y rótulos siguen el piso de lectura del sitio: 15 px lo que se lee,
   13 px los rótulos en mayúscula. */
.rdoc-p{ font-size:15px; line-height:1.6; color:rgba(234,239,247,.62);
  margin:0 0 12px; }
.rdoc-n{ font-weight:700; color:rgba(234,239,247,.62); letter-spacing:0; }
.rdoc-p1{ font-family:'Inter',var(--sans); font-size:14px; font-weight:800;
  letter-spacing:.01em; color:var(--amber);
  margin-bottom:9px; }

/* ── GRUPOS GRANDES: SABER SIEMPRE EN QUÉ PASAJERO SE ESTÁ ─────────────────
   El tope de pasajeros es 20 y ahí el paso 1 mide más de 10.000 px: doce
   pantallas de campos idénticos, cuatro por pasajero. Sin un rótulo a la
   vista, después del séptimo bloque no hay manera de saber en cuál se está ni
   cuántos faltan; y si se scrolleaba para arriba a fijarse, había que volver
   a buscar el campo.
   El rótulo de cada pasajero queda pegado (sticky) justo debajo de la
   cabecera del formulario mientras se cargan SUS campos, y dice "de cuántos".
   El --rhdr-h lo mide y lo escribe ajustarPegado(), porque la cabecera crece
   cuando aparece el renglón de "faltan N datos". */
.paxblk{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:12px; margin-bottom:10px; }
.paxblk-t{ position:sticky; top:var(--rhdr-h, 52px); z-index:4;
  font-family:'Inter',var(--sans); font-size:14px; font-weight:800;
  color:var(--amber);
  /* Opaco a propósito: el rótulo tiene que tapar los campos que le pasan por
     debajo. Es el color que se ve hoy en ese lugar (--void3 con los dos 3% de
     blanco de .rdoc y .paxblk ya resueltos), así que no se nota ninguna
     franja: el bloque sigue pareciendo del mismo color. */
  background:#213055;
  margin:-12px -12px 10px; padding:10px 12px 8px;
  border-radius:8px 8px 0 0; border-bottom:1px solid rgba(255,255,255,.07); }
.paxblk-de{ font-weight:700; color:rgba(234,239,247,.55); }

/* Aviso de descuento grupal adentro del formulario. */
.grp-av{ background:rgba(212,146,42,.10); border:1px solid rgba(240,169,43,.34);
  border-radius:12px; padding:12px 14px; margin-bottom:14px;
  font-size:15px; line-height:1.6; color:rgba(234,239,247,.86); }
.grp-av b{ color:var(--amber); font-weight:800; }
.grp-av a{ display:inline-block; margin-top:6px; color:var(--amber);
  font-weight:800; text-decoration:none; }
.grp-av a:hover{ text-decoration:underline; }

/* El rótulo del precio en el paso 1 dice "Precio por persona"; cuando son
   varios pasajeros, la cuenta hecha va en un segundo renglón. Antes ese
   rótulo decía "Total a pagar" arriba de un precio unitario. */
.vpl{ line-height:1.35; }
.vpl-tot{ display:block; margin-top:3px; font-family:'Inter',var(--sans);
  font-weight:700; letter-spacing:.01em;
  text-transform:none; color:var(--amber); }

/* ── "¿Cerrás la reserva?" ────────────────────────────────────────────────
   La ✕ del formulario mide 48x48 y está arriba a la derecha, justo donde
   apoya el pulgar en el celular: con 6 pasajeros son 27 campos que se iban de
   un toque. Ahora se pregunta antes, y con un cartel del sitio —no uno gris
   del navegador, que es lo que más cara de programa interno tiene. */
.rconf{ position:fixed; inset:0; z-index:420; background:rgba(4,3,10,.78);
  display:flex; align-items:center; justify-content:center; padding:20px; }
.rconf-box{ background:var(--void3); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:24px 20px; width:100%; max-width:400px;
  text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.rconf-t{ font-family:var(--sans); font-size:19px; font-weight:800;
  letter-spacing:-.02em; margin-bottom:8px; }
.rconf-p{ font-family:'Inter',var(--sans); font-size:14px; line-height:1.6;
  color:rgba(234,239,247,.7); margin-bottom:18px; }
.rconf-btns{ display:flex; gap:10px; }
.rconf-btns .bs,.rconf-btns .bp{ flex:1; justify-content:center;
  font-size:14px; padding:13px; min-height:48px; cursor:pointer; }
@media(max-width:520px){ .rconf-btns{ flex-direction:column; } }

/* Cuando el dueño apaga el descuento por grupo (lo pone en 0), estos tres
   bloques se esconden: el párrafo de la sección de grupos, la tarjeta del
   porcentaje y la pregunta frecuente. Lo hace pintarConfigTextos(). */