/* =========================================================
   PLANTILLA "BAJO EL MAR" — cumpleaños infantil, mundo submarino.
   Hoja de estilo AUTOCONTENIDA: NO depende de base.css/temas.css.
   Comparte el mismo contrato de datos (clases/IDs/data-rol/data-modulo)
   que el motor (motor.js) ya manipula.
   Firma de animación: burbujas que suben + cáusticas de luz que tiemblan.
   Mobile-first · accesible · sin dependencias.
   ========================================================= */

:root {
  --aqua:      #2bb6c4;
  --aqua-cll:  #6fd6df;   /* aqua claro, superficie */
  --teal:      #0e5a6e;   /* teal profundo */
  --teal-d:    #073645;   /* profundidad */
  --coral:     #ff7a6b;
  --coral-d:   #e85a4a;
  --arena:     #f3e7c9;
  --nacar:     #fbf6ef;   /* nácar/superficie de tarjeta */
  --nacar-2:   #eaf7f7;   /* nácar con tinte aqua */
  --tinta:     #06303d;   /* texto oscuro */
  --texto:     #0a4250;
  --blanco:    #ffffff;
  --algae:     #2f8f7e;   /* verde alga */

  --f-display: "Pacifico", "Baloo 2", system-ui, cursive;
  --f-titulo:  "Baloo 2", system-ui, sans-serif;
  --f-texto:   "Quicksand", system-ui, -apple-system, sans-serif;

  --esp-1:4px; --esp-2:8px; --esp-3:16px; --esp-4:24px; --esp-5:40px; --esp-6:64px; --esp-7:88px;
  --radio: 22px;
  --sombra: 0 14px 34px rgba(7, 54, 69, .18);
  --sombra-sm: 0 6px 16px rgba(7, 54, 69, .16);
  --transicion: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--f-texto);
  font-size: 16px; line-height: 1.65;
  color: var(--texto);
  background-color: var(--teal);
  /* degradado de océano: superficie clara arriba → profundidad abajo (fijo) */
  background-image: linear-gradient(
    180deg,
    var(--aqua-cll)  0%,
    var(--aqua)      24%,
    var(--teal)      62%,
    var(--teal-d)    100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
iframe { border: 0; }

/* Reveal al hacer scroll */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.is-visible { opacity: 1; transform: none; }

/* =========================================================
   FIRMA — CÁUSTICAS DE LUZ (rayos de sol temblando bajo el agua)
   Capa fija sobre el fondo; dos gradientes que se desplazan en bucle.
   ========================================================= */
.causticas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: soft-light; opacity: .65;
  background:
    repeating-linear-gradient(
      62deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.14) 18px,
      rgba(255,255,255,.00) 42px,
      rgba(255,255,255,.00) 96px),
    repeating-linear-gradient(
      -48deg,
      rgba(255,255,255,.00) 0px,
      rgba(255,255,255,.10) 22px,
      rgba(255,255,255,.00) 54px,
      rgba(255,255,255,.00) 120px);
  background-size: 340px 340px, 460px 460px;
  animation: caustica-a 14s ease-in-out infinite alternate,
             caustica-b 22s ease-in-out infinite alternate;
}
@keyframes caustica-a {
  0%   { background-position: 0 0, 0 0; transform: translateY(0) scale(1); }
  100% { background-position: 120px -40px, -90px 60px; transform: translateY(-12px) scale(1.05); }
}
@keyframes caustica-b {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.18); }
  100% { filter: brightness(.96); }
}

/* =========================================================
   FIRMA — BURBUJAS AMBIENTALES que suben (fijas, sobre toda la página)
   Cada burbuja: tamaño/posición/velocidad/delay propios + leve deriva lateral.
   ========================================================= */
.burbujas {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.burbuja {
  position: absolute; bottom: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.18) 42%, rgba(255,255,255,0) 62%),
    rgba(255,255,255,.06);
  box-shadow: inset 0 0 6px rgba(255,255,255,.4);
  opacity: 0;
  animation-name: subir;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
