/* ==========================================================================
   VOLCANO ACQUA PARK — S00153
   components.css — header, botones, cards, selector de pases, footer, FAQ
   Rediseño "Místico-Hídrico": vidrio mojado con borde-reflejo degradado,
   glows orgánicos, mapa esquemático con pines de pulso, odómetro.
   ========================================================================== */

/* ---- Barra de progreso de scroll ---- */
.progreso-scroll {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--cian-neon), var(--oro-satinado));
  box-shadow: 0 0 12px rgba(39, 103, 236, 0.6);
  z-index: 1001;
  transition: width 80ms linear;
}

/* ==========================================================================
   Utilidad: borde-reflejo (vidrio mojado)
   Doble background-image (fondo clipeado a padding-box + gradiente clipeado
   a border-box) sobre un border transparente — simula el reflejo de luz en
   el agua sin DOM extra. Reutilizado por .vidrio y cada card/panel principal.
   ========================================================================== */

.vidrio,
.encabezado,
.tarjeta-vip,
.opcion-pase,
.faq__item,
.stat,
.cta-final,
.stepper__boton,
.mapa-estatico,
.popover-mapa {
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ==========================================================================
   Header
   ========================================================================== */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background-image: linear-gradient(rgba(5, 9, 16, 0.68), rgba(5, 9, 16, 0.68)), var(--borde-reflejo);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  transition: transform var(--transicion), border-color var(--transicion), background var(--transicion),
    box-shadow var(--transicion);
}

.encabezado--con-sombra {
  border-bottom-color: var(--borde-cristal);
  box-shadow: var(--sombra-md);
}

.encabezado--oculto {
  transform: translateY(-100%);
}

.encabezado__interior {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex-shrink: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
}

.marca__logo {
  width: auto;
  height: 56px;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(39, 103, 236, 0.35));
}

@media (max-width: 900px) {
  .marca__logo {
    height: 46px;
    max-width: 120px;
  }
}

.marca__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.marca__titulo,
.marca__sub {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.marca__sub {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.56em;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cian-neon);
}

.nav-principal {
  display: flex;
  align-items: center;
  gap: var(--sp-lg);
}

.nav-principal__lista {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.nav-principal__enlace {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--niebla);
  padding-block: 0.4rem;
  transition: color var(--transicion);
}

.nav-principal__enlace::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cian-neon), var(--cian-neon-dark));
  border-radius: var(--radio-pill);
  transition: width var(--transicion);
}

.nav-principal__enlace:hover,
.nav-principal__enlace:focus-visible,
.nav-principal__enlace.activo {
  color: var(--blanco-puro);
}

.nav-principal__enlace:hover::after,
.nav-principal__enlace:focus-visible::after,
.nav-principal__enlace.activo::after {
  width: 100%;
}

.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

/* ---- Selector de idioma ---- */
.selector-idioma {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--vidrio-fondo);
  border: 1px solid var(--borde-cristal);
  border-radius: var(--radio-pill);
}

.selector-idioma__boton {
  padding: 0.3rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--niebla-tenue);
  border-radius: var(--radio-pill);
  transition: color var(--transicion), background var(--transicion);
}

.selector-idioma__boton:hover {
  color: var(--blanco-puro);
}

.selector-idioma__boton[aria-pressed="true"] {
  background: var(--cian-tenue-fuerte);
  color: var(--blanco-puro);
}

/* ---- Menú móvil ---- */
.boton-menu {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde-cristal);
}

.boton-menu span {
  display: block;
  height: 2px;
  width: 20px;
  margin-inline: auto;
  background: var(--blanco);
  border-radius: var(--radio-pill);
  transition: transform var(--transicion), opacity var(--transicion);
}

.boton-menu[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.boton-menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.boton-menu[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
  .encabezado__acciones > .btn--fantasma {
    display: none;
  }

  .encabezado__interior {
    gap: 0.5rem;
  }

  .encabezado__acciones {
    gap: 0.5rem;
  }

  .selector-idioma__boton {
    padding: 0.3rem 0.45rem;
  }

  .marca {
    gap: 0.45rem;
  }

  .nav-principal__lista {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-sm);
    padding: var(--sp-xl) var(--sp-lg);
    background: rgba(4, 7, 14, 0.97);
    backdrop-filter: blur(20px);
    transform: translateX(100%);
    transition: transform var(--transicion-lenta);
    overflow-y: auto;
  }

  .nav-principal__lista.abierto {
    transform: translateX(0);
  }

  .nav-principal__enlace {
    font-size: var(--fs-lg);
  }

  .boton-menu {
    display: flex;
  }
}

