/* Capa visual moderna del sitio público: cristal, aurora, olas animadas, tarjetas con superposiciones
   y navegación móvil tipo app. Se carga después de site.css y lo refina. */

:root {
  --glass: rgba(255, 255, 255, .14);
  --glass-line: rgba(255, 255, 255, .22);
  --grad-coral: linear-gradient(135deg, #e5522f, #c63a1f);
  --grad-ocean: linear-gradient(135deg, #0b4f5c, #08343d);
  --radius-xl: 32px;
}

.btn-primary { background: var(--grad-coral); box-shadow: 0 10px 26px rgba(198, 58, 31, .32); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #c63a1f, #a92f17); transform: translateY(-1px); }

.flag-svg { display: block; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 1px 3px rgba(0, 0, 0, .25); }

/* ---------- reveal ---------- */

/* Animación (no transición) para no interferir con los efectos hover de las tarjetas. */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: rise .75s var(--ease) var(--d, 0ms) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(28px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; } .reveal.in { animation: none; } }

/* ---------- cabecera flotante ---------- */

.site-header {
  top: 10px; width: min(1180px, 100% - 20px); margin: 10px auto -78px;
  border: 1px solid var(--glass-line); border-radius: 999px;
  background: rgba(8, 52, 61, .55); backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: 0 10px 34px rgba(4, 28, 34, .28);
}
.header-row { height: 58px; padding: 0 10px 0 16px; width: auto; }
.main-nav { gap: 0; }
.main-nav a { font-size: .88rem; white-space: nowrap; padding: 8px 12px; }
@media (max-width: 1100px) { .main-nav a { padding: 8px 9px; font-size: .84rem; } .header-wa span:last-child { display: none; } .header-wa { padding: 0 12px; } }
.lang-switch { background: rgba(255, 255, 255, .12); }
.lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 6px; }
.lang-btn[aria-pressed="true"] { box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.region-btn { background: rgba(255, 255, 255, .08); }

/* ---------- hero ---------- */

.hero { isolation: isolate; }
.hero::after {
  content: ''; position: absolute; inset: -25%; z-index: 1; pointer-events: none; mix-blend-mode: screen; filter: blur(34px);
  background:
    radial-gradient(38% 38% at 18% 28%, rgba(20, 163, 154, .5), transparent 70%),
    radial-gradient(32% 32% at 82% 18%, rgba(255, 199, 90, .32), transparent 70%),
    radial-gradient(40% 40% at 58% 92%, rgba(244, 93, 63, .26), transparent 70%);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(4%, -3%, 0) scale(1.08) rotate(3deg); } }
.hero-scene { z-index: 0; }
.hero-inner { z-index: 2; padding: 150px 0 230px; }
.hero h1 { font-size: clamp(3rem, 7.4vw, 6rem); max-width: 10ch; text-shadow: 0 6px 40px rgba(0, 0, 0, .25); }
.hero h1 em {
  display: inline-block; padding-bottom: .08em;
  background: linear-gradient(95deg, #ffe08a, #ffb25a 55%, #ff8a5c); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { font-size: 1.18rem; }
.eyebrow { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(8px); }

.trust { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.trust li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px);
  font-size: .86rem; font-weight: 700; color: rgba(255, 255, 255, .92);
}
.trust .icon { color: var(--sun); }

.hero-waves { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 96px; overflow: hidden; pointer-events: none; }
.wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.wave-1 { fill: rgba(247, 241, 232, .55); animation: wave 16s linear infinite; }
.wave-2 { fill: #f7f1e8; animation: wave 24s linear infinite reverse; }
@keyframes wave { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .wave, .hero::after { animation: none; } }

/* ---------- selector de servicio ---------- */

.chooser-wrap { margin-top: -170px; }
.chooser {
  border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--radius-xl);
  background: rgba(255, 253, 249, .8); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 30px 80px rgba(8, 52, 61, .28), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.choice { border: 1.5px solid transparent; background: var(--white); box-shadow: var(--shadow-sm); border-radius: 22px; overflow: hidden; }
.choice::before { content: ''; position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 100% at 0% 0%, var(--cat-soft), transparent 70%); transition: opacity .25s; }
.choice > * { position: relative; }
.choice:hover::before { opacity: 1; }
.choice-icon { border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }
.choice[aria-pressed="true"] { background: var(--cat); border-color: var(--cat); color: var(--white); box-shadow: 0 14px 30px -10px var(--cat); }
.choice[aria-pressed="true"]::before { opacity: 0; }
.choice[aria-pressed="true"] .choice-tag { color: rgba(255, 255, 255, .88); }
.choice[aria-pressed="true"] .choice-icon { background: rgba(255, 255, 255, .24); color: var(--white); }

/* ---------- catálogo ---------- */

#servicios { padding-top: 96px; }
.section h2 { letter-spacing: -.03em; }
.tabs { background: rgba(13, 43, 51, .06); }
.tab[aria-selected="true"] { background: var(--grad-ocean); box-shadow: 0 6px 16px rgba(8, 52, 61, .3); }

.grid { gap: 26px; }
.card {
  border: 0; border-radius: 28px; background: var(--white);
  box-shadow: 0 1px 2px rgba(13, 43, 51, .05), 0 12px 32px -8px rgba(13, 43, 51, .16);
}
.card:hover { transform: translateY(-8px); box-shadow: 0 2px 4px rgba(13, 43, 51, .06), 0 28px 50px -12px rgba(13, 43, 51, .28); }
.card-media { position: relative; overflow: hidden; }
.card .media { aspect-ratio: 4 / 3.1; }
.card-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; pointer-events: none; background: linear-gradient(to top, rgba(4, 24, 30, .7), transparent); }
.card-badges { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.badge-featured { position: static; background: rgba(255, 255, 255, .94); }
.badge-rating {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  background: rgba(8, 40, 48, .62); backdrop-filter: blur(10px); color: var(--white); font-size: .78rem; font-weight: 700;
}
.badge-rating .icon { color: #ffc75a; fill: #ffc75a; }
.badge-rating span { opacity: .75; font-weight: 600; }
.price-pill {
  position: absolute; z-index: 2; left: 14px; bottom: 14px; display: flex; align-items: baseline; gap: 6px;
  padding: 8px 15px; border-radius: 999px; background: rgba(255, 253, 249, .94); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2); color: var(--ink);
}
.price-pill strong { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; }
.price-pill span { font-size: .74rem; font-weight: 700; color: var(--muted); }
.card-body { padding: 20px 22px 22px; gap: 9px; }
.card-title { font-size: 1.4rem; }
.card-cta {
  margin-top: auto; width: 100%; justify-content: center; padding: 13px 16px; border-radius: 16px;
  background: var(--grad-ocean); color: var(--white); font-size: .93rem;
}
.card:hover .card-cta { background: var(--grad-coral); gap: 12px; }
.card-body .chips { margin-bottom: 8px; }

/* ---------- secciones apiladas ---------- */

.section-ocean {
  position: relative; z-index: 1; margin-top: -48px; padding-top: 130px;
  border-radius: 48px 48px 0 0;
  background: radial-gradient(70% 90% at 90% 0%, rgba(20, 163, 154, .28), transparent 60%), var(--ocean-deep);
}
.steps li { border-radius: 28px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); transition: transform .3s var(--ease), background .3s; }
.steps li:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .1); }
.step-num { width: 54px; height: 54px; border: 0; background: linear-gradient(135deg, #ffd37a, #ff9d5c); color: var(--ocean-deep); box-shadow: 0 10px 24px rgba(255, 157, 92, .35); }
.lookup-box { border-radius: 30px; box-shadow: 0 24px 60px -20px rgba(13, 43, 51, .25); border-color: transparent; }
.section-sand { position: relative; z-index: 2; margin-top: -48px; padding-top: 120px; border-radius: 48px 48px 0 0; }
.contact-card { border-radius: 26px; border-color: transparent; box-shadow: var(--shadow-sm); }
.site-footer { position: relative; z-index: 3; margin-top: -44px; padding-top: 80px; border-radius: 44px 44px 0 0; }

/* ---------- destino (bienvenida) ---------- */

.gate {
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(20, 163, 154, .45), transparent 70%),
    radial-gradient(50% 50% at 90% 85%, rgba(244, 93, 63, .3), transparent 70%),
    linear-gradient(180deg, #08343d 0%, #0b5560 60%, #0d7c7f 100%);
}
.gate h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
.gate-grid { gap: 24px; }
.gate-card { border-radius: 30px; }
.gate-art { position: relative; height: 170px; }
.gate-flag { position: absolute; left: 22px; bottom: -28px; z-index: 2; border-radius: 12px; overflow: hidden; border: 3px solid var(--paper); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); line-height: 0; }
.gate-flag .flag-svg { box-shadow: none; border-radius: 0; }
.gate-body { padding-top: 40px; }
.gate-do:hover { box-shadow: 0 30px 70px rgba(226, 72, 79, .4); }
.gate-tc:hover { box-shadow: 0 30px 70px rgba(20, 163, 154, .45); }

/* ---------- ficha de reserva ---------- */

.drawer { border-radius: 32px 0 0 32px; }
.drawer-section { border-top-color: rgba(13, 43, 51, .08); }
.legend-num { background: var(--grad-coral); }
.drawer-foot { backdrop-filter: blur(14px); background: rgba(255, 255, 255, .92); }
.review-form { border-radius: 22px; }

/* ---------- pago ---------- */

.paybox { margin: 18px 0; padding: 18px; border-radius: 22px; background: var(--white); border: 1.5px solid var(--line); text-align: left; box-shadow: var(--shadow-sm); width: 100%; }
.paybox h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; }
.paybox h3 .icon { color: var(--lagoon-ink); }
.paybox > .muted { font-size: .85rem; margin-bottom: 12px; }
.pay-sum { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--sand); }
.pay-sum div { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.pay-sum dt { color: var(--ink-2); }
.pay-sum dd { margin: 0; font-weight: 700; }
.pay-sum .due { padding-top: 6px; border-top: 1px dashed var(--line-2); font-size: 1.05rem; }
.pay-sum .due dd { font-family: var(--font-display); font-size: 1.3rem; }
.pay-mode { margin-bottom: 14px; flex-wrap: wrap; }
.pay-mode label { flex: 1 1 140px; }
.pay-mode span { font-size: .84rem; }
.paypal-slot { min-height: 52px; }
.success-pay { width: 100%; max-width: 420px; }

/* ---------- barra de navegación móvil ---------- */

.tabbar { display: none; }

@media (max-width: 820px) {
  body { padding-bottom: 96px; }
  .wa-float { display: none; }
  .tabbar {
    position: fixed; z-index: 60; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px;
    border: 1px solid var(--glass-line); border-radius: 26px;
    background: rgba(8, 40, 48, .88); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 16px 40px rgba(4, 24, 30, .4);
  }
  .tab-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; border: 0; border-radius: 20px;
    background: transparent; color: rgba(255, 255, 255, .72); text-decoration: none; font-size: .68rem; font-weight: 700; line-height: 1.1; text-align: center;
    transition: background .18s, color .18s;
  }
  .tab-item:active, .tab-item:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
  .tab-wa { color: #7ef0a8; }
  .toasts { bottom: 108px; }
}

/* ---------- móvil ---------- */

@media (max-width: 640px) {
  .site-header { top: 8px; margin: 8px auto -70px; width: calc(100% - 16px); }
  .header-row { height: 54px; padding: 0 8px 0 10px; gap: 8px; }
  .brand { font-size: 1.15rem; }
  .brand > span { display: none; }
  .header-tools { gap: 6px; margin-left: auto; }
  .lang-btn span { display: none; }
  .lang-btn { padding: 5px 6px; }
  .region-btn { min-height: 34px; padding: 0 10px 0 8px; font-size: .8rem; }

  .hero-inner { padding: 112px 0 200px; }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 3.6rem); }
  .hero-lead { font-size: 1.02rem; }
  .trust { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .trust::-webkit-scrollbar { display: none; }
  .trust li { flex: none; }

  .chooser-wrap { margin-top: -150px; }
  .chooser { padding: 18px 0 18px 16px; border-radius: 28px; }
  .chooser-title { font-size: 1.3rem; }
  .chooser-grid { flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 4px 16px 8px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .chooser-grid::-webkit-scrollbar { display: none; }
  .choice { flex: 0 0 148px; scroll-snap-align: start; padding: 14px 12px; }
  .choice-tag { display: block; font-size: .74rem; }

  .section { padding: 64px 0; }
  .section-ocean { padding-top: 100px; border-radius: 32px 32px 0 0; margin-top: -36px; }
  .section-sand { padding-top: 90px; border-radius: 32px 32px 0 0; margin-top: -36px; }
  .site-footer { border-radius: 32px 32px 0 0; margin-top: -32px; padding-top: 64px; }
  .card { border-radius: 26px; }
  .grid { gap: 20px; }
  .tabs { margin-right: -16px; border-radius: 999px 0 0 999px; }

  /* La ficha de reserva se convierte en una hoja inferior deslizable. */
  .drawer {
    inset: auto 0 0 0; margin: auto 0 0; width: 100%; max-width: 100%; height: 94dvh; max-height: 94dvh;
    border-radius: 30px 30px 0 0;
  }
  .drawer[open] { animation: sheet-up .42s var(--ease); }
  .drawer::before { content: ''; position: absolute; z-index: 6; top: 9px; left: 50%; width: 46px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .85); transform: translateX(-50%); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
  .drawer-media { aspect-ratio: 16 / 9; }
  .drawer-foot { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .gate-art { height: 120px; }
  .gate-body { padding-top: 38px; }
  .gate-body strong { font-size: 1.4rem; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }