@font-face{font-family:'SaltyAges';src:url('Salty_Ages.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Gotham';src:url('Gotham_Book.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Gotham';src:url('Gotham-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'Gotham';src:url('Gotham-Black.otf') format('opentype');font-weight:900;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
:root{
--sky:#7AD0EA;--turq:#00ACCD;--ocean:#006CA3;--deep:#003E6A;
/* Los mismos colores en piezas. Hace falta porque rgba() no admite una
   variable de color entera: para poner una transparencia hay que darle los
   tres números sueltos. Sin esto, las 104 transparencias del sitio se
   quedaban azules aunque la marca cambiara. */
--turq-rgb:0,172,205;--ocean-rgb:0,108,163;--deep-rgb:0,62,106;
--sky-rgb:122,208,234;--sombra-rgb:0,30,52;
--sand:#E2DDCB;--sand-lt:#F5F1E8;--paper:#FAF8F3;--ink:#2A2F35;--muted:#6B7280;
--r-sm:18px;--r-md:26px;--r-lg:36px;--r-xl:50px;
}
html{scroll-behavior:smooth;overflow-x:clip}
html{background:#e8eef1}
body{background:transparent;color:var(--ink);font-family:'Gotham','Jost',sans-serif;overflow-x:clip;line-height:1.6}
body[data-no-dock]{background:var(--paper)}
.salty{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;letter-spacing:.01em}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

nav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:flex-start;justify-content:space-between;padding:1.6rem 2.2rem;transition:padding .4s}
/* La barra del menú no tiene fondo: es transparente en toda su superficie.
   Pero como caja ocupaba todo el ancho de la pantalla y casi 370 px de alto,
   se quedaba con los clics de esa zona sin que nada se viera ahí. Cualquier
   botón que cayera debajo —los de la escena de Actividades, por ejemplo— no
   respondía. Ahora la barra deja pasar el clic y solo lo reciben el logo y
   los enlaces, que es lo único que de verdad hay. */
nav#nav{pointer-events:none}
nav#nav .nav-marca,nav#nav .nav-r,nav#nav .nav-links,nav#nav .na,nav#nav .lang,nav#nav .lang-btn,
nav#nav .menu-btn,nav#nav .burger,nav#nav .logo,nav#nav .pos-sel,nav#nav .pos-btn,nav#nav .pos-menu,
nav#nav .na-casas,nav#nav .na-casas-menu,nav#nav .na-casas-f{pointer-events:auto}
/* ── LOS LOGOS DE LAS TRES CASAS · 5/09/2026 ─────────────────────────
   Los tres estaban en recuadros distintos (1.35 · 1.29 · 1.72), asi que a
   una misma altura salian con anchos distintos —El Recuerdo 93px, Tropicana
   69px— y con pesos distintos: Tropicana pesaba un 41% menos de tinta.
   Por eso se veian descuadrados.
   Ahora los seis archivos comparten recuadro (522x360, ratio 1.45) y la
   MISMA cantidad de tinta. La altura sube de 54 a 62 px para compensar el
   aire del recuadro comun: asi ninguno encoge respecto a como se veia. */
.logo{height:62px;transition:height .3s;position:relative;z-index:2}
.logo img{height:100%;width:auto}
.logo .lw{display:block}.logo .lc{display:none}
nav.solid .logo .lw{display:block}nav.solid .logo .lc{display:none}
nav.solid{background:transparent;backdrop-filter:none;box-shadow:none}
nav.solid .logo{height:53px}
/* Al quedar sobre fondo claro, el texto pasa a oscuro legible (sin banda de fondo) */
nav.solid .na{color:#fff}
nav.solid .na.on,nav.solid .na:hover{color:var(--sky,var(--sky))}
nav.solid .lang,nav.solid .lang-btn{color:#fff;border-color:rgba(255,255,255,.5)}
nav.solid .menu-btn{color:#fff}
nav.solid .burger span{background:#fff}
/* Menú vertical a la derecha (desktop) */
.nav-r{display:flex;flex-direction:column;align-items:flex-end;gap:1rem}
.nav-links{display:flex;flex-direction:column;align-items:flex-end;gap:.9rem}
.na{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:500;transition:color .3s,padding-right .3s;position:relative}
.na::after{content:'';position:absolute;right:0;bottom:-5px;width:0;height:1.5px;background:var(--turq);transition:width .35s}
.na:hover{color:var(--aqua,var(--sky));padding-right:.4rem}
.na:hover::after{width:100%}
.na.active{color:var(--aqua,var(--sky))}
.na.active::after{width:100%}
/* Check-in: enlace destacado tipo botón en el nav */
.na-checkin{border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:.4rem .9rem!important;background:rgba(255,255,255,.1);backdrop-filter:blur(6px)}
.na-checkin::after{display:none}
.na-checkin:hover{background:var(--turq,var(--turq));border-color:var(--turq,var(--turq));color:#fff!important;padding-right:.9rem}
nav.solid .na-checkin{border-color:rgba(var(--deep-rgb),.4)}
.lang{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.55);color:#fff;font-size:.56rem;letter-spacing:.12em;font-weight:700;padding:.45rem .9rem;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);transition:all .3s;margin-top:.4rem}
.lang:hover{background:#fff;color:var(--deep,var(--deep));border-color:#fff}
.menu-btn{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer}
@media(max-width:880px){
  nav{align-items:center;padding:.9rem 1.2rem}
  .logo{height:46px}
  .nav-r{flex-direction:row;align-items:center}
  /* El menú del teléfono, en claro. La cortina azul oscura que había
     aquí se retiró a pedido de Aarón (23/08/2026): ahora es una lámina
     papel, ligera, con los enlaces en el azul de la casa — el mismo
     lenguaje del resto de la web. Cae desde arriba, bajo el logo, y
     ocupa solo lo que ocupan sus enlaces. */
  .nav-links{display:none;position:fixed;top:0;left:0;right:0;flex-direction:column;align-items:flex-start;
    background:rgba(250,248,243,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    padding:5.2rem 1.6rem 1.6rem;gap:1.1rem;
    border-bottom:1px solid rgba(var(--deep-rgb),.08);
    box-shadow:0 30px 60px -30px rgba(var(--sombra-rgb),.35);
    border-radius:0 0 18px 18px}
  .nav-links.open{display:flex;animation:menuCae .3s ease both}
  @keyframes menuCae{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  .na{font-size:.95rem;color:var(--ocean);text-shadow:none}
  .nav-links .na{color:var(--ocean)}
  .nav-links .na.on,.nav-links .na:hover{color:var(--turq)}
  nav.solid .nav-links .na{color:var(--ocean);text-shadow:none}
  nav.solid .nav-links .na.on,nav.solid .nav-links .na:hover{color:var(--turq)}
  .nav-links .na-checkin{border-color:rgba(var(--turq-rgb),.55);background:rgba(var(--turq-rgb),.08);color:var(--ocean)!important}
  .nav-links .na-checkin:hover{background:var(--turq);color:#fff!important}
  /* Con el menú abierto, lo que queda encima de la lámina clara se
     oscurece para verse: el logo pasa a su versión de color y los
     botones de idioma y de cerrar dejan el blanco. */
  nav:has(.nav-links.open) .logo .lw{display:none}
  nav:has(.nav-links.open) .logo .lc{display:block}
  .nav-links.open~.lang{background:rgba(var(--deep-rgb),.06);border-color:rgba(var(--deep-rgb),.45);color:var(--deep)}
  .nav-links.open~.menu-btn{color:var(--deep)}
  .na::after{left:0;right:auto}
  .menu-btn{display:block;position:relative;z-index:600}
}

.tag{font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--turq);font-weight:700;display:block;text-align:center}
.h2{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);color:var(--ocean);line-height:1.05;text-align:center;margin:.5rem 0 .3rem}
.h2 b{color:var(--turq);font-weight:400}
.divider{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:1rem auto 2.5rem;max-width:200px}
.divider .ln{height:1px;background:linear-gradient(90deg,transparent,var(--turq));flex:1}
.divider .ln:last-child{background:linear-gradient(90deg,var(--turq),transparent)}
.divider .dt{width:8px;height:8px;border-radius:50%;background:var(--turq)}

.sec{padding:5rem 1.5rem;max-width:1200px;margin:0 auto}
.btn{display:inline-block;background:var(--turq);color:#fff;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:.95rem 2.2rem;border:none;border-radius:var(--r-md);cursor:pointer;transition:all .3s}
.btn:hover{background:var(--ocean);transform:translateY(-2px)}
.btn-o{display:inline-block;background:rgba(255,255,255,.12);color:#fff;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;padding:.95rem 2.2rem;border:1.5px solid rgba(255,255,255,.7);border-radius:var(--r-md);cursor:pointer;backdrop-filter:blur(6px);transition:all .3s}
.btn-o:hover{background:#fff;color:var(--ocean)}

footer{background:#001828;padding:3rem 1.5rem 2rem;text-align:center;margin-top:4rem}
.foot-logo{height:69px;margin:0 auto 1.5rem;opacity:.9}
.foot-links{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.foot-links a{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:color .3s}
.foot-links a:hover{color:var(--sky)}
footer p{font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.25);line-height:1.8;max-width:700px;margin:0 auto}

.rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:translateY(0) scale(1)}
/* Variante con más presencia: la caja "emerge" con escala marcada */
.rv-pop{opacity:0;transform:translateY(48px) scale(.94);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rv-pop.on{opacity:1;transform:translateY(0) scale(1)}
/* Reveal escalonado para hijos de una grilla (efecto cascada) */
.rv-stagger>*{opacity:0;transform:translateY(40px) scale(.96);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv-stagger.on>*{opacity:1;transform:translateY(0) scale(1)}
/* El escalonado lo numera motion.js en --rv-espera, hijo por hijo, sean 6 o
   60. Antes estaba escrito a mano del 1 al 6 y la galeria, que tiene 24
   fotos, entraba a partir de la septima toda de golpe. */
.rv-stagger.on>*{transition-delay:var(--rv-espera,0ms)}
/* Y si el JavaScript no llegara a correr, estos seis mantienen la cascada
   de siempre: peor es que entren todas juntas. */
.rv-stagger.on>*:nth-child(1){--rv-espera:.05s}
.rv-stagger.on>*:nth-child(2){--rv-espera:.13s}
.rv-stagger.on>*:nth-child(3){--rv-espera:.21s}
.rv-stagger.on>*:nth-child(4){--rv-espera:.29s}
.rv-stagger.on>*:nth-child(5){--rv-espera:.37s}
.rv-stagger.on>*:nth-child(6){--rv-espera:.45s}

/* ====== CAPAS DE MOVIMIENTO AL SCROLL ====== */
/* Contenedor que recorta el zoom/parallax de su imagen interna */
.par-wrap{position:relative;overflow:hidden}
/* La imagen interna se hace algo más grande para que el parallax no muestre bordes */
.par-img{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform}
[data-parallax],[data-zoom],[data-drift]{will-change:transform}
/* En móvil/táctil el parallax se desactiva (JS): las capas deben llenar su caja sin huecos */
@media(max-width:979px),(hover:none){
  .par-img,.ga-par,.pm-par,.gu-par,.av-zoom,.av-cta-bg{inset:0!important;transform:none!important}
  [data-parallax],[data-zoom],[data-drift]{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  [data-parallax],[data-zoom],[data-drift]{transform:none!important}
  /* .rv faltaba aqui y es la clase mas usada del sitio: quien pide que no se
     muevan las cosas la veia deslizarse igual, casi un segundo. */
  .rv,.rv-pop,.rv-stagger>*{opacity:1;transform:none;transition:none}
  .rv-stagger.on>*{transition-delay:0s}
}

.page-hero{position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8rem 1.5rem 5rem;overflow:hidden}
.page-hero .pbg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.page-hero .pbg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,70,.55),rgba(var(--deep-rgb),.4))}
.page-hero h1{position:relative;z-index:2;font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.8rem,7vw,5rem);color:#fff;line-height:1;text-shadow:0 3px 22px rgba(0,40,70,.4)}
.page-hero p{position:relative;z-index:2;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:#fff;margin-top:.6rem;text-shadow:0 1px 8px rgba(0,40,70,.5)}

/* Modal de reserva mejorado */
.modal{position:fixed;inset:0;z-index:1000;background:rgba(0,40,70,.6);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.show{display:flex}
.mbox{background:#fff;border-radius:var(--r-lg);padding:2rem 1.8rem;max-width:480px;width:100%;box-shadow:0 30px 80px rgba(0,40,70,.45);position:relative;max-height:92vh;overflow-y:auto}
.mt{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;font-size:2rem;color:var(--ocean);margin-bottom:.2rem;line-height:1}
.msub{font-size:.62rem;color:var(--muted);margin-bottom:1.2rem}
.mf{display:flex;flex-direction:column;gap:.7rem}
.mrow{display:flex;gap:.6rem}
.mrow3{display:flex;gap:.5rem}
.mfield{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}
.mlb{font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:.25rem}
.mf input,.mf select{padding:.6rem .7rem;border:1.5px solid rgba(var(--ocean-rgb),.18);border-radius:var(--r-sm);font-family:'Gotham','Jost',sans-serif;font-size:.7rem;width:100%;background:#fff;color:var(--ink)}
.mf input:focus,.mf select:focus{outline:none;border-color:var(--turq)}
.mextras{display:flex;flex-direction:column;gap:.45rem;background:rgba(var(--turq-rgb),.06);border:1px solid rgba(var(--turq-rgb),.15);border-radius:var(--r-md);padding:.8rem .9rem;margin-top:.2rem}
.mchk{display:flex;align-items:flex-start;gap:.5rem;font-size:.64rem;color:var(--ink);line-height:1.4;cursor:pointer}
.mchk input{width:auto;flex-shrink:0;margin-top:.1rem;accent-color:var(--turq)}
.mchk-sm{font-size:.54rem;color:var(--muted);margin-top:.2rem}
.mcaptcha{display:flex;align-items:center;gap:.7rem;background:rgba(var(--deep-rgb),.05);border-radius:var(--r-sm);padding:.5rem .8rem;margin-top:.2rem}
.mcaptcha .mlb{font-size:.6rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.mcaptcha .mlb b{color:var(--ocean);font-size:.7rem}
.mcaptcha input{margin:0}
.mx{position:absolute;top:.9rem;right:1.1rem;font-size:1.6rem;color:var(--muted);cursor:pointer;background:none;border:none;line-height:1;z-index:2}
.mf .btn{margin-top:.4rem;width:100%}

/* ====== SISTEMA DE ICONOS SVG ====== */
/* El color del icono: turquesa por defecto, pero NUNCA clavado. Antes
   estaba fijo en turquesa y pasaba esto: un botón que al pasar el cursor
   se pinta de turquesa dejaba su icono turquesa sobre turquesa —
   invisible. La regla de abajo hace que dentro de cualquier botón,
   enlace o ficha interactiva el icono ACOMPAÑE al color del texto: si el
   texto pasa a blanco, el icono pasa a blanco con él. */
i[data-ic]{display:inline-flex!important;align-items:center;justify-content:center;line-height:0;vertical-align:middle;width:1.1em;height:1.1em;max-width:1.3em;max-height:1.3em;color:var(--turq);flex-shrink:0;overflow:hidden;transition:color .3s}
button i[data-ic],.btn i[data-ic],.btn-o i[data-ic],
.act-ico i[data-ic],.reef-chip i[data-ic],.spot-pulse i[data-ic],
.riel-ico i[data-ic],.ast-ava i[data-ic],.ast-enviar i[data-ic],
.wa-bubble i[data-ic],.na-checkin i[data-ic],.act-sel i[data-ic],
.glass-btn i[data-ic],.av-fold-ic i[data-ic],.av-fold-chev i[data-ic]{color:inherit}
i[data-ic] svg,.ic{width:1em!important;height:1em!important;max-width:100%;max-height:100%;display:block;flex-shrink:0}

/* ====== BUSCADOR DE TARIFAS · GLASS 2026 (Liquid Glass tipo Apple) ====== */
.sb-wrap{position:relative;z-index:30;max-width:1120px;margin:1.5rem auto 0;padding:0 1.2rem}
.sb-head{text-align:center;margin-bottom:1.1rem}
.sb-title{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.7rem,4vw,2.8rem);color:var(--ocean);line-height:1.05}
.searchbar{position:relative;z-index:30;opacity:0;animation:fadeUp 1.1s .3s forwards}
.searchbar-inner{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.3));
  backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.85);
  border-radius:26px 26px 0 0;
  box-shadow:0 30px 70px -24px rgba(var(--deep-rgb),.5),inset 0 1px 0 rgba(255,255,255,.6);
  padding:1.3rem 1.4rem;display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;align-items:end}
.sb-f{display:flex;flex-direction:column;gap:.45rem;padding:0 .65rem;position:relative}
.sb-f.has-select{position:relative}
.sb-f.has-select::before{content:'';position:absolute;right:.65rem;bottom:.55rem;width:7px;height:7px;border-right:2px solid var(--turq);border-bottom:2px solid var(--turq);transform:rotate(45deg);pointer-events:none;opacity:.8}
.sb-f:not(:last-of-type)::after{content:'';position:absolute;right:0;top:14%;height:72%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.5) 40%,rgba(var(--ocean-rgb),.12),transparent);pointer-events:none}
.sb-lb{display:flex;align-items:center;gap:.35rem;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ocean,var(--ocean));font-weight:700;white-space:nowrap}
.sb-lb i[data-ic]{color:var(--turq,var(--turq));font-size:.85rem}
.sb-f input[type=date],.sb-f select{border:none;background:transparent;font-family:'Gotham','Jost',sans-serif;font-size:.76rem;color:var(--deep,var(--deep));padding:.2rem 0;width:100%;font-weight:600;cursor:pointer}
.sb-f input:focus,.sb-f select:focus{outline:none}
.sb-f select{-webkit-appearance:none;appearance:none}
.sb-f select option{color:#1a2b38}
.sb-f input[type=date]::-webkit-calendar-picker-indicator{opacity:.8;cursor:pointer;filter:invert(28%) sepia(60%) saturate(900%) hue-rotate(165deg)}
.sb-f input[type=date]::-webkit-datetime-edit{color:var(--deep,var(--deep));font-weight:600}
.sb-f input[type=date]:invalid::-webkit-datetime-edit{color:rgba(var(--deep-rgb),.55)}
/* Steppers como cápsulas glass */
.stepper{display:flex;align-items:center;gap:.25rem}
.stepper button{width:26px;height:26px;border:1px solid rgba(255,255,255,.6);border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.25));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--ocean,var(--ocean));cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .15s,box-shadow .25s;flex-shrink:0;box-shadow:0 2px 8px rgba(var(--deep-rgb),.12),inset 0 1px 0 rgba(255,255,255,.7)}
.stepper button:hover{background:linear-gradient(180deg,var(--turq,var(--turq)),#0094b8);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(var(--turq-rgb),.4)}
.stepper button:active{transform:translateY(0) scale(.94)}
.stepper button i[data-ic]{font-size:.8rem}
.stepper span{flex:1;text-align:center;font-size:.85rem;font-weight:700;color:var(--ink,#2A2F35);min-width:22px}
/* Footer glass turquesa (no azul marino) */
.searchbar-foot{position:relative;background:linear-gradient(135deg,rgba(var(--turq-rgb),.82),rgba(0,130,160,.8));
  backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);
  border:1px solid rgba(255,255,255,.18);border-top:none;border-radius:0 0 26px 26px;
  padding:1.2rem 1.7rem;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  box-shadow:0 30px 70px -24px rgba(0,140,170,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.sb-est-box{display:flex;flex-direction:column;gap:.25rem;color:#fff}
.sb-est-lb{font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;opacity:.92;font-weight:700}
.sb-est{display:flex;align-items:center;gap:.5rem;font-family:'SaltyAges','Cormorant Garamond',serif;font-size:2rem;line-height:1;color:#fff}
.sb-est i[data-ic]{font-size:1.2rem;opacity:.92}
.sb-est small{font-size:.7rem;opacity:.85;font-family:'Gotham','Jost',sans-serif;letter-spacing:.05em}
.sb-fly{display:flex;align-items:center;gap:.45rem;font-size:.56rem;letter-spacing:.03em;color:#fff;opacity:.92;margin-top:.1rem}
.sb-fly i[data-ic]{font-size:.85rem;opacity:.9}
.sb-est-note{font-size:.48rem;letter-spacing:.03em;opacity:.72;max-width:420px;line-height:1.5;margin-top:.15rem}
/* Botón glass claro con texto turquesa (no negro) */
.searchbar-foot .btn{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));
  color:var(--turq);white-space:nowrap;border:1px solid rgba(255,255,255,.7);font-weight:700;
  box-shadow:0 8px 24px -6px rgba(0,120,150,.45),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(6px)}
.searchbar-foot .btn:hover{background:#fff;color:var(--ocean);transform:translateY(-2px);box-shadow:0 14px 32px -6px rgba(0,120,150,.55)}
@media(max-width:860px){
  .searchbar{margin-top:-30px}
  .searchbar-inner{grid-template-columns:1fr 1fr;gap:.4rem}
  .sb-f{padding:.55rem .7rem}
  .sb-f::after{display:none}
  .searchbar-foot{flex-direction:column;align-items:stretch;text-align:center}
  .searchbar-foot .btn{width:100%;justify-content:center}
  .sb-est-note{max-width:100%}
}

/* Ajuste de iconos dentro de contenedores específicos */
.esp-ico i[data-ic]{font-size:1.35rem;color:var(--turq,var(--turq))}
.esp-ico .ic{width:1.35rem;height:1.35rem}
.menu-cat-ico i[data-ic]{font-size:1.4rem;color:var(--turq,var(--turq))}
.menu-cat-ico .ic{width:1.4rem;height:1.4rem}
.mlb i[data-ic]{color:var(--turq,var(--turq));font-size:.95rem}
.mchk i[data-ic]{color:var(--turq,var(--turq));font-size:1rem;flex-shrink:0}
.mcaptcha i[data-ic]{color:var(--ocean,var(--ocean))}

/* ============================================================
   DIRECCIÓN DE ARTE — frontend-design applied
   Page-load cinematográfico, atmósfera, micro-interacciones
   ============================================================ */

/* 1) Grano sutil global para dar textura (atmósfera, no color plano) */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 2) Hero: profundidad con viñeta + degradado atmosférico */
.hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 50% 30%,transparent 40%,rgba(0,40,70,.28) 100%),linear-gradient(180deg,rgba(0,40,70,.32) 0%,transparent 28%,transparent 60%,rgba(0,40,70,.15) 100%)}
.hero-c{position:relative;z-index:3}
.hero .slide{z-index:0}
.hero .waves,.hero .dots{z-index:4}

/* 3) Page-load: animación de entrada del hero gestionada en el <style> del index (fadeUp).
   Aquí solo conservamos heroFade y heroKenburns que usan otros componentes. */
@keyframes heroFade{from{opacity:0}to{opacity:1}}

/* 4) Título display con más presencia y refinamiento */
.hero-h1{letter-spacing:.005em}
.hero-tag{letter-spacing:.42em}

/* 5) Micro-interacciones refinadas en tarjetas (luz que cruza al hover) */
.plan,.posada-card,.cayo-card,.post,.esp{position:relative;overflow:hidden}
.plan::before,.post::before,.esp::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;z-index:4;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .8s cubic-bezier(.2,.7,.2,1);opacity:0}
.plan:hover::before,.post:hover::before,.esp:hover::before{left:130%;opacity:1}

/* 6) Botón principal: brillo sutil al hover */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .4s}
.btn:hover::after{opacity:1}

/* 7) Respeto a accesibilidad: si el usuario prefiere menos movimiento */
@media(prefers-reduced-motion:reduce){
  .hero-tag,.hero-h1,.hero-sub,.hero-btns,.searchbar{animation:none;opacity:1}
  .plan::before,.post::before,.esp::before{display:none}
}

/* ====== LECTOR DE BLOG INTEGRADO ====== */
.reader{position:fixed;inset:0;z-index:2000;background:rgba(var(--sombra-rgb),.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding:3vh 1.2rem;overflow-y:auto}
.reader.show{display:flex;animation:heroFade .35s ease both}
.reader-box{background:var(--paper,var(--paper));border-radius:var(--r-lg,36px);max-width:760px;width:100%;box-shadow:0 40px 100px -20px rgba(var(--sombra-rgb),.7);position:relative;overflow:hidden;margin-bottom:3vh;animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both}
.reader-hero{height:300px;background-size:cover;background-position:center;position:relative}
.reader-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(250,248,243,.4) 80%,var(--paper) 100%)}
.reader-x{position:absolute;top:1rem;right:1.2rem;z-index:5;width:42px;height:42px;border-radius:50%;border:none;background:rgba(var(--sombra-rgb),.4);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;backdrop-filter:blur(8px);transition:background .3s}
.reader-x:hover{background:rgba(var(--sombra-rgb),.7)}
.reader-c{padding:2.4rem 2.8rem 1rem}
.reader-tag{display:inline-block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--turq);font-weight:700;margin-bottom:.8rem}
.reader-t{font-size:clamp(1.8rem,4.5vw,2.9rem);color:var(--ocean);line-height:1.06;margin-bottom:1.5rem}
.reader-c h3{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;font-size:1.5rem;color:var(--turq);margin:1.8rem 0 .6rem}
.reader-c p{font-size:.9rem;line-height:1.85;color:var(--ink);margin-bottom:1rem}
.reader-c em{color:var(--muted);font-style:italic}
.reader-cta{padding:1rem 2.8rem 2.6rem;text-align:center}
@media(max-width:680px){.reader-c{padding:1.8rem 1.5rem .8rem}.reader-cta{padding:1rem 1.5rem 2.2rem}.reader-hero{height:200px}}

/* ====== SECCIÓN DE UBICACIONES ====== */
.loc-sec{padding-top:1rem}
.loc-intro{max-width:640px;margin:0 auto 2.5rem;text-align:center;font-size:.82rem;line-height:1.8;color:var(--muted)}
.loc-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;max-width:1100px;margin:0 auto}
.loc-g2{max-width:740px;margin-top:1.6rem}
.loc-card{background:#fff;border-radius:var(--r-lg,36px);overflow:hidden;box-shadow:0 16px 44px -16px rgba(var(--deep-rgb),.3);border:1px solid rgba(var(--turq-rgb),.1);transition:transform .35s,box-shadow .35s}
.loc-card:hover{transform:translateY(-5px);box-shadow:0 26px 56px -18px rgba(var(--deep-rgb),.4)}
.loc-map{position:relative;height:220px;background:#cfeaf2}
.loc-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(1.05)}
.loc-info{padding:1.4rem 1.6rem 1.6rem}
.loc-badge{display:inline-block;font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--turq);background:rgba(var(--turq-rgb),.1);padding:.3rem .7rem;border-radius:999px;margin-bottom:.7rem}
.loc-name{font-size:1.7rem;color:var(--ocean);line-height:1;margin-bottom:.6rem}
.loc-addr{display:flex;align-items:flex-start;gap:.45rem;font-size:.72rem;color:var(--muted);line-height:1.5;margin-bottom:1rem}
.loc-addr i[data-ic]{color:var(--turq);flex-shrink:0;font-size:.95rem;margin-top:.05rem}
.loc-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ocean);transition:gap .25s,color .25s}
.loc-link i[data-ic]{font-size:.9rem;transition:transform .25s}
.loc-link:hover{color:var(--turq)}
.loc-link:hover i[data-ic]{transform:translateX(4px)}
.loc-office-head{margin:4rem auto 0;text-align:center}
.loc-office-head .tag{margin-bottom:.8rem}

/* ====== VIDEO DE PORTADA (hero) ====== */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#013047}
.hero-video{position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero-video.ready{opacity:1}
/* fallback: mientras carga, se ve el poster con un leve zoom vivo */
.hero-media::before{content:'';position:absolute;inset:0;background:url('img/hero.jpg') center/cover no-repeat;z-index:-1;animation:heroKenburns 18s ease-in-out infinite alternate}
@keyframes heroKenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hero-media::before{animation:none}}

/* ====== PAGE-HERO INMERSIVO CON VIDEO (páginas internas) ====== */
.page-hero{min-height:92vh !important}
.page-hero .pbg-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:#013047}
.page-hero .pbg-video video{position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:100%;min-height:100%;transform:translate(-50%,-50%);object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.page-hero .pbg-video video.ready{opacity:1}
.page-hero .pbg-video::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 30%,transparent 35%,rgba(0,40,70,.45) 100%),linear-gradient(180deg,rgba(0,40,70,.5) 0%,rgba(0,40,70,.2) 40%,rgba(0,40,70,.35) 100%)}
.page-hero h1{animation:fadeUp 1.1s .35s both}
.page-hero p{animation:fadeUp 1.1s .55s both}
/* olas también en page-hero */
.page-hero .waves{position:absolute;bottom:-1px;left:0;width:100%;z-index:2;line-height:0;pointer-events:none;overflow:hidden}
.page-hero .waves svg{width:200%;height:110px;display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ====== PLANES UNIFICADOS (grilla de tarjetas con foto) ====== */
.planes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.6rem;max-width:1140px;margin:0 auto}
.plan-card{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 14px 40px -16px rgba(var(--deep-rgb),.28);border:1px solid rgba(var(--turq-rgb),.08);cursor:pointer;transition:transform .4s,box-shadow .4s;display:flex;flex-direction:column}
.plan-card:hover{transform:translateY(-6px);box-shadow:0 26px 56px -18px rgba(var(--deep-rgb),.4)}
.plan-card-img{height:190px;background-size:cover;background-position:center;position:relative}
.plan-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,40,70,.45))}
.plan-card-tag{position:absolute;top:.9rem;left:.9rem;z-index:2;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:rgba(var(--turq-rgb),.92);padding:.4rem .8rem;border-radius:999px}
.plan-card-c{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.plan-card-n{font-size:1.55rem;color:var(--ocean);line-height:1.05;margin-bottom:.4rem}
.plan-card-d{font-size:.72rem;color:var(--muted);line-height:1.6;flex:1;margin-bottom:1.1rem}
.plan-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.plan-card-pr{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.5rem;color:var(--turq);line-height:1.1}
.plan-card-pr .pcp-from{font-family:'Gotham','Jost',sans-serif;font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block}
.plan-card-pr small{display:block;font-family:'Gotham','Jost',sans-serif;font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plan-card-btn{padding:.7rem 1.3rem;font-size:.54rem}

/* Ficha del plan con las 3 opciones lado a lado */
.plan-sheet{position:fixed;inset:0;z-index:1500;background:rgba(var(--sombra-rgb),.6);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding:3vh 1.2rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
.plan-sheet.show{display:flex}
.plan-sheet-box{background:var(--paper);border-radius:var(--r-lg);max-width:980px;width:100%;overflow:hidden;box-shadow:0 40px 100px -20px rgba(var(--sombra-rgb),.7);position:relative;margin:auto}
.plan-sheet-hero{height:170px;background-size:cover;background-position:center;position:relative;display:flex;align-items:flex-end;padding:1.5rem 2rem}
.plan-sheet-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,70,.2),rgba(0,40,70,.75))}
.plan-sheet-title{position:relative;z-index:2;color:#fff;font-size:2.2rem;line-height:1;text-shadow:0 2px 16px rgba(0,40,70,.5)}
.plan-sheet-x{position:absolute;top:1rem;right:1rem;z-index:5;width:40px;height:40px;border-radius:50%;border:none;background:rgba(var(--sombra-rgb),.4);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;backdrop-filter:blur(8px);transition:background .3s}
.plan-sheet-x:hover{background:rgba(var(--sombra-rgb),.7)}
.plan-sheet-x i[data-ic]{color:#fff}
.plan-sheet-body{padding:1.8rem 2rem 2.2rem}
.plan-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;align-items:stretch}
/* En pantallas medianas forzamos las 3 columnas para que no se aprieten a 2 */
@media(min-width:760px){.plan-opts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:759px){.plan-opts{grid-template-columns:1fr}}
.plan-opt{border:1.5px solid rgba(var(--turq-rgb),.18);border-radius:var(--r-md);padding:1.5rem 1.3rem;display:flex;flex-direction:column;position:relative;background:#fff;transition:border-color .3s,transform .3s}
.plan-opt:hover{border-color:var(--turq);transform:translateY(-3px)}
.plan-opt.destacado{border-color:var(--turq);box-shadow:0 14px 36px -14px rgba(var(--turq-rgb),.5)}
.plan-opt-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--turq);padding:.32rem .8rem;border-radius:999px;white-space:nowrap}
.plan-opt-n{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.5rem;color:var(--ocean);line-height:1}
.plan-opt-sub{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 .7rem}
.plan-opt-pr{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:2rem;color:var(--turq);line-height:1}
.plan-opt .po-u{font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:1rem}
.plan-opt-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin:.6rem 0 1.3rem;flex:1}
.plan-opt-list li{font-size:.68rem;color:var(--ink);line-height:1.5;display:flex;gap:.55rem;align-items:flex-start}
.plan-opt-list li i[data-ic]{color:var(--turq);font-size:.8rem;flex-shrink:0;margin-top:.15rem;width:.8rem;height:.8rem}
.plan-opt-list li.no{color:var(--muted)}
.plan-opt-list li.no i[data-ic]{color:#C77}
.plan-opt-btn{width:100%;justify-content:center}
.plan-nota{display:flex;gap:.6rem;align-items:flex-start;background:linear-gradient(135deg,rgba(var(--turq-rgb),.1),rgba(0,130,160,.06));border-radius:var(--r-md);padding:1rem 1.2rem;margin-bottom:1.4rem;font-size:.7rem;line-height:1.65;color:var(--ink)}
.plan-nota i[data-ic]{color:var(--turq);font-size:.95rem;flex-shrink:0;margin-top:.15rem}
.plan-reco{display:flex;gap:.6rem;align-items:center;background:rgba(var(--deep-rgb),.06);border:1px dashed rgba(var(--deep-rgb),.25);border-radius:var(--r-md);padding:.8rem 1.1rem;margin-bottom:1rem;font-size:.72rem;font-weight:600;line-height:1.55;color:var(--ocean,var(--deep))}
.plan-reco i[data-ic]{color:var(--turq);font-size:1rem;flex-shrink:0}
.plan-extras{margin-top:1.6rem;border-top:1px solid rgba(var(--deep-rgb),.12);padding-top:1.3rem}
.plan-extras-t{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ocean);margin-bottom:.8rem}
.plan-extras ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:0;padding:0}
.plan-extras li{display:flex;gap:.55rem;align-items:flex-start;font-size:.68rem;line-height:1.55;color:var(--muted)}
.plan-extras li i[data-ic]{color:var(--turq);font-size:.8rem;flex-shrink:0;margin-top:.15rem}
@media(max-width:560px){.plan-sheet-body{padding:1.4rem 1.2rem 1.8rem}.plan-sheet-title{font-size:1.7rem}}

/* ====== FORMULARIO MODAL (global, sin superposición) ====== */
.modal{position:fixed;inset:0;z-index:1000;background:rgba(0,40,70,.6);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:1.5rem}
.modal.show{display:flex}
.mbox{background:#fff;border-radius:var(--r-lg);padding:2.2rem 2rem;max-width:480px;width:100%;box-shadow:0 30px 80px rgba(0,40,70,.45);position:relative;max-height:92vh;overflow-y:auto}
.mt{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;font-size:1.9rem;color:var(--ocean);margin-bottom:.3rem}
.msub{font-size:.62rem;color:var(--muted);margin-bottom:1.3rem}
.mf{display:flex;flex-direction:column;gap:.85rem}
.mrow{display:flex;gap:.7rem}
.mrow3{display:flex;gap:.7rem}
.mfield{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.mfield-cc{flex:0 0 92px;max-width:92px}
.mlb{display:flex;align-items:center;gap:.35rem;font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mlb i[data-ic]{color:var(--turq);font-size:.85rem}
.mf input,.mf select{padding:.7rem .8rem;border:1.5px solid rgba(var(--ocean-rgb),.18);border-radius:var(--r-sm);font-family:'Gotham','Jost',sans-serif;font-size:.72rem;width:100%;background:#fff;color:var(--ink)}
.mf input:focus,.mf select:focus{outline:none;border-color:var(--turq)}
.mf .btn{margin-top:.6rem;width:100%;justify-content:center}
.mx{position:absolute;top:.9rem;right:1.1rem;font-size:1.6rem;color:var(--muted);cursor:pointer;background:none;border:none;line-height:1;z-index:2}
.mextras{display:flex;flex-direction:column;gap:.5rem;background:var(--sand-lt,var(--sand-lt));padding:.9rem 1rem;border-radius:var(--r-sm)}
.mchk{display:flex;align-items:flex-start;gap:.5rem;font-size:.66rem;color:var(--ink);line-height:1.4;cursor:pointer}
.mchk input{width:auto!important;margin-top:.15rem;flex-shrink:0;accent-color:var(--turq)}
.mchk i[data-ic]{color:var(--turq);font-size:.9rem;flex-shrink:0}
.mcaptcha{background:var(--sand-lt,var(--sand-lt));padding:.9rem 1rem;border-radius:var(--r-sm);display:flex;flex-direction:column;gap:.5rem}
.mcaptcha-q{font-size:.58rem;letter-spacing:.04em;color:var(--muted);font-weight:700}
.mcaptcha-row{display:flex;align-items:center;gap:.7rem}
.mcaptcha-row b{font-size:1rem;color:var(--ocean);white-space:nowrap}
.mcaptcha-row input{max-width:90px}
.msub-chk{font-size:.58rem;color:var(--muted);margin-top:.2rem}
@media(max-width:480px){.mrow3{flex-direction:column}}

/* ====== TARIFAS DE CAYOS ====== */
.tarifas-cayos{max-width:1000px;margin:4rem auto 0;background:linear-gradient(180deg,var(--paper),#EAF6FA);border-radius:var(--r-lg);padding:2.5rem 2rem}
.tc-head{text-align:center;margin-bottom:1.6rem}
.tc-head h3{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:2rem;color:var(--ocean);margin:.4rem 0 .6rem}
.tc-head p{font-size:.72rem;color:var(--muted);max-width:560px;margin:0 auto;line-height:1.6}
/* Tabla de tarifas limpia */
.tc-table{background:#fff;border-radius:var(--r-md);overflow:hidden;box-shadow:0 14px 36px -16px rgba(var(--deep-rgb),.28)}
.tc-group{border-bottom:1px solid rgba(var(--turq-rgb),.12)}
.tc-group:last-child{border-bottom:none}
.tc-group-h{display:flex;align-items:center;gap:.5rem;padding:.9rem 1.3rem;background:rgba(var(--turq-rgb),.07);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ocean)}
.tc-group-h i[data-ic]{color:var(--turq);font-size:1rem}
.tc-group-h small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);margin-left:.3rem}
.tc-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem;padding:.75rem 1.3rem;border-top:1px dashed rgba(var(--deep-rgb),.08)}
.tc-row:first-of-type{border-top:none}
.tc-dest{font-size:.78rem;color:var(--ink);line-height:1.3}
.tc-dest .tc-beer{display:block;font-size:.56rem;color:#C97A2B;margin-top:.15rem;letter-spacing:.02em}
.tc-div-col,.tc-reg-col{text-align:right;min-width:64px}
.tc-div-col b{font-size:.92rem;font-weight:800;color:var(--turq)}
.tc-reg-col b{font-size:.82rem;font-weight:600;color:var(--muted)}
.tc-div-col small,.tc-reg-col small{display:block;font-size:.46rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.05rem}
.tc-colhead{display:grid;grid-template-columns:1fr auto auto;gap:1rem;padding:.6rem 1.3rem;background:var(--ocean);color:#fff}
.tc-colhead span{font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.tc-colhead .tc-ch-r{text-align:right;min-width:64px}
.tc-promo-banner{display:flex;align-items:center;gap:.7rem;background:linear-gradient(135deg,rgba(var(--turq-rgb),.12),rgba(201,122,43,.1));border:1px solid rgba(201,122,43,.25);border-radius:var(--r-md);padding:.9rem 1.2rem;margin-bottom:1.4rem;font-size:.68rem;line-height:1.55;color:var(--ink)}
.tc-promo-banner i[data-ic]{color:#C97A2B;font-size:1.1rem;flex-shrink:0}
.tc-notes{margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.tc-notes p{display:flex;align-items:flex-start;gap:.6rem;font-size:.64rem;color:var(--muted);line-height:1.6;background:rgba(255,255,255,.6);padding:.8rem 1rem;border-radius:var(--r-sm)}
.tc-notes i[data-ic]{color:var(--turq);font-size:1rem;flex-shrink:0;margin-top:.05rem}
@media(max-width:620px){
  .tarifas-cayos{padding:1.6rem 1rem}
  .tc-row,.tc-colhead{grid-template-columns:1fr auto;gap:.6rem}
  .tc-reg-col,.tc-colhead .tc-ch-r:last-child{display:none}
  .tc-div-col b{font-size:.86rem}
}

/* ====== CURSOR DEL SISTEMA ======
   Se usa el cursor nativo del navegador en todas partes: es el más
   confiable y muestra el puntero/mano/texto correcto según el elemento.
   (Los nodos .cursor-dot/.cursor-ring, si existen, quedan ocultos.) */
.cursor-dot,.cursor-ring{display:none!important}

/* ====== FONDO CARTOGRÁFICO NÁUTICO (apenas perceptible) ====== */
@media(prefers-reduced-motion:reduce){.naut-bg svg{transform:none!important}}

/* ====== CAMPO TELÉFONO CON BANDERA (combinado) ====== */
.tel-combo{display:flex;align-items:stretch;border:1.5px solid rgba(var(--ocean-rgb),.18);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.tel-combo:focus-within{border-color:var(--turq)}
.tel-cc{flex:0 0 auto;width:auto;border:none!important;background:var(--sand-lt,var(--sand-lt))!important;border-radius:0!important;padding:.7rem .6rem!important;font-size:.74rem!important;color:var(--ink)!important;cursor:pointer;border-right:1px solid rgba(var(--ocean-rgb),.15)!important;-webkit-appearance:none;appearance:none;max-width:110px}
.tel-num{flex:1;border:none!important;border-radius:0!important;padding:.7rem .8rem!important}
.tel-num:focus{outline:none}
/* asegurar que los campos del formulario nunca se monten */
.mf .mfield input,.mf .mfield select{box-sizing:border-box}
.mf .tel-combo input,.mf .tel-combo select{width:auto}

/* ============================================================
   UNIFICACIÓN DE ANCHOS — todas las páginas igual que la principal
   El contenedor .sec ya es 1200px; aquí igualamos los wrappers
   internos de cada página que estaban en 1000–1150px.
   ============================================================ */
.acts-grid,.con-g,.gal,.blog-g,.cay-list,.exped,.tur,.planes-g,
.season-g,.esp-g,.cayos-g,.gastro,.cta-final,.otras-g,.planes-grid,
.tarifas-cayos,.loc-g,.rooms-feats,.room{
  max-width:1200px!important;margin-left:auto!important;margin-right:auto!important;
}
/* el wrapper de habitaciones .room es una tarjeta ancha: la dejamos algo
   más estrecha que el tope para que respire, pero alineada al resto */
.room{max-width:1120px!important}
/* contenido de lectura (texto largo) NO se estira a 1200: se mantiene legible */
.loc-intro,.divisa-note{max-width:760px!important}

/* ============================================================
   VELO LATERAL DERECHO — contraste para nav y medidor de profundidad
   El menú vertical y el depth-meter van sobre el lado derecho;
   este degradado oscurece esa franja para que el texto blanco
   siempre tenga contraste, difuminándose hacia el centro.
   ============================================================ */
.av-cta-bg{pointer-events:none}
.av-zoom,.ga-par,.gu-par,.par-img,.pm-par{pointer-events:none}
.side-veil{position:fixed;top:0;right:0;bottom:0;width:340px;z-index:55;pointer-events:none;
  background:linear-gradient(270deg,rgba(var(--sombra-rgb),.62) 0%,rgba(var(--sombra-rgb),.4) 45%,rgba(var(--sombra-rgb),.15) 75%,transparent 100%)}
@media(max-width:880px){.side-veil{width:200px;background:linear-gradient(270deg,rgba(var(--sombra-rgb),.6) 0%,rgba(var(--sombra-rgb),.3) 55%,transparent 100%)}}
@media(prefers-reduced-motion:reduce){.side-veil{transition:none}}

/* ============================================================
   COTIZADOR ANCLADO (píldora flotante + panel expandible)
   Visible en todas las páginas excepto Actividades.
   ============================================================ */
/* Barra fija inferior full-width (booking bar 2026) */
.qd-bar{position:fixed;left:0;right:0;bottom:0;z-index:1250;cursor:pointer;
  background:linear-gradient(135deg,rgba(var(--ocean-rgb),.92),rgba(0,42,74,.9));
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  border-top:1px solid rgba(255,255,255,.25);
  box-shadow:0 -10px 40px -12px rgba(var(--deep-rgb),.55);transition:transform .35s,opacity .35s;color:#fff}
.qd-bar.hide{opacity:0;visibility:hidden;transform:translateY(100%)}
.qd-bar-in{max-width:1120px;margin:0 auto;padding:.85rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.qd-bar-left{display:flex;align-items:center;gap:.85rem;min-width:0}
.qd-bar-left i[data-ic]{font-size:1.4rem;color:var(--sky,var(--sky));flex-shrink:0}
.qd-bar-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.qd-bar-t{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.15rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qd-bar-s{font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qd-bar-btn{flex-shrink:0;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84));color:var(--ocean);border:1px solid rgba(255,255,255,.7);font-weight:700;box-shadow:0 6px 18px -6px rgba(0,40,70,.4),inset 0 1px 0 rgba(255,255,255,.9)}
.qd-bar-btn:hover{background:#fff;color:var(--deep);transform:translateY(-2px)}
@media(max-width:680px){
  .qd-bar-in{padding:.7rem 1rem;gap:.7rem}
  .qd-bar-s{display:none}
  .qd-bar-t{font-size:1rem}
  .qd-bar-btn{padding:.7rem 1rem;font-size:.56rem}
}

.qd-panel{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(24px) scale(.98);z-index:1300;width:min(680px,calc(100vw - 2.4rem));
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.38));backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);
  border:1px solid rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.85);border-radius:26px;
  box-shadow:0 40px 90px -22px rgba(var(--deep-rgb),.6),inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;visibility:hidden;transition:opacity .4s,transform .4s,visibility .4s;overflow:hidden}
.qd-panel.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}
.qd-close{position:absolute;top:.7rem;right:.9rem;background:none;border:none;font-size:1.6rem;line-height:1;color:var(--ocean);cursor:pointer;z-index:3;opacity:.6;transition:opacity .2s}
.qd-close:hover{opacity:1}
.qd-title{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.5rem;color:var(--ocean);padding:1.2rem 1.4rem .4rem}
.qd-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;padding:0 1.4rem 1rem}
.qd-f{display:flex;flex-direction:column;gap:.35rem;padding:.5rem .2rem;border-bottom:1px solid rgba(255,255,255,.35)}
.qd-lb{display:flex;align-items:center;gap:.35rem;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ocean);font-weight:700;white-space:nowrap}
.qd-lb i[data-ic]{color:var(--turq);font-size:.85rem}
.qd-f input[type=date],.qd-f select{border:none;background:transparent;font-family:'Gotham','Jost',sans-serif;font-size:.8rem;color:var(--deep,var(--deep));padding:.15rem 0;width:100%;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.qd-f input:focus,.qd-f select:focus{outline:none}
.qd-f select option{color:#1a2b38}
.qd-f input[type=date]::-webkit-calendar-picker-indicator{opacity:.85;cursor:pointer;filter:invert(28%) sepia(60%) saturate(900%) hue-rotate(165deg)}
.qd-f input[type=date]::-webkit-datetime-edit{color:var(--deep,var(--deep));font-weight:600}
.qd-stepper{display:flex;align-items:center;gap:.3rem}
.qd-stepper button{width:26px;height:26px;border:1px solid rgba(255,255,255,.6);border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.25));backdrop-filter:blur(8px);
  color:var(--ocean);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .15s;flex-shrink:0;box-shadow:0 2px 8px rgba(var(--deep-rgb),.12),inset 0 1px 0 rgba(255,255,255,.7)}
.qd-stepper button:hover{background:linear-gradient(180deg,var(--turq),#0094b8);color:#fff;transform:translateY(-1px)}
.qd-stepper button:active{transform:scale(.94)}
.qd-stepper button i[data-ic]{font-size:.8rem}
.qd-stepper span{flex:1;text-align:center;font-size:.82rem;font-weight:700;color:var(--ink);min-width:22px}
.qd-foot{background:linear-gradient(135deg,rgba(var(--turq-rgb),.82),rgba(0,130,160,.8));backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);border-top:1px solid rgba(255,255,255,.18);padding:1.2rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.qd-est-box{display:flex;flex-direction:column;gap:.2rem;color:#fff}
.qd-est-lb{font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;opacity:.92;font-weight:700}
.qd-est{display:flex;align-items:center;gap:.45rem;font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.8rem;line-height:1;color:#fff}
.qd-est i[data-ic]{font-size:1.1rem;opacity:.92}
.qd-est small{font-size:.66rem;opacity:.85;font-family:'Gotham','Jost',sans-serif;letter-spacing:.05em}
.qd-fly{display:flex;align-items:center;gap:.4rem;font-size:.52rem;letter-spacing:.03em;color:#fff;opacity:.92}
.qd-fly i[data-ic]{font-size:.8rem;opacity:.9}
.qd-est-note{font-size:.46rem;letter-spacing:.03em;opacity:.72;max-width:340px;line-height:1.5;margin-top:.1rem}
.qd-foot .btn{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.82));color:var(--turq);white-space:nowrap;border:1px solid rgba(255,255,255,.7);font-weight:700;box-shadow:0 8px 24px -6px rgba(0,120,150,.45),inset 0 1px 0 rgba(255,255,255,.9)}
.qd-foot .btn:hover{background:#fff;color:var(--ocean);transform:translateY(-2px)}
@media(max-width:880px){
  .qd-panel{left:.6rem;right:.6rem;transform:translateY(24px) scale(.98);width:auto;max-height:84vh;overflow-y:auto;bottom:.6rem}
  .qd-panel.show{transform:translateY(0) scale(1)}
  .qd-grid{grid-template-columns:1fr 1fr;gap:.7rem .7rem}
  .qd-f:has(select){grid-column:1 / -1}
  .qd-f:has(#qd_ci),.qd-f:has(#qd_co){grid-column:auto}
  .qd-foot{flex-direction:column;align-items:stretch;text-align:center}
  .qd-foot .btn{width:100%;justify-content:center}
  .qd-est-note{max-width:100%}
}
/* Pantallas estrechas: una sola columna para que NADA se superponga */
@media(max-width:560px){
  .qd-grid{grid-template-columns:1fr;gap:.6rem}
  .qd-f,.qd-f:has(select),.qd-f:has(#qd_ci),.qd-f:has(#qd_co){grid-column:1 / -1}
  .qd-f input,.qd-f select{width:100%;box-sizing:border-box;min-width:0}
  .qd-panel{padding-left:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){.qd-bar,.qd-panel{transition:none}}

/* ============================================================
   CARTOGRAFÍA DE FONDO · Carta náutica de Los Roques
   Adaptada del mapa real del Parque Nacional. Muchas líneas
   transversales (isóbatas), nombres reales. Difuminada, deriva
   en loop largo y se mueve con el scroll. Fuera de Actividades.
   ============================================================ */
/* El mar de fondo vive aquí: un lienzo WebGL fijo, detrás de todo y
   sin recibir clics jamás. Si WebGL faltara, queda este color papel. */
.naut-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--paper)}
.naut-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.naut-bg svg{position:absolute;top:50%;left:50%;width:155vmax;height:155vmax;transform:translate(-50%,-50%);filter:blur(.3px)}
.naut-bg path,.naut-bg circle,.naut-bg ellipse{fill:none;stroke:var(--turq,var(--turq));vector-effect:non-scaling-stroke}
.naut-bg .naut-line{stroke-width:1.2;opacity:.32}
.naut-bg .naut-line.soft{opacity:.18;stroke-dasharray:5 7}
.naut-bg .naut-coast{stroke-width:1.6;opacity:.42}
.naut-bg .naut-grid{stroke-width:.6;opacity:.08}
.naut-bg .naut-dot{fill:var(--turq,var(--turq));stroke:none;opacity:.45}
/* Deriva en loop LARGO y más amplio, tres capas desfasadas */
.naut-bg .drift-a{animation:nautDriftA 80s ease-in-out infinite alternate}
.naut-bg .drift-b{animation:nautDriftB 104s ease-in-out infinite alternate}
.naut-bg .drift-c{animation:nautDriftC 128s ease-in-out infinite alternate}
@keyframes nautDriftA{from{transform:translate(-3.5%,-2.5%)}to{transform:translate(3.5%,2.5%)}}
@keyframes nautDriftB{from{transform:translate(3%,-2%) }to{transform:translate(-3%,2%)}}
@keyframes nautDriftC{from{transform:translate(-2.5%,3%)}to{transform:translate(2.5%,-3%)}}
/* El background náutico va estrictamente detrás (z-index:-1). El contenido
   queda por encima de forma natural, sin reorganizar capas. */
body[data-no-dock] .naut-bg{display:none}
@media(prefers-reduced-motion:reduce){.naut-bg .drift-a,.naut-bg .drift-b,.naut-bg .drift-c{animation:none}}

/* Título rotativo del hero (enlace a promo) */
.hero-h1-link{text-decoration:none;color:inherit;display:inline-block;cursor:pointer}
.hero-h1-link .hero-h1{transition:opacity .6s ease,transform .3s ease}
.hero-h1-link:hover .hero-h1{transform:translateY(-2px)}

/* ============================================================
   LIGHTBOX · visor de fotos de habitaciones a pantalla completa
   ============================================================ */
.lightbox{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(0,30,50,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s;padding:2rem 1rem 6rem}
.lightbox.show{opacity:1;visibility:visible;pointer-events:auto}
.lb-stage{margin:0;max-width:92vw;max-height:78vh;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.lb-img{max-width:92vw;max-height:74vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);transition:opacity .3s ease;background:rgba(255,255,255,.05)}
.lb-cap{color:#fff;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;text-align:center;display:flex;gap:.6rem;align-items:center;justify-content:center}
.lb-cap .lb-title{font-weight:700}
.lb-x{position:absolute;top:1.1rem;right:1.4rem;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;transition:background .2s}
.lb-x:hover{background:rgba(255,255,255,.28)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;z-index:3}
.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-nav:active{transform:translateY(-50%) scale(.92)}
.lb-prev{left:1.2rem}.lb-next{right:1.2rem}
.lb-nav i[data-ic]{font-size:1.4rem}
.lb-thumbs{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;max-width:92vw;overflow-x:auto;padding:.3rem}
.lb-thumb{width:60px;height:42px;border-radius:6px;border:2px solid transparent;background-size:cover;background-position:center;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s;flex-shrink:0}
.lb-thumb:hover{opacity:.85}
.lb-thumb.on{opacity:1;border-color:var(--turq,var(--turq))}
@media(max-width:680px){
  .lb-nav{width:44px;height:44px}
  .lb-prev{left:.5rem}.lb-next{right:.5rem}
  .lb-thumb{width:48px;height:34px}
}
@media(prefers-reduced-motion:reduce){.lightbox,.lb-img,.lb-nav{transition:none}}

/* Nombres de cayo clicables en la tabla de precios → perfil */
.tc-link{color:var(--ocean);text-decoration:none;border-bottom:1px dotted rgba(var(--ocean-rgb),.4);transition:color .2s,border-color .2s}
.tc-link:hover{color:var(--turq);border-bottom-color:var(--turq)}
.tc-link::after{content:' ↓';font-size:.7em;opacity:.5}
/* Resalte del perfil de cayo al llegar desde la tabla */
.cay-highlight{animation:cayHighlight 1.8s ease}
@keyframes cayHighlight{0%{box-shadow:0 0 0 0 rgba(var(--turq-rgb),0)}25%{box-shadow:0 0 0 4px rgba(var(--turq-rgb),.5);transform:scale(1.012)}100%{box-shadow:0 0 0 0 rgba(var(--turq-rgb),0);transform:scale(1)}}

/* Espacio inferior para que la barra de cotización no tape el footer */
body:not([data-no-dock]){padding-bottom:74px}
@media(max-width:680px){body:not([data-no-dock]){padding-bottom:64px}}


/* Enlaces internos dentro del artículo del blog (SEO) */
.reader-c a:not(.btn):not(.btn-o):not(.rel-link){color:var(--turq);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(var(--turq-rgb),.35);transition:color .2s,border-color .2s}
.reader-c a:not(.btn):not(.btn-o):not(.rel-link):hover{color:var(--ocean);border-bottom-color:var(--ocean)}
/* Bloque "También te puede interesar" con iconos */
.reader-related{margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(var(--ocean-rgb),.12)}
.rel-h{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ocean);font-weight:700;margin-bottom:.9rem}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.rel-link{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:14px;background:rgba(var(--turq-rgb),.07);border:1px solid rgba(var(--turq-rgb),.16);color:var(--ocean);text-decoration:none;font-size:.68rem;font-weight:600;transition:background .2s,transform .2s}
.rel-link:hover{background:rgba(var(--turq-rgb),.14);transform:translateY(-2px)}
.rel-link i[data-ic]{color:var(--turq);font-size:1.1rem;flex-shrink:0}

/* Tabla de precios de cayos: promo + regular tachado */
.tc-promo-banner{display:flex;align-items:center;gap:.7rem;background:linear-gradient(135deg,rgba(var(--turq-rgb),.12),rgba(var(--ocean-rgb),.08));border:1px solid rgba(var(--turq-rgb),.25);border-radius:14px;padding:.9rem 1.2rem;margin:0 auto 1.6rem;max-width:680px;color:var(--deep)}
.tc-promo-banner i[data-ic]{color:var(--turq);font-size:1.3rem;flex-shrink:0}
.tc-promo-banner span{font-size:.74rem;line-height:1.5;font-weight:500}
.tc-p b{color:var(--ocean);font-size:1.05rem;font-weight:700}
.tc-p s{color:#9aa7b2;font-size:.78rem;margin-left:.15rem}
.tc-p small{display:block;font-size:.56rem;color:var(--turq);letter-spacing:.04em;margin-top:.1rem}
.tc-col-t2{margin-top:1.4rem}
.tc-col-t2 small{font-size:.6rem;opacity:.7;font-weight:500}

/* Visor de cayo (click en el perfil lo abre ampliado) */
.cay{transition:transform .3s,box-shadow .3s}
.cay:hover{transform:translateY(-3px)}
.cay-viewer{position:fixed;inset:0;z-index:2000;background:rgba(0,30,50,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility .35s;display:flex;align-items:center;justify-content:center;padding:4vh 1rem;overflow-y:auto}
.cay-viewer.show{opacity:1;visibility:visible;pointer-events:auto}
.cv-box{position:relative;background:var(--paper);width:min(720px,100%);border-radius:22px;overflow:hidden;box-shadow:0 40px 100px -24px rgba(0,40,70,.6);margin:auto;max-height:92vh;overflow-y:auto}
.cv-x{position:absolute;top:1rem;right:1rem;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ocean);font-size:1.7rem;line-height:1;cursor:pointer;z-index:3}
.cv-img{height:280px;background-size:cover;background-position:center}
.cv-body{padding:1.8rem 2rem 2.2rem}
.cv-rank{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turq);font-weight:700}
.cv-title{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ocean);line-height:1.05;margin:.3rem 0 .8rem}
.cv-desc{font-size:.82rem;line-height:1.8;color:#3a4753;margin-bottom:1.2rem}
.cv-feat{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.cv-feat span{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(var(--turq-rgb),.1);color:var(--ocean);padding:.4rem .8rem;border-radius:50px;font-weight:600}
@media(max-width:560px){.cv-img{height:200px}.cv-body{padding:1.4rem 1.4rem 1.8rem}}
@media(prefers-reduced-motion:reduce){.cay-viewer{transition:none}}

/* ============================================================
   MAPA INTERACTIVO · Nuestras 3 posadas (inicio)
   ============================================================ */
.mapa-wrap{max-width:1180px;margin:2.5rem auto 0;padding:0 1rem;display:grid;grid-template-columns:1.35fr 1fr;gap:1.6rem;align-items:start}
.mapa-canvas{position:relative;border-radius:24px;box-shadow:0 40px 90px -30px rgba(var(--deep-rgb),.5);line-height:0}
.mapa-img{width:100%;height:auto;display:block;border-radius:24px}
.mapa-pin{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border:none;background:transparent;cursor:pointer;z-index:5;padding:0}
.pin-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--turq);box-shadow:0 4px 14px rgba(0,40,70,.5);z-index:2;transition:transform .2s}
.pin-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(var(--turq-rgb),.55);z-index:1;animation:pinPulse 1.8s ease-out infinite}
@keyframes pinPulse{0%{width:26px;height:26px;opacity:.75}100%{width:80px;height:80px;opacity:0}}
.mapa-pin:hover .pin-dot,.mapa-pin.active .pin-dot{background:var(--turq);border-color:#fff;transform:translate(-50%,-50%) scale(1.25)}
.mapa-pin.active .pin-pulse{background:rgba(var(--turq-rgb),.7)}

/* Panel lateral derecho: la tarjeta de la posada se abre AL LADO del mapa */
.mapa-cards{position:sticky;top:90px;min-height:40px}
.mapa-hint{text-align:center;font-size:.7rem;letter-spacing:.04em;color:var(--muted);padding:2.5rem 1.5rem;font-style:italic;background:rgba(var(--turq-rgb),.05);border:1px dashed rgba(var(--turq-rgb),.3);border-radius:18px}
.mapa-card{display:none;background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,40,70,.45)}
.mapa-card.show{display:block;animation:mcIn .35s ease both}
@keyframes mcIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.mc-img{height:200px;background-size:cover;background-position:center}
.mc-body{padding:1.3rem 1.5rem 1.6rem}
.mc-tag{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--turq);font-weight:700}
.mc-t{font-size:1.5rem;color:var(--ocean);line-height:1.05;margin:.2rem 0 .6rem}
.mc-body p{font-size:.76rem;line-height:1.65;color:#3a4753;margin-bottom:1rem}
.mc-feats{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.mc-feats span{font-size:.58rem;font-weight:600;color:var(--ocean);background:rgba(var(--turq-rgb),.1);border-radius:999px;padding:.3rem .7rem}
.mc-meta{display:flex;gap:1.2rem;margin-bottom:1rem;padding:.7rem 0;border-top:1px solid rgba(var(--deep-rgb),.1);border-bottom:1px solid rgba(var(--deep-rgb),.1)}
.mc-meta div{font-size:.62rem;color:var(--muted);line-height:1.3}
.mc-meta b{display:block;font-size:.92rem;color:var(--ocean);font-weight:800}
.mc-body .btn{font-size:.56rem;padding:.7rem 1.2rem}
@media(max-width:860px){
  .mapa-wrap{grid-template-columns:1fr;gap:1.2rem}
  .mapa-cards{position:static;top:auto}
}
@media(max-width:680px){
  .mapa-pin{width:54px;height:54px}
  .mc-img{height:170px}
  .mc-t{font-size:1.35rem}
}
@media(prefers-reduced-motion:reduce){.pin-pulse{animation:none}}

/* Fichas de actividad: botón Cotizar directo (sin carrito) */
.act-quote{margin-top:1rem;background:var(--ocean);color:#fff;border:none;border-radius:50px;padding:.6rem 1.4rem;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .25s,transform .25s}
.act-card:hover .act-quote{background:var(--turq)}
.act-quote:hover{background:var(--deep);transform:translateY(-2px)}
.acts-cta{display:flex;justify-content:center;margin-top:2.5rem}
.act-quote-all{font-size:.62rem}

/* Encabezado del grupo de actividades en el cotizador */
.mextras-h{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean);font-weight:700;margin-bottom:.6rem}
.macts:checked~span,.mchk input.macts:checked+span{color:var(--ocean)}

/* Hint "Descubre" bajo cada punto de la escena de actividades */
.spot-hint{position:absolute;left:50%;top:72px;transform:translateX(-50%);white-space:nowrap;color:var(--sky,var(--sky));font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;text-shadow:0 2px 8px rgba(var(--sombra-rgb),.9);pointer-events:none;animation:hintPulse 2s ease-in-out infinite}
.spot-hint::after{content:' ↗'}
@keyframes hintPulse{0%,100%{opacity:.6}50%{opacity:1}}
@media(max-width:880px){.spot-hint{font-size:.4rem;top:62px}}
@media(prefers-reduced-motion:reduce){.spot-hint{animation:none}}

/* Cotizador en el INICIO (mismo panel que el dock, pero estático) */
.qd-panel.qd-inline{position:static;transform:none;width:min(900px,100%);max-width:900px;margin:0 auto;opacity:1;visibility:visible;box-shadow:0 30px 70px -26px rgba(var(--deep-rgb),.4)}
.qd-panel.qd-inline.show{transform:none}
.qd-panel.qd-inline .qd-close{display:none}
#home-quote{width:100%}
@media(max-width:880px){.qd-panel.qd-inline{width:100%}}

/* Logos de las posadas en tarjetas */
.otra-logo{display:block;width:150px;height:54px;object-fit:contain;object-position:left center;margin-bottom:.7rem}
.mc-logo{position:absolute;top:12px;left:12px;width:130px;height:38px;object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 8px rgba(var(--sombra-rgb),.5))}
.mc-img{position:relative}

/* ===== Mapa: ruta animada entre las 3 posadas ===== */
.mapa-ruta{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.ruta-base{fill:none;stroke:rgba(255,255,255,.45);stroke-width:.5;stroke-linecap:round;stroke-dasharray:1.2 1.4}
.ruta-flow{fill:none;stroke:var(--turq);stroke-width:.7;stroke-linecap:round;stroke-dasharray:3 60;animation:rutaFlow 3.5s linear infinite;filter:drop-shadow(0 0 2px rgba(var(--turq-rgb),.8))}
@keyframes rutaFlow{from{stroke-dashoffset:63}to{stroke-dashoffset:0}}
/* Badges "2 min a pie" */
.mapa-time{position:absolute;transform:translate(-50%,-50%);z-index:4;background:rgba(255,255,255,.95);color:var(--ocean);font-size:.5rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .6rem;border-radius:50px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,40,70,.3);pointer-events:none}
.mapa-time::before{content:'';display:inline-block;width:8px;height:8px;margin-right:4px;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ACCD' stroke-width='2'%3E%3Cpath d='M13 5v6l4 2'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat}
/* Agua animada: capa de brillo que se desplaza sobre la zona de mar */
.mapa-agua{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 45%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.25) 55%,transparent 70%);background-size:300% 100%;animation:aguaShimmer 7s linear infinite}
@keyframes aguaShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){.ruta-flow,.mapa-agua{animation:none}}
@media(max-width:680px){.mapa-time{font-size:.42rem;padding:.25rem .5rem}}

/* ============================================================
   GALERÍA DE LA POSADA (inicio) · mosaico + lightbox
   ============================================================ */
.pg-mosaic{max-width:1140px;margin:0 auto;padding:0 1rem;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:.8rem}
.pg-item{margin:0;overflow:hidden;border-radius:16px;cursor:pointer;position:relative;box-shadow:0 14px 34px -18px rgba(var(--deep-rgb),.45)}
.pg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.pg-item:hover img{transform:scale(1.06)}
.pg-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,40,70,.25),transparent 50%);opacity:0;transition:opacity .3s}
.pg-item:hover::after{opacity:1}
.pg-big{grid-column:span 2;grid-row:span 2}
@media(max-width:880px){
  .pg-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px}
  .pg-big{grid-column:span 2;grid-row:span 2}
}
@media(max-width:480px){.pg-mosaic{grid-auto-rows:120px}}
/* Lightbox de la galería */
.pg-lb{position:fixed;inset:0;z-index:2100;background:rgba(0,20,38,.92);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;padding:3vh 1rem}
.pg-lb.show{opacity:1;visibility:visible;pointer-events:auto}
.pg-lb img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pg-lb-x{position:absolute;top:1.2rem;right:1.5rem;width:46px;height:46px;border:none;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.8rem;cursor:pointer;line-height:1}
.pg-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:none;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:1.6rem;cursor:pointer}
.pg-lb-prev{left:1.5rem}.pg-lb-next{right:1.5rem}
.pg-lb-nav:hover,.pg-lb-x:hover{background:rgba(255,255,255,.3)}
@media(max-width:560px){.pg-lb-nav{width:42px;height:42px}}

/* ====== ÁLBUM ANAMÓRFICO (index) ====== */
.av-section{max-width:1200px;margin:0 auto}
.av-head{max-width:760px;margin:0 auto 2.6rem;text-align:center}
.av-head .divider{justify-content:center}
.av-lead{font-size:.82rem;line-height:1.8;color:var(--muted);margin:1.1rem auto 1.4rem;max-width:640px}
.av-head .badge{display:inline-flex}
/* Mosaico tipo "bento" irregular para sensación anamórfica */
.av-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:96px;gap:.7rem;padding:0 1rem;max-width:880px;margin:0 auto}
.av-mosaic .pg-item{margin:0;position:relative;overflow:hidden;border-radius:14px;cursor:pointer;
  box-shadow:0 18px 46px -22px rgba(var(--deep-rgb),.55);isolation:isolate}
/* Patrón bento irregular SIN huecos (6 columnas) — calculado pieza a pieza.
   Filas 1-3: c1 alta(2x3) | c2 ancha(4x2) ; bajo c2 -> c3(2x1)+c4(2x1)
   Filas 4-6: c5(2x3 alta) | c6(2x2) | c7(2x2) ; bajo c6/c7 -> c8(2x1)+c9(2x1) */
.av-c1{grid-column:1 / span 2;grid-row:1 / span 3}
.av-c2{grid-column:3 / span 4;grid-row:1 / span 2}
.av-c3{grid-column:3 / span 2;grid-row:3 / span 1}
.av-c4{grid-column:5 / span 2;grid-row:3 / span 1}
.av-c5{grid-column:1 / span 2;grid-row:4 / span 3}
.av-c6{grid-column:3 / span 2;grid-row:4 / span 2}
.av-c7{grid-column:5 / span 2;grid-row:4 / span 2}
.av-c8{grid-column:3 / span 2;grid-row:6 / span 1}
.av-c9{grid-column:5 / span 2;grid-row:6 / span 1}
/* Capa de desplazamiento (parallax) */
.av-par{position:absolute;inset:0;will-change:transform}
/* Capa con la imagen de fondo (zoom Ken-Burns) — sobredimensionada para que
   el desplazamiento nunca deje bordes vacíos. Este es el "anamórfico". */
.av-zoom{position:absolute;inset:-8%;background-size:cover;background-position:center;
  will-change:transform;transition:filter .5s ease}
/* El <img> real queda detrás como fallback/SEO; la capa de fondo lo cubre */
.av-mosaic .pg-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-1;opacity:0}
.av-mosaic .pg-item::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(0,30,55,.42),transparent 55%);opacity:.55;transition:opacity .4s}
.av-mosaic .pg-item:hover::after{opacity:.15}
.av-mosaic .pg-item:hover .av-zoom{filter:saturate(1.12) brightness(1.04)}
.av-mosaic .pg-item::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
@media(max-width:760px){
  /* Tablet: rejilla de 4 columnas, todas las celdas a 2x2 (orden natural, sin huecos) */
  .av-mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:120px;gap:.6rem}
  .av-c1,.av-c2,.av-c3,.av-c4,.av-c5,.av-c6,.av-c7,.av-c8,.av-c9{
    grid-column:auto / span 2;grid-row:auto / span 2}
}
@media(max-width:480px){
  /* Móvil: 2 columnas, una foto por fila de doble alto */
  .av-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:115px;gap:.55rem}
  .av-c1,.av-c2,.av-c3,.av-c4,.av-c5,.av-c6,.av-c7,.av-c8,.av-c9{
    grid-column:auto / span 2;grid-row:auto / span 2}
}