/* El wordmark "Volcano Acqua Park" ya incluye el nombre completo en la
   imagen — en pantallas angostas no hay lugar para repetirlo al lado sin
   truncarlo, así que en el header (no en el footer) se apoya solo en el
   logo. */
@media (max-width: 560px) {
  .encabezado .marca__texto {
    display: none;
  }
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radio-pill);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transicion), box-shadow var(--transicion);
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms ease;
}

.btn:hover::before {
  transform: translateX(120%);
}

.btn--bloque {
  width: 100%;
}

.btn--primario {
  color: var(--gris-mistico);
  background: linear-gradient(135deg, var(--cian-neon), var(--cian-neon-dark));
  box-shadow: var(--sombra-sm);
}

.btn--primario:hover {
  box-shadow: var(--resplandor-cian);
}

.btn--oro,
.btn--vip {
  color: #23180a;
  background: linear-gradient(135deg, var(--oro-claro), var(--oro-satinado) 55%, var(--oro-satinado-dark));
  box-shadow: var(--sombra-sm);
}

.btn--oro:hover,
.btn--vip:hover {
  box-shadow: var(--resplandor-oro);
}

.btn--fantasma {
  color: var(--blanco);
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo);
  border: 1px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(var(--vidrio-blur));
  -webkit-backdrop-filter: blur(var(--vidrio-blur));
}

.btn--fantasma:hover {
  color: var(--cian-neon);
  box-shadow: var(--resplandor-cian);
}

.btn--whatsapp {
  color: var(--blanco-puro);
  background: linear-gradient(135deg, #23c261, var(--whatsapp));
  box-shadow: var(--sombra-sm);
}

.btn--whatsapp:hover {
  box-shadow: 0 0 32px rgba(37, 211, 102, 0.4);
}

.btn--pequeno {
  padding: 0.6rem 1.2rem;
  font-size: var(--fs-xs);
}

.btn--grande {
  padding: 1.1rem 2.25rem;
  font-size: var(--fs-md);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
}

.grupo-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

/* ==========================================================================
   Panel de vidrio mojado (glassmorphism orgánico) — utilidad reusable
   ========================================================================== */

.vidrio {
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo);
  backdrop-filter: blur(var(--vidrio-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(1.3);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md);
}

/* ---- Divisores de sección: olas/cascadas asimétricas, nunca líneas planas ---- */

.divisor-seccion {
  position: relative;
  height: clamp(48px, 8vw, 110px);
  margin-top: calc(-1 * clamp(48px, 8vw, 110px));
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}

.divisor-seccion svg {
  width: 100%;
  height: 100%;
  display: block;
}

.divisor-seccion--onda .capa-a {
  fill: var(--abismo);
}
.divisor-seccion--onda .capa-b {
  fill: rgba(39, 103, 236, 0.06);
}

.divisor-seccion--cascada .capa-a {
  fill: var(--teal-mistico);
}
.divisor-seccion--cascada .capa-b {
  fill: rgba(242, 89, 26, 0.05);
}

.divisor-seccion--diagonal .capa-a {
  fill: var(--abismo-profundo);
}
.divisor-seccion--diagonal .capa-b {
  fill: rgba(39, 103, 236, 0.05);
}

/* ---- Insignia flotante dorada (bento, popover) ---- */

.insignia-flotante {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  z-index: 2;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #23180a;
  background: linear-gradient(135deg, var(--oro-claro), var(--oro-satinado));
  border-radius: var(--radio-pill);
  box-shadow: 0 4px 18px rgba(242, 89, 26, 0.35);
}

.insignia-flotante--cian {
  color: var(--gris-mistico);
  background: linear-gradient(135deg, var(--cian-neon), var(--cian-neon-dark));
  box-shadow: 0 4px 18px rgba(39, 103, 236, 0.35);
}

/* ---- Odómetro: números que "ruedan" al cambiar ---- */

.odometro {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: filter 180ms ease;
}

.odometro--activo {
  animation: odometro-tick 90ms steps(2) infinite;
  filter: blur(1px);
}

@keyframes odometro-tick {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .odometro--activo {
    animation: none;
    filter: none;
  }
}

/* ---- Tarjetas VIP / membresía ---- */

.grid-vip {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tarjeta-vip {
  position: relative;
  padding: var(--sp-md);
  border-radius: var(--radio-lg);
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo-oro);
  backdrop-filter: blur(var(--vidrio-blur));
  -webkit-backdrop-filter: blur(var(--vidrio-blur));
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.tarjeta-vip:hover {
  transform: translateY(-6px);
  box-shadow: var(--resplandor-oro);
}

.tarjeta-vip::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle at 90% -10%, rgba(242, 89, 26, 0.22), transparent 60%);
  pointer-events: none;
}