@keyframes subir {
  0%   { transform: translateY(0) translateX(0) scale(.9);   opacity: 0; }
  8%   { opacity: .8; }
  50%  { transform: translateY(-52vh) translateX(14px) scale(1); }
  85%  { opacity: .7; }
  100% { transform: translateY(-108vh) translateX(-10px) scale(1.05); opacity: 0; }
}
/* 12 burbujas con tamaño/posición/duración/delay distintos */
.burbuja:nth-child(1)  { left: 6%;  width: 14px; height: 14px; animation-duration: 13s; animation-delay: 0s; }
.burbuja:nth-child(2)  { left: 18%; width: 8px;  height: 8px;  animation-duration: 16s; animation-delay: 3s; }
.burbuja:nth-child(3)  { left: 27%; width: 20px; height: 20px; animation-duration: 11s; animation-delay: 1.5s; }
.burbuja:nth-child(4)  { left: 38%; width: 10px; height: 10px; animation-duration: 18s; animation-delay: 6s; }
.burbuja:nth-child(5)  { left: 47%; width: 6px;  height: 6px;  animation-duration: 15s; animation-delay: 2s; }
.burbuja:nth-child(6)  { left: 55%; width: 16px; height: 16px; animation-duration: 12s; animation-delay: 4.5s; }
.burbuja:nth-child(7)  { left: 64%; width: 9px;  height: 9px;  animation-duration: 19s; animation-delay: 0.8s; }
.burbuja:nth-child(8)  { left: 72%; width: 22px; height: 22px; animation-duration: 14s; animation-delay: 5.5s; }
.burbuja:nth-child(9)  { left: 80%; width: 7px;  height: 7px;  animation-duration: 17s; animation-delay: 2.8s; }
.burbuja:nth-child(10) { left: 88%; width: 12px; height: 12px; animation-duration: 13.5s; animation-delay: 7s; }
.burbuja:nth-child(11) { left: 94%; width: 9px;  height: 9px;  animation-duration: 20s; animation-delay: 1.2s; }
.burbuja:nth-child(12) { left: 12%; width: 11px; height: 11px; animation-duration: 16.5s; animation-delay: 8.5s; }

/* =========================================================
   HERO — el fondo del mar
   ========================================================= */
.hero {
  position: relative; isolation: isolate; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: var(--esp-7) var(--esp-3) var(--esp-6);
  color: var(--blanco);
  overflow: hidden;
  /* sin foto de portada: el océano ES la portada */
  background-image: none !important;
}
/* haz de luz desde la superficie, justo tras el nombre */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -10%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 90%;
  background: radial-gradient(60% 70% at 50% 0%, rgba(255,255,255,.28), transparent 70%);
}
/* lecho de arena con leve relieve al fondo del hero */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; z-index: -1;
  background:
    radial-gradient(120% 100% at 20% 100%, var(--arena) 0 40%, transparent 60%),
    radial-gradient(120% 100% at 70% 100%, var(--arena) 0 38%, transparent 58%),
    linear-gradient(0deg, rgba(243,231,201,.55), transparent);
  opacity: .55;
}
.hero__overlay { display: none; }

.algas {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.alga {
  position: absolute; bottom: -6px; transform-origin: bottom center;
  width: 22px; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  background: linear-gradient(180deg, #57c4a8, var(--algae));
  opacity: .8;
  animation: mecer 5s ease-in-out infinite;
}
.alga--1 { left: 8%;  height: 110px; animation-delay: 0s; }
.alga--2 { left: 24%; height: 78px;  width: 16px; animation-delay: -1.4s; }
.alga--3 { right: 14%; height: 130px; animation-delay: -2.6s; }
.alga--4 { right: 30%; height: 64px;  width: 15px; animation-delay: -3.7s; }
@keyframes mecer {
  0%, 100% { transform: rotate(-7deg) scaleY(1); }
  50%      { transform: rotate(7deg) scaleY(1.04); }
}

.hero__contenido { position: relative; display: flex; flex-direction: column; align-items: center; }

/* monograma — burbuja-medallón (motor.js → data-rol="hero-sello") */
.hero__sello {
  width: 80px; height: 80px; margin-bottom: var(--esp-3);
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 64%),
    rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.7); border-radius: 50%;
  box-shadow: var(--sombra-sm), inset 0 0 14px rgba(255,255,255,.35);
  font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--blanco);
  text-shadow: 0 2px 6px rgba(7,54,69,.4);
}
.hero__sello:empty { display: none; }