/* ====== DESPLEGABLE "Conoce y descubre Los Roques" ====== */
.av-fold{max-width:760px;margin:1.6rem auto 0;text-align:left;border:1px solid rgba(var(--deep-rgb),.14);
  border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(245,250,252,.55));
  box-shadow:0 14px 40px -26px rgba(var(--deep-rgb),.4);overflow:hidden}
.av-fold-sum{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.85rem;
  padding:1.05rem 1.3rem;font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.18rem;
  color:var(--ocean);user-select:none}
.av-fold-sum::-webkit-details-marker{display:none}
.av-fold-ic{display:inline-flex;color:var(--turq);flex-shrink:0}
.av-fold-ic i[data-ic]{font-size:1.2rem}
.av-fold-t{flex:1;line-height:1.15}
.av-fold-chev{display:inline-flex;color:var(--turq);transition:transform .35s ease;flex-shrink:0}
.av-fold-chev i[data-ic]{font-size:1rem;transform:rotate(90deg);display:block}
.av-fold[open] .av-fold-chev{transform:rotate(180deg)}
.av-fold-sum:hover{background:rgba(var(--turq-rgb),.06)}
.av-fold-body{padding:0 1.3rem 1.4rem;animation:avFold .45s ease}
@keyframes avFold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.av-fold-body>p{font-size:.8rem;line-height:1.85;color:var(--muted);margin:0 0 .9rem}
.av-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1.1rem 0 1.4rem;
  padding:1rem;border-radius:14px;background:linear-gradient(135deg,rgba(var(--turq-rgb),.1),rgba(0,130,160,.06))}
.av-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25rem}
.av-stat-n{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.6rem;line-height:1;color:var(--ocean)}
.av-stat-l{font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;line-height:1.3}
.av-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:1.2rem}
.av-col-t{display:flex;align-items:center;gap:.4rem;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ocean);font-weight:700;margin:0 0 .7rem;padding-bottom:.5rem;border-bottom:1px solid rgba(var(--deep-rgb),.12)}
.av-col-t i[data-ic]{color:var(--turq);font-size:.95rem}
.av-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.av-list li{display:flex;align-items:flex-start;gap:.5rem;font-size:.72rem;line-height:1.55;color:var(--ink)}
.av-list li i[data-ic]{color:var(--turq);font-size:.9rem;flex-shrink:0;margin-top:.12rem}
.av-fold-links{display:flex;flex-wrap:wrap;gap:.6rem;padding-top:1.1rem;border-top:1px solid rgba(var(--deep-rgb),.12)}
.av-link{display:inline-flex;align-items:center;gap:.45rem;font-size:.6rem;letter-spacing:.05em;
  text-transform:uppercase;font-weight:700;color:var(--ocean);text-decoration:none;
  padding:.55rem .9rem;border:1px solid rgba(var(--deep-rgb),.18);border-radius:50px;transition:all .25s ease}