.tarjeta-vip__cinta {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #23180a;
  background: linear-gradient(135deg, var(--oro-claro), var(--oro-satinado));
  padding: 0.3rem 0.7rem;
  border-radius: var(--radio-pill);
}

.tarjeta-vip__icono {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--radio-md);
  background: var(--oro-tenue);
  color: var(--oro-satinado);
  margin-bottom: var(--sp-sm);
}

.tarjeta-vip__icono svg {
  width: 24px;
  height: 24px;
}

.tarjeta-vip h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3xs);
}

.tarjeta-vip p {
  color: var(--niebla);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Franja de estadísticas
   ========================================================================== */

.franja-stats {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  text-align: center;
}

.stat {
  padding: var(--sp-md) var(--sp-sm);
  border-radius: var(--radio-lg);
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo);
  backdrop-filter: blur(var(--vidrio-blur));
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--resplandor-cian);
}

.stat--oro:hover {
  box-shadow: var(--resplandor-oro);
}

.stat__numero {
  display: block;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--cian-neon);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.stat--oro .stat__numero {
  color: var(--oro-satinado);
}

.stat__etiqueta {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--niebla);
}

/* ==========================================================================
   Selector de Pases — panel de control de yate de lujo
   ========================================================================== */

.selector-pases {
  padding: var(--sp-lg);
}

.selector-pases__progreso {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
}

.selector-pases__progreso li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--niebla-tenue);
}

.selector-pases__progreso li::before {
  content: attr(data-numero);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borde-cristal-fuerte);
  color: var(--niebla-tenue);
  font-size: 0.75rem;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.selector-pases__progreso li:not(:last-child)::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--borde-cristal-fuerte);
}

.selector-pases__progreso li.activo,
.selector-pases__progreso li.completo {
  color: var(--blanco-puro);
}

.selector-pases__progreso li.activo::before {
  border-color: var(--cian-neon);
  color: var(--cian-neon);
  box-shadow: 0 0 0 4px var(--cian-tenue);
}

.selector-pases__progreso li.completo::before {
  content: "✓";
  background: var(--cian-neon);
  border-color: var(--cian-neon);
  color: var(--gris-mistico);
}

.selector-pases__paso[hidden] {
  display: none;
}

.grid-opciones-pase {
  display: grid;
  gap: var(--sp-sm);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.opcion-pase {
  position: relative;
  display: block;
  padding: var(--sp-md);
  border-radius: var(--radio-md);
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo);
  cursor: pointer;
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
  overflow: hidden;
}

.opcion-pase:hover {
  transform: translateY(-3px);
}

.opcion-pase input {
  position: absolute;
  opacity: 0;
}

.opcion-pase__titulo {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  margin-bottom: 0.3rem;
}

.opcion-pase__desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--niebla);
}

.opcion-pase:has(input:checked) {
  box-shadow: var(--resplandor-cian);
  background-image: linear-gradient(var(--cian-tenue), var(--cian-tenue)), var(--borde-reflejo);
}

.opcion-pase--vip {
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo-oro);
}

.opcion-pase--vip:has(input:checked) {
  box-shadow: var(--resplandor-oro);
  background-image: linear-gradient(var(--oro-tenue), var(--oro-tenue)), var(--borde-reflejo-oro);
}

.opcion-pase--vip .opcion-pase__titulo {
  color: var(--oro-satinado);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: var(--sp-md);
}

.campo label,
.campo__etiqueta {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--niebla);
  text-transform: uppercase;
}

.campo input[type="date"],
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select,
.campo textarea {
  padding: 0.85rem 1rem;
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde-cristal);
  background: rgba(8, 18, 30, 0.5);
  color: var(--blanco);
  color-scheme: dark;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--cian-neon);
  box-shadow: 0 0 0 3px var(--cian-tenue);
}

.nota-construccion {
  font-size: var(--fs-xs);
  color: var(--niebla-tenue);
  border-left: 2px solid var(--cian-neon);
  padding-left: 0.75rem;
  margin-bottom: var(--sp-md);
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radio-pill);
  border: 1px solid var(--borde-cristal);
  margin-bottom: var(--sp-sm);
}

.stepper__controles {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* ---- Steppers circulares dorados, easing elástico (panel de yate) ---- */
.stepper__boton {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-image: radial-gradient(circle at 35% 30%, rgba(242, 89, 26, 0.16), rgba(8, 18, 30, 0.55) 72%),
    var(--borde-reflejo-oro);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--oro-satinado);
  transition: transform var(--transicion-elastica), box-shadow var(--transicion-elastica), color var(--transicion);
}