.hero__intro {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(1rem, 4.6vw, 1.3rem); letter-spacing: .02em;
  color: var(--arena);
  text-shadow: 0 2px 8px rgba(7,54,69,.5);
  margin-bottom: var(--esp-2);
}
.hero__nombres {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(3.6rem, 20vw, 7rem); line-height: 1;
  color: var(--blanco);
  margin: var(--esp-2) 0 var(--esp-3);
  text-shadow:
    0 0 22px rgba(111,214,223,.55),
    0 4px 0 var(--teal),
    0 6px 14px rgba(7,54,69,.5);
}
.hero__amp { display: block; font-size: .42em; color: var(--arena); }
.hero__sub {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(1rem, 4.6vw, 1.25rem);
  color: var(--blanco); text-shadow: 0 2px 8px rgba(7,54,69,.5);
  margin-bottom: var(--esp-4);
}
/* fecha en pastilla de espuma */
.hero__fecha {
  display: inline-block; font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(.95rem, 4vw, 1.1rem); letter-spacing: .06em;
  color: var(--teal); background: var(--arena);
  border-radius: 999px; padding: .4em 1.1em;
  box-shadow: var(--sombra-sm);
}
.hero__scroll {
  margin-top: var(--esp-6);
  color: var(--blanco); text-decoration: none; font-size: 2rem; line-height: 1;
  opacity: .9;
}
.hero__flecha { display: inline-block; animation: flotar 2s ease-in-out infinite; }
@keyframes flotar { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* =========================================================
   ESTRUCTURA — tarjetas nácar (burbuja-card)
   ========================================================= */
main { position: relative; z-index: 2; padding: var(--esp-5) var(--esp-3) var(--esp-7); }
.burbuja-card {
  position: relative;
  max-width: 560px; margin: 0 auto var(--esp-5);
  background: linear-gradient(165deg, var(--nacar), var(--nacar-2));
  border: 1px solid rgba(43,182,196,.22);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-5) var(--esp-4);
  text-align: center;
  color: var(--texto);
}
.galeria.burbuja-card { padding-left: 0; padding-right: 0; overflow: hidden; }

/* DIVISOR — ola/concha dibujada con CSS (firma de sección) */
.divisor {
  position: relative; display: block; width: 64px; height: 30px;
  margin: 0 auto var(--esp-3); font-size: 0;
}
/* concha de vieira en abanico */
.divisor::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 34px; height: 26px;
  background:
    conic-gradient(from 215deg at 50% 100%,
      var(--coral) 0 18deg, var(--coral-d) 18deg 36deg,
      var(--coral) 36deg 54deg, var(--coral-d) 54deg 72deg,
      var(--coral) 72deg 90deg);
  border-radius: 50% 50% 8px 8px / 90% 90% 0 0;
  box-shadow: inset 0 -2px 0 rgba(7,54,69,.12);
}
/* dos olitas a los lados */
.divisor::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background:
    radial-gradient(circle at 14% 0, transparent 6px, var(--aqua) 6px 7px, transparent 7px) 0 0 / 16px 8px repeat-x;
  opacity: .5;
}

/* título de sección */
.seccion__titulo, .bienvenida__titulo {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.7rem, 6.6vw, 2.5rem); line-height: 1.15; letter-spacing: .01em;
  color: var(--teal);
  margin-bottom: var(--esp-4);
}
.bienvenida__titulo { color: var(--coral-d); margin-bottom: var(--esp-3); }
.bienvenida__texto {
  max-width: 480px; margin: 0 auto; font-size: 1.1rem; font-weight: 500;
  color: var(--texto);
}

/* =========================================================
   CUENTA REGRESIVA — burbujas-ficha
   ========================================================= */
.contador__lista { list-style: none; display: flex; gap: var(--esp-2); justify-content: center; flex-wrap: wrap; }
.contador__item {
  min-width: 68px; padding: var(--esp-3) var(--esp-2);
  background: linear-gradient(165deg, var(--aqua-cll), var(--aqua));
  border-radius: 18px; box-shadow: var(--sombra-sm), inset 0 2px 0 rgba(255,255,255,.4);
  color: var(--blanco);
}
.contador__num {
  display: block; font-family: var(--f-display); font-size: clamp(1.8rem, 8vw, 2.5rem);
  line-height: 1.1; color: var(--blanco);
  text-shadow: 0 2px 0 var(--teal);
}
.contador__label {
  display: block; margin-top: 2px; font-family: var(--f-titulo); font-weight: 700;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .14em; color: var(--arena);
}

/* =========================================================
   EVENTO (La fiesta) + MAPA
   ========================================================= */
.evento__hora {
  display: inline-block; font-family: var(--f-titulo); font-weight: 700;
  font-size: .92rem; letter-spacing: .06em; color: var(--blanco);
  background: var(--aqua); border-radius: 999px; padding: .25em .9em;
  box-shadow: var(--sombra-sm); margin-bottom: var(--esp-3);
}
.evento__lugar { font-family: var(--f-display); font-size: clamp(1.5rem, 6vw, 2.1rem); color: var(--coral-d); line-height: 1.15; }
.evento__direccion { font-weight: 500; color: var(--texto); margin: var(--esp-2) 0 var(--esp-4); }
.evento__mapa { border: 3px solid var(--blanco); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra-sm); }
.evento__mapa iframe { width: 100%; height: 280px; display: block; }