.av-link i[data-ic]{color:var(--turq);font-size:.9rem}
.av-link:hover{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.av-link:hover i[data-ic]{color:#fff}
@media(max-width:680px){
  .av-cols{grid-template-columns:1fr;gap:1.4rem}
  .av-stat-row{grid-template-columns:repeat(2,1fr);gap:1rem}
  .av-fold-sum{font-size:1.05rem;padding:.95rem 1.05rem}
  .av-fold-body{padding:0 1.05rem 1.2rem}
}

/* ============================================================
   MÓDULO VIDEO 360° · Cayo de Agua (explora)
   ============================================================ */
.cay360{max-width:1000px;margin:3.5rem auto;padding:0 1rem}
.cay360-head{text-align:center;margin-bottom:1.6rem}
.cay360-head h3{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--ocean);line-height:1.05;margin:.3rem 0 .7rem}
.cay360-head p{font-size:.82rem;color:var(--muted);max-width:560px;margin:0 auto;line-height:1.7}
.cay360-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(var(--deep-rgb),.55);background:#001426}
.cay360-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cay360-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem;font-size:.66rem;letter-spacing:.04em;color:var(--ocean);text-transform:uppercase;font-weight:600}
.cay360-hint i[data-ic]{color:var(--turq);font-size:1.1rem}
@media(max-width:560px){.cay360-hint{font-size:.56rem}}