.stepper__boton:hover {
  color: var(--oro-claro);
  box-shadow: var(--resplandor-oro);
  transform: scale(1.08);
}

.stepper__boton:active {
  transform: scale(0.88);
}

.stepper__valor {
  min-width: 2ch;
  text-align: center;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: var(--fs-lg);
}

.selector-pases__resumen {
  display: grid;
  gap: 0.75rem;
  margin-bottom: var(--sp-md);
}

.selector-pases__resumen div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-block: 0.6rem;
  border-bottom: 1px dashed var(--borde-cristal);
  font-size: var(--fs-sm);
}

.selector-pases__resumen dt {
  color: var(--niebla);
}

.selector-pases__resumen dd {
  font-weight: 700;
  text-align: right;
}

.disclaimer {
  font-size: var(--fs-xs);
  color: var(--niebla-tenue);
  margin-bottom: var(--sp-md);
}

.selector-pases__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--borde-cristal);
}

/* ---- Modal de confirmación de reserva (paso 3) ---- */

.modal-reserva {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: grid;
  place-items: center;
  padding: var(--sp-md);
}

.modal-reserva[hidden] {
  display: none;
}

.modal-reserva__fondo {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 18, 0.72);
  backdrop-filter: blur(6px);
}

.modal-reserva__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--sp-lg);
}

.modal-reserva__cerrar {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--niebla);
  background: var(--vidrio-fondo);
  border: 1px solid var(--borde-cristal);
  transition: color var(--transicion), border-color var(--transicion);
}

.modal-reserva__cerrar:hover {
  color: var(--cian-neon);
  border-color: var(--cian-neon);
}

.modal-reserva__titulo {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-md);
  padding-right: var(--sp-lg);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--sp-sm);
  max-width: 880px;
  margin-inline: auto;
}

.faq__item {
  border-radius: var(--radio-md);
  background-image: linear-gradient(var(--vidrio-fondo), var(--vidrio-fondo)), var(--borde-reflejo);
  overflow: hidden;
}

.faq__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
  font-weight: 700;
  font-size: var(--fs-sm);
}

.faq__icono {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--cian-neon);
  transition: transform var(--transicion);
}

.faq__pregunta[aria-expanded="true"] .faq__icono {
  transform: rotate(45deg);
}

.faq__respuesta-envoltorio {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicion-lenta);
}

.faq__pregunta[aria-expanded="true"] + .faq__respuesta-envoltorio {
  grid-template-rows: 1fr;
}

.faq__respuesta {
  overflow: hidden;
}

.faq__respuesta p {
  padding: 0 var(--sp-md) var(--sp-md);
  color: var(--niebla);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   Ubicación / mapa — carta náutica flotante
   ========================================================================== */

.mapa-estatico {
  position: relative;
  border-radius: var(--radio-lg);
  overflow: visible;
  aspect-ratio: 16 / 10;
  background-image: radial-gradient(circle at 30% 20%, rgba(39, 103, 236, 0.14), transparent 55%),
    linear-gradient(160deg, var(--superficie), var(--abismo-profundo)), var(--borde-reflejo);
  box-shadow: var(--sombra-md);
}

.mapa-estatico__lienzo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.mapa-estatico__lienzo svg {
  width: 100%;
  height: 100%;
}

.mapa-estatico__marcador {
  position: absolute;
  z-index: 3;
}

/* ---- Pin de pulso: núcleo + anillos concéntricos (ripple) ---- */

.pin-mapa {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.pin-mapa__nucleo {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--cian-neon);
  box-shadow: 0 0 14px 3px rgba(39, 103, 236, 0.85);
}

.pin-mapa__anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cian-neon);
  animation: ondas-pin 2.4s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.pin-mapa__anillo--2 {
  animation-delay: 1.2s;
}

.pin-mapa--oro .pin-mapa__nucleo {
  background: var(--oro-satinado);
  box-shadow: 0 0 14px 3px rgba(242, 89, 26, 0.85);
}

.pin-mapa--oro .pin-mapa__anillo {
  border-color: var(--oro-satinado);
}

@keyframes ondas-pin {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(3.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pin-mapa__anillo {
    animation: none;
    opacity: 0.35;
  }
}

/* ---- Popover flotante del pin: vidrio extremo, borde dorado ---- */

.popover-mapa {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(260px, 70vw);
  padding: var(--sp-sm);
  border-radius: var(--radio-md);
  background-image: linear-gradient(var(--vidrio-fondo-fuerte), var(--vidrio-fondo-fuerte)), var(--borde-reflejo-oro);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transicion-inercia), transform var(--transicion-inercia), visibility var(--transicion-inercia);
  z-index: 5;
}

