/* ═══════════════════════════════════════════════════════════════════════════
   OPCIÓN A de la web pública (/web/opcion-a) — 03-oct-2026
   Bricolage Grotesque / Hanken Grotesk / DM Mono. La forma (tamaños, radios,
   sombras, ritmo) es la del diseño entregado.

   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»). El
   diseño venía en verde selva + amarillo. Para no saturar, cada color tiene UN
   oficio: el ROJO es la acción (botones de cotizar/reservar, lo elegido, los
   sellos) y el VERDE es la marca (rótulos, la palabra destacada, los controles
   del cotizador, la banda de «cómo se reserva»). El oscuro es el asfalto de la
   marca. Son los mismos valores de estilo.css: no hay una segunda paleta.

   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;
  /* 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%}
#opc a{color:inherit; text-decoration:none}
#opc a:hover{opacity:.86}
#opc button, #opc select{font:inherit}
#opc option{color:#1C1C1B; background:#FFFFFF}
#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}
#opc h1, #opc h2, #opc h3{font-family:var(--oa-display); margin:0}
#opc p{margin:0}
.oa-cont{max-width:1320px; margin:0 auto; padding:0 clamp(20px, 4vw, 40px); 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-pulse{animation:oa-pulse 2.2s ease-out 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}}
@keyframes oa-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 24px rgba(255,255,255,0)}}
.oa-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* ── Franja y cabecera ── */
.oa-franja{background:var(--oa-noche); color:var(--oa-niebla); font-family:var(--oa-mono); font-size:12.5px; letter-spacing:.02em}
.oa-franja .oa-cont{padding-top:10px; padding-bottom:10px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center}
.oa-franja__g{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center}
.oa-franja .i{width:16px; height:16px; stroke-width:1.8}
.oa-franja b{color:#FFFFFF; font-weight:400}
.oa-franja button{background:none; border:0; padding:0; color:#FFFFFF; cursor:pointer; min-height:24px}
.oa-cab{background:var(--oa-tinta); color:#FFFFFF}
.oa-cab .oa-cont{padding-top:16px; padding-bottom:16px; display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; align-items:center}
.oa-logo{display:flex; align-items:center; gap:12px}
.oa-logo__sello{width:40px; height:40px; border-radius:999px; background:var(--oa-verde); color:var(--oa-tinta); display:flex; align-items:center; justify-content:center; flex:none}
.oa-logo__sello .i{width:24px; height:24px; stroke-width:2}
.oa-logo img{height:84px; width:auto; display:block}   /* 06-oct: el dueño lo pidió más grande */
@media (max-width:820px){ .oa-logo img{height:60px} }
.oa-logo__n{font-family:var(--oa-display); font-weight:700; font-size:21px; line-height:1.1; display:block}
.oa-logo__s{font-family:var(--oa-mono); font-size:11.5px; color:var(--oa-niebla); letter-spacing:.06em; text-transform:uppercase; display:block}
.oa-nav{display:flex; gap:28px; font-size:15px; font-weight:500; color:#E3ECE8}
@media (max-width:820px){ .oa-nav{display:none} }
.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--g{padding:0 28px; min-height:54px; font-size:17px; gap:10px}
.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--pagar{min-height:48px; padding:0 18px; font-size:15px; box-shadow:inset 0 0 0 1.5px var(--oa-rojo)}
.oa-lin--xl{padding:0 26px; min-height:58px; font-size:18px}
.oa-lin--xl .i{width:20px; height:20px; stroke-width:2}

/* ── Portada ── */
.oa-hero{background-color:var(--oa-tinta); background-image:repeating-radial-gradient(circle at 86% 34%, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 46px); color:#FFFFFF; padding:48px 0 0}
.oa-hero__fila{display:flex; flex-wrap:wrap; align-items:center; gap:48px 64px}
.oa-hero__txt{flex:1 1 520px; min-width:0; display:flex; flex-direction:column; gap:26px}
.oa-ceja{font-family:var(--oa-mono); font-size:13px; letter-spacing:.1em; color:var(--oa-verde); text-transform:uppercase}
#opc .oa-hero h1{font-weight:700; font-size:clamp(44px, 6.2vw, 92px); line-height:.98; letter-spacing:-.02em; text-wrap:balance}
.oa-hero h1 span{color:var(--oa-verde)}
.oa-hero__p{max-width:540px; font-size:19px; line-height:1.55; color:var(--oa-claro); text-wrap:pretty}
.oa-botones{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.oa-vistos{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14.5px; color:var(--oa-niebla)}
.oa-vistos span{display:flex; align-items:center; gap:8px}
.oa-vistos .i{width:16px; height:16px; stroke:var(--oa-verde); stroke-width:2.4}
/* 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»). Pasó de 420×500 a 560×660 y
   ahora es un visor: rota las fotos y videos del «Visor del portal». La altura
   sale del ancho (aspect-ratio), así no hay un alto fijo que corregir en el celular. */
.oa-ovalo{flex:0 1 clamp(340px, 40vw, 560px); min-width:0; margin:0 auto; width:100%; max-width:560px; display:flex; flex-direction:column; gap:14px}
.oa-ovalo__marco{position:relative}
.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; 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}
.oa-ultima{position:absolute; right:-14px; bottom:34px; background:#FFFFFF; color:var(--oa-tinta) !important; border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; box-shadow:0 20px 40px -18px rgba(0,0,0,.65); max-width:210px; border:0; text-align:left; cursor:pointer}
.oa-ultima small{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.08em; color:var(--oa-gris)}
.oa-ultima b{font-weight:700; font-size:15.5px; line-height:1.3}
.oa-ultima u{font-size:13.5px; font-weight:600; text-underline-offset:3px}
@media (max-width:520px){ .oa-sello{left:-4px; width:96px; height:96px; font-size:10.5px} .oa-ultima{right:-4px} }
/* 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}
.oa-lam[data-k]{cursor:pointer}
/* 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}
.oa-ovalo__ctl{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 16px; min-height:30px; font-family:var(--oa-mono); font-size:12px; letter-spacing:.06em; color:var(--oa-niebla); text-transform:uppercase}
.oa-ovalo__ctl[hidden]{display:none}
.oa-puntos{display:flex; gap:2px}
.oa-puntos button{width:26px; height:26px; padding:0; border:0; background:none; display:grid; place-items:center; cursor:pointer}
.oa-puntos button::before{content:''; width:7px; height:7px; border-radius:999px; background:rgba(255,255,255,.4); transition:width .2s ease, background .2s ease}
.oa-puntos button[aria-pressed="true"]::before{width:22px; background:var(--oa-verde)}
.oa-sonido{display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:0 12px; border:0; border-radius:999px; background:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); color:#FFFFFF; font-family:var(--oa-mono) !important; font-size:11.5px !important; letter-spacing:.06em; text-transform:uppercase; cursor:pointer}
.oa-sonido .i{width:14px; height:14px; stroke-width:2}
.oa-sonido[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--oa-verde); color:var(--oa-verde)}

/* ── Cotizador en una frase ── */
.oa-frase{position:relative; margin-top:56px; margin-bottom:-96px; background:#FFFFFF; color:var(--oa-tinta); border-radius:28px; padding:clamp(22px, 3vw, 40px); box-shadow:0 34px 60px -34px rgba(18,18,17,.6), 0 0 0 1px var(--oa-linea); display:flex; flex-direction:column; gap:24px; scroll-margin-top:16px}
.oa-frase__cab{display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between; align-items:baseline}
.oa-frase__cab b{font-family:var(--oa-mono); font-size:12.5px; letter-spacing:.1em; font-weight:400}
.oa-frase__cab span{font-size:14px; color:var(--oa-gris)}
.oa-frase__f{display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; font-family:var(--oa-display); font-weight:600; font-size:clamp(22px, 2.5vw, 34px); line-height:1.2; letter-spacing:-.01em}
.oa-sel{position:relative; display:inline-flex; align-items:center; max-width:100%}
.oa-sel select{appearance:none; -webkit-appearance:none; field-sizing:content; border:0; border-radius:14px; background-color:var(--oa-verde); color:var(--oa-tinta); font-weight:700; padding:6px 46px 6px 16px; min-height:54px; max-width:100%; cursor:pointer}
.oa-sel .i{position:absolute; right:14px; top:50%; margin-top:-10px; width:20px; height:20px; stroke-width:2.4; pointer-events:none}
.oa-cuenta{display:inline-flex; align-items:center; gap:4px; background:var(--oa-verde); border-radius:14px; padding:5px; min-height:54px; box-sizing:border-box}
.oa-cuenta button{width:44px; height:44px; border:0; border-radius:10px; background:var(--oa-tinta); color:#FFFFFF; display:flex; align-items:center; justify-content:center; cursor:pointer}
.oa-cuenta button .i{width:18px; height:18px; stroke-width:2.4}
.oa-cuenta span{min-width:44px; text-align:center; font-weight:700}
.oa-frase__pie{display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center; border-top:1px solid var(--oa-linea); padding-top:20px}
.oa-frase__n{display:flex; align-items:center; gap:12px; font-weight:600; font-size:17px}
.oa-frase__n i{width:12px; height:12px; border-radius:999px; background:var(--oa-rojo); flex:none}
.oa-frase__acc{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
.oa-sub{font-size:15px; font-weight:600; text-decoration:underline !important; text-underline-offset:4px; min-height:44px; display:inline-flex; align-items:center; background:none; border:0; padding:0; cursor:pointer; color:inherit}

/* ── Confianza ── */
.oa-conf{padding:152px 0 64px}
.oa-conf .oa-cont{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap:24px 32px}
.oa-conf__i{display:flex; gap:14px; align-items:flex-start}
.oa-conf__c{width:46px; height:46px; border-radius:999px; background:var(--oa-tinta); color:var(--oa-verde); display:flex; align-items:center; justify-content:center; flex:none}
.oa-conf__c .i{width:22px; height:22px; stroke-width:1.8}
.oa-conf__i b{display:block; font-weight:700; font-size:17px}
.oa-conf__i span{display:block; font-size:14.5px; color:var(--oa-gris)}

/* ── Secciones ── */
.oa-sec{padding:96px 0; scroll-margin-top: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:20px 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.6vw, 64px); line-height:1.02; letter-spacing:-.02em}
.oa-tit__p{flex:0 1 420px; font-size:17px; color:var(--oa-claro); text-wrap:pretty}
.oa-ceja--tinta{color:var(--oa-tinta)}

/* ── Bitácora ── */
.oa-bit{display:flex; flex-wrap:wrap; gap:24px}
.oa-esc{flex:999 1 520px; min-width:0; position:relative; min-height:520px; border-radius:28px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:clamp(20px, 2.4vw, 32px); box-sizing:border-box; background-color:var(--oa-selva)}
.oa-esc > *{position:relative}
.oa-esc > .oa-foto{position:absolute}
.oa-esc__velo{position:absolute !important; inset:0; background:linear-gradient(180deg, rgba(18,18,17,.35) 0%, rgba(18,18,17,0) 34%, rgba(18,18,17,.78) 100%)}
.oa-esc__sup{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.oa-esc__et{display:inline-flex; align-items:center; gap:10px; background:rgba(18,18,17,.72); border-radius:999px; padding:8px 14px; font-family:var(--oa-mono); font-size:12px; letter-spacing:.06em}
.oa-esc__et i{width:8px; height:8px; border-radius:999px; background:var(--oa-rojo)}
.oa-esc__sello{width:104px; height:104px; border-radius:999px; background:var(--oa-rojo); color:#FFFFFF; transform:rotate(10deg); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--oa-mono); font-weight:500; font-size:11.5px; line-height:1.35; letter-spacing:.06em; flex:none}
.oa-esc__inf{display:flex; flex-wrap:wrap; gap:16px 24px; justify-content:space-between; align-items:flex-end}
.oa-esc__inf small{font-family:var(--oa-mono); font-size:12px; letter-spacing:.06em; display:block}
.oa-esc__inf b{font-family:var(--oa-display); font-weight:700; font-size:clamp(26px, 2.8vw, 38px); line-height:1.08; display:block; margin-top:6px}
.oa-reels{flex:1 1 400px; min-width:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(118px, 100%), 1fr)); gap:16px; align-content:start}
.oa-reel{position:relative; height:252px; border:0; border-radius:20px; padding:14px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; text-align:left; color:#FFFFFF; cursor:pointer; overflow:hidden; background-color:var(--oa-selva); box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.oa-reel[aria-pressed="true"]{box-shadow:0 0 0 3px var(--oa-verde)}
.oa-reel > *{position:relative}
.oa-reel > .oa-foto{position:absolute}
.oa-reel__p{width:36px; height:36px; border-radius:999px; background:rgba(18,18,17,.72); display:flex; align-items:center; justify-content:center}
.oa-reel__p .i{width:14px; height:14px}
.oa-reel small{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.06em; display:block}
.oa-reel b{font-weight:700; font-size:15px; line-height:1.25; display:block; text-shadow:0 1px 8px rgba(0,0,0,.6)}
.oa-bit__pie{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)}

/* ── Catálogo ── */
.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-tabs{display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--oa-tinta)}
.oa-tabs button{border:0; border-radius:999px; min-height:44px; padding:0 18px; font-weight:600; font-size:15px; cursor:pointer; background:transparent; color:var(--oa-tinta)}
.oa-tabs button[aria-pressed="true"]{background:var(--oa-tinta); color:#FFFFFF}
.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-filtros__n{margin-left:auto; font-family:var(--oa-mono); font-size:13px; letter-spacing:.04em; color:var(--oa-gris); text-transform:uppercase}
.oa-cat{display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start}
.oa-grid{flex:999 1 560px; min-width:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap:20px}
.oa-card{background:#FFFFFF; border-radius:22px; box-shadow:0 0 0 1px var(--oa-linea); overflow:hidden; display:flex; flex-direction:column; cursor:pointer}
.oa-card[data-sel="1"]{box-shadow:0 0 0 3px var(--oa-tinta), 0 22px 34px -22px rgba(28,28,27,.55)}
.oa-card__f{position:relative; height:156px; padding:14px; 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-card__urg{display:flex; flex-wrap:wrap; gap:6px}
.oa-card__cupo{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.03em; background:rgba(18,18,17,.72); border-radius:999px; padding:5px 10px}
.oa-card__c{padding:18px; display:flex; flex-direction:column; gap:10px; flex:1}
#opc .oa-card h3{font-weight:700; font-size:21px; line-height:1.15; letter-spacing:-.01em}
.oa-card__c p{font-size:14.5px; line-height:1.45; color:var(--oa-gris); text-wrap:pretty}
.oa-card__m{font-family:var(--oa-mono); font-size:12px; letter-spacing:.02em; color:var(--oa-gris)}
.oa-card__pie{margin-top:auto; padding-top:14px; border-top:1px solid var(--oa-linea); display:flex; justify-content:space-between; align-items:center; gap:12px}
.oa-card__pie small{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.08em; color:var(--oa-gris); display:block}
.oa-card__pie b{font-weight:700; font-size:17px; line-height:1.2; display:block}
.oa-card__b{border:0; border-radius:999px; min-height:44px; padding:0 18px; font-weight:700; font-size:14.5px; cursor:pointer; background:var(--oa-tinta); color:#FFFFFF; flex:none}
.oa-card[data-sel="1"] .oa-card__b{background:var(--oa-rojo); color:#FFFFFF}
.oa-vacio{grid-column:1 / -1; 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:480px}

/* ── Pase de viaje ── */
.oa-pase{flex:1 1 340px; min-width:0; max-width:440px; position:sticky; top:24px; background:var(--oa-tinta); color:#FFFFFF; border-radius:26px; box-shadow:0 34px 60px -34px rgba(18,18,17,.7); scroll-margin-top:16px}
@media (max-width:1010px){ .oa-pase{position:static; max-width:none} }
.oa-pase__a{padding:26px 26px 22px; display:flex; flex-direction:column; gap:20px}
.oa-pase__cab{display:flex; justify-content:space-between; gap:12px; font-family:var(--oa-mono); font-size:12px; letter-spacing:.1em}
.oa-pase__cab span:first-child{color:var(--oa-verde)}
.oa-pase__cab span:last-child{color:var(--oa-niebla)}
.oa-rot{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.1em; color:var(--oa-niebla); display:block}
.oa-pase__d b{font-family:var(--oa-display); font-weight:700; font-size:29px; line-height:1.1; letter-spacing:-.01em; display:block; margin-top:4px}
.oa-pase__g{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 16px}
.oa-pase__g > div{display:flex; flex-direction:column; gap:4px}
.oa-pase__g b{font-weight:600; font-size:16px}
.oa-pase__g small{font-size:13px; color:var(--oa-niebla)}
.oa-paso{display:inline-flex; align-items:center; gap:4px; margin-top:2px}
.oa-paso button{width:44px; height:44px; border:0; border-radius:12px; background:var(--oa-bosque); color:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; cursor:pointer}
.oa-paso button .i{width:16px; height:16px; stroke-width:2.4}
.oa-paso span{min-width:36px; text-align:center; font-weight:700; font-size:18px}
.oa-pase__corte{position:relative; height:24px}
.oa-pase__corte::before, .oa-pase__corte::after{content:''; position:absolute; top:0; width:24px; height:24px; border-radius:999px; background:var(--oa-papel)}
.oa-pase__corte::before{left:-12px} .oa-pase__corte::after{right:-12px}
.oa-pase__corte i{position:absolute; left:22px; right:22px; top:11px; border-top:2px dashed rgba(255,255,255,.3)}
.oa-pase__b{padding:22px 26px 26px; display:flex; flex-direction:column; gap:16px}
.oa-pase__l{display:flex; flex-direction:column; gap:10px; font-size:15.5px}
.oa-pase__l > div{display:flex; justify-content:space-between; gap:12px}
.oa-pase__l span{color:var(--oa-claro)}
.oa-pase__l b{font-weight:600}
.oa-pase__t{align-items:baseline; border-top:1px solid rgba(255,255,255,.18); padding-top:12px}
.oa-pase__t span{font-weight:700; color:#FFFFFF}
.oa-pase__t b{font-family:var(--oa-display); font-weight:700 !important; font-size:24px}
.oa-pase__n{font-size:14px; color:var(--oa-verde)}
/* Urgencia real (días que faltan, cupos libres) y lo que cuesta apartar el cupo. */
.oa-urg{display:flex; flex-wrap:wrap; gap:8px}
.oa-urg span{font-family:var(--oa-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#FFFFFF; border-radius:999px; padding:6px 12px; box-shadow:inset 0 0 0 1.5px var(--oa-rojo)}
.oa-pase__ab{align-items:baseline}
.oa-pase__ab span{color:var(--oa-verde) !important; font-weight:600}
.oa-pase__ab b{color:var(--oa-verde); font-size:18px; font-weight:700 !important}
.oa-pase__cta{background:var(--oa-rojo); color:#FFFFFF; min-height:56px; border-radius:999px; font-weight:700; font-size:17px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer; width:100%}
.oa-pase__cta .i{width:18px; height:18px}
.oa-pase__wa{color:#FFFFFF !important; min-height:50px; border-radius:999px; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); font-weight:600; font-size:15.5px; display:flex; align-items:center; justify-content:center; gap:10px; background:none; border:0; cursor:pointer; width:100%}
.oa-pase__wa .i{width:18px; height:18px; stroke-width:2}
.oa-pase__p{font-size:13px; line-height:1.5; color:var(--oa-niebla)}
.oa-barras{height:34px; opacity:.55; background-image:repeating-linear-gradient(90deg, #FFFFFF 0, #FFFFFF 2px, transparent 2px, transparent 5px, #FFFFFF 5px, #FFFFFF 6px, transparent 6px, transparent 11px, #FFFFFF 11px, #FFFFFF 14px, transparent 14px, transparent 17px)}

/* ── Cómo se reserva ── */
.oa-pasos{background:var(--oa-verde); color:var(--oa-tinta); padding:88px 0}
#opc .oa-pasos h2{max-width:820px}
.oa-pasos__g{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap:32px}
.oa-pasos__g > div{border-top:2px solid var(--oa-tinta); padding-top:18px; display:flex; flex-direction:column; gap:8px}
.oa-pasos__g i{font-style:normal; font-family:var(--oa-display); font-weight:700; font-size:72px; line-height:1; letter-spacing:-.03em}
.oa-pasos__g b{font-weight:700; font-size:22px}
.oa-pasos__g p{font-size:16px; line-height:1.55; text-wrap:pretty}

/* ── 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}
.oa-res figcaption{display:flex; align-items:center; gap:12px}
.oa-res figcaption i{width:48px; height:48px; border-radius:999px; flex:none}
.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 figcaption i{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__f{width:48px; height:48px; border-radius:999px; object-fit:cover; flex:none}
.oa-res blockquote{overflow-wrap:anywhere}

/* ── Con papeles ── */
.oa-papeles{background:var(--oa-bosque); color:#FFFFFF; padding:64px 0}
.oa-papeles .oa-cont{display:flex; flex-wrap:wrap; gap:32px 56px; align-items:center}
.oa-papeles__t{flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:10px}
#opc .oa-papeles h2{font-weight:700; font-size:clamp(28px, 3vw, 40px); line-height:1.08; letter-spacing:-.01em}
.oa-papeles__t p{font-size:16.5px; color:var(--oa-claro)}
.oa-papeles__g{flex:2 1 560px; min-width:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap:16px}
.oa-papeles__g > div{border-radius:16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); padding:18px; display:flex; flex-direction:column; gap:6px}
.oa-papeles__g small{font-family:var(--oa-mono); font-size:11.5px; letter-spacing:.08em; color:var(--oa-niebla); text-transform:uppercase}
.oa-papeles__g b{font-weight:700; font-size:18px; overflow-wrap:anywhere}

/* ── 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: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. */
.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}
  html[data-opcion="a"] body > .wa > span:not(.wa__glifo){display:none}
}

/* ── 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-pulse{animation:none} .oa-lift, .oa-lam, .oa-puntos button::before, .oa-barra{transition:none} .oa-ovalo__m[data-efecto="zoom"] .oa-lam--on img.oa-foto{animation:none} }

/* ── 06-oct-2026 · el óvalo con flechas, el visor, «Cotiza tu viaje» y la galería ── */
.oa-ovalo__marco .oa-flecha{position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:52px; height:52px; border:0; border-radius:999px;
  background:rgba(28,28,27,.72); color:#FFFFFF; font-size:34px; line-height:1; 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}
.oa-flecha--izq{left:-6px}
.oa-flecha--der{right:-6px}
.oa-ovalo__marco .oa-flecha:hover, .oa-ovalo__marco .oa-flecha:focus-visible{background:var(--oa-rojo); transform:translateY(-50%) scale(1.06)}
.oa-lam--on{cursor:zoom-in}
.oa-ctl-b{width:40px; height:40px; border:0; border-radius:999px; background:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45); color:#FFFFFF; font-size:24px; line-height:1; cursor:pointer}
.oa-ctl-b:hover, .oa-ctl-b:focus-visible{box-shadow:inset 0 0 0 1.5px var(--oa-verde); color:var(--oa-verde)}
.oa-ctl-n{font-family:var(--oa-mono); font-size:13px; color:#FFFFFF; min-width:52px; text-align:center}

.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; font-size:36px; line-height:1; cursor:pointer}
.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)}
.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-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}
  .oa-ovalo__marco .oa-flecha{width:44px; height:44px; font-size:28px}
}

.oa-cotiza{background:var(--oa-verde); color:var(--oa-tinta); padding:44px 0}
.oa-cotiza .oa-cont{display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; justify-content:space-between}
.oa-cotiza h2{font-size:clamp(26px, 3.4vw, 40px); line-height:1.05; margin:6px 0 8px}
.oa-cotiza p{max-width:56ch; margin:0}
.oa-cotiza .oa-ceja{color:var(--oa-tinta)}
.oa-cotiza .oa-pil{min-height:58px; font-size:17px; padding:0 30px; gap:10px}

.oa-gal{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap:14px}
.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:#2A2A28}
.oa-gal__p .oa-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s ease}
.oa-gal__p:hover .oa-foto{transform:scale(1.04)}
.oa-gal__p--mas{display:none}
.oa-gal--toda .oa-gal__p--mas{display:block}
.oa-gal__play{position:absolute; left:12px; bottom:12px; width:40px; height:40px; border-radius:999px; background:rgba(28,28,27,.7); color:#FFFFFF; display:grid; place-items:center}
.oa-gal__toggle{align-self:center}
@media (prefers-reduced-motion:reduce){ .oa-gal__p .oa-foto, .oa-flecha{transition:none} }

/* ── 06-oct-2026 (2.ª tanda) · accesos arriba, la puerta «¿Buscas otro destino?»,
   la lupa del óvalo, los datos de la agencia al pie de la portada y el nombre de
   cada pieza de la galería ─────────────────────────────────────────────────── */
.oa-accesos{gap:8px}
#opc .oa-franja .oa-acceso{display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 14px; border-radius:999px;
  font-family:var(--oa-cuerpo); font-size:13.5px; font-weight:700; letter-spacing:0; color:#FFFFFF; text-decoration:none;
  border:1.5px solid rgba(255,255,255,.35); background:none; cursor:pointer; transition:background .15s ease, border-color .15s ease}
.oa-franja .oa-acceso em{font-style:normal}
#opc .oa-franja .oa-acceso--cliente{border-color:var(--oa-verde)}
#opc .oa-franja .oa-acceso--asesor{border-color:#8B7FD6}
#opc .oa-franja .oa-acceso--pagar{border-color:var(--oa-rojo)}
#opc .oa-franja .oa-acceso--cliente:hover, #opc .oa-franja .oa-acceso--cliente:focus-visible{background:var(--oa-verde); color:var(--oa-tinta)}
#opc .oa-franja .oa-acceso--asesor:hover, #opc .oa-franja .oa-acceso--asesor:focus-visible{background:#8B7FD6}
#opc .oa-franja .oa-acceso--pagar:hover, #opc .oa-franja .oa-acceso--pagar:focus-visible{background:var(--oa-rojo)}
@media (max-width:560px){
  #opc .oa-franja .oa-acceso{padding:0 10px; font-size:12.5px; gap:5px; min-height:32px}
  .oa-franja__wa{display:none}
}

.oa-puerta{display:inline-flex; align-items:center; gap:10px; padding:6px 6px 6px 8px; border:2px solid #FFFFFF; border-radius:999px;
  background:#FFFFFF; color:var(--oa-tinta); cursor:pointer; text-align:left; font-family:var(--oa-cuerpo);
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6); transition:transform .15s ease}
.oa-puerta:hover, .oa-puerta:focus-visible{transform:translateY(-1px)}
.oa-puerta__ic{width:38px; height:38px; border-radius:999px; background:var(--oa-verde); display:grid; place-items:center; font-size:20px; flex:none}
.oa-puerta__t{display:flex; flex-direction:column; min-width:0; line-height:1.15}
.oa-puerta__t b{font-family:var(--oa-display); font-size:15.5px; font-weight:700}
.oa-puerta__t small{font-size:12px; color:var(--oa-gris); white-space:nowrap}
.oa-puerta__b{background:var(--oa-rojo); color:#FFFFFF; font-weight:700; font-size:15px; border-radius:999px; padding:10px 18px; flex:none}
@media (max-width:640px){ .oa-puerta__t small{display:none} .oa-puerta__b{padding:9px 14px} }

.oa-puerta-fija{position:fixed; left:50%; top:calc(env(safe-area-inset-top, 0px) + 10px); z-index:60;
  transform:translate(-50%, -140%); transition:transform .25s ease; pointer-events:none; max-width:calc(100vw - 24px)}
.oa-puerta-fija--on{transform:translate(-50%, 0); pointer-events:auto}
.oa-puerta-fija .oa-puerta{box-shadow:0 10px 30px -10px rgba(0,0,0,.55), 0 0 0 1px var(--oa-linea)}

.oa-ovalo__marco .oa-lupa{position:absolute; left:14%; bottom:6%; z-index:3; width:48px; height:48px; border:0; border-radius:999px;
  background:rgba(28,28,27,.72); color:#FFFFFF; display:grid; place-items:center; cursor:zoom-in; box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.oa-ovalo__marco .oa-lupa:hover, .oa-ovalo__marco .oa-lupa:focus-visible{background:var(--oa-rojo)}

.oa-datos{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap:22px 28px; margin-top:44px}
.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, 2vw, 26px); font-weight:700; color:#FFFFFF; line-height:1.1}
.oa-datos__i span:last-child{font-size:14px; color:var(--oa-niebla)}

.oa-gal__n{position:absolute; left:0; right:0; bottom:0; padding:28px 12px 10px; text-align:left; color:#FFFFFF; font-weight:700; font-size:14px; line-height:1.25;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%); text-shadow:0 1px 6px rgba(0,0,0,.5)}
.oa-gal__play{bottom:auto; top:12px}
@media (prefers-reduced-motion:reduce){ .oa-puerta-fija, .oa-puerta{transition:none} }
.oa-hero{padding-bottom:44px}

/* ── 06-oct-2026 (3.ª tanda) · «Mi cuenta»: la puerta del cliente ───────────
   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». Era `.oa-acceso--cliente`, una píldora de 34 px de alto idéntica a
   la del asesor y con un rótulo —«Soy cliente»— que no dice qué hay dentro.
   Ahora es un bloque sólido en el verde de marca, con dos renglones: el QUÉ y
   el PARA QUÉ. Relleno, no contorno: en la franja oscura todo lo demás va
   perfilado, así que lo macizo es lo que destaca sin añadir otro color. */
#opc .oa-franja .oa-cuenta{display:inline-flex; align-items:center; gap:10px; min-height:46px;
  padding:5px 8px 5px 14px; border-radius:999px; border:0; cursor:pointer;
  font-family:var(--oa-cuerpo); color:var(--oa-tinta); background:var(--oa-verde);
  box-shadow:0 2px 14px rgba(63,180,153,.34);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
#opc .oa-franja .oa-cuenta:hover, #opc .oa-franja .oa-cuenta:focus-visible{
  transform:translateY(-1px); box-shadow:0 6px 22px rgba(63,180,153,.5); filter:saturate(1.08)}
.oa-cuenta__ic{font-size:20px; line-height:1; flex:none}
.oa-cuenta__t{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; text-align:left}
.oa-cuenta__t b{font-size:14.5px; font-weight:800; letter-spacing:-.01em}
.oa-cuenta__t small{font-size:11.5px; font-weight:600; opacity:.74}
/* La flecha en su propio disco: dice «esto te lleva a otro sitio» sin una
   palabra más, y mantiene el bloque legible de un vistazo. */
.oa-cuenta__f{display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:999px; background:rgba(28,28,27,.13); flex:none}
.oa-cuenta__f svg{width:15px; height:15px}
/* El asesor se achica a su lado: lo usan tres personas, no los clientes. */
#opc .oa-franja .oa-acceso--asesor{font-size:12.5px; min-height:32px; padding:0 11px; opacity:.82}
#opc .oa-franja .oa-acceso--asesor:hover{opacity:1}
@media (max-width:560px){
  /* En el móvil la franja es estrecha: 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. */
  #opc .oa-franja .oa-cuenta{min-height:40px; padding:4px 6px 4px 11px; gap:8px}
  .oa-cuenta__t small{display:none}
  .oa-cuenta__f{width:26px; height:26px}
}