.evento__boton, .mesa-regalos__link {
  display: inline-block; margin-top: var(--esp-4);
  font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  color: var(--blanco); background: var(--coral); text-decoration: none;
  border-radius: 999px; padding: .55em 1.4em;
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.evento__boton:hover, .mesa-regalos__link:hover { background: var(--coral-d); transform: translateY(-2px); box-shadow: var(--sombra); }
.evento__boton:active, .mesa-regalos__link:active { transform: translateY(0); }

/* =========================================================
   ITINERARIO — el plan, con viñeta de burbuja
   ========================================================= */
.itinerario__lista { list-style: none; max-width: 440px; margin: 0 auto; text-align: left; }
.itinerario__item {
  display: grid; grid-template-columns: 18px 86px 1fr; align-items: center; gap: var(--esp-2);
  padding: var(--esp-3) 0; border-bottom: 2px dashed rgba(43,182,196,.4);
}
.itinerario__item:last-child { border-bottom: none; }
.itinerario__item::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--aqua) 70%);
  box-shadow: 0 0 0 3px rgba(43,182,196,.18);
}
.itinerario__hora { font-family: var(--f-display); font-size: 1.1rem; color: var(--coral-d); }
.itinerario__actividad { font-weight: 500; color: var(--texto); }

/* =========================================================
   DRESS CODE
   ========================================================= */
.dress-code__descripcion { max-width: 460px; margin: 0 auto var(--esp-4); font-weight: 500; }
.dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
.dress-code__color { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--blanco); box-shadow: var(--sombra-sm); display: inline-block; }

/* =========================================================
   MESA DE REGALOS
   ========================================================= */
.mesa-regalos__mensaje { max-width: 460px; margin: 0 auto var(--esp-4); font-weight: 500; }
.mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
.mesa-regalos__link { margin-top: 0; background: var(--aqua); }
.mesa-regalos__link:hover { background: var(--teal); }

/* =========================================================
   GALERÍA — carrusel
   ========================================================= */
.carrusel { position: relative; }
.carrusel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carrusel__track::-webkit-scrollbar { display: none; }
.carrusel__slide { flex: 0 0 86%; scroll-snap-align: center; padding: 0 var(--esp-2); }
.carrusel__slide img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 4px solid var(--blanco); border-radius: 16px; box-shadow: var(--sombra-sm); cursor: zoom-in; }
.carrusel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--aqua); color: var(--blanco); font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; box-shadow: var(--sombra-sm);
}
.carrusel__nav--prev { left: 10px; }
.carrusel__nav--next { right: 10px; }
.carrusel__dots { display: flex; justify-content: center; gap: 9px; margin-top: var(--esp-4); }
.carrusel__dot { width: 11px; height: 11px; border: 2px solid var(--aqua); background: transparent; border-radius: 50%; padding: 0; cursor: pointer; }
.carrusel__dot.is-active { background: var(--coral); border-color: var(--coral); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(7,54,69,.94); padding: var(--esp-3); opacity: 0; visibility: hidden; transition: opacity var(--transicion); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: 100%; max-height: 85vh; border: 4px solid var(--blanco); border-radius: 16px; }
.lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: var(--coral); border: none; border-radius: 50%; width: 44px; height: 44px; color: var(--blanco); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--aqua); border: none; border-radius: 50%; width: 44px; height: 44px; color: var(--blanco); font-size: 1.6rem; cursor: pointer; }
.lightbox__nav--prev { left: var(--esp-2); }
.lightbox__nav--next { right: var(--esp-2); }

/* =========================================================
   RSVP
   ========================================================= */