.mapa-estatico__marcador:hover .popover-mapa,
.mapa-estatico__marcador:focus-within .popover-mapa {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.popover-mapa--derecha {
  left: 0;
  transform: translate(0, 8px);
}
.popover-mapa--derecha:is(.mapa-estatico__marcador:hover .popover-mapa, .mapa-estatico__marcador:focus-within .popover-mapa) {
  transform: translate(0, 0);
}

.popover-mapa--izquierda {
  left: auto;
  right: 0;
  transform: translate(0, 8px);
}
.popover-mapa--izquierda:is(.mapa-estatico__marcador:hover .popover-mapa, .mapa-estatico__marcador:focus-within .popover-mapa) {
  transform: translate(0, 0);
}

.popover-mapa__miniatura {
  width: 100%;
  height: 72px;
  margin-bottom: var(--sp-2xs);
  border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
  background: linear-gradient(120deg, var(--cian-tenue-fuerte), var(--oro-tenue), var(--cian-tenue-fuerte));
  background-size: 250% 250%;
  animation: blob-fluido 7s ease-in-out infinite;
}

@keyframes blob-fluido {
  0%,
  100% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    background-position: 0% 50%;
  }
  50% {
    border-radius: 55% 45% 40% 60% / 40% 60% 40% 60%;
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popover-mapa__miniatura {
    animation: none;
  }
}

.popover-mapa__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--oro-claro);
  margin-bottom: 0.2rem;
}

.popover-mapa__texto {
  font-size: var(--fs-xs);
  color: var(--niebla);
  margin-bottom: var(--sp-2xs);
}

.tarjeta-ubicacion {
  display: grid;
  gap: var(--sp-sm);
  padding: var(--sp-md);
}

.tarjeta-ubicacion__fila {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--niebla);
}

.tarjeta-ubicacion__fila svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--cian-neon);
  margin-top: 0.15rem;
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.cta-final {
  position: relative;
  padding: var(--sp-xl) var(--sp-lg);
  border-radius: var(--radio-lg);
  text-align: center;
  background-image: linear-gradient(135deg, rgba(39, 103, 236, 0.1), rgba(242, 89, 26, 0.08)), var(--borde-reflejo);
  overflow: hidden;
}

.cta-final h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-sm);
}

.cta-final p {
  color: var(--niebla);
  margin-bottom: var(--sp-md);
  max-width: 560px;
  margin-inline: auto;
}

.cta-final .grupo-cta {
  justify-content: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.pie {
  background: linear-gradient(180deg, var(--abismo), var(--abismo-profundo));
  border-top: 1px solid var(--borde-cristal);
  padding-block: var(--sp-xl) var(--sp-md);
}

.pie__grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  margin-bottom: var(--sp-lg);
}

@media (max-width: 900px) {
  .pie__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .pie__grid {
    grid-template-columns: 1fr;
  }
}

.pie__marca p {
  color: var(--niebla);
  font-size: var(--fs-sm);
  margin-top: var(--sp-sm);
  max-width: 320px;
}

.pie__titulo {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cian-neon);
  margin-bottom: var(--sp-sm);
}

.pie__lista {
  display: grid;
  gap: 0.65rem;
}

.pie__lista a {
  color: var(--niebla);
  font-size: var(--fs-sm);
  transition: color var(--transicion);
}

.pie__lista a:hover {
  color: var(--blanco-puro);
}

.pie__whatsapp {
  margin-top: var(--sp-sm);
}

.pie__inferior {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-md);
  border-top: 1px solid var(--borde-cristal);
  font-size: var(--fs-xs);
  color: var(--niebla-tenue);
}

.pie__inferior a {
  color: var(--niebla-tenue);
}

.pie__inferior a:hover {
  color: var(--cian-neon);
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  bottom: var(--sp-md);
  left: 50%;
  transform: translate(-50%, 140%);
  background: var(--superficie-alt);
  border: 1px solid var(--borde-cristal);
  padding: 0.85rem 1.5rem;
  border-radius: var(--radio-pill);
  font-size: var(--fs-sm);
  box-shadow: var(--sombra-lg);
  z-index: 1000;
  transition: transform var(--transicion-lenta);
}

.toast.visible {
  transform: translate(-50%, 0);
}

/* Mapa real de Google (ubicación oficial, octubre 2026) */
.mapa-estatico--real { overflow: hidden; padding: 0; }
.mapa-estatico--real iframe { display: block; width: 100%; height: 100%; min-height: 280px; border: 0; border-radius: inherit; }