/* ═══════════════════════════════════════════════════════════════════════════
   LA WEB PÚBLICA DE CORRECAMINOS (/web/ y la raíz de correcaminos.co)
   Nació el 03-oct-2026 como «opción A»; desde el 06-oct es la única cara.
   Bricolage Grotesque / Hanken Grotesk / DM Mono.

   LOS COLORES SON LOS DE CORRECAMINOS (04-oct-2026, el dueño: «usar más los
   colores de CorreCaminos, verde y rojo en un fondo oscuro… sin saturar»). Para
   no saturar, cada color tiene UN oficio: el ROJO es la acción (botones de
   cotizar y reservar, lo elegido, los sellos) y el VERDE es la marca (rótulos,
   la palabra destacada, lo que está activo). El oscuro es el asfalto de la
   marca. Son los mismos valores de estilo.css: no hay una segunda paleta.
   Desde el 12-oct los dos colores nombran además los dos tipos de salida: el
   marco VERDE es un pasadía y el marco ROJO es un paquete.

   12-oct-2026 — REDISEÑO (ver la cabecera de opcion-a.js): una sola barra, la
   portada con el logo grande, las salidas por tipo, el globo del mundo y la
   galería en órbita. La página usa más ancho: el contenido llega a 1680 px.

   Se carga DESPUÉS de estilo.css sobre la misma página: esconde la portada
   de siempre y deja vivos sus modales (ficha, reserva, cotizador, acceso),
   que se visten con las variables de abajo.
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-opcion="a"]{
  --oa-tinta:#1C1C1B; --oa-noche:#121211; --oa-bosque:#2B2B29; --oa-selva:#2C8C76;
  --oa-papel:#F7F3EC; --oa-linea:#E4DCCF; --oa-gris:#5C5A55; --oa-niebla:#B9B6AE; --oa-claro:#DCD9D2;
  --oa-rojo:#E6276F; --oa-verde:#3FB499;
  --oa-display:'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --oa-cuerpo:'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --oa-mono:'DM Mono', ui-monospace, Menlo, monospace;
  /* Lo que mide la barra de arriba mientras está pegada: lo que hay que dejar libre al saltar a una sección. */
  --oa-nav-alto:84px; --oa-lado:clamp(18px, 3.6vw, 64px);
  /* Los modales de siempre, con esta piel. */
  /* Los colores de los modales ya son los de la marca (estilo.css): aquí solo cambia la forma. */
  --papel:#FFFFFF; --trazo:1.5px; --pega:0 26px 50px -30px rgba(18,18,17,.55); --rodondo:22px;
  --display:'Bricolage Grotesque', 'Trebuchet MS', sans-serif; --cuerpo:'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
}
html[data-opcion="a"] body{background:var(--oa-papel)}
html[data-opcion="a"] body > header, html[data-opcion="a"] body > main, html[data-opcion="a"] body > footer,
html[data-opcion="a"] body > .puerta-fija{display:none !important}
/* El WhatsApp flotante de la portada de siempre (`.wa`) se queda a la vista: es la
   puerta por la que más clientes escriben, y el diseño no traía una. */
html[data-opcion="a"] .btn{border-radius:999px}
html[data-opcion="a"] .modal-velo{background:rgba(18,18,17,.62)}

#opc{color:var(--oa-tinta); font-family:var(--oa-cuerpo); font-size:16px; line-height:1.5; overflow-x:clip; width:100%}
/* Con :where(#opc) estos reseteos no pesan más que una etiqueta: los resultados del
   buscador (viaje.js), que desde el 13-oct viven dentro de #opc, conservan su estilo. */