.rsvp__nota { font-weight: 500; color: var(--texto); margin-bottom: var(--esp-4); }
.rsvp__form { max-width: 420px; margin: 0 auto; text-align: left; }
.rsvp__auto { margin: calc(-1 * var(--esp-2)) 0 var(--esp-3); font-size: .82rem; font-weight: 600; color: var(--aqua); }
.campo { margin-bottom: var(--esp-3); border: none; }
.campo__label { display: block; margin-bottom: var(--esp-1); font-family: var(--f-titulo); font-weight: 700; font-size: .9rem; color: var(--teal); }
.campo__input {
  width: 100%; padding: var(--esp-2) var(--esp-3); font-family: var(--f-texto); font-size: 1rem; color: var(--texto);
  background: var(--blanco); border: 2px solid rgba(43,182,196,.4); border-radius: 14px;
  transition: border-color var(--transicion);
}
.campo__input::placeholder { color: rgba(10,66,80,.45); }
.campo__input:focus-visible { outline: 3px solid var(--coral); outline-offset: 1px; border-color: var(--aqua); }
.rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-2); }
.rsvp__radio { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; font-weight: 500; }
.rsvp__radio input { accent-color: var(--coral); width: 18px; height: 18px; }
.boton {
  display: block; width: 100%; margin-top: var(--esp-3);
  font-family: var(--f-display); font-size: 1.3rem; letter-spacing: .01em;
  color: var(--blanco); background: var(--coral);
  border: none; border-radius: 999px; padding: .5em;
  box-shadow: var(--sombra-sm); cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.boton:hover { background: var(--coral-d); transform: translateY(-2px); box-shadow: var(--sombra); }
.boton:active { transform: translateY(0); }
.boton:disabled { opacity: .6; cursor: default; }
.boton:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.rsvp__estado { margin-top: var(--esp-3); text-align: center; font-weight: 700; min-height: 1.4em; }
.rsvp__estado--ok { color: var(--teal); }
.rsvp__estado--error { color: var(--coral-d); }

/* foco visible global para links/botones de navegación */
.hero__scroll:focus-visible,
.evento__boton:focus-visible,
.mesa-regalos__link:focus-visible,
.carrusel__nav:focus-visible,
.carrusel__dot:focus-visible,
.musica:focus-visible,
.lightbox__cerrar:focus-visible,
.lightbox__nav:focus-visible {
  outline: 3px solid var(--coral); outline-offset: 2px;
}

/* =========================================================
   MÚSICA (botón flotante — burbuja)
   ========================================================= */
.musica { position: fixed; bottom: var(--esp-3); right: var(--esp-3); z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: var(--aqua); color: var(--blanco); box-shadow: var(--sombra-sm); cursor: pointer; display: grid; place-items: center; font-size: 1.4rem; }
.musica[aria-pressed="true"] .musica__icono { animation: girar 3.5s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   PIE — colofón con cola de sirena (firma)
   ========================================================= */
.pie {
  position: relative; z-index: 2;
  text-align: center; padding: var(--esp-7) var(--esp-3) calc(var(--esp-6) + 60px);
  color: var(--blanco);
}
/* cola de sirena iridescente */
.pie__cola {
  display: block; width: 70px; height: 70px; margin: 0 auto var(--esp-3);
  background: linear-gradient(150deg, var(--aqua-cll), var(--aqua) 45%, var(--coral) 110%);
  /* silueta de aleta caudal */
  clip-path: polygon(50% 0%, 62% 40%, 100% 78%, 70% 70%, 50% 100%, 30% 70%, 0% 78%, 38% 40%);
  box-shadow: 0 6px 18px rgba(7,54,69,.4);
  opacity: .92;
}
.pie__nombres { font-family: var(--f-display); font-size: 2.6rem; color: var(--blanco); text-shadow: 0 0 22px rgba(111,214,223,.5), 0 3px 0 var(--teal); }
.pie__fecha { font-family: var(--f-titulo); font-weight: 600; letter-spacing: .04em; margin: var(--esp-2) 0 var(--esp-3); color: var(--arena); }
.pie__credito { font-family: var(--f-display); font-size: 1.15rem; color: var(--arena); }

/* =========================================================
   BARRA DE PREVIEW (dev)
   ========================================================= */
.preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(6,48,61,.95); color: #fff; padding: var(--esp-2) var(--esp-3); display: flex; gap: var(--esp-4); flex-wrap: wrap; justify-content: center; font-family: system-ui, sans-serif; }
.preview__chip { background: rgba(255,255,255,.14); color: #fff; border: 1px solid transparent; padding: 4px 10px; border-radius: 999px; font-size: .8rem; cursor: pointer; }
.preview__chip.is-active { background: #fff; color: #06303d; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 768px) {
  main { padding-top: var(--esp-6); }
  .burbuja-card { max-width: 620px; padding: var(--esp-6) var(--esp-5); }
  .carrusel__slide { flex: 0 0 60%; }
  .carrusel__slide img { aspect-ratio: 16/10; }
  .evento__mapa iframe { height: 340px; }
}

/* =========================================================
   ACCESIBILIDAD — prefers-reduced-motion
   Burbujas y cáusticas QUIETAS; .fade-up visible.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade-up { opacity: 1; transform: none; }
  /* burbujas quietas pero visibles, repartidas en la columna */
  .burbuja { opacity: .5; transform: none; }
  .causticas { opacity: .4; }
}