/* ===== Cotizador del inicio SOBRE el video del hero ===== */
.hero{padding-bottom:3rem!important}
.sb-over-hero{margin-top:2.5rem;margin-bottom:1rem;position:relative;z-index:30}
.sb-over-hero .sb-title{color:#fff;text-shadow:0 2px 18px rgba(var(--sombra-rgb),.6)}
/* el panel del cotizador ya tiene fondo claro, así resalta sobre el video */
.sb-over-hero .qd-panel.qd-inline{box-shadow:0 40px 100px -30px rgba(0,20,40,.7)}
/* Las olas quedan debajo del cotizador, al fondo del hero */
.hero .waves{z-index:5}
@media(max-width:880px){.sb-over-hero{margin-top:1.5rem}}

/* ====== BURBUJA WHATSAPP "Agente 24 horas" (global) ====== */
.wa-bubble{cursor:grab;touch-action:none;position:fixed;left:1.1rem;bottom:5.2rem;z-index:1260;
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;text-decoration:none;
  padding:.6rem .95rem .6rem .65rem;border-radius:50px;
  box-shadow:0 12px 30px -8px rgba(18,140,126,.7),0 2px 6px rgba(0,0,0,.15);
  transition:transform .25s ease,box-shadow .25s ease,bottom .3s ease;
  animation:waIn .5s ease both}
@keyframes waIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.wa-bubble:hover{transform:translateY(-3px);box-shadow:0 18px 40px -8px rgba(18,140,126,.85)}
.wa-bubble-ic{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-bubble-ic i[data-ic]{font-size:1.35rem;color:#fff}
.wa-bubble-txt{display:flex;flex-direction:column;line-height:1.05;padding-right:.3rem}
.wa-bubble-t{font-family:'Gotham','Jost',sans-serif;font-weight:700;font-size:.82rem;white-space:nowrap}
.wa-bubble-s{font-size:.54rem;letter-spacing:.04em;opacity:.92;white-space:nowrap}
.wa-bubble-dot{position:absolute;top:.5rem;left:2.55rem;width:9px;height:9px;border-radius:50%;
  background:#7CFC9A;border:2px solid #128C7E;box-shadow:0 0 0 0 rgba(124,252,154,.7);
  animation:waPulse 1.8s infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(124,252,154,.7)}70%{box-shadow:0 0 0 8px rgba(124,252,154,0)}100%{box-shadow:0 0 0 0 rgba(124,252,154,0)}}
@media(max-width:880px){
  .wa-bubble{left:.8rem;bottom:5rem;padding:.55rem .55rem}
  .wa-bubble-txt{display:none}
  .wa-bubble-dot{left:auto;right:.45rem;top:.45rem}
}
@media(prefers-reduced-motion:reduce){.wa-bubble,.wa-bubble-dot{animation:none}}
.wa-bubble.wa-hidden{opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);pointer-events:none}

/* ====== Mensaje de confirmación tras enviar formulario ====== */
.form-ok{text-align:center;padding:2.5rem 1.5rem;animation:waIn .4s ease both;background:var(--paper,#fff);border-radius:16px}
.form-ok-ic{width:64px;height:64px;margin:0 auto 1.2rem;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(18,140,126,.7)}
.form-ok h3{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.9rem;color:var(--ocean,var(--deep));margin:.2rem 0 1rem;line-height:1.1}
.form-ok p{font-size:.86rem;line-height:1.75;color:#3a4753;max-width:440px;margin:0 auto .9rem}
.form-ok p b{color:var(--ocean,var(--deep))}
.form-ok-wa{font-size:.8rem !important;color:var(--muted,#667) !important;border-top:1px solid rgba(var(--deep-rgb),.12);padding-top:1rem;margin-top:1.1rem !important}
.form-ok-wa a{display:inline-block;margin-top:.3rem;background:#25D366;color:#fff;font-weight:700;text-decoration:none;padding:.55rem 1.2rem;border-radius:50px;font-size:.9rem;transition:background .2s}
.form-ok-wa a:hover{background:#128C7E}

/* ====== Decimales pequeños y etiqueta aprox. en tarifas referenciales ====== */
.dec-sm{font-size:.55em;font-weight:inherit;opacity:.75;vertical-align:baseline;margin-left:1px}
.aprox-tag{font-size:.4em;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-weight:600;margin-left:3px}

/* ====== Selector de idiomas (5 idiomas) ====== */
.nav-r{position:relative}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 16px 44px -12px rgba(var(--deep-rgb),.35);padding:.4rem;min-width:150px;display:none;flex-direction:column;z-index:1200}
.lang-menu.open{display:flex}
.lang-opt{background:none;border:none;text-align:left;font-family:inherit;font-size:.8rem;color:var(--ocean,var(--deep));padding:.6rem .8rem;border-radius:8px;cursor:pointer;transition:background .15s}
.lang-opt:hover{background:rgba(var(--turq-rgb),.12)}

/* ====== Módulo CTA "Conoce La Posada" (reemplazo del mosaico) ====== */
.av-cta{position:relative;max-width:1000px;margin:2.5rem auto 0;border-radius:24px;overflow:hidden;min-height:340px;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 70px -28px rgba(var(--deep-rgb),.5)}
.av-cta-bg{position:absolute;inset:-8%;background-size:cover;background-position:center;will-change:transform}
.av-cta-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--sombra-rgb),.78),rgba(var(--deep-rgb),.55))}
.av-cta-in{position:relative;z-index:2;text-align:center;color:#fff;padding:3rem 1.5rem;max-width:560px}
.av-cta-k{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#bfeaf7}
.av-cta-t{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;margin:.5rem 0 .8rem;color:#fff}
.av-cta-p{font-size:.84rem;line-height:1.75;opacity:.94;margin-bottom:1.5rem}
.av-cta .btn{background:#fff;color:var(--ocean,var(--deep))}
.av-cta .btn:hover{background:#eaf6fa}

/* ===== Botón flotante "Volver" (glass) — navegación de regreso ===== */
.nav-back{position:fixed;left:1.1rem;top:5.2rem;z-index:1255;display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem .95rem .6rem .7rem;border:none;cursor:pointer;border-radius:999px;
  font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--deep);
  background:rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px -12px rgba(var(--deep-rgb),.45);
  transition:transform .25s ease,background .25s ease,box-shadow .25s ease,opacity .3s ease}
.nav-back:hover{transform:translateX(-3px);background:rgba(255,255,255,.78);box-shadow:0 14px 36px -12px rgba(var(--deep-rgb),.55)}
.nav-back:active{transform:translateX(-1px) scale(.97)}
.nav-back .nb-ic{display:inline-flex;align-items:center;justify-content:center}
.nav-back .nb-tx{line-height:1}
/* En móvil, compacto arriba-izquierda (la burbuja de WhatsApp va abajo) */
@media(max-width:880px){
  .nav-back{top:4.4rem;bottom:auto;left:.8rem;right:auto;padding:.5rem .8rem .5rem .58rem;font-size:.72rem;
    background:rgba(255,255,255,.82)}
}
/* Cuando el header tiene fondo claro al hacer scroll, el botón mantiene contraste */

/* ===== MENÚ EMBEBIDO EN GASTRONOMÍA (acordeón) ===== */
.menu-embed{max-width:860px;margin:3.5rem auto 0}
.menu-embed-head{text-align:center;margin-bottom:1.8rem}
.menu-embed-head h3{font-family:'SaltyAges','Cormorant Garamond',serif;font-size:2rem;color:var(--ocean);margin:.5rem 0 .6rem}
.menu-embed-head p{font-size:.74rem;color:var(--muted);max-width:540px;margin:0 auto 1.3rem;line-height:1.6}
.menu-pdf-btn{display:inline-flex;align-items:center;gap:.5rem}
.menu-pdf-btn i[data-ic]{transform:rotate(90deg)}
.menu-acc{display:flex;flex-direction:column;gap:.7rem}
.macc{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 28px -16px rgba(var(--deep-rgb),.3)}
.macc-h{width:100%;display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.3rem;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit}
.macc-ico{width:40px;height:40px;border-radius:50%;background:rgba(var(--turq-rgb),.12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.macc-ico i[data-ic]{color:var(--turq);font-size:1.1rem}
.macc-t{flex:1;font-family:'SaltyAges','Cormorant Garamond',serif;font-size:1.3rem;color:var(--ocean)}
.macc-x{font-size:1.6rem;color:var(--turq);font-weight:300;transition:transform .3s;line-height:1}
.macc.open .macc-x{transform:rotate(45deg)}
.macc-body{max-height:0;overflow:hidden;transition:max-height .4s ease;padding:0 1.3rem}
.macc.open .macc-body{max-height:1200px;padding-bottom:.8rem}
.menu-item{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid rgba(var(--ocean-rgb),.1)}
.menu-item:last-child{border-bottom:none}
.mi-l{flex:1}
.mi-n{font-size:.82rem;font-weight:600;color:var(--ink,#26323c);line-height:1.3}
.mi-d{font-size:.68rem;color:var(--muted);line-height:1.5;margin-top:.2rem}
.mi-p{font-size:.92rem;font-weight:800;color:var(--ocean);white-space:nowrap}
.menu-note-embed{margin-top:1.4rem;background:rgba(var(--turq-rgb),.06);border-radius:12px;padding:1.1rem 1.3rem}
.menu-note-embed ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.menu-note-embed li{font-size:.66rem;color:var(--muted);line-height:1.5;padding-left:1rem;position:relative}
.menu-note-embed li::before{content:'•';position:absolute;left:0;color:var(--turq)}
@media(max-width:620px){.macc-t{font-size:1.15rem}.menu-embed{margin-top:2.5rem}}

/* Filtros del álbum de gastronomía */
.ga-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:900px;margin:1.5rem auto 0}
.ga-filter{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ocean);background:#fff;border:1.5px solid rgba(var(--deep-rgb),.18);border-radius:999px;padding:.55rem 1.1rem;cursor:pointer;transition:all .25s}
.ga-filter:hover{border-color:var(--turq)}
.ga-filter.active{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.gastro-album .ga-item.ga-hidden{display:none}

/* ============================================================
   CONEXIÓN CON LA CENTRAL · 10 de agosto de 2026
   ============================================================ */

/* La trampa para robots. Se esconde sin usar display:none porque algunos
   programas se saltan a propósito lo que está oculto de esa manera; así
   les parece un campo normal. Para una persona es invisible y el tabulador
   no pasa por él. */
.hp-trampa{
  position:absolute!important;
  left:-9999px!important;
  top:auto!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Cuando el envío no sale. Antes esto no existía porque no se sabía nunca
   que algo hubiera fallado. */
.form-err{
  margin-top:1rem;
  padding:.9rem 1rem;
  border:1.5px solid #E0A0A0;
  border-left:4px solid #C0392B;
  border-radius:12px;
  background:#FDF3F2;
  color:#7B2D26;
  font-size:.72rem;
  line-height:1.55;
}
.form-err p{margin:.15rem 0}
.form-err a{color:#0B4A75;font-weight:700;text-decoration:underline}

/* La referencia de la solicitud. Que el cliente tenga un número que citar
   por WhatsApp evita la mitad de las llamadas de "¿les llegó lo mío?". */
.form-ok-ref{
  margin-top:.5rem;
  font-size:.7rem;
  letter-spacing:.04em;
  color:#5A7A8C;
}
.form-ok-ref b{color:var(--deep);letter-spacing:.08em}

/* El menú de arriba es fijo, así que cualquier salto —un enlace con ancla,
   un scrollIntoView— deja el destino escondido justo debajo de él. Con esto
   el navegador reserva su altura al desplazarse y el destino queda a la
   vista. Sin esto, quien pincha "ver el menú" aterriza sobre el título
   tapado y cree que el enlace no funcionó. */
html{
  scroll-padding-top:96px;
  /* Y por abajo, la barra flotante de cotización: mide 72 px y está fija
     al pie, así que cualquier destino que caiga ahí queda tapado igual que
     el de arriba. Con esto el navegador también le reserva su sitio. */
  scroll-padding-bottom:88px;
}

/* ============================================================
   LAS TRES CASAS · 10 de agosto de 2026
   ------------------------------------------------------------
   Un mismo sitio, tres marcas. Los colores no me los inventé:
   salen del propio logo de cada posada.
     · Eva        el turquesa y el azul profundo de siempre
     · Tropicana  el marrón cálido de su logo (#504030) con el
                  verde tropical de su concepto eco
     · El Recuerdo el azul profundo de su logo (#004070)
   Se cambian sobre <html data-posada="…">, así que todo el sitio
   se retiñe de golpe sin tocar una sola regla más.
   ============================================================ */

html[data-posada="tropicana"]{
  --sky:#A8CBB0;
  --turq:#3E8C5E;      /* el color de acción: botones y enlaces */
  --ocean:#2A6647;
  --deep:#4A3A2A;      /* el marrón del logo, para los titulares */
  --turq-rgb:62,140,94;--ocean-rgb:42,102,71;--deep-rgb:74,58,42;
  --sky-rgb:168,203,176;--sombra-rgb:36,28,20;
  --sand:#E4D9C4;
  --sand-lt:#F4EFE4;
  --paper:#FAF7F0;
}

html[data-posada="recuerdo"]{
  --sky:#9BC0DC;
  --turq:#2E7FB0;
  --ocean:#12547E;
  --deep:#004070;      /* el azul del logo */
  --turq-rgb:46,127,176;--ocean-rgb:18,84,126;--deep-rgb:0,64,112;
  --sky-rgb:155,192,220;--sombra-rgb:0,26,46;
  --sand:#E9E2D4;
  --sand-lt:#F6F2E9;
  --paper:#FBF9F4;
}

/* ── Elegir posada · va pegado al logo ────────────────────────
   No junto al botón de idioma: ahí engordaba el menú 42 px y en
   pantallas medianas lo partía en dos líneas. Y el logo es la
   marca, así que es donde uno mira para cambiar de casa. */
.nav-marca{display:inline-flex;align-items:center;gap:.15rem;position:relative}
.pos-sel{position:relative;display:inline-block}

.pos-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;
  color:#fff;
  width:26px;height:26px;
  border-radius:50%;
  padding:0;
  cursor:pointer;
  opacity:.8;
  transition:background .25s,opacity .25s;
}
.pos-btn:hover{background:rgba(255,255,255,.18);opacity:1}
.pos-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;opacity:1}
/* El nombre está solo para quien no ve el logo. */
.pos-btn-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pos-btn-f{font-size:.62rem;line-height:1;transition:transform .25s}
.pos-sel.abierto .pos-btn-f{transform:rotate(180deg)}

.pos-menu{
  position:absolute;top:calc(100% + .8rem);left:-52px;
  min-width:246px;
  background:#fff;
  border-radius:var(--r-sm);
  box-shadow:0 18px 48px rgba(var(--sombra-rgb),.22);
  padding:.4rem;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;
  z-index:600;
}
.pos-sel.abierto .pos-menu{opacity:1;visibility:visible;transform:translateY(0)}

.pos-op{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"logo titulo" "logo lema";
  align-items:center;
  gap:0 .7rem;
  width:100%;
  background:transparent;border:0;
  border-radius:calc(var(--r-sm) - 6px);
  padding:.6rem .7rem;
  text-align:left;
  cursor:pointer;
  transition:background .2s;
}
.pos-op:hover{background:var(--sand-lt)}
.pos-op:focus-visible{outline:2px solid var(--ocean);outline-offset:-2px}
.pos-op img{grid-area:logo;width:46px;height:32px;object-fit:contain;object-position:center}
.pos-op-t{grid-area:titulo;font-size:.78rem;font-weight:700;color:var(--deep);line-height:1.2}
.pos-op-s{grid-area:lema;font-size:.6rem;color:var(--muted);line-height:1.3}
.pos-op.activa{background:var(--sand-lt)}
.pos-op.activa .pos-op-t{color:var(--ocean)}
.pos-op.activa::after{
  content:'';grid-area:logo;
  justify-self:start;align-self:start;
  width:8px;height:8px;border-radius:50%;
  background:var(--turq);
  margin:-4px 0 0 -6px;
}

/* En pantalla pequeña el botón se aprieta un poco para que quepa
   junto al de idioma y el de menú. */
@media(max-width:640px){
  .pos-menu{min-width:206px;left:-16px}
  .pos-op img{width:40px;height:28px}
}

/* ============================================================
   RIEL DE SECCIONES · 23 de agosto de 2026
   ------------------------------------------------------------
   Vive en su propio carril, pegado al borde izquierdo y centrado
   en vertical. No puede solaparse con el menú de arriba (que va
   arriba a la derecha) ni con la burbuja de WhatsApp (abajo a la
   izquierda), porque ninguno de los tres pisa el sitio del otro.

   Fondo sólido a propósito: los botones que había antes eran
   translúcidos y sobre una foto de cielo no se leían.
   ============================================================ */
/* La barra de botones original se esconde con más fuerza de la normal:
   su regla display:flex vive en el <style> de la propia página, que llega
   después de esta hoja, y una regla de igual peso que llega después gana. */
nav.glass-nav.glass-nav-oculto{display:none!important}

/* ============================================================
   ÍNDICE DE SECCIONES
   Pantalla ancha: lámina fija en el margen izquierdo, con el
   nombre completo de cada sección siempre legible y la actual
   marcada en el azul de la casa.
   ============================================================ */
.riel{
  position:fixed;
  left:1.1rem;
  top:50%;
  transform:translateY(-50%);
  z-index:400;
  display:flex;flex-direction:column;gap:.15rem;
  padding:.7rem .5rem .7rem .8rem;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(var(--deep-rgb),.09);
  border-radius:16px;
  box-shadow:0 22px 50px -26px rgba(var(--sombra-rgb),.55);
}
/* Línea de avance: cuánto llevas leído de la página */
.riel::before{
  content:'';position:absolute;left:.34rem;top:.9rem;bottom:.9rem;width:2px;
  border-radius:2px;background:rgba(var(--deep-rgb),.12);
}
.riel-avance{
  position:absolute;left:.34rem;top:.9rem;bottom:.9rem;width:2px;border-radius:2px;
  background:var(--turq);transform-origin:top center;transform:scaleY(0);
  transition:transform .18s linear;
}
.riel-p{
  position:relative;
  display:flex;align-items:center;gap:.55rem;
  background:none;border:0;cursor:pointer;
  padding:.5rem .8rem;border-radius:10px;
  text-align:left;font-family:inherit;
  transition:background .28s,color .28s;
}
.riel-ico{
  display:grid;place-items:center;width:16px;height:16px;flex-shrink:0;
  font-size:.95rem;color:var(--turq);transition:color .28s;
}
.riel-txt{
  font-size:.53rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  color:rgba(var(--deep-rgb),.62);white-space:nowrap;transition:color .28s;
}
.riel-p:hover{background:rgba(var(--turq-rgb),.1)}
.riel-p:hover .riel-txt{color:var(--deep)}
.riel-p.on{background:var(--deep)}
.riel-p.on .riel-txt{color:#fff}
.riel-p.on .riel-ico{color:var(--sky)}
.riel-p:focus-visible{outline:2px solid var(--turq);outline-offset:2px}

/* La lámina fija solo aparece cuando de verdad hay margen libre a la
   izquierda: el contenido de la página mide 1100 px, así que por debajo de
   1540 px de pantalla la lámina se le montaría encima a las fotos. Ahí el
   índice se queda donde estaban los botones de antes, como una tira de
   fichas sólidas. Sólidas a propósito: las de cristal no se leían encima
   de una foto clara. */
@media(max-width:1540px){
  .riel{
    position:static;transform:none;
    flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;
    gap:.5rem;
    margin:2.2rem auto 0;
    padding:.2rem 1rem 1rem;
    max-width:100%;
    justify-content:flex-start;
    background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .riel::before,.riel-avance{display:none}
  .riel::-webkit-scrollbar{display:none}
  .riel-p{
    background:var(--deep);border-radius:999px;
    padding:.6rem 1.05rem;flex-shrink:0;
  }
  .riel-ico{color:var(--sky)}
  .riel-txt{color:#fff;font-size:.5rem}
  .riel-p:hover{background:var(--ocean)}
  .riel-p:hover .riel-txt{color:#fff}
  .riel-p.on{background:var(--turq)}
  .riel-p.on .riel-ico{color:#fff}
}
@media(min-width:1541px){
  /* el carril tiene su ancho máximo: nunca invade la columna de contenido */
  .riel{max-width:15rem}
}

/* ============================================================
   EVA · LA ASESORA DE LA PORTADA
   El chat vive bajo «Diseña tu estadía en Los Roques», sobre la
   foto del hero: por eso la tarjeta es sólida y con sombra
   honda, no de cristal — sobre un mar brillante, el cristal no
   se lee. Los colores salen de las variables de la casa, así
   que en Tropicana y El Recuerdo se viste solo.
   ============================================================ */
/* La sección del chat: DEBAJO de las olas del hero, para no tapar los
   videos de portada. Detrás lleva una foto de la casa (la paddlista en
   el agua de Cayo de Agua) con un velo crema que se abre en el centro:
   la foto respira por los lados y la tarjeta y el título se leen. La
   foto es una zona administrable (index.chat): se cambia desde el panel
   soltando otra encima, como cualquier fondo del sitio. */
/* La sección del chat es una VENTANA AL MAR VIVO: no lleva foto ni velo
   propio — es transparente, y el mar de fondo (naut.js) abre su velo justo
   aquí (clase .agua-viva), así que detrás de la tarjeta el agua se ve
   entera: olas, destellos y las ondas del cursor. Si el panel publica un
   fondo para la zona index.chat, esa foto tapa el agua y manda ella. */
.ast-sec{position:relative;z-index:31;padding:3rem 1.2rem 3.2rem;text-align:center;
  background:transparent;background-size:cover;background-position:center}
.ast-sec > *{position:relative}
.ast-titulo{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(1.7rem,4vw,2.8rem);color:var(--ocean);line-height:1.05;
  max-width:720px;margin:0 auto 1.3rem}
@media(max-width:640px){.ast-sec{padding-top:1.6rem}}
.ast{max-width:620px;margin:0 auto;background:#fff;border-radius:var(--r-md,18px);
  overflow:hidden;box-shadow:0 30px 80px -30px rgba(var(--sombra-rgb),.5);
  border:1px solid rgba(var(--deep-rgb),.07);
  text-align:left;position:relative}
.ast-cab{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;
  background:linear-gradient(120deg,var(--deep),var(--ocean))}
.ast-ava{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);color:#fff;font-size:1.15rem}
.ast-t{color:#fff;font-weight:700;font-size:.85rem;letter-spacing:.04em;display:flex;align-items:center;gap:.45rem}
.ast-s{color:rgba(255,255,255,.82);font-size:.66rem;margin-top:.15rem;line-height:1.4}
.ast-punto{width:8px;height:8px;border-radius:50%;background:#4ade80;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(74,222,128,.55);animation:astVivo 2.4s ease-out infinite}
@keyframes astVivo{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.ast-cuerpo{max-height:300px;min-height:120px;overflow-y:auto;padding:1rem 1.1rem .4rem;
  display:flex;flex-direction:column;gap:.55rem;background:#F6F9FB;scroll-behavior:smooth}
.ast-b{max-width:85%;padding:.65rem .85rem;border-radius:14px;font-size:.74rem;line-height:1.55;
  white-space:pre-line;animation:astSube .3s ease both}
@keyframes astSube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ast-bot{align-self:flex-start;background:#fff;color:var(--ink,#1c2b33);
  border:1px solid rgba(var(--deep-rgb),.1);border-bottom-left-radius:4px;
  box-shadow:0 6px 18px -10px rgba(var(--sombra-rgb),.35)}
.ast-cliente{align-self:flex-end;background:var(--turq);color:#fff;border-bottom-right-radius:4px}
.ast-espera{color:var(--muted);font-style:italic;background:#fff}
.ast-espera::after{content:'';display:inline-block;width:1em;text-align:left;animation:astPuntos 1.4s steps(4) infinite}
@keyframes astPuntos{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.ast-chips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.6rem 1.1rem 0;background:#F6F9FB}
.ast-chip{border:1px solid rgba(var(--turq-rgb),.45);background:#fff;color:var(--ocean);cursor:pointer;
  border-radius:50px;padding:.42rem .8rem;font-size:.62rem;font-weight:600;letter-spacing:.02em;
  transition:background .25s,color .25s,border-color .25s}
.ast-chip:hover{background:var(--turq);border-color:var(--turq);color:#fff}
.ast-fila{display:flex;gap:.5rem;padding:.8rem 1.1rem;background:#F6F9FB}
.ast-fila input{flex:1;border:1.5px solid rgba(var(--deep-rgb),.16);border-radius:50px;
  padding:.7rem 1.1rem;font-size:.76rem;font-family:inherit;background:#fff;color:#1c2b33;color-scheme:light;outline:none;
  transition:border-color .25s,box-shadow .25s}
.ast-fila input::placeholder{color:#8aa0ab}
.ast-fila input:focus{border-color:var(--turq);box-shadow:0 0 0 3px rgba(var(--turq-rgb),.18)}
.ast-enviar{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;flex-shrink:0;
  background:var(--turq);color:#fff;font-size:1rem;display:grid;place-items:center;
  transition:transform .2s,background .25s}
.ast-enviar:hover{background:var(--ocean);transform:scale(1.06)}
.ast-pie{padding:0 1.1rem .9rem;background:#F6F9FB;text-align:center}
.ast-lead{border:0;background:none;cursor:pointer;color:var(--ocean);font-size:.64rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(var(--turq-rgb),.5);padding:.3rem .5rem}
.ast-lead:hover{color:var(--turq)}
.ast-wa{display:inline-block;margin-top:.3rem;color:var(--turq);font-weight:700;text-decoration:underline}
.ast-form{display:flex;flex-direction:column;gap:.45rem;width:85%}
/* Fondo y color escritos a mano: sin ellos, un navegador en modo oscuro
   pinta los campos negros por su cuenta y el formulario se ve roto. */
.ast-form input{border:1.5px solid rgba(var(--deep-rgb),.16);border-radius:10px;padding:.6rem .8rem;
  font-size:.74rem;font-family:inherit;outline:none;width:100%;
  background:#fff;color:#1c2b33;color-scheme:light}
.ast-form input::placeholder{color:#8aa0ab}
.ast-form input:focus{border-color:var(--turq)}
/* El teléfono con su banderita: la bandera vive dentro del campo,
   a la izquierda, y cambia sola al escribir el código del país. */
.ast-tel{position:relative}
.ast-tel input{padding-left:2.5rem}
.ast-band{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  font-size:1.05rem;line-height:1;pointer-events:none;
  filter:saturate(1.05)}
.ast-mandar{border:0;border-radius:50px;background:var(--turq);color:#fff;cursor:pointer;
  padding:.6rem 1rem;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ast-mandar:hover{background:var(--ocean)}
.ast-mandar:disabled{opacity:.6;cursor:wait}
@media(max-width:640px){
  .ast-cuerpo{max-height:250px}
}
@media(prefers-reduced-motion:reduce){
  .ast-punto,.ast-b{animation:none}
}

/* La burbuja de WhatsApp mientras se arrastra */
.wa-bubble.wa-agarrada{cursor:grabbing;transform:scale(1.06);box-shadow:0 24px 60px -18px rgba(0,60,40,.6);transition:none}

/* La casa que estás viendo, marcada entre las tres tarjetas del inicio.
   Es el selector más visible de la web: se ve de un vistazo en cuál estás
   y las otras dos llevan a su propio dominio. */
.otra-aqui{outline:2px solid var(--turq);outline-offset:3px}
.otra-sello{position:absolute;top:.9rem;right:.9rem;z-index:4;
  background:var(--turq);color:#fff;font-size:.5rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.34rem .7rem;border-radius:50px;
  box-shadow:0 6px 18px -8px rgba(var(--sombra-rgb),.7);pointer-events:none}


/* ══ «LA POSADA» DESPLIEGA LAS TRES ══════════════════════════
   El menú decía «La Posada» en singular cuando son tres casas.
   Ahora al tocarlo se abren las tres y la persona escoge. Se
   reutiliza la misma ficha del selector del logo (.pos-op), para
   que las dos puertas a lo mismo se vean iguales.
   En el teléfono se despliega DENTRO de la lámina del menú: nada
   de capas nuevas encima, que de eso ya hubo bastante. */
.na-casas{position:relative;display:inline-flex;align-items:center;gap:.28rem}
.na-casas-f{font-size:.55rem;line-height:1;opacity:.75;transition:transform .25s,opacity .25s;cursor:pointer}
.na-casas:hover .na-casas-f,.na-casas.abierto .na-casas-f{opacity:1}
.na-casas.abierto .na-casas-f{transform:rotate(180deg)}
/* Cristal líquido: no una caja blanca encima de la foto, sino una
   lámina de vidrio que deja pasar el mar de detrás. Tres capas hacen
   el efecto: el desenfoque de lo que hay debajo, un velo blanquísimo
   muy tenue encima, y un filo de luz en el borde de arriba —que es lo
   que hace que parezca vidrio de verdad y no un plástico opaco—.
   El brillo va en ::before, encima del velo y debajo del contenido. */
.na-casas-menu{
  position:absolute;top:calc(100% + .9rem);left:50%;
  min-width:264px;
  background:linear-gradient(158deg,rgba(255,255,255,.74),rgba(255,255,255,.58));
  -webkit-backdrop-filter:blur(38px) saturate(2);
  backdrop-filter:blur(38px) saturate(2);
  border:1px solid rgba(255,255,255,.5);
  border-radius:22px;
  box-shadow:
    0 26px 60px -20px rgba(var(--sombra-rgb),.5),
    0 2px 10px rgba(var(--sombra-rgb),.14),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(255,255,255,.22);
  padding:.4rem;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);
  transition:opacity .24s ease,transform .24s ease,visibility .24s;
  z-index:600;
  isolation:isolate;
  overflow:hidden}
/* El destello del borde superior: la luz que resbala por el canto. */
.na-casas-menu::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(120% 62% at 22% -18%,rgba(255,255,255,.62),rgba(255,255,255,0) 62%),
    radial-gradient(90% 55% at 92% 108%,rgba(var(--turq-rgb),.16),rgba(255,255,255,0) 66%)}
.na-casas.abierto .na-casas-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.na-casas-tit{margin:.45rem .75rem .5rem;font-size:.52rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--ocean);opacity:.8}
.na-casas-menu .pos-op{text-decoration:none;border-radius:16px}
.na-casas-menu .pos-op::after{content:none}
/* Sobre el cristal, la ficha de cada casa se enciende con más vidrio,
   no con un color plano: así el mar se sigue viendo a través. */
.na-casas-menu .pos-op:hover{background:rgba(255,255,255,.42)}
.na-casas-menu .pos-op.activa{
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -10px rgba(var(--sombra-rgb),.5)}
/* El texto, en el azul más hondo de la marca y sin transparencias: el
   vidrio es bonito, pero si hay que escoger entre que se vea el mar y
   que se lea el nombre de la posada, se lee el nombre. Medido sobre la
   foto de la portada: 6,4:1, por encima del mínimo que pide la norma. */
.na-casas-menu .pos-op-t{color:var(--deep)}
.na-casas-menu .pos-op-s{color:var(--deep);opacity:.72}
.na-casas-menu .na-casas-tit,.na-casas-tit{color:var(--deep);opacity:.72}
/* Si el navegador no sabe desenfocar (Firefox viejo, algún Android),
   el vidrio se cierra y queda una lámina clara: se lee igual de bien,
   simplemente no transparenta. Más vale opaco que ilegible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .na-casas-menu{background:rgba(252,251,248,.97)}
}
/* El menú de esta web es una columna, así que el cristal cae justo
   encima de los demás enlaces y se leían los dos a la vez: «Posada
   Tropicana» encima de «ACTIVIDADES». Mientras el cristal está abierto,
   lo que queda detrás se retira — que es lo que hace el vidrio de
   verdad: lo de atrás se aleja. Vuelve solo al cerrar.
   En el teléfono no hace falta: allí se despliega hacia abajo y no tapa
   nada, así que se deja el menú entero legible. */
@media(min-width:881px){
  .nav-links:has(.na-casas.abierto) .na{opacity:.18;transition:opacity .24s ease}
  .nav-links:has(.na-casas.abierto) .na-casas .na{opacity:1}
}

@media(max-width:880px){
  .na-casas{display:block;width:100%}
  .na-casas>.na{display:inline-block}
  .na-casas-f{margin-left:.35rem;font-size:.6rem}
  .na-casas-menu{
    position:static;transform:none;min-width:0;width:100%;
    display:none;margin-top:.7rem;padding:.3rem;
    background:linear-gradient(158deg,rgba(255,255,255,.58),rgba(255,255,255,.3));
    border:1px solid rgba(255,255,255,.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.8),
      0 10px 26px -16px rgba(var(--sombra-rgb),.45)}
  .na-casas.abierto .na-casas-menu{display:block;opacity:1;visibility:visible;transform:none;
    animation:menuCae .25s ease both}
}

/* El selector de la flechita del logo lleva el mismo cristal: son dos
   puertas a lo mismo y tienen que verse iguales. */
.pos-menu{
  background:linear-gradient(158deg,rgba(255,255,255,.74),rgba(255,255,255,.58));
  -webkit-backdrop-filter:blur(38px) saturate(2);
  backdrop-filter:blur(38px) saturate(2);
  border:1px solid rgba(255,255,255,.5);
  border-radius:22px;
  box-shadow:
    0 26px 60px -20px rgba(var(--sombra-rgb),.5),
    0 2px 10px rgba(var(--sombra-rgb),.14),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(255,255,255,.22);
  isolation:isolate;overflow:hidden}
.pos-menu::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(120% 62% at 22% -18%,rgba(255,255,255,.62),rgba(255,255,255,0) 62%),
    radial-gradient(90% 55% at 92% 108%,rgba(var(--turq-rgb),.16),rgba(255,255,255,0) 66%)}
.pos-menu .pos-op{border-radius:16px}
.pos-menu .pos-op:hover{background:rgba(255,255,255,.42)}
.pos-menu .pos-op.activa{
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 6px 16px -10px rgba(var(--sombra-rgb),.5)}
.pos-menu .pos-op-t{color:var(--deep)}
.pos-menu .pos-op-s{color:var(--deep);opacity:.72}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pos-menu{background:rgba(252,251,248,.97)}
}

/* ══ EL AVISO DE COOKIES Y EL DE NOTIFICACIONES ══════════════
   Una lámina pequeña en cristal, abajo a la DERECHA — la burbuja
   de WhatsApp vive a la izquierda y el cotizador pegado al borde:
   aquí no tapa ni uno ni otro. Nunca bloquea la página. */
.aviso-lam{
  position:fixed;right:1.1rem;bottom:5.6rem;z-index:1240;
  width:min(340px,calc(100vw - 2.2rem));
  background:linear-gradient(158deg,rgba(255,255,255,.78),rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(38px) saturate(2);
  backdrop-filter:blur(38px) saturate(2);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  box-shadow:0 22px 54px -18px rgba(var(--sombra-rgb),.5),inset 0 1px 0 rgba(255,255,255,.8);
  padding:1rem 1.1rem;
  opacity:0;transform:translateY(16px) scale(.97);
  transition:opacity .32s ease,transform .32s ease,visibility .32s}
.aviso-lam.ver{opacity:1;transform:none}
/* con el pie de la página a la vista, la lámina se aparta: nada tapa nada */
.aviso-lam.ver.aparta{opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);pointer-events:none}
.aviso-t{display:block;font-size:.86rem;font-weight:700;color:var(--deep);margin-bottom:.25rem}
.aviso-m{font-size:.74rem;line-height:1.5;color:var(--ink);margin:0 0 .7rem}
.aviso-b{display:flex;gap:.5rem;flex-wrap:wrap}
.aviso-b button{font:inherit;font-size:.7rem;font-weight:700;cursor:pointer;border-radius:999px;
  padding:.5rem 1rem;transition:all .2s}
.aviso-si{background:linear-gradient(135deg,var(--turq),#0094b8);color:#fff;border:none}
.aviso-si:hover{transform:translateY(-1px)}
.aviso-no{background:rgba(255,255,255,.5);color:var(--ocean);border:1px solid rgba(var(--deep-rgb),.2)}
.aviso-no:hover{background:#fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .aviso-lam{background:rgba(252,251,248,.97)}
}
@media(max-width:520px){.aviso-lam{right:.8rem;bottom:5rem}}


/* ══ EL CHAT FLOTANTE · 5/09/2026 ═══════════════════════════════════════
   El chat que responde vive ahora en las once paginas. Donde hay hero
   (la portada) sigue siendo su seccion de siempre; en el resto sale
   flotante, con su boton.

   Va a la DERECHA a proposito: la burbuja de WhatsApp esta a la izquierda
   (left:1.1rem) y ademas se puede arrastrar, asi que la unica forma de que
   no se estorben es ponerlas en lados opuestos. Son cosas distintas — una
   lleva a una persona, la otra contesta al momento. */
/* La barra de cotizacion (.qd-bar) esta pegada abajo, ocupa todo el ancho y
   va en z-index 1250: medido, tapaba el boton del chat entero. Asi que el
   chat va POR ENCIMA y ademas se sube para no sentarse sobre ella. */
.ast-lanza{
  position:fixed; right:18px; bottom:calc(18px + var(--qd-alto, 0px)); z-index:1300;
  width:58px; height:58px; border:0; border-radius:50%;
  background:var(--turq,#00ACCD); color:#fff; cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(var(--sombra-rgb,10,40,60),.45);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s, opacity .2s;
}
.ast-lanza:hover{transform:scale(1.06)}
.ast-lanza svg{width:26px;height:26px}
.ast-lanza.oculto{opacity:0;pointer-events:none;transform:scale(.8)}

.ast-flota{
  position:fixed; right:18px; bottom:calc(18px + var(--qd-alto, 0px)); z-index:1301;
  width:min(380px, calc(100vw - 36px));
  opacity:0; pointer-events:none; transform:translateY(12px) scale(.98);
  transition:opacity .22s, transform .22s;
}
.ast-flota.abierto{opacity:1;pointer-events:auto;transform:none}
.ast-flota .ast{max-height:min(560px, calc(100vh - 120px));position:relative}

.ast-cerrar{
  position:absolute; top:10px; right:10px; z-index:2;
  width:32px; height:32px; border:0; border-radius:50%;
  background:rgba(255,255,255,.22); color:#fff; cursor:pointer;
  font-size:1.3rem; line-height:1; display:flex;
  align-items:center; justify-content:center;
}
.ast-cerrar:hover{background:rgba(255,255,255,.34)}

/* En telefono ocupa el ancho util y se apoya abajo: una ventanita de 380px
   en una pantalla de 390 no es una ventana, es un estorbo. */
@media(max-width:720px){
  .ast-lanza{right:14px;bottom:calc(14px + var(--qd-alto, 0px));width:52px;height:52px}
  .ast-flota{left:10px;right:10px;bottom:calc(10px + var(--qd-alto, 0px));width:auto}
  .ast-flota .ast{max-height:calc(100vh - 90px)}
}
/* Quien pidio que no se muevan las cosas, no ve que se muevan. */
@media(prefers-reduced-motion:reduce){
  .ast-lanza,.ast-flota{transition:none}
}


/* ====== EL DEDO TIENE QUE SENTIR ALGO ======================================
   En escritorio el raton avisa con :hover. En un telefono no hay aviso: se
   toca un boton y no pasa nada hasta que carga la pagina siguiente, y el
   visitante vuelve a tocar creyendo que fallo el primer toque. motion.js
   marca lo que se esta tocando y aqui se hunde un pelo.

   Solo transform: es lo unico que el navegador mueve sin recalcular la
   pagina. Y 0.97 y no 0.9 porque tiene que leerse como "te oi", no como una
   animacion; en un boton que ademas navega, mas que eso se ve nervioso. */
.tocando{transform:scale(.97);transition:transform .09s cubic-bezier(.2,.7,.2,1)}
.tocando img{transform:none}
/* Las tarjetas grandes se hunden menos: en una foto a pantalla casi completa
   un 3% se ve como un salto. */
.card.tocando,.plan-card.tocando,.zaha-item.tocando,.cay-card.tocando,
.exp-card.tocando,.act-card.tocando{transform:scale(.988)}
/* La burbuja del chat es redonda y flota: se hunde como un boton normal. */
.ast-lanza.tocando{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){.tocando{transform:none;transition:none}}

/* 7/09 · enlaces dentro de las burbujas del bot */
.ast-b.ast-bot a{color:var(--turq,#00ACCD);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.ast-b.ast-bot a:hover{color:var(--deep,#0B3A55)}

/* 7/09 · el formulario del chat pide fechas, personas y país */
.ast-form .ast-fila{display:flex;gap:.5rem}
.ast-form .ast-fila>.ast-campo{flex:1;min-width:0}
.ast-form .ast-campo{display:flex;flex-direction:column;gap:.2rem;margin:.35rem 0}
.ast-form .ast-campo label{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gris,#6b7785);padding-left:.2rem}
.ast-form .ast-campo input,.ast-form .ast-campo select{width:100%;box-sizing:border-box;font:inherit;font-size:.9rem;
  padding:.6rem .7rem;border:1.5px solid var(--sand,#E3E8EE);border-radius:12px;background:#fff;color:inherit;min-height:44px}
.ast-form .ast-campo input:focus,.ast-form .ast-campo select:focus{outline:none;border-color:var(--turq,#00ACCD)}
.ast-form .ast-fila3 .ast-campo input{text-align:center;padding-left:.3rem;padding-right:.3rem}
@media(max-width:420px){.ast-form .ast-fila3{flex-wrap:wrap}.ast-form .ast-fila3>.ast-campo{flex:1 1 30%}}

/* 7/09 · minimizar, mover y el chip de WhatsApp dentro del chat */
.ast-mini{position:absolute;top:10px;right:46px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.18);
  color:#fff;font-size:20px;line-height:30px;cursor:pointer;display:none;padding:0}
.ast-mini:hover{background:rgba(255,255,255,.32)}
.ast-flota .ast-mini{display:block}
.ast-cab-mueve{cursor:grab;user-select:none;touch-action:none}
.ast-agarrado .ast-cab-mueve{cursor:grabbing}
.ast-flota.ast-movido{transition:none}
.ast-chip-wa{background:#25D366!important;color:#fff!important;border-color:#25D366!important;text-decoration:none;display:inline-flex;align-items:center}
.ast-chip-wa:hover{background:#1ebe5b!important}

/* ====== BUSCADOR DE DISPONIBILIDAD (planes.html) · 7/09 ====== */
.disp{max-width:1140px;margin:0 auto 2.4rem;background:#fff;border:1px solid var(--sand,#E9E2D4);border-radius:22px;
  padding:1.6rem 1.6rem 1.4rem;box-shadow:0 22px 60px -40px rgba(var(--sombra-rgb,10,40,60),.35)}
.disp-cab{text-align:center;margin-bottom:1rem}
.disp-t{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.05;color:var(--deep,#0B3A55)}
.disp-s{color:var(--muted,#6b7785);font-size:.85rem;margin-top:.35rem}
.disp-f{display:grid;grid-template-columns:1.4fr 1.4fr .8fr .8fr .8fr auto;gap:.6rem;align-items:end}
.disp-c{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.disp-c span{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#6b7785);padding-left:.2rem}
.disp-c input{width:100%;box-sizing:border-box;font:inherit;font-size:.95rem;padding:.7rem .8rem;border:1.5px solid var(--sand,#E3E8EE);
  border-radius:12px;background:var(--gris98,#F8FAFC);min-height:46px;color:inherit}
.disp-c input:focus{outline:none;border-color:var(--turq,#00ACCD);background:#fff}
.disp-n input{text-align:center}
.disp-b{min-height:46px;white-space:nowrap;justify-content:center}
.disp-r{margin-top:1.1rem}
.disp-cab2{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;font-size:.85rem;color:var(--muted,#6b7785);margin-bottom:.7rem}
.disp-fechas{font-weight:600;color:var(--deep,#0B3A55)}
.disp-cambiar{margin-left:auto;background:none;border:0;color:var(--turq,#00ACCD);text-decoration:underline;cursor:pointer;font:inherit;font-size:.8rem}
.disp-v{border-radius:16px;padding:1.1rem 1.2rem;border:1px solid var(--sand,#E9E2D4)}
.disp-v.aviso{background:var(--gris98,#F8FAFC);color:var(--muted,#6b7785);text-align:center}
.disp-v.ok{background:linear-gradient(160deg,#F0FBFD,#fff)}
.disp-v.mix{background:linear-gradient(160deg,#FFF8EC,#fff)}
.disp-v.red{background:linear-gradient(160deg,#FFF1F1,#fff)}
.disp-vt{font-weight:700;font-size:1.1rem;color:var(--deep,#0B3A55);margin-bottom:.5rem}
.disp-v p{margin:.2rem 0 .6rem;color:#3b4a5a;line-height:1.55}
.disp-v ul{margin:.2rem 0 .8rem;padding-left:1.1rem;color:#3b4a5a;line-height:1.6}
.disp-casas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin-bottom:.8rem}
.disp-casa{background:#fff;border:1px solid var(--sand,#E9E2D4);border-radius:14px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.35rem}
.disp-cn{font-weight:700;color:var(--deep,#0B3A55)}
.disp-cd{font-size:.82rem;color:var(--muted,#6b7785)}
.disp-cot{margin-top:.4rem;justify-content:center}
.disp-acc{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.disp-eva{justify-content:center}
@media(max-width:900px){.disp-f{grid-template-columns:1fr 1fr 1fr}.disp-b{grid-column:1/-1}}
@media(max-width:520px){.disp{padding:1.2rem 1rem}.disp-f{grid-template-columns:1fr 1fr}.disp-c:nth-child(1),.disp-c:nth-child(2){grid-column:span 1}.disp-n{grid-column:span 1}}

/* ══ EL CARRITO · 7/09/2026 ═══════════════════════════════════
   Un cajón que entra por la derecha. Vive por encima del chat y
   del cotizador anclado (1300) y por debajo del visor de fotos
   (2000), para que las fotos se agranden encima del carrito. */
.car{position:fixed;inset:0;z-index:1400;pointer-events:none}
.car-velo{position:absolute;inset:0;background:rgba(0,40,70,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.car-panel{position:absolute;top:0;right:0;bottom:0;width:min(600px,100vw);background:var(--paper);display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -20px rgba(var(--sombra-rgb),.45);transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.car.abierto{pointer-events:auto}
.car.abierto .car-velo{opacity:1}
.car.abierto .car-panel{transform:none}
body.car-abierto{overflow:hidden}
.car-cab{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem .6rem;background:linear-gradient(135deg,var(--deep),var(--ocean));color:#fff}
.car-titulo{font-size:1.9rem;line-height:1}
.car-x{width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;cursor:pointer;transition:background .2s}
.car-x:hover{background:rgba(255,255,255,.3)}
.car-pasos{display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(135deg,var(--deep),var(--ocean));padding:0 .8rem .8rem}
.car-pasos button{border:0;background:transparent;color:rgba(255,255,255,.55);font-family:inherit;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .2rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer}
.car-pasos button b{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:.7rem}
.car-pasos button.on{color:#fff}.car-pasos button.on b{background:#fff;color:var(--deep);border-color:#fff}
.car-pasos button.hecho{color:rgba(255,255,255,.85)}.car-pasos button.hecho b{background:var(--turq);border-color:var(--turq)}
.car-cuerpo{flex:1;overflow-y:auto;padding:1.2rem 1.4rem;-webkit-overflow-scrolling:touch}
footer.car-pie,.car-pie{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0;padding:.9rem 1.4rem;border-top:1px solid rgba(var(--deep-rgb),.08);background:#fff;text-align:left}
.car-pie .car-principal{margin-left:auto}
.btn.car-principal:disabled{opacity:.45;cursor:not-allowed;transform:none}
.car-liga{border:0;background:transparent;color:var(--ocean);font-family:inherit;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;cursor:pointer;padding:.5rem 0;text-decoration:underline;text-underline-offset:3px}
.car-liga:hover{color:var(--deep)}
.car-sec label,.car-campo{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem}
.car-sec label>span,.car-campo>span{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.car-campo>span small{letter-spacing:.04em;text-transform:none;font-weight:400}
.car-sec input,.car-sec select,.car-sec textarea,.car-campo input,.car-campo select,.car-campo textarea{font:inherit;font-size:.9rem;padding:.7rem .9rem;border:1px solid rgba(var(--deep-rgb),.16);border-radius:14px;background:#fff;color:var(--ink);width:100%}
.car-sec input:focus,.car-sec select:focus,.car-campo select:focus,.car-sec textarea:focus{outline:2px solid var(--turq);border-color:transparent}
.car-fila2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.car-fila3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}
.car-fila-tel{display:grid;grid-template-columns:minmax(0,1.3fr) 2fr;gap:.8rem}
.car-step{display:inline-flex;align-items:center;justify-content:space-between;border:1px solid rgba(var(--deep-rgb),.16);border-radius:14px;background:#fff;overflow:hidden}
.car-step button{width:38px;height:40px;border:0;background:transparent;font-size:1.2rem;color:var(--ocean);cursor:pointer}
.car-step button:hover{background:rgba(var(--turq-rgb),.1)}
.car-step b{min-width:1.6rem;text-align:center;font-size:1rem}
.car-aviso{background:rgba(var(--turq-rgb),.1);border-left:3px solid var(--turq);padding:.7rem .9rem;border-radius:0 12px 12px 0;font-size:.85rem;margin:.6rem 0}
.car-resumen-fechas{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;font-size:.8rem;color:var(--muted);margin-bottom:.9rem;padding-bottom:.7rem;border-bottom:1px solid rgba(var(--deep-rgb),.08)}
.car-resumen-fechas span:first-child{color:var(--ink);font-weight:700}
.car-plan select{font-size:.85rem}
.car-casa{margin:1.1rem 0 .4rem}
.car-casa h4{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;font-size:1.6rem;color:var(--deep);margin:0 0 .6rem;display:flex;align-items:baseline;gap:.7rem}
.car-casa h4 small{font-family:'Gotham','Jost',sans-serif;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--turq);font-weight:700}
.car-hab{display:grid;grid-template-columns:150px 1fr;gap:.9rem;background:#fff;border:1px solid rgba(var(--deep-rgb),.08);border-radius:18px;overflow:hidden;margin-bottom:.8rem;transition:box-shadow .2s}
.car-hab.en-carrito{border-color:var(--turq);box-shadow:0 0 0 2px rgba(var(--turq-rgb),.25)}
.car-hab.no-cabe{opacity:.72}
.car-hab-foto{position:relative;min-height:150px;background-size:cover;background-position:center;cursor:zoom-in}
.car-hab-lupa{position:absolute;left:.5rem;bottom:.5rem;background:rgba(0,40,70,.65);color:#fff;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .55rem;border-radius:999px;display:inline-flex;align-items:center;gap:.25rem}
.car-hab-lupa i[data-ic]{font-size:.7rem}
.car-hab-info{padding:.8rem .9rem .9rem 0;display:flex;flex-direction:column;gap:.45rem}
.car-hab-n{font-weight:700;font-size:.95rem;color:var(--deep);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.car-hab-n small{font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.car-hab-info p{margin:0;font-size:.78rem;color:var(--muted);line-height:1.45}
.car-hab-como{display:flex;flex-wrap:wrap;gap:.3rem .6rem}
.car-hab-como span{font-size:.62rem;color:var(--ink);display:inline-flex;align-items:center;gap:.25rem}
.car-hab-como i[data-ic]{font-size:.8rem;color:var(--turq)}
.car-hab-precio{display:flex;align-items:baseline;gap:.4rem}
.car-hab-precio b{font-size:1.25rem;color:var(--deep)}
.car-hab-precio small{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.btn.car-agregar{align-self:flex-start;padding:.7rem 1.4rem;font-size:.56rem}
.car-hab.en-carrito .btn.car-agregar{background:var(--deep)}
.car-nocabe{font-size:.72rem;color:#8a4b00;background:#fff4e5;padding:.5rem .7rem;border-radius:10px}
.car-red{background:linear-gradient(135deg,rgba(var(--turq-rgb),.12),rgba(var(--sky-rgb),.18));border-radius:18px;padding:1.1rem 1.2rem;margin:.6rem 0}
.car-red b{display:block;font-size:1rem;color:var(--deep);margin-bottom:.4rem}
.car-red p{font-size:.82rem;margin:0 0 .8rem}
.car-sin{text-align:center;margin:.8rem 0 .2rem}
.car-item{display:grid;grid-template-columns:96px 1fr;gap:.8rem;background:#fff;border:1px solid rgba(var(--deep-rgb),.08);border-radius:18px;overflow:hidden;margin-bottom:.8rem}
.car-item.mal{border-color:#e0a24d}
.car-item-foto{background-size:cover;background-position:center;min-height:96px}
.car-item-c{padding:.8rem .9rem .8rem 0;display:flex;flex-direction:column;gap:.4rem}
.car-item-n{font-weight:700;font-size:.9rem;color:var(--deep);display:flex;flex-direction:column}
.car-item-n small{font-weight:400;font-size:.7rem;color:var(--muted)}
.car-item-pers{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.car-item-pers em{font-style:normal;display:inline-flex;align-items:center;gap:.4rem}
.car-item-pers .car-step button{width:30px;height:32px;font-size:1rem}
.car-item-pers .car-step b{font-size:.85rem;min-width:1.2rem}
.car-lineas{list-style:none;margin:0;padding:0;font-size:.78rem}
.car-lineas li{display:flex;justify-content:space-between;gap:.6rem;padding:.15rem 0;border-bottom:1px dashed rgba(var(--deep-rgb),.1)}
.car-item-total{display:flex;justify-content:flex-end;font-size:1.05rem;color:var(--deep)}
.car-item-total small{font-size:.68rem;color:var(--muted)}
.car-quitar{align-self:flex-end;font-size:.55rem;color:var(--muted)}
.car-total{display:flex;justify-content:space-between;align-items:baseline;padding:.9rem 1rem;background:linear-gradient(135deg,var(--deep),var(--ocean));color:#fff;border-radius:16px;margin-top:.4rem}
.car-total span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
.car-total b{font-size:1.5rem}
.car-nota{font-size:.72rem;color:var(--muted);line-height:1.5;margin:.7rem 0 0}
.car-chk{display:flex !important;flex-direction:row !important;align-items:flex-start;gap:.6rem;font-size:.8rem;line-height:1.45}
.car-chk input{width:auto !important;margin-top:.2rem}
.car-chk a{color:var(--ocean)}
.car-pol{background:#fff;border:1px solid rgba(var(--deep-rgb),.1);border-radius:14px;padding:.9rem 1rem;font-size:.78rem;line-height:1.5;margin:-.3rem 0 .9rem}
.car-pol b{display:block;margin-bottom:.3rem;color:var(--deep)}
.car-pol p{margin:0 0 .5rem}
.car-destino{border:1px solid rgba(var(--ocean-rgb),.35);border-left:4px solid var(--ocean);border-radius:14px;padding:.8rem 1rem;margin:.2rem 0 1rem;background:#fff}
.car-destino>b{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ocean);margin-bottom:.35rem}
.car-destino p{margin:0;font-size:.78rem;line-height:1.55;color:var(--ink)}
.car-fin{text-align:center;padding:1.5rem .5rem}
.car-fin-ic{width:64px;height:64px;border-radius:50%;background:var(--turq);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.car-fin h3{font-family:'SaltyAges','Cormorant Garamond',serif;font-weight:400;font-size:2rem;color:var(--deep);margin:0 0 .6rem}
.car-fin p{font-size:.88rem;line-height:1.55}
.car-fin-ref b{font-size:1.1rem;color:var(--deep)}
.car-fin-btns{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-top:1rem}
.car-fin.mal h3{color:#8a2a00}
/* el botón flotante: arriba del lanzador del chat, a la derecha */
.car-fab{position:fixed;right:18px;bottom:calc(88px + var(--qd-alto,0px));z-index:1299;height:46px;padding:0 1rem 0 .55rem;border:0;border-radius:999px;
  background:#fff;color:var(--deep);cursor:pointer;display:flex;align-items:center;gap:.5rem;font-family:inherit;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  box-shadow:0 10px 30px -8px rgba(var(--sombra-rgb),.4);transition:transform .2s}
.car-fab:hover{transform:translateY(-2px)}
.car-fab-ic{width:36px;height:36px;border-radius:50%;background:var(--turq);color:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.car-fab-n{position:absolute;right:.6rem;top:-.35rem;min-width:20px;height:20px;padding:0 .35rem;border-radius:999px;background:var(--deep);color:#fff;font-size:.62rem;display:flex;align-items:center;justify-content:center}
body.car-abierto .car-fab{opacity:0;pointer-events:none}
@media (max-width:640px){
  .car-panel{width:100vw}
  .car-cuerpo{padding:1rem}
  .car-cab,.car-pie{padding-left:1rem;padding-right:1rem}
  .car-hab{grid-template-columns:1fr}
  .car-hab-foto{min-height:180px}
  .car-hab-info{padding:.2rem .9rem .9rem}
  .car-fila3{grid-template-columns:1fr 1fr 1fr;gap:.5rem}
  .car-step button{width:32px}
  .car-item{grid-template-columns:80px 1fr}
  .car-fab-t{display:none}
  .car-fab{padding:0 .3rem 0 .3rem;height:44px;width:44px;justify-content:center}
  .car-fab-ic{width:34px;height:34px}
  .car-pie .btn{padding:.85rem 1.3rem}
}
@media (prefers-reduced-motion:reduce){.car-panel,.car-velo{transition:none}}

/* ══ EL CALENDARIO DEL CARRITO · 7/09/2026 ═══════════════════
   Se toca el día, no se escribe. Y arriba las fechas van
   escritas con el mes en letras: 01/02 no significa lo mismo
   en Caracas que en Miami. */
.car-rango{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid rgba(var(--deep-rgb),.14);border-radius:18px;padding:.75rem 1rem;margin-bottom:.5rem}
.car-rango.listo{border-color:var(--turq);box-shadow:0 0 0 2px rgba(var(--turq-rgb),.16)}
.car-rango-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.car-rango-c span{font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.car-rango-c b{font-size:.95rem;color:var(--deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car-rango-f{font-style:normal;color:var(--turq);font-size:1.1rem;flex:0 0 auto}
.car-pista{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean);font-weight:700;text-align:center;margin:0 0 .7rem}
.cal{position:relative;background:#fff;border:1px solid rgba(var(--deep-rgb),.1);border-radius:20px;padding:.9rem .9rem 1rem;margin-bottom:1rem}
.cal-meses{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.cal-mt{text-align:center;font-weight:700;font-size:.82rem;color:var(--deep);margin-bottom:.5rem}
.cal-ini,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-ini span{text-align:center;font-size:.55rem;letter-spacing:.08em;color:var(--muted);font-weight:700;padding-bottom:.25rem}
.cal-d{border:0;background:transparent;font-family:inherit;font-size:.82rem;color:var(--ink);aspect-ratio:1;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.cal-d:hover:not(:disabled){background:rgba(var(--turq-rgb),.16)}
.cal-d.cal-off{color:rgba(var(--deep-rgb),.22);cursor:default}
.cal-d.cal-medio{background:rgba(var(--turq-rgb),.14);border-radius:0}
.cal-d.cal-ci,.cal-d.cal-co{background:var(--deep);color:#fff;font-weight:700}
.cal-d.cal-ci{border-radius:50% 0 0 50%}
.cal-d.cal-co{border-radius:0 50% 50% 0}
.cal-d.cal-ci.cal-co,.cal-d.cal-ci:not(.cal-co):last-child{border-radius:50%}
.cal-nav{position:absolute;top:.7rem;width:32px;height:32px;border:1px solid rgba(var(--deep-rgb),.14);background:#fff;color:var(--deep);border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.cal-nav:hover:not(:disabled){background:rgba(var(--turq-rgb),.14)}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-prev{left:.7rem}.cal-next{right:.7rem}
.car-bloque{margin-bottom:1rem}
.car-bt{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.45rem}
@media (max-width:640px){
  .cal-meses{grid-template-columns:1fr}
  .cal-meses .cal-mes:nth-child(2){display:none}
  .car-rango-c b{font-size:.85rem}
}

/* ══ LA FECHA ESCRITA DEBAJO DE CADA CASILLA DE FECHA ════════
   El navegador enseña mm/dd o dd/mm según el país del visitante.
   Debajo se escribe siempre en letras, para que nadie reserve el
   2 de enero creyendo que pidió el 1 de febrero. */
.fecha-lee{display:block;font-size:.68rem;letter-spacing:.02em;text-transform:none;color:var(--ocean);font-weight:600;margin-top:.25rem;min-height:1em}

/* ══ ICONITOS Y PAPELERA DEL CARRITO ═════════════════════════ */
.car-ico{vertical-align:-3px;margin-right:.35rem;flex:0 0 auto}
.car-pie .car-liga .car-ico,.btn .car-ico{margin-right:.4rem}
.car-pasos button b{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff}
.car-pasos button b .car-ico{margin:0}
.car-pasos button.on b{background:#fff;color:var(--deep);border-color:#fff}
.car-pasos button.hecho b{background:var(--turq);border-color:var(--turq);color:#fff}
.car-item-cab{display:flex;align-items:flex-start;gap:.6rem}
.car-item-cab .car-item-n{flex:1;min-width:0}
.car-item-acc{display:flex;gap:.3rem;flex:0 0 auto}
.car-icob{width:32px;height:32px;border:1px solid rgba(var(--deep-rgb),.14);background:#fff;color:var(--muted);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s,border-color .18s}
.car-icob .car-ico{margin:0}
.car-icob:hover{background:rgba(var(--turq-rgb),.12);color:var(--ocean);border-color:var(--turq)}
.car-icob.car-quitar:hover{background:#fdeceb;color:#a3281a;border-color:#e6a79f}
.car-deshacer{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:var(--deep);color:#fff;border-radius:14px;padding:.6rem .9rem;margin-bottom:.8rem;font-size:.8rem}
.car-deshacer button{border:0;background:rgba(255,255,255,.18);color:#fff;font-family:inherit;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.4rem .8rem;border-radius:999px;cursor:pointer}
.car-deshacer button:hover{background:rgba(255,255,255,.32)}
.car-item.sinfoto{grid-template-columns:1fr}
.car-item.sinfoto .car-item-c{padding-left:.9rem}
.car-liga.car-vaciar{color:var(--muted)}
.car-liga.car-vaciar:hover{color:#a3281a}

/* ══ LA BANDA DE DUDAS · el bot dentro del carrito ═══════════
   Va entre el contenido y el pie: pegada al carrito, pero es
   otra cosa —fondo oscuro— para que se entienda que ahí se
   pregunta, no se compra. Cerrada ocupa una línea. */
.car-dudas{flex:0 0 auto;background:var(--deep);color:#fff}
.car-dudas-cab{width:100%;display:flex;align-items:center;gap:.7rem;padding:.7rem 1.4rem;background:transparent;border:0;color:#fff;font-family:inherit;text-align:left;cursor:pointer}
.car-dudas-cab:hover{background:rgba(255,255,255,.06)}
.car-dudas-ic{width:34px;height:34px;border-radius:50%;background:var(--turq);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.car-dudas-ic .car-ico{margin:0}
.car-dudas-tt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.car-dudas-tt b{font-size:.82rem}
.car-dudas-tt small{font-size:.66rem;opacity:.75}
.car-dudas-fl{font-size:1rem;opacity:.7;transition:transform .25s}
.car-dudas.abierta .car-dudas-fl{transform:rotate(180deg)}
.car-dudas-cuerpo{padding:0 1.4rem 1rem}
.car-dudas-hilo{max-height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.2rem 0 .6rem}
.car-b{max-width:85%;padding:.55rem .8rem;border-radius:14px;font-size:.82rem;line-height:1.45;white-space:pre-wrap}
.car-b-bot{background:rgba(255,255,255,.12);border-bottom-left-radius:4px;align-self:flex-start}
.car-b-cli{background:var(--turq);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.car-b-esp{opacity:.6;font-style:italic}
.car-b-wa{display:block;margin-top:.3rem;color:#fff;font-weight:700;text-decoration:underline}
.car-dudas-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem}
.car-dudas-chips button{border:1px solid rgba(255,255,255,.32);background:transparent;color:#fff;font-family:inherit;font-size:.7rem;padding:.35rem .7rem;border-radius:999px;cursor:pointer}
.car-dudas-chips button:hover{background:rgba(255,255,255,.16)}
.car-dudas-pie{display:flex;gap:.5rem}
.car-dudas-pie input{flex:1;min-width:0;font:inherit;font-size:.85rem;padding:.6rem .9rem;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
.car-dudas-pie input::placeholder{color:rgba(255,255,255,.6)}
.car-dudas-pie input:focus{outline:2px solid var(--turq)}
.car-dudas-env{width:42px;flex:0 0 auto;border:0;border-radius:50%;background:var(--turq);color:#fff;font-size:1.1rem;cursor:pointer}
.car-dudas-env:hover{background:#fff;color:var(--deep)}
@media (max-width:640px){
  .car-dudas-cab,.car-dudas-cuerpo{padding-left:1rem;padding-right:1rem}
  .car-dudas-hilo{max-height:160px}
}

/* La nota propia de cada casa (la ecológica de Tropicana, por ejemplo) */
.casa-nota{max-width:640px;margin:1.2rem auto 0;padding:.85rem 1.1rem;background:rgba(var(--turq-rgb),.09);
  border-left:3px solid var(--turq);border-radius:0 14px 14px 0;font-size:.85rem;line-height:1.55;color:var(--ink)}