:where(#opc) a{color:inherit; text-decoration:none}
:where(#opc) a:hover{opacity:.86}
:where(#opc) button, :where(#opc) select{font:inherit}
:where(#opc) em{font-style:normal}
#opc [hidden]{display:none !important}
#opc :focus-visible{outline:3px solid #2F6BFF; outline-offset:3px}
#opc .i{flex:none}
#opc .i--trazo{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
#opc .i--lleno{fill:currentColor}
:where(#opc) h1, :where(#opc) h2, :where(#opc) h3{font-family:var(--oa-display); margin:0}
:where(#opc) p{margin:0}
/* Saltar a una sección no la deja debajo de la barra pegada arriba. */
#opc section, #opc .oa-pase{scroll-margin-top:calc(var(--oa-nav-alto) + 10px)}
/* 12-oct (el dueño): «ampliemos el ancho de página usado, reducimos los márgenes
   laterales y aprovechamos más el espacio horizontal». Era 1320 px con 40 de margen;
   pasó a 1680. 13-oct: «quedó demasiado ancha, solo un poquito menos»: 1560 y un
   margen lateral algo mayor. */
.oa-cont{max-width:1560px; margin:0 auto; padding:0 var(--oa-lado); box-sizing:border-box}
.oa-mono{font-family:var(--oa-mono)}
.oa-ph{background-image:linear-gradient(135deg,rgba(255,255,255,.07) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.07) 75%,transparent 75%); background-size:28px 28px}
.oa-vid{animation:oa-drift 5s linear infinite}
.oa-lift{transition:transform .25s ease}
.oa-lift:hover{transform:translateY(-4px)}
@keyframes oa-drift{from{background-position:0 0}to{background-position:28px 0}}
.oa-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* ── La barra (12-oct-2026) ──
   Una sola, gruesa y pegada arriba: a la izquierda la agencia con su RNT y el
   WhatsApp, al centro los atajos a las secciones, a la derecha los accesos. */
/* 2-nov-2026 (el dueño: «revisar sobreposición de navbar»): el fondo era 97 % opaco y, al bajar,
   asomaban por debajo los textos de las secciones (la fecha del buscador, las pestañas Hoteles,
   Vuelos, Tours). Ahora es opaco. Y lo que en una sección lleva un z-index alto (las flechas de la
   galería, 60) queda encerrado en su sección con `isolation`: ya no pasa por encima de la barra. */
.oa-cab{position:sticky; top:0; z-index:50; background:#121211; color:#FFFFFF; box-shadow:0 1px 0 rgba(255,255,255,.1), 0 18px 30px -24px rgba(0,0,0,.9)}
.oa-cab .oa-cont{min-height:var(--oa-nav-alto); display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:0 24px}
.oa-cab__ag{display:flex; align-items:center; gap:12px; min-width:0}
.oa-cab__sello{width:46px; height:46px; border-radius:999px; background:var(--oa-verde); color:var(--oa-tinta); display:grid; place-items:center; flex:none}
.oa-cab__sello .i{width:25px; height:25px; stroke-width:2}
.oa-cab__t{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.oa-cab__t small{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--oa-verde); white-space:nowrap}
.oa-cab__t b{font-family:var(--oa-display); font-size:20px; font-weight:700; white-space:nowrap}
/* 2-nov-2026 (el dueño: «revisar sobreposición de navbar»): a 1366 el rótulo «Tu agencia de viajes»
   pasaba por debajo del botón de WhatsApp. Si no cabe, se corta con «…»; el botón no se encoge. */
.oa-cab__t small, .oa-cab__t b{overflow:hidden; text-overflow:ellipsis}
.oa-cab__wa{flex:none}
/* 15-oct-2026: el número siempre con el logo real de WhatsApp, en su verde. */
.oa-cab__wa{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-left:8px; padding:0 16px 0 12px; border-radius:999px; background:#25D366; color:#FFFFFF; font-weight:800; font-size:15.5px; white-space:nowrap; box-shadow:0 4px 16px -6px rgba(37,211,102,.7); transition:transform .15s ease, box-shadow .15s ease}
#opc .oa-cab__wa:hover{opacity:1; transform:translateY(-1px); box-shadow:0 8px 22px -6px rgba(37,211,102,.85)}
.oa-cab__wa .i{width:21px; height:21px; color:#FFFFFF}
#opc .i--wa{flex:none}
.oa-nav{display:flex; justify-content:center; gap:4px}
.oa-nav a{display:inline-flex; align-items:center; min-height:46px; padding:0 18px; border-radius:999px; font-size:16px; font-weight:600; color:#ECE9E2; white-space:nowrap; transition:background .15s ease, color .15s ease}
#opc .oa-nav a:hover{opacity:1; background:rgba(255,255,255,.12)}
#opc .oa-nav a[aria-current="true"]{background:#FFFFFF; color:var(--oa-tinta)}
.oa-nav__c{display:none}
.oa-accesos{display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0}
/* «Mi cuenta»: la puerta del cliente (6-oct-2026, el dueño: «más grande,
   visible, moderno y bonito… con un mensaje más explícito; es donde los clientes
   entrarán a su cuenta y verán sus pagos, reservas»). Un bloque macizo en el verde
   de marca, con dos renglones: el QUÉ y el PARA QUÉ. Relleno, no contorno: en la
   barra oscura todo lo demás va perfilado, así que lo macizo es lo que destaca. */
/* 15-oct-2026 (el dueño): «Ya soy cliente / Mi cuenta», con icono y llamativo: el icono en su
   disco blanco, el renglón chico arriba y «Mi cuenta» grande; un brillo que cruza de vez en cuando. */
#opc .oa-cuenta{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:11px; min-height:54px;
  padding:5px 8px 5px 6px; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--oa-cuerpo); color:var(--oa-tinta); background:linear-gradient(135deg, #5CD3B3 0%, var(--oa-verde) 55%, #2E9C83 100%);
  box-shadow:0 2px 14px rgba(63,180,153,.34), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
#opc .oa-cuenta::after{content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation:oa-brillo 5.5s ease-in-out infinite; pointer-events:none}
@keyframes oa-brillo{0%, 70%{left:-60%} 100%{left:130%}}
@media (prefers-reduced-motion:reduce){ #opc .oa-cuenta::after{animation:none; display:none} }
#opc .oa-cuenta:hover, #opc .oa-cuenta:focus-visible{transform:translateY(-1px); box-shadow:0 6px 22px rgba(63,180,153,.5); filter:saturate(1.08)}
.oa-cuenta__ic{width:42px; height:42px; border-radius:999px; background:#FFFFFF; color:#1F7A63; display:grid; place-items:center; flex:none; box-shadow:0 2px 6px rgba(18,18,17,.18)}
.oa-cuenta__ic .i{width:22px; height:22px; stroke-width:2.2}
.oa-cuenta__t{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; text-align:left}
.oa-cuenta__t b{font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap}
.oa-cuenta__t small{font-family:var(--oa-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; opacity:.78; white-space:nowrap}
/* La flecha en su propio disco: dice «esto te lleva a otro sitio» sin una palabra más. */
.oa-cuenta__f{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:999px; background:rgba(28,28,27,.13); flex:none}
.oa-cuenta__f svg{width:15px; height:15px}
/* El asesor se queda pequeño a su lado: lo usan tres personas, no los clientes. */
/* 15-oct-2026: «Soy asesor», con fondo e icono (sigue más bajo que la puerta del cliente). */
#opc .oa-acceso--asesor{display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 15px 0 12px; border-radius:999px;
  border:0; background:#6F62C9; color:#FFFFFF; cursor:pointer; box-shadow:0 4px 14px -6px rgba(111,98,201,.8);
  font-family:var(--oa-cuerpo); font-size:14px; font-weight:800; white-space:nowrap; transition:background .15s ease, transform .15s ease}
#opc .oa-acceso--asesor .i{width:19px; height:19px; stroke-width:2.1}
#opc .oa-acceso--asesor:hover, #opc .oa-acceso--asesor:focus-visible{background:#8275DB; transform:translateY(-1px)}

/* ── Botones ── */
.oa-pil{background:var(--oa-rojo); color:#FFFFFF !important; padding:0 22px; min-height:46px; border-radius:999px; font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer}
.oa-pil .i{width:18px; height:18px}
.oa-pil--xl{padding:0 30px; min-height:58px; font-size:18px; gap:10px}
.oa-pil--oscura{background:var(--oa-tinta); color:#FFFFFF !important}
.oa-lin{color:#FFFFFF !important; padding:0 24px; min-height:54px; border-radius:999px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); font-weight:600; font-size:17px; display:inline-flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer}
.oa-lin .i{width:16px; height:16px}
.oa-lin--xl{padding:0 26px; min-height:58px; font-size:18px}
.oa-lin--xl .i{width:20px; height:20px; stroke-width:2}
.oa-botones{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.oa-ceja{font-family:var(--oa-mono); font-size:13px; letter-spacing:.1em; color:var(--oa-verde); text-transform:uppercase}
.oa-ceja--tinta{color:var(--oa-tinta)}
.oa-rot{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.1em; color:var(--oa-niebla); display:block}
/* Las flechas redondas del óvalo y de la galería. */
#opc .oa-flecha{position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:52px; height:52px; border:0; border-radius:999px; padding:0;
  background:rgba(28,28,27,.72); color:#FFFFFF; cursor:pointer; display:grid; place-items:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.55); transition:background .15s ease, transform .15s ease}
#opc .oa-flecha:hover, #opc .oa-flecha:focus-visible{background:var(--oa-rojo); color:#FFFFFF; transform:translateY(-50%) scale(1.06)}

/* ── Portada ── */
.oa-hero{background-color:var(--oa-tinta); background-image:repeating-radial-gradient(circle at 80% 44%, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 46px); color:#FFFFFF; padding:clamp(18px, 1.5vw, 26px) 0 clamp(24px, 1.8vw, 30px)}
.oa-hero__fila{display:flex; flex-wrap:wrap; align-items:center; gap:36px clamp(32px, 5vw, 96px)}
.oa-hero__txt{flex:1 1 520px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px, 1.6vw, 24px)}
/* 12-oct (el dueño): «el logo va muy grande». El dibujo trae aire transparente
   alrededor: los márgenes negativos lo descuentan para que el logo quede a ras
   del título. El contorno claro es el de una calcomanía: sin él, lo que el logo
   tiene en negro (el borde, «tours & servicios») se pierde sobre el fondo oscuro. */
.oa-hero__logo{--oa-logo:clamp(250px, min(30vw, 60vh), 540px); width:var(--oa-logo); height:auto; aspect-ratio:auto 16 / 9; display:block;
  margin:calc(var(--oa-logo) * -.035) 0 calc(var(--oa-logo) * -.03) calc(var(--oa-logo) * -.085);
  filter:drop-shadow(0 0 1.2px #FFFFFF) drop-shadow(0 0 1.2px #FFFFFF) drop-shadow(0 18px 28px rgba(0,0,0,.5))}
.oa-hero__marca{display:flex; flex-direction:column; line-height:1.05}
.oa-hero__marca b{font-family:var(--oa-display); font-weight:800; font-size:clamp(40px, 5vw, 76px); color:var(--oa-verde)}
.oa-hero__marca small{font-family:var(--oa-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--oa-niebla)}
#opc .oa-hero h1{font-weight:700; font-size:clamp(40px, 4.7vw, 86px); line-height:.98; letter-spacing:-.02em; text-wrap:balance}
.oa-hero h1 span{color:var(--oa-verde)}
/* 15-oct-2026: la cifra del abono es la que engancha: va en el rojo de marca, subrayada a mano. */
.oa-hero h1 em{font-style:normal; color:#FFFFFF; white-space:nowrap; background:linear-gradient(transparent 68%, rgba(230,39,111,.85) 68%, rgba(230,39,111,.85) 90%, transparent 90%)}
.oa-hero__p{max-width:580px; font-size:clamp(17px, 1.25vw, 20px); line-height:1.55; color:var(--oa-claro); text-wrap:pretty}
/* El lienzo (04-oct-2026, el dueño: «agranda el canva de la portada circular y
   que ahí se puedan incrustar videos o imágenes»). Es un visor: rota las fotos y
   videos de «Portada · el óvalo». La altura sale del ancho (aspect-ratio), así no
   hay un alto fijo que corregir en el celular; y el ancho se contiene con el alto
   de la pantalla para que la portada ENTERA —barra, óvalo y los cinco datos de la
   agencia— quepa en la primera vista de un computador (272 px = todo lo demás). */
.oa-ovalo{flex:0 1 clamp(340px, 36vw, 620px); min-width:0; margin:0 auto; width:100%; max-width:min(620px, max(340px, calc((100vh - 272px) * 56 / 66)))}
.oa-ovalo__marco{position:relative; margin-bottom:20px}
.oa-ovalo__m{position:relative; aspect-ratio:56 / 66; border-radius:999px; background-color:var(--oa-selva); border:12px solid var(--oa-bosque); box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 40px 70px -30px rgba(0,0,0,.7); box-sizing:border-box; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:40px; text-align:center}
.oa-ovalo__m p{position:relative; font-family:var(--oa-mono); font-size:12px; letter-spacing:.04em; line-height:1.6; max-width:240px}
.oa-sello{position:absolute; top:6px; left:-18px; z-index:3; width:116px; height:116px; border-radius:999px; background:var(--oa-rojo); color:#FFFFFF; transform:rotate(-12deg); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--oa-mono); font-weight:500; font-size:12px; line-height:1.35; letter-spacing:.06em; box-shadow:0 14px 28px -12px rgba(0,0,0,.6); text-transform:uppercase; pointer-events:none}
.oa-ovalo__marco .oa-flecha--izq{left:-6px}
.oa-ovalo__marco .oa-flecha--der{right:-6px}
/* Las láminas van apiladas: sin esto, la ÚLTIMA —invisible, pero encima— recibía
   el toque y «tocar la foto» llevaba siempre al último plan, no al que se veía. */
.oa-lam{position:absolute; inset:0; opacity:0; transition:opacity .9s ease; pointer-events:none}
.oa-lam--on{opacity:1; z-index:1; pointer-events:auto; cursor:zoom-in}
/* La config del espacio «opcion_a.lienzo» de la galería (06-oct-2026): efecto y ajuste. */
.oa-ovalo__m[data-efecto="deslizar"] .oa-lam{transform:translateX(9%); transition:opacity .9s ease, transform .9s ease}
.oa-ovalo__m[data-efecto="deslizar"] .oa-lam--on{transform:none}
.oa-ovalo__m[data-efecto="zoom"] .oa-lam--on img.oa-foto{animation:oa-zoom var(--oa-seg, 5500ms) ease-out both}
.oa-ovalo__m[data-efecto="ninguno"] .oa-lam{transition:none}
@keyframes oa-zoom{from{transform:scale(1)}to{transform:scale(1.09)}}
#opc [data-ajuste="contener"] .oa-foto{object-fit:contain}
/* Al pie del óvalo, montados sobre su borde: el nombre de la pieza y el sonido.
   No ocupan fila: que haya o no botón (una foto no tiene sonido) no mueve nada. */
.oa-ovalo__ctl{position:absolute; left:50%; bottom:-18px; z-index:4; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; font-family:var(--oa-mono); font-size:12px; letter-spacing:.06em; color:#FFFFFF; text-transform:uppercase}
.oa-ovalo__ctl > span{display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border-radius:999px; background:rgba(18,18,17,.9); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2); max-width:46vw; overflow:hidden; text-overflow:ellipsis}
#opc .oa-sonido{display:inline-flex; align-items:center; gap:9px; min-height:42px; padding:0 18px; border:0; border-radius:999px; background:rgba(18,18,17,.92); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4), 0 10px 22px -10px rgba(0,0,0,.8); color:#FFFFFF; font-family:var(--oa-mono); font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; transition:box-shadow .15s ease, color .15s ease}
.oa-sonido .i{width:17px; height:17px; stroke-width:2}
#opc .oa-sonido[data-estado="suena"]{box-shadow:inset 0 0 0 1.5px var(--oa-verde), 0 10px 22px -10px rgba(0,0,0,.8); color:var(--oa-verde)}
/* El navegador no dejó arrancar con sonido: el botón late para decir «tócame». */
#opc .oa-sonido[data-estado="espera"]{box-shadow:inset 0 0 0 1.5px var(--oa-rojo); animation:oa-late 1.8s ease-in-out infinite}
@keyframes oa-late{50%{box-shadow:inset 0 0 0 1.5px var(--oa-rojo), 0 0 0 7px rgba(230,39,111,.22)}}
@media (max-width:1400px){
  .oa-sello{width:98px; height:98px; font-size:10.5px}
}
@media (max-width:520px){
  .oa-sello{left:-4px}
  #opc .oa-flecha{width:44px; height:44px}
}

/* ── Los cinco datos de la agencia, en la línea inferior de la portada ── */
.oa-datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(172px, 100%), 1fr)); gap:18px 28px; margin-top:clamp(20px, 1.5vw, 26px)}
.oa-datos__i{display:flex; flex-direction:column; gap:4px; padding-top:14px; border-top:1px solid rgba(255,255,255,.22); min-width:0}
.oa-datos__i .oa-rot{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--oa-verde)}
.oa-datos__i b{font-family:var(--oa-display); font-size:clamp(20px, 1.9vw, 27px); font-weight:700; color:#FFFFFF; line-height:1.1}
.oa-datos__i span:last-child{font-size:14px; color:var(--oa-niebla)}
@media (max-width:560px){
  .oa-datos{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 18px}
  .oa-datos__i b{font-size:19px}
  .oa-datos__i span:last-child{font-size:13px}
}

/* ── Secciones ── */
.oa-sec{padding:clamp(64px, 7vw, 96px) 0}
.oa-sec--noche{background:var(--oa-tinta); color:#FFFFFF}
.oa-sec__col{display:flex; flex-direction:column; gap:40px}
.oa-tit{display:flex; flex-wrap:wrap; gap:16px 48px; justify-content:space-between; align-items:flex-end}
.oa-tit > div:first-child{display:flex; flex-direction:column; gap:14px; flex:1 1 480px; min-width:0}
#opc .oa-tit h2, #opc .oa-h2{font-weight:700; font-size:clamp(36px, 4.4vw, 66px); line-height:1.02; letter-spacing:-.02em}
.oa-tit__p{flex:0 1 440px; font-size:17px; color:var(--oa-claro); text-wrap:pretty}
.oa-tit__p--tinta{color:var(--oa-gris)}

/* ── Nuestras próximas salidas ──
   12-oct (el dueño): «primero los pasadías… y debajo los paquetes, en tarjetas
   también, pero los pasadías su marco de un color, y los paquetes de otro». El
   color del grupo (`--oa-marco`) pinta su raya, su marco y su etiqueta. */
.oa-desc{color:var(--oa-tinta) !important; padding:0 22px; min-height:50px; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--oa-tinta); font-weight:600; font-size:15.5px; display:inline-flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer}
.oa-desc .i{width:18px; height:18px; stroke-width:2}
.oa-filtros{display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center}
.oa-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.oa-chips > span{font-size:15px; color:var(--oa-gris)}
.oa-chips button{border:0; border-radius:999px; min-height:44px; padding:0 16px; font-weight:600; font-size:15px; color:var(--oa-tinta); cursor:pointer; background:#FFFFFF; box-shadow:inset 0 0 0 1px #C3CBBF}
.oa-chips button[aria-pressed="true"]{background:var(--oa-verde); box-shadow:inset 0 0 0 2px var(--oa-tinta)}
.oa-cat{display:flex; flex-wrap:wrap; gap:32px clamp(24px, 3vw, 48px); align-items:flex-start}
.oa-grupos{flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:40px}
.oa-grupo{--oa-marco:var(--oa-verde); display:flex; flex-direction:column; gap:18px}
.oa-grupo--paquete{--oa-marco:var(--oa-rojo)}
.oa-grupo__cab{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding-bottom:12px; border-bottom:3px solid var(--oa-marco)}
.oa-grupo__ic{width:40px; height:40px; border-radius:999px; background:var(--oa-marco); color:var(--oa-tinta); display:grid; place-items:center; flex:none}
.oa-grupo--paquete .oa-grupo__ic{color:#FFFFFF}
.oa-grupo__ic .i{width:21px; height:21px; stroke-width:2}
#opc .oa-grupo__cab h3{font-weight:700; font-size:clamp(24px, 2.2vw, 32px); line-height:1.1; letter-spacing:-.01em}
.oa-grupo__cab small{font-size:15px; color:var(--oa-gris)}
.oa-grupo__cab em{margin-left:auto; font-family:var(--oa-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--oa-gris)}
/* 20-oct-2026: «que quepan aunque sea 4 por fila» → 200 px de mínimo y menos aire. */
.oa-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap:16px}
.oa-grid{align-items:start}
.oa-grid--pilas{display:flex; gap:16px; align-items:flex-start}
.oa-pila{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:16px}
.oa-card{background:#FFFFFF; border-radius:18px; box-shadow:0 0 0 2.5px var(--oa-marco, var(--oa-linea)); overflow:hidden; display:flex; flex-direction:column; cursor:pointer}
.oa-card[data-sel="1"]{box-shadow:0 0 0 5px var(--oa-marco, var(--oa-tinta)), 0 26px 38px -22px rgba(28,28,27,.6)}
.oa-card__f{position:relative; height:132px; padding:11px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; color:#FFFFFF; overflow:hidden}
.oa-card__f > *{position:relative}
.oa-card__f > .oa-foto{position:absolute}
.oa-et{display:inline-flex; align-items:center; gap:7px; background:#FFFFFF; color:var(--oa-tinta); border-radius:999px; padding:6px 12px; font-family:var(--oa-mono); font-size:11.5px; font-weight:500; letter-spacing:.06em}
.oa-et .i{width:14px; height:14px; stroke-width:2}
.oa-grupo--pasadia .oa-et{background:var(--oa-verde); color:var(--oa-tinta)}
.oa-grupo--paquete .oa-et{background:var(--oa-rojo); color:#FFFFFF}
.oa-card__urg{display:flex; flex-wrap:wrap; gap:6px}
.oa-card__cupo{font-family:var(--oa-mono); font-size:10.5px; letter-spacing:.03em; background:rgba(18,18,17,.72); border-radius:999px; padding:4px 9px}
.oa-card__c{padding:13px 14px 14px; display:flex; flex-direction:column; gap:7px; flex:1}
#opc .oa-card h3{font-weight:700; font-size:17px; line-height:1.18; letter-spacing:-.01em}
.oa-card__c p{font-size:13px; line-height:1.4; color:var(--oa-gris); text-wrap:pretty; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.oa-card__m{font-family:var(--oa-mono); font-size:11px; letter-spacing:.02em; color:var(--oa-gris)}
.oa-card__pie{margin-top:auto; padding-top:10px; border-top:1px solid var(--oa-linea); display:flex; flex-direction:column; align-items:stretch; gap:9px}
.oa-card__pie small{font-family:var(--oa-mono); font-size:10.5px; letter-spacing:.08em; color:var(--oa-gris); display:block}
.oa-card__pie b{font-weight:700; font-size:16px; line-height:1.2; display:block}
.oa-card__b{border:0; border-radius:999px; min-height:40px; padding:0 12px; font-weight:700; font-size:13.5px; cursor:pointer; background:var(--oa-tinta); color:#FFFFFF; flex:1 1 0}
.oa-card[data-sel="1"] .oa-card__b{background:var(--oa-rojo); color:#FFFFFF}
.oa-card__bs{display:flex; gap:7px}
.oa-card__x{border:2px solid var(--oa-tinta); border-radius:999px; min-height:40px; padding:0 10px; font-weight:700; font-size:13.5px; cursor:pointer; background:#FFFFFF; color:var(--oa-tinta); flex:1 1 0}
.oa-card__x:hover{background:var(--oa-tinta); color:#FFFFFF}
/* La tarjeta de un destino con varias salidas: sus fechas, como botones. */
.oa-fechas{display:flex; flex-direction:column; gap:5px}
.oa-fechas button{width:100%; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:1px 8px; text-align:left; border:1.5px solid var(--oa-linea); background:#FFFFFF; color:var(--oa-tinta); border-radius:10px; padding:6px 9px; cursor:pointer; font:inherit}
.oa-fechas button b{font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.oa-fechas button span{font-weight:700; font-size:12.5px}
.oa-fechas button small{grid-column:1 / -1; font-family:var(--oa-mono); font-size:10.5px; color:var(--oa-gris)}
.oa-fechas button[aria-pressed="true"]{border-color:var(--oa-marco); box-shadow:inset 0 0 0 1.5px var(--oa-marco); background:color-mix(in srgb, var(--oa-marco) 9%, #FFFFFF)}
.oa-fechas button[data-lleno] b{text-decoration:line-through; color:var(--oa-gris)}
/* Lo que Explorar le añade a la ficha (vive fuera de #opc: es el modal de index.html). */
.oa-ficha-fechas{display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:12px 24px 0}
.oa-ficha-fechas span{font-size:.82rem; color:var(--niebla, #667); margin-right:4px}
.oa-ficha-fechas button{border:1.5px solid var(--linea, #ddd); background:#FFFFFF; border-radius:999px; padding:6px 12px; font:inherit; font-size:.86rem; cursor:pointer}
.oa-ficha-fechas button[aria-pressed="true"]{background:#1C1C1B; color:#FFFFFF; border-color:#1C1C1B}
.oa-vacio{border:2px dashed var(--oa-tinta); border-radius:22px; padding:40px 28px; display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.oa-vacio b{font-family:var(--oa-display); font-weight:700; font-size:26px; line-height:1.15}
.oa-vacio p{font-size:16px; color:var(--oa-gris); max-width:520px}

/* ── Pase de viaje: el TICKET ÚNICO (frontend/web/ticket.js y ticket.css, 2-nov-2026) ──
   Aquí solo el sitio que ocupa: a la derecha de las tarjetas, más ancho que antes (el dueño:
   «que sea más ancho el ticket») y pegado bajo la barra. Si no cabe en la ventana, sube hasta
   que asoma su pie y ahí se pega (--tk-alto lo mide ticket.js): nada de scroll propio.
   En el celular va debajo de las tarjetas, a lo ancho. */
.oa-pase{flex:1 1 400px; min-width:0; max-width:500px; position:sticky; top:min(calc(var(--oa-nav-alto) + 16px), calc(100dvh - var(--tk-alto, 0px) - 16px))}
.oa-pase > .tk{--tk-corte:var(--oa-papel)}
@media (max-width:1010px){
  .oa-pase{position:static; max-width:none; flex-basis:100%}
}

/* ── Viaja a cualquier destino del mundo (12-oct-2026) ──
   El globo es el de las pieles de CheckIN (Turismo), con los colores de
   CorreCaminos. A la izquierda, los destinos de cinco en cinco con su foto; a la
   derecha, el planeta, que se sale del recuadro por arriba, por abajo y por la
   derecha (es lo que le da tamaño) y se desvanece hacia la lista. */
.oa-mundo{--oa-mundo-pad:clamp(44px, 4vw, 64px); position:relative; overflow:hidden; color:#FFFFFF; padding:var(--oa-mundo-pad) 0;
  background:radial-gradient(60% 80% at 76% 46%, rgba(63,180,153,.13), rgba(63,180,153,0) 70%), var(--oa-noche)}
.oa-mundo__fila{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); grid-template-areas:"cab globo" "lista globo"; grid-template-rows:auto 1fr; gap:22px clamp(20px, 3vw, 56px)}
.oa-mundo__cab{grid-area:cab; display:flex; flex-direction:column; gap:14px; min-width:0}
.oa-mundo__lista{grid-area:lista; display:flex; flex-direction:column; gap:14px; min-width:0}
#opc .oa-mundo h2{font-weight:700; font-size:clamp(34px, 4vw, 62px); line-height:1.02; letter-spacing:-.02em; text-wrap:balance}
.oa-mundo__p{font-size:17px; color:var(--oa-claro); max-width:540px; text-wrap:pretty}
.oa-mundo__l{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.oa-dest{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:8px; padding:3px 8px 3px 4px; border-radius:18px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); transition:background .2s ease, box-shadow .2s ease}
.oa-dest--on{background:rgba(63,180,153,.11); box-shadow:inset 0 0 0 2px var(--oa-verde)}
#opc .oa-dest__v{display:grid; grid-template-columns:30px 68px minmax(0, 1fr); align-items:center; gap:12px; min-width:0; padding:4px; border:0; background:none; color:inherit; text-align:left; cursor:pointer; border-radius:14px}
.oa-dest__n{font-family:var(--oa-mono); font-size:12px; color:var(--oa-niebla); text-align:center}
.oa-dest--on .oa-dest__n{color:var(--oa-verde)}
.oa-dest__f{width:68px; height:50px; border-radius:12px; object-fit:cover; display:block; background:#2A2A28}
.oa-dest__t{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.oa-dest__t b{font-family:var(--oa-display); font-size:19.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.oa-dest__t small{font-size:13.5px; color:var(--oa-niebla); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#opc .oa-dest__b{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3); color:#FFFFFF; font-weight:700; font-size:14.5px; cursor:pointer; transition:background .15s ease, box-shadow .15s ease}
.oa-dest__b .i{width:16px; height:16px}
#opc .oa-dest--on .oa-dest__b, #opc .oa-dest__b:hover, #opc .oa-dest__b:focus-visible{background:var(--oa-rojo); color:#FFFFFF; box-shadow:none}
.oa-mundo__pie{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px}
.oa-pag{display:flex; align-items:center; gap:6px}
.oa-pag__mas{color:rgba(255,255,255,.5); font-family:var(--oa-mono); padding:0 2px}
/* Las regiones del mundo (15-oct-2026). */
/* La fila se desliza: el borde derecho se desvanece en vez de cortar un botón a media palabra,
   y el relleno deja que el último quede entero al final. */
.oa-mundo__regiones{display:flex; gap:6px; overflow-x:auto; padding:2px 30px 6px 2px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 34px), transparent)}
.oa-mundo__regiones::-webkit-scrollbar{display:none}
#opc .oa-mundo__regiones button{flex:none; display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 12px; border:0; border-radius:999px;
  background:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26); color:#FFFFFF; font-family:var(--oa-cuerpo); font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap}
#opc .oa-mundo__regiones button em{font-style:normal; font-family:var(--oa-mono); font-size:11px; font-weight:500; opacity:.7}
#opc .oa-mundo__regiones button[aria-pressed="true"]{background:var(--oa-verde); color:var(--oa-tinta); box-shadow:none}
#opc .oa-mundo__regiones button:hover:not([aria-pressed="true"]){box-shadow:inset 0 0 0 1.5px #FFFFFF}
#opc .oa-pag button{min-width:44px; height:44px; padding:0 8px; border:0; border-radius:999px; background:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); color:#FFFFFF; font-family:var(--oa-mono); font-size:14px; cursor:pointer; display:grid; place-items:center}
#opc .oa-pag button svg{width:18px; height:18px}
#opc .oa-pag button[aria-current="true"]{background:#FFFFFF; color:var(--oa-tinta); box-shadow:none}
#opc .oa-pag button:disabled{opacity:.32; cursor:default}
/* 13-oct (el dueño): «que ese botón sea más visible»: relleno, en el rojo de la acción. */
.oa-pil--mundo{min-height:54px; padding:0 26px; font-size:16.5px; box-shadow:0 14px 28px -12px rgba(230,39,111,.75)}
.oa-pil--mundo .i{width:20px; height:20px; stroke-width:2}

.oa-mundo__globo{grid-area:globo; position:relative; scroll-margin-top:var(--oa-nav-alto); min-height:clamp(440px, 40vw, 700px); margin:calc(-1 * var(--oa-mundo-pad)) calc(-1 * var(--oa-lado)) calc(-1 * var(--oa-mundo-pad)) 0; user-select:none; -webkit-user-select:none}
.oa-globo__lienzo{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:pan-y; opacity:0; transition:opacity 1.2s ease; outline:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 13%, #000 92%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 13%, #000 92%, transparent 100%)}
.oa-globo__lienzo:active{cursor:grabbing}
.oa-globo--listo .oa-globo__lienzo{opacity:1}
.oa-globo--mano .oa-globo__lienzo{cursor:pointer}
.oa-globo__lineas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.oa-globo__lineas path{fill:none; stroke:var(--oa-verde); stroke-width:1.6; opacity:0; transition:opacity .3s ease}
/* Los nombres de los demás destinos: HTML, para que se lean nítidos y se puedan tocar. */
#opc .oa-globo__marca{position:absolute; left:0; top:0; opacity:0; pointer-events:none; will-change:transform; border:0; background:none; padding:2px 6px; font-family:var(--oa-cuerpo); font-size:12.5px; font-weight:600; letter-spacing:.03em; color:#D9F1EA; cursor:pointer; white-space:nowrap; text-shadow:0 1px 8px rgba(5,8,8,.95), 0 0 2px rgba(5,8,8,.9); transition:opacity .35s ease, color .2s ease}
#opc .oa-globo__marca--on{opacity:1; pointer-events:auto}
#opc .oa-globo__marca:hover{color:#FFFFFF; text-decoration:underline; text-underline-offset:3px}
.oa-globo__base{position:absolute; left:0; top:0; opacity:0; pointer-events:none; will-change:transform; white-space:nowrap; font-family:var(--oa-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); text-shadow:0 1px 8px rgba(5,8,8,.95); transition:opacity .35s ease}
/* La tarjeta del destino elegido, unida a su punto: foto, nombre y cotizar. */
#opc .oa-globo__rot{position:absolute; left:0; top:0; z-index:3; width:clamp(176px, 16vw, 236px); padding:0; border:0; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-align:left; cursor:pointer;
  background:rgba(17,23,22,.86); color:#FFFFFF; font-family:var(--oa-cuerpo); box-shadow:0 0 0 1.5px var(--oa-verde), 0 26px 50px -18px rgba(0,0,0,.85); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; will-change:transform; transition:opacity .35s ease}
#opc .oa-globo__rot--on{opacity:1; pointer-events:auto}
.oa-globo__rot img{width:100%; aspect-ratio:16 / 10; object-fit:cover; display:block; background:#2A2A28}
.oa-globo__rot-t{display:flex; flex-direction:column; padding:10px 14px 0; line-height:1.2}
.oa-globo__rot-t b{font-family:var(--oa-display); font-size:20px; font-weight:700}
.oa-globo__rot-t small{font-size:13px; color:var(--oa-niebla)}
.oa-globo__rot-b{display:inline-flex; align-items:center; align-self:flex-start; gap:8px; min-height:38px; margin:10px 12px 12px; padding:0 15px; border-radius:999px; background:var(--oa-rojo); color:#FFFFFF; font-weight:700; font-size:14.5px}
.oa-globo__rot-b .i{width:16px; height:16px}
.oa-globo__mandos{position:absolute; left:50%; bottom:calc(var(--oa-mundo-pad) * .45); transform:translateX(-50%); display:none; gap:8px; z-index:2}
.oa-globo--listo .oa-globo__mandos{display:flex}
#opc .oa-globo__mandos button{width:42px; height:42px; border:0; border-radius:999px; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); color:#FFFFFF; font-family:var(--oa-cuerpo); font-size:20px; line-height:1; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s ease, color .2s ease}
#opc .oa-globo__mandos button:hover{background:#FFFFFF; color:var(--oa-tinta)}
.oa-globo__pista{position:absolute; left:50%; bottom:calc(var(--oa-mundo-pad) * .45 + 52px); transform:translateX(-50%); display:none; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.8); background:rgba(14,19,18,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); pointer-events:none; white-space:nowrap; transition:opacity .5s ease; animation:oa-pista 2.6s ease-in-out infinite}
.oa-globo--listo .oa-globo__pista{display:inline-flex}
.oa-globo--tocado .oa-globo__pista{opacity:0}
.oa-globo__pista svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
@keyframes oa-pista{50%{transform:translateX(calc(-50% + 6px))}}
.oa-globo__carga{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.oa-globo__carga i{width:min(46%, 360px); aspect-ratio:1; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 0 90px rgba(63,180,153,.25); animation:oa-palpita 1.6s ease-in-out infinite}
.oa-globo--listo .oa-globo__carga, .oa-globo--plano .oa-globo__carga{display:none}
@keyframes oa-palpita{50%{transform:scale(1.04); opacity:.6}}
/* Sin WebGL: no hay planeta; la tarjeta del destino elegido pasa a ser una foto grande. */
.oa-globo--plano{margin:0; min-height:0; display:grid; place-items:center}
.oa-globo--plano .oa-globo__lienzo, .oa-globo--plano .oa-globo__lineas, .oa-globo--plano .oa-globo__marca, .oa-globo--plano .oa-globo__base, .oa-globo--plano .oa-globo__mandos, .oa-globo--plano .oa-globo__pista{display:none !important}
#opc .oa-globo--plano .oa-globo__rot{position:relative; width:min(560px, 100%); opacity:1; pointer-events:auto; transform:none}
@media (max-width:1100px){
  .oa-mundo__fila{grid-template-columns:minmax(0, 1fr); grid-template-areas:"cab" "globo" "lista"; grid-template-rows:auto}
  .oa-mundo__globo{min-height:min(96vw, 520px); margin:-8px calc(-1 * var(--oa-lado))}
  .oa-globo__lienzo{-webkit-mask-image:none; mask-image:none}
  .oa-globo__mandos{bottom:10px}
  .oa-globo__pista{bottom:62px}
  .oa-globo--plano{margin:0}
}
@media (max-width:640px){
  /* En el celular la tarjeta sobre el globo va sin foto (la fila de abajo ya la trae): tapa menos planeta. */
  #opc .oa-globo__rot{width:156px; border-radius:14px}
  .oa-globo__rot img{display:none}
  #opc .oa-globo--plano .oa-globo__rot{width:100%}
  .oa-globo--plano .oa-globo__rot img{display:block}
  .oa-globo__rot-t b{font-size:17px}
  .oa-globo__rot-b{min-height:34px; margin:8px 10px 10px; font-size:13.5px}
  #opc .oa-dest__v{grid-template-columns:24px 56px minmax(0, 1fr); gap:9px}
  .oa-dest__f{width:56px; height:46px}
  .oa-dest__t b{font-size:17px}
  .oa-dest__t small{font-size:12.5px}
  #opc .oa-dest__b{padding:0 13px}
  .oa-dest__b span{display:none}
  .oa-mundo__pie{justify-content:center}
}

/* ── El cotizador en línea, dentro de la sección del mundo (13-oct-2026) ──
   Un papel claro sobre la noche de la sección: ahí viven el formulario (como el
   de la piel de CheckIN: destino, cuándo, adultos, menores, ciudad de salida), las
   pestañas de servicio con lo que trajo cada una, y los resultados de siempre
   (viaje.js), que esperan un fondo claro. */
.oa-cot{position:relative; margin-top:clamp(28px, 3vw, 48px); background:var(--oa-papel); color:var(--oa-tinta); border-radius:30px; padding:clamp(16px, 2.2vw, 32px);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 50px 90px -40px rgba(0,0,0,.9); scroll-margin-top:calc(var(--oa-nav-alto) + 12px)}
.oa-cot--entra{animation:oa-cot-entra .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes oa-cot-entra{from{opacity:0; transform:translateY(22px) scale(.985)}to{opacity:1; transform:none}}
.oa-cot__cab{display:flex; justify-content:space-between; align-items:center; gap:18px}
.oa-cot__cab > div{display:flex; flex-direction:column; gap:8px; min-width:0}
#opc .oa-cot__cab h3{font-weight:700; font-size:clamp(26px, 2.4vw, 36px); line-height:1.05; letter-spacing:-.015em}
#opc .oa-cot__x{width:46px; height:46px; flex:none; border:0; border-radius:999px; background:#FFFFFF; box-shadow:inset 0 0 0 1.5px var(--oa-linea); color:var(--oa-tinta); display:grid; place-items:center; cursor:pointer}
.oa-cot__x .i{width:18px; height:18px}
#opc .oa-cot__x:hover{background:var(--oa-tinta); color:#FFFFFF}
.oa-cot__tabs{display:flex; gap:8px; margin:18px 0 14px; overflow-x:auto; padding:3px 3px 6px; scrollbar-width:none; scroll-margin-top:calc(var(--oa-nav-alto) + 12px)}
.oa-cot__tabs::-webkit-scrollbar{display:none}
#opc .oa-cot__tab{display:inline-flex; align-items:center; gap:9px; min-height:50px; padding:0 14px 0 12px; border:0; border-radius:999px; background:#FFFFFF; box-shadow:inset 0 0 0 1.5px var(--oa-linea);
  color:var(--oa-tinta); font-family:var(--oa-cuerpo); font-weight:700; font-size:15.5px; white-space:nowrap; cursor:pointer; flex:none; transition:background .15s ease, box-shadow .15s ease}
#opc .oa-cot__tab:hover{box-shadow:inset 0 0 0 1.5px var(--oa-tinta)}
#opc .oa-cot__tab[aria-selected="true"]{background:var(--oa-tinta); color:#FFFFFF; box-shadow:none}
.oa-cot__tab-ic{font-size:18px; line-height:1}
.oa-cot__tab em{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; background:var(--oa-papel); color:var(--oa-gris); font-family:var(--oa-mono); font-size:11.5px; font-weight:500; letter-spacing:.03em}
.oa-cot__tab[data-estado="listo"] em{background:#DDF3EC; color:#14684F}
.oa-cot__tab[data-estado="busca"] em{background:#FFF4D6; color:#7A5300}
.oa-cot__tab[data-estado="falta"] em, .oa-cot__tab[data-estado="error"] em{background:#FDE7EF; color:#A3134A}
.oa-cot__tab[data-estado="casa"] em{background:#E3EFFB; color:#1D4F7C}
.oa-cot__tab[aria-selected="true"] em{background:rgba(255,255,255,.16); color:#FFFFFF}
.oa-cot__tab em i{width:10px; height:10px; border-radius:999px; border:2px solid currentColor; border-right-color:transparent; animation:oa-gira .8s linear infinite}
@keyframes oa-gira{to{transform:rotate(1turn)}}
.oa-cot__f{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(300px, 1.3fr) auto auto minmax(0, 1fr) auto; align-items:stretch;
  background:#FFFFFF; border-radius:26px; padding:8px; box-shadow:0 0 0 1px var(--oa-linea), 0 20px 44px -28px rgba(18,18,17,.5)}
.oa-cot__c{position:relative; display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0; padding:10px 18px; border-radius:18px; transition:background .15s ease, box-shadow .15s ease}
.oa-cot__c + .oa-cot__c::before{content:''; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--oa-linea)}
.oa-cot__c:focus-within{background:var(--oa-papel)}
.oa-cot__c:focus-within::before, .oa-cot__c:focus-within + .oa-cot__c::before{opacity:0}
.oa-cot__c--falta{box-shadow:inset 0 0 0 2px var(--oa-rojo); background:#FFF6F9}
.oa-cot__rot{font-family:var(--oa-mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--oa-gris); white-space:nowrap}
.oa-cot__rot small{font-size:10.5px; letter-spacing:.04em; text-transform:none; opacity:.8}
#opc .oa-cot__f input{width:100%; min-width:0; min-height:34px; padding:0; border:0; background:transparent; color:var(--oa-tinta); font-family:var(--oa-cuerpo); font-size:16.5px; font-weight:600; outline:none}
#opc .oa-cot__f input::placeholder{color:#9A968E; font-weight:500}
#opc .oa-cot__f input[type="date"]{font-size:15px; cursor:pointer}
/* ¿Cuándo? (15-oct-2026): un campo, un icono y un calendario de rango. */
/* 15-oct-2026: más compacto; el botón del calendario, a la vista; las noches, en su sello. */
.oa-cot__rot small#oa-f-noches{display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px; background:#DDF3EC; color:#14684F;
  font-family:var(--oa-mono); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:none; opacity:1; vertical-align:1px}
.oa-cot__rot small#oa-f-noches:empty{display:none}
.oa-fechas{display:flex; align-items:center; gap:6px; min-width:0}
#opc .oa-fechas__cal{flex:none; width:40px; height:40px; margin-left:-6px; border:0; border-radius:12px; background:#FDE7EF; color:var(--oa-rojo); display:grid; place-items:center; cursor:pointer; transition:background .15s ease, color .15s ease}
#opc .oa-fechas__cal:hover, #opc .oa-fechas__cal[aria-expanded="true"]{background:var(--oa-rojo); color:#FFFFFF}
#opc .oa-fechas__cal svg{width:21px; height:21px; stroke-width:2.2}
#opc .oa-cot__f input.oa-fechas__txt{flex:0 1 11.2ch; min-width:0; width:11.2ch; font-variant-numeric:tabular-nums; letter-spacing:.01em}
#opc .oa-cot__f input.oa-fechas__txt--mal{color:var(--oa-rojo); text-decoration:underline wavy var(--oa-rojo) 1px; text-underline-offset:4px}
.oa-fechas__sep{flex:none; color:#B5B1A9; font-weight:700}
.oa-fechas__ocultas{display:none}
.oa-cal{position:fixed; z-index:45; top:0; left:0; width:max-content; max-width:min(680px, calc(100vw - 24px)); padding:16px 18px 14px;
  background:#FFFFFF; border-radius:22px; box-shadow:0 0 0 1px var(--oa-linea), 0 28px 60px -24px rgba(18,18,17,.45); color:var(--oa-tinta); cursor:default}
.oa-cal[hidden]{display:none}
.oa-cal__cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:14.5px; color:var(--oa-gris)}
.oa-cal__cab b{color:var(--oa-tinta)}
#opc .oa-cal__cab button{width:38px; height:38px; border:0; border-radius:999px; background:var(--oa-papel); color:var(--oa-tinta); font-size:22px; line-height:1; cursor:pointer}
#opc .oa-cal__cab button:disabled{opacity:.3; cursor:default}
.oa-cal__meses{display:flex; gap:28px}
.oa-cal__mes{display:flex; flex-direction:column; gap:8px; width:282px}
.oa-cal__mes > b{text-align:center; font-size:15px; text-transform:capitalize}
.oa-cal__dias{display:grid; grid-template-columns:repeat(7, 1fr); row-gap:3px}
.oa-cal__dias i{font-style:normal; text-align:center; font-family:var(--oa-mono); font-size:11px; color:var(--oa-gris); padding-bottom:4px}
#opc .oa-cal__dias button{position:relative; height:40px; border:0; background:transparent; color:var(--oa-tinta); font-family:var(--oa-cuerpo); font-size:14.5px; font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums; z-index:0}
#opc .oa-cal__dias button::after{content:''; position:absolute; inset:2px; border-radius:999px; z-index:-1}
#opc .oa-cal__dias button:hover:not(:disabled)::after{box-shadow:inset 0 0 0 1.5px var(--oa-tinta)}
#opc .oa-cal__dias button:disabled{color:#C9C5BD; cursor:default; text-decoration:line-through; text-decoration-color:rgba(0,0,0,.18)}
#opc .oa-cal__dias button.entre{background:#FDE7EF}
#opc .oa-cal__dias button.ini, #opc .oa-cal__dias button.fin{color:#FFFFFF}
#opc .oa-cal__dias button.ini::after, #opc .oa-cal__dias button.fin::after{background:var(--oa-rojo); box-shadow:none}
#opc .oa-cal__dias button.ini.con-fin{background:linear-gradient(90deg, transparent 50%, #FDE7EF 50%)}
#opc .oa-cal__dias button.fin{background:linear-gradient(90deg, #FDE7EF 50%, transparent 50%)}
#opc .oa-cal__dias button:focus-visible{outline:2px solid var(--oa-tinta); outline-offset:-2px; border-radius:999px}
.oa-cal__pie{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--oa-linea)}
#opc .oa-cal__pie button{border:0; background:transparent; color:var(--oa-gris); font-family:var(--oa-cuerpo); font-size:14.5px; font-weight:700; text-decoration:underline; cursor:pointer; min-height:40px}
#opc .oa-cal__pie .oa-cal__listo{padding:0 22px; border-radius:999px; background:var(--oa-tinta); color:#FFFFFF; text-decoration:none}
@media (max-width:760px){
  .oa-cal{max-width:none; padding:14px 12px 12px}
  .oa-cal__mes{width:100%}
  /* El botón flotante de WhatsApp vive abajo a la derecha: «Listo» va a la izquierda. */
  .oa-cal__pie{flex-direction:row-reverse}
}
@media (prefers-reduced-motion:no-preference){ .oa-cal:not([hidden]){animation:oa-cal-entra .18s ease-out both} }
@keyframes oa-cal-entra{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.oa-cot__paso{display:flex; align-items:center; gap:10px}
#opc .oa-cot__paso button{width:36px; height:36px; border:0; border-radius:999px; background:#FFFFFF; box-shadow:inset 0 0 0 1.5px var(--oa-linea); color:var(--oa-tinta); display:grid; place-items:center; cursor:pointer}
.oa-cot__paso button .i{width:15px; height:15px; stroke-width:2.6}
#opc .oa-cot__paso button:hover:not(:disabled){box-shadow:inset 0 0 0 1.5px var(--oa-tinta)}
#opc .oa-cot__paso button:disabled{opacity:.35; cursor:default}
.oa-cot__paso b{min-width:18px; text-align:center; font-size:19px; font-variant-numeric:tabular-nums}
#opc .oa-cot__buscar{align-self:center; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:60px; margin:0 2px 0 10px; padding:0 30px; border:0; border-radius:999px;
  background:var(--oa-rojo); color:#FFFFFF; font-family:var(--oa-cuerpo); font-size:17.5px; font-weight:800; cursor:pointer; box-shadow:0 16px 30px -14px rgba(230,39,111,.85); transition:transform .15s ease}
#opc .oa-cot__buscar:hover{transform:translateY(-1px)}
.oa-cot__edades{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin-top:14px; padding:0 6px}
.oa-cot__edades > .oa-cot__rot{flex:1 0 100%}
.oa-cot__edad{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700}
#opc .oa-cot__edad select{min-height:44px; padding:0 12px; border:0; border-radius:12px; background:#FFFFFF; box-shadow:inset 0 0 0 1.5px var(--oa-linea); color:var(--oa-tinta); font-family:var(--oa-cuerpo); font-size:15px}
#opc .oa-cot__edad select.falta{box-shadow:inset 0 0 0 2px var(--oa-rojo)}
.oa-cot__nota{margin:14px 6px 0; font-size:14.5px; line-height:1.5; color:var(--oa-gris)}
.oa-cot__nota:empty{display:none}
/* Los resultados de siempre: viaje.js pregunta por el ancho de su caja con «@container bs». */
.oa-cot__res{container:bs / inline-size; margin-top:8px}
/* 15-oct-2026 (el dueño: «puede ser más larga la sección lateral del resumen»): todo el alto bajo la barra. */
#opc .oa-cot__res #vj-carrito-caja{top:calc(var(--oa-nav-alto) + 14px)}
/* 2-nov-2026, el dueño: «que sea más largo, lo que necesite, para evitar el scroll». Sin alto
   máximo ni scroll propio: si el ticket no cabe, el top lo deja subir hasta que asoma su pie y ahí
   se pega (--tk-alto lo mide ticket.js). */
@media (min-width:1000px){ #opc .oa-cot__res #vj-carrito-caja{max-height:none; overflow:visible; top:min(calc(var(--oa-nav-alto) + 14px), calc(100dvh - var(--tk-alto, 0px) - 14px))} }
/* Las muescas del ticket de «Tu viaje» muerden el fondo del cotizador (15-oct-2026). */
#opc .oa-cot__res{--vj-fondo:var(--oa-papel)}
@media (max-width:1180px){
  .oa-cot__f{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px}
  .oa-cot__c--destino, .oa-cot__c--cuando, .oa-cot__c--origen{grid-column:1 / -1}
  .oa-cot__c + .oa-cot__c::before{display:none}
  .oa-cot__c{box-shadow:inset 0 0 0 1px var(--oa-linea)}
  .oa-cot__c--falta{box-shadow:inset 0 0 0 2px var(--oa-rojo)}
  #opc .oa-cot__buscar{grid-column:1 / -1; margin:6px 0 2px; width:100%}
}
@media (max-width:640px){
  .oa-cot{border-radius:22px; margin-left:calc(-.5 * var(--oa-lado)); margin-right:calc(-.5 * var(--oa-lado))}
  .oa-cot__c{padding:9px 14px}
  #opc .oa-cot__tab{min-height:46px; font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){ .oa-cot--entra, .oa-cot__tab em i{animation:none} }
/* El aviso flotante «🧳 Tu viaje · Ver» (viaje.js) cuelga de <body>: con los resultados a la vista, sobra. */
html[data-opcion="a"].oa-cot-visto .vj-flotante{display:none}

/* ── La galería en órbita (12-oct-2026) ──
   El dueño: «más innovadora, más moderna y tecnológica, con efectos,
   animaciones, futurista». Las piezas giran en un carrusel con profundidad sobre
   un piso de retícula; la del centro lleva mira en las esquinas y un barrido de
   luz. La posición de cada pieza la pone opcion-a.js en cada cuadro. */
.oa-galeria{padding-bottom:clamp(48px, 5vw, 72px); overflow:hidden}
.oa-orbita{--oa-pz:clamp(210px, 23vw, 380px); position:relative; isolation:isolate; height:calc(var(--oa-pz) * 1.25 + 112px); margin-top:26px; overflow:hidden; outline:none; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.oa-orbita--arrastra{cursor:grabbing}
.oa-orbita::before{content:''; position:absolute; left:50%; top:calc(50% - 24px); width:min(980px, 92%); height:calc(var(--oa-pz) * 1.05); transform:translate(-50%, -50%); background:radial-gradient(closest-side, rgba(63,180,153,.22), rgba(63,180,153,0)); pointer-events:none}
.oa-orbita__piso{position:absolute; left:50%; bottom:0; width:170%; height:44%; transform:translateX(-50%) perspective(480px) rotateX(63deg); transform-origin:50% 100%; pointer-events:none;
  background-image:linear-gradient(rgba(63,180,153,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(63,180,153,.42) 1px, transparent 1px); background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 45%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 45%, transparent 100%); animation:oa-piso 5s linear infinite}
@keyframes oa-piso{from{background-position:0 0, 0 0}to{background-position:0 64px, 0 0}}
.oa-orbita__pista{position:absolute; inset:0; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%)}
#opc .oa-pieza{position:absolute; left:50%; top:calc(50% - 24px); width:var(--oa-pz); aspect-ratio:4 / 5; padding:0; border:0; border-radius:22px; overflow:hidden; background-color:#2A2A28; color:#FFFFFF; cursor:pointer; visibility:hidden;
  transform:translate(-50%, -50%); will-change:transform, opacity; box-shadow:0 30px 50px -28px rgba(0,0,0,.95)}
.oa-pieza .oa-foto{pointer-events:none}
/* Lo que se aleja del centro se apaga: un velo, no un filtro (más barato de pintar). */
.oa-pieza::after{content:''; position:absolute; inset:0; z-index:2; background:#0C0C0B; opacity:var(--oa-osc, 0); pointer-events:none}
#opc .oa-pieza--on{cursor:zoom-in; box-shadow:0 0 0 2px var(--oa-verde), 0 0 70px -8px rgba(63,180,153,.7), 0 36px 60px -28px #000}
/* La mira: cuatro esquinas dibujadas con degradados, solo en la pieza del centro. */
.oa-pieza__hud{position:absolute; inset:12px; z-index:3; pointer-events:none; opacity:0; transition:opacity .45s ease; overflow:hidden; border-radius:12px;
  background:
    linear-gradient(var(--oa-verde), var(--oa-verde)) left top / 26px 2px no-repeat, linear-gradient(var(--oa-verde), var(--oa-verde)) left top / 2px 26px no-repeat,
    linear-gradient(var(--oa-verde), var(--oa-verde)) right top / 26px 2px no-repeat, linear-gradient(var(--oa-verde), var(--oa-verde)) right top / 2px 26px no-repeat,
    linear-gradient(var(--oa-verde), var(--oa-verde)) left bottom / 26px 2px no-repeat, linear-gradient(var(--oa-verde), var(--oa-verde)) left bottom / 2px 26px no-repeat,
    linear-gradient(var(--oa-verde), var(--oa-verde)) right bottom / 26px 2px no-repeat, linear-gradient(var(--oa-verde), var(--oa-verde)) right bottom / 2px 26px no-repeat}
.oa-pieza--on .oa-pieza__hud{opacity:1}
/* El video que suena al detenerse el carrusel (13-oct) y su botón de sonido. */
.oa-pieza__vid{z-index:1}
.oa-pieza--suena .oa-gal__play{display:none}
.oa-pieza__son{position:absolute; right:12px; top:12px; z-index:4; display:none; align-items:center; gap:7px; min-height:36px; padding:0 13px; border-radius:999px;
  background:rgba(18,18,17,.82); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); color:#FFFFFF; font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer}
.oa-pieza__son .i{width:15px; height:15px; stroke-width:2}
.oa-pieza--suena .oa-pieza__son{display:inline-flex}
.oa-pieza__son[data-estado="suena"]{box-shadow:inset 0 0 0 1.5px var(--oa-verde); color:var(--oa-verde)}
.oa-pieza__son[data-estado="espera"]{box-shadow:inset 0 0 0 1.5px var(--oa-rojo); animation:oa-late 1.8s ease-in-out infinite}
.oa-pieza__hud::after{content:''; position:absolute; left:0; right:0; top:-40%; height:36%; background:linear-gradient(180deg, rgba(63,180,153,0), rgba(63,180,153,.26), rgba(63,180,153,0))}
.oa-pieza--on .oa-pieza__hud::after{animation:oa-barrido 3.8s ease-in-out infinite}
@keyframes oa-barrido{0%{top:-40%}60%{top:104%}100%{top:104%}}
#opc .oa-orbita .oa-flecha{z-index:60; top:calc(50% - 24px)}
.oa-orbita .oa-flecha--izq{left:max(12px, calc(50% - var(--oa-pz) * 1.72))}
.oa-orbita .oa-flecha--der{right:max(12px, calc(50% - var(--oa-pz) * 1.72))}
.oa-orbita__rail{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:min(460px, 62%); height:3px; border-radius:3px; background:rgba(255,255,255,.16); overflow:hidden}
.oa-orbita__rail i{display:block; width:calc(100% / var(--oa-n, 1)); height:100%; border-radius:3px; background:var(--oa-verde); box-shadow:0 0 12px var(--oa-verde); transition:transform .45s ease}
.oa-galeria__pie{display:flex; flex-direction:column; align-items:center; gap:26px; margin-top:8px}
.oa-galeria__muestra{font-family:var(--oa-mono); font-size:13px; color:var(--oa-niebla); padding:60px 0}
.oa-gal{align-self:stretch; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap:14px}
#opc .oa-gal__p{position:relative; aspect-ratio:4 / 5; max-width:100%; border:0; padding:0; border-radius:16px; overflow:hidden; cursor:zoom-in; background-color:#2A2A28; color:#FFFFFF; animation:oa-aparece .5s ease both; animation-delay:calc(var(--oa-i, 0) * 28ms)}
@keyframes oa-aparece{from{opacity:0; transform:translateY(14px) scale(.96)}to{opacity:1; transform:none}}
.oa-gal__p .oa-foto{transition:transform .3s ease}
.oa-gal__p:hover .oa-foto{transform:scale(1.04)}
.oa-gal__play{position:absolute; left:12px; top:12px; z-index:1; width:40px; height:40px; border-radius:999px; background:rgba(28,28,27,.7); color:#FFFFFF; display:grid; place-items:center}
.oa-gal__play .i{width:16px; height:16px}
/* 06-oct: cada pieza con su nombre (el título que se le pone en Administración → Galería). */
.oa-gal__n{position:absolute; left:0; right:0; bottom:0; z-index:1; padding:30px 14px 12px; text-align:left; color:#FFFFFF; font-family:var(--oa-cuerpo); font-weight:700; font-size:14px; line-height:1.25; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.74) 100%); text-shadow:0 1px 6px rgba(0,0,0,.5)}
.oa-bit__pie{align-self:stretch; display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.16); padding-top:24px; font-family:var(--oa-mono); font-size:13px; letter-spacing:.04em; color:var(--oa-niebla)}

/* ── Reseñas (solo con material o con ?muestra) ── */
.oa-res{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:24px}
.oa-res figure{margin:0; background:#FFFFFF; border-radius:22px; box-shadow:0 0 0 1px var(--oa-linea); padding:28px; display:flex; flex-direction:column; gap:24px; justify-content:space-between}
.oa-res blockquote{margin:0; font-family:var(--oa-display); font-weight:500; font-size:21px; line-height:1.35; text-wrap:pretty; overflow-wrap:anywhere}
.oa-res figcaption{display:flex; align-items:center; gap:12px}
.oa-res figcaption i{width:48px; height:48px; border-radius:999px; flex:none; display:flex; align-items:center; justify-content:center; color:#FFFFFF; font-style:normal; font-family:var(--oa-display); font-weight:700; font-size:20px}
.oa-res figcaption b{display:block; font-weight:700; font-size:15.5px}
.oa-res figcaption small{display:block; font-family:var(--oa-mono); font-size:12px; color:var(--oa-gris)}
.oa-estrellas{display:flex; gap:4px}
.oa-estrellas .i{width:22px; height:22px}
.oa-estrellas__v{display:flex; gap:4px; opacity:.22}
.oa-res figure .oa-estrellas .i{width:18px; height:18px; color:var(--oa-rojo)}
.oa-res__cab{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.oa-res__cab > b{font-size:17px}
.oa-res__f{width:48px; height:48px; border-radius:999px; object-fit:cover; flex:none}

/* ── Cierre y pie ── */
.oa-cierre{background-color:var(--oa-tinta); background-image:repeating-radial-gradient(circle at 50% 120%, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 46px); color:#FFFFFF; padding:clamp(72px, 8vw, 110px) 0}
.oa-cierre .oa-cont{display:flex; flex-direction:column; align-items:center; text-align:center; gap:28px}
#opc .oa-cierre h2{font-weight:700; font-size:clamp(44px, 7vw, 104px); line-height:.98; letter-spacing:-.025em; max-width:1000px; text-wrap:balance}
.oa-cierre p{max-width:560px; font-size:19px; color:var(--oa-claro); text-wrap:pretty}
.oa-cierre .oa-botones{justify-content:center}
.oa-pie{background:var(--oa-noche); color:var(--oa-niebla); padding:56px 0 40px; font-size:15px}
.oa-pie .oa-cont{display:flex; flex-direction:column; gap:36px}
.oa-pie__g{display:flex; flex-wrap:wrap; gap:32px 64px; justify-content:space-between}
.oa-pie__g > div{display:flex; flex-direction:column; gap:10px}
.oa-pie__g > div:first-child{flex:1 1 280px; min-width:0}
.oa-pie__n{font-family:var(--oa-display); font-weight:700; font-size:22px; color:#FFFFFF}
.oa-pie__g small{font-family:var(--oa-mono); font-size:12px; letter-spacing:.1em; color:#FFFFFF}
.oa-pie__g button{background:none; border:0; padding:0; color:inherit; cursor:pointer; text-align:left}
.oa-pie__l{border-top:1px solid rgba(255,255,255,.16); padding-top:24px; display:flex; flex-direction:column; gap:8px; font-size:13.5px; line-height:1.55}

/* ── Barra fija de «Reservar» en el celular (06-oct-2026) ──
   Deja libre la esquina del WhatsApp flotante (que en el celular queda solo con
   su glifo) y se esconde sola cuando se ven la portada, el pase, el cierre o el pie. */
/* El WhatsApp flotante de siempre, solo con su glifo. En el celular ya era así
   (deja sitio a la barra de «Reservar»); desde el 12-oct también en el computador:
   la página llega casi al borde y el rótulo «Escríbenos» tapaba el pase de viaje.
   El número completo está arriba, en la barra, y en los datos de la portada. */
html[data-opcion="a"] body > .wa{padding:12px}
html[data-opcion="a"] body > .wa > span:not(.wa__glifo){display:none}
.oa-barra{display:none}
@media (max-width:760px){
  .oa-barra{position:fixed; left:12px; right:86px; bottom:14px; z-index:35; display:flex; align-items:center; justify-content:space-between; gap:10px; box-sizing:border-box; background:var(--oa-tinta); color:#FFFFFF; border-radius:999px; padding:7px 7px 7px 18px; box-shadow:0 20px 40px -16px rgba(18,18,17,.8), 0 0 0 1px rgba(255,255,255,.14); transition:transform .3s ease, opacity .3s ease}
  .oa-barra[hidden]{display:none}
  .oa-barra--fuera{transform:translateY(160%); opacity:0; pointer-events:none}
  .oa-barra__t{display:flex; flex-direction:column; min-width:0}
  .oa-barra__t small{font-family:var(--oa-mono); font-size:10.5px; letter-spacing:.1em; color:var(--oa-verde)}
  .oa-barra__t b{font-weight:700; font-size:14.5px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .oa-barra__t span{font-size:12.5px; color:var(--oa-claro); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .oa-barra .oa-pil{flex:none; min-height:48px; padding:0 16px; font-size:15px}
  html[data-opcion="a"] body > .wa{padding:10px; right:14px; bottom:16px}
}

/* ── El visor a pantalla completa (06-oct-2026): el óvalo y la galería ── */
.oa-visor{position:fixed; inset:0; z-index:9999; background:rgba(12,12,11,.94); display:flex; align-items:center; justify-content:center}
.oa-visor[hidden]{display:none}
.oa-visor__escena{position:absolute; inset:56px 72px 76px; display:flex; align-items:center; justify-content:center}
.oa-visor__escena img, .oa-visor__escena video{max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; background:#000}
.oa-visor__x{position:absolute; top:12px; right:14px; width:46px; height:46px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#FFFFFF; font-size:22px; cursor:pointer}
.oa-visor__f{position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#FFFFFF; cursor:pointer; display:grid; place-items:center}
.oa-visor__f--izq{left:12px}
.oa-visor__f--der{right:12px}
.oa-visor__f:hover, .oa-visor__x:hover, .oa-visor__f:focus-visible, .oa-visor__x:focus-visible{background:var(--oa-rojo); color:#FFFFFF}
.oa-visor__pie{position:absolute; left:16px; right:16px; bottom:14px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:center; color:#FFFFFF; font-family:var(--oa-cuerpo); font-size:15px; text-align:center}
@media (max-width:640px){
  .oa-visor__escena{inset:60px 8px 90px}
  .oa-visor__f{top:auto; bottom:12px; transform:none; width:48px; height:48px}
}

/* ── Los formularios (avísame y reseña): un <dialog> de opciones.js ── */
/* `margin:auto` a mano: estilo.css pone los márgenes en cero y el <dialog> quedaba pegado arriba a la izquierda. */
#opc .opc-dlg{margin:auto; inset:0; border:0; padding:0; border-radius:26px; width:min(520px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); box-sizing:border-box; background:#FFFFFF; color:var(--oa-tinta); box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
#opc .opc-dlg::backdrop{background:rgba(18,18,17,.66)}
#opc .opc-dlg__f{position:relative; padding:28px clamp(18px, 5vw, 30px) 26px; display:flex; flex-direction:column; gap:14px}
#opc .opc-dlg h2{font-weight:700; font-size:26px; line-height:1.1; padding-right:44px}
#opc .opc-dlg__p{font-size:15.5px; color:var(--oa-gris)}
#opc .opc-dlg__x{position:absolute; top:14px; right:14px; width:44px; height:44px; border:0; border-radius:999px; background:var(--oa-papel); color:var(--oa-tinta); display:grid; place-items:center; cursor:pointer}
#opc .opc-dlg__x .i{width:18px; height:18px}
#opc .opc-campo{display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:14.5px}
#opc .opc-campo small{font-weight:400; color:var(--oa-gris)}
#opc .opc-campo input, #opc .opc-campo textarea{font:inherit; font-weight:400; font-size:16px; border:0; border-radius:14px; box-shadow:inset 0 0 0 1.5px var(--oa-linea); padding:12px 14px; min-height:48px; box-sizing:border-box; width:100%; background:#FFFFFF; color:var(--oa-tinta)}
#opc .opc-campo input[type="file"]{padding:10px; font-size:14.5px}
#opc .opc-campo textarea{resize:vertical; min-height:110px}
#opc .opc-campo input:focus, #opc .opc-campo textarea:focus{outline:none; box-shadow:inset 0 0 0 2px var(--oa-tinta)}
#opc .opc-estrellas{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:14.5px}
#opc .opc-estrellas legend{padding:0; margin-bottom:6px}
#opc .opc-estrellas > div{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px}
#opc .opc-estrellas input{position:absolute; opacity:0; width:1px; height:1px}
#opc .opc-estrellas label{width:44px; height:44px; display:grid; place-items:center; cursor:pointer; color:var(--oa-linea)}
#opc .opc-estrellas label .i{width:32px; height:32px}
#opc .opc-estrellas input:checked ~ label, #opc .opc-estrellas label:hover, #opc .opc-estrellas label:hover ~ label{color:var(--oa-rojo)}
#opc .opc-estrellas input:focus-visible + label{outline:3px solid #2F6BFF; outline-offset:2px; border-radius:8px}
#opc .opc-trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#opc .opc-dlg__b{background:var(--oa-rojo); color:#FFFFFF; min-height:54px; border-radius:999px; font-weight:700; font-size:16.5px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer; width:100%}
#opc .opc-dlg__b .i{width:18px; height:18px}
#opc .opc-dlg__b:disabled{opacity:.6; cursor:wait}
/* El error va justo encima del botón de enviar, donde se está mirando. */
#opc .opc-dlg__b{order:2}
#opc .opc-dlg__msg{order:1; font-weight:600; font-size:14.5px; color:#B3261E}
#opc .opc-dlg__msg:empty{display:none}
#opc .opc-dlg__ok{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:18px 0 4px}
#opc .opc-dlg__ok > .i{width:56px; height:56px; padding:12px; box-sizing:border-box; border-radius:999px; background:var(--oa-verde); color:var(--oa-tinta)}
#opc .opc-dlg__ok h2{padding-right:0}
#opc .opc-dlg__ok p{font-size:16px; color:var(--oa-gris)}

@media (prefers-reduced-motion:reduce){
  .oa-vid, .oa-orbita__piso, .oa-globo__pista, .oa-globo__carga i{animation:none}
  #opc .oa-sonido[data-estado="espera"], #opc .oa-gal__p, .oa-pieza--on .oa-pieza__hud::after{animation:none}
  .oa-lift, .oa-lam, .oa-barra, .oa-gal__p .oa-foto, #opc .oa-flecha, .oa-orbita__rail i{transition:none}
  .oa-ovalo__m[data-efecto="zoom"] .oa-lam--on img.oa-foto{animation:none}
}

/* ── La barra en pantallas medianas y chicas ──
   Ya no cabe en una fila: arriba quedan la agencia y los accesos, y debajo los
   atajos. Al bajar por la página se queda pegada SOLO la fila de los atajos (el
   `top` negativo deja irse a la primera): en un celular, una barra de dos filas
   siempre encima se comería la pantalla. */
@media (max-width:1180px){
  html[data-opcion="a"]{--oa-nav-alto:54px; --oa-cab-f1:70px}
  .oa-cab{top:calc(-1 * var(--oa-cab-f1))}
  .oa-cab .oa-cont{min-height:0; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"ag acc" "nav nav"}
  .oa-cab__ag{grid-area:ag; min-height:var(--oa-cab-f1)}
  .oa-accesos{grid-area:acc}
  .oa-nav{grid-area:nav; height:var(--oa-nav-alto); align-items:center; box-shadow:0 -1px 0 rgba(255,255,255,.1); margin:0 calc(-1 * var(--oa-lado)); padding:0 var(--oa-lado); overflow-x:auto; scrollbar-width:none; justify-content:safe center}
  .oa-nav::-webkit-scrollbar{display:none}
  .oa-nav a{min-height:40px; padding:0 16px; font-size:15.5px}
}
@media (max-width:640px){
  html[data-opcion="a"]{--oa-nav-alto:50px; --oa-cab-f1:62px}
  .oa-cab__sello, .oa-cab__wa span{display:none}
  .oa-cab__ag{gap:8px}
  .oa-cab__wa{min-height:40px; width:40px; padding:0; margin-left:0; justify-content:center; flex:none}
  .oa-cab__wa .i{width:22px; height:22px}
  .oa-cab__t b{font-size:17px}
  .oa-cab__t small{font-size:10px; letter-spacing:.06em}
  .oa-cab__mas{display:none}
  .oa-hero__logo{--oa-logo:min(80vw, 330px)}
  .oa-nav a{padding:0 13px; font-size:15px}
  .oa-nav__l{display:none}
  .oa-nav__c{display:inline}
  .oa-accesos{gap:6px}
  #opc .oa-acceso--asesor{padding:0 10px; min-height:38px}
  #opc .oa-acceso--asesor em{display:none}
}
@media (max-width:560px){
  /* «Mi cuenta» en el móvil: se queda el icono y el QUÉ, y el renglón de abajo
     se va. Encogerlo entero lo devolvería a ser una píldora más. */
  #opc .oa-cuenta{min-height:44px; padding:3px 6px 3px 4px; gap:8px}
  .oa-cuenta__ic{width:34px; height:34px}
  .oa-cuenta__ic .i{width:18px; height:18px}
  .oa-cuenta__t b{font-size:15px}
  .oa-cuenta__t small{font-size:9px}
  .oa-cuenta__f{width:26px; height:26px}
}
@media (max-width:400px){
  .oa-cuenta__f{display:none}
  #opc .oa-cuenta{padding-right:12px}
}

/* ── El cupo de cada salida, a la vista (20-oct-2026) ── */
.oa-cupo{display:flex; align-items:center; gap:8px; border-radius:10px; padding:7px 10px; font-weight:800; font-size:13.5px; line-height:1.2}
.oa-cupo i{width:9px; height:9px; border-radius:50%; flex:none; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 22%, transparent)}
.oa-cupo--hay{background:#E7F6EF; color:#0B6A4C}
.oa-cupo--pocos{background:#FFF1DC; color:#9A5800}
.oa-cupo--lleno{background:#FDE5EC; color:#B0213F}
.oa-fechas__c--pocos{color:#9A5800 !important; font-weight:700}
.oa-fechas__c--lleno{color:#B0213F !important; font-weight:700}
.oa-card__b--espera{background:#B0213F}
.oa-card__bs--lleno{flex-direction:column-reverse}
.oa-card__bs--lleno > *{flex:none; width:100%}