/* ============================================================
   TIPOGRAFÍAS LOCALES  —  bajadas el 2026-08-30 a fuentes/
   ============================================================
   Antes las pedía index.html a fonts.googleapis.com con tres <link>.
   Ahora viven en el mismo hosting: cero conexiones a terceros.

   Son TRES familias en CUATRO archivos (155 KB en total). El cuarto
   archivo NO sobra: es la CURSIVA de Cormorant, y el diseño la usa de
   verdad (.frase-italica de la lluvia de sobres, y todo lo que el
   navegador incline). Sin ella el navegador la finge inclinando la
   redonda, y en una Garamond eso se ve de lejos.

   Cormorant Garamond y Montserrat son VARIABLES: un solo .woff2 cubre
   todo su rango de peso, por eso no hay un archivo por peso.
   Great Vibes tiene un único peso (400) porque la familia no tiene otro
   — no es un recorte.

   Los archivos vienen recortados al subconjunto LATINO, que es el que
   usa el español. Por eso NO se declara unicode-range: no habría nada
   que descartar.

   font-display: swap — el texto se ve desde el primer instante con la
   fuente del sistema y cambia cuando llega la buena. Es lo correcto en
   una invitación que se abre desde datos móviles.

   OJO: los nombres de familia de aquí abajo tienen que coincidir EXACTO
   con los que usa el resto de esta hoja ("Cormorant Garamond",
   "Great Vibes", "Montserrat"). Si se renombra uno, la página sale en
   Georgia y en la sans del sistema — y ahora ya NO hay un CDN detrás
   que lo tape.
   ============================================================ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fuentes/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fuentes/cormorant-italica.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Great Vibes";
  src: url("../fuentes/great-vibes.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fuentes/montserrat.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   ESTILOS DE LA INVITACIÓN
   Paleta: verde salvia + crema + dorado.
   Diseño "mobile-first" (primero móvil, luego pantallas grandes).
   El color principal llega desde datos.js -> variable --azul.
   ============================================================ */

/* ------------------------------------------------------------
   LA REGLA DEL DORADO, y no se rompe:
   LA VERSIÓN CLARA PINTA, LA HONDA LLEVA TEXTO.

   Hasta el 2026-08-30 había un solo dorado y se usaba para las dos
   cosas. Medido, el resultado era este:

     "Formal" en dorado sobre la banda azul .......... 1.78
     los números de la cuenta regresiva sobre blanco .. 2.48
     el botón de Waze (blanco sobre dorado) ........... 2.48

   El mínimo es 4.5 para texto normal y 3.0 para texto grande y
   controles. O sea que ninguno llegaba, y el peor no llegaba ni a
   la mitad. En un celular al sol esos textos desaparecen.

   Se agregaron --dorado-h y --dorado-fondo, que son EL MISMO TONO
   más hondo, y se cambiaron los valores de --texto-tenue y
   --azul-banda. El dorado claro se quedó donde solo pinta: el
   filete del marco del calendario, el borde del saludo, la barra de
   progreso y las hojitas del divisor.

   Autorizado por el usuario el 2026-08-30. Antes de eso NO se tocó,
   porque cambiar el aspecto de algo ya aprobado y entregado lo
   decide él (CLAUDE.md §1.3 punto 5).

   Si agregás un color nuevo, MEDILO contra el fondo real: acá hay
   cinco fondos distintos y el más claro no es el que uno piensa
   (CLAUDE.md §2.2).
   ------------------------------------------------------------ */
:root {
  --azul: #3f5b74;          /* azul profundo (títulos); lo fija datos.js */
  --azul-banda: #5a7690;    /* bandas azules. Era #5f7c97: el texto blanco
                               encima daba 4.36 y necesita 4.5. Ahora 4.74 */
  --azul-suave: #d2dce5;    /* banda muy clara */
  --crema: #f6efe3;          /* fondo principal */
  --crema2: #efe6d4;         /* fondo alterno */
  --dorado: #bfa15e;         /* SOLO PINTA: filetes, bordes, barra de progreso */
  --dorado-h: #705e37;       /* el que puede llevar TEXTO y bordes de controles.
                                5.49 sobre crema · 6.28 sobre blanco ·
                                4.52 sobre la banda azul clara */
  --dorado-fondo: #846f41;   /* dorado de FONDO, con letra blanca encima: 4.85.
                                Solo lo usa el botón de Waze. La letra de ese
                                botón es de 0.78rem (~12 px), o sea texto CHICO:
                                le exige 4.5, no 3.0. El primer valor calculado
                                daba exactamente 4.50 y se bajó un poco más para
                                no quedar pegado al mínimo */
  --texto: #4c463a;          /* texto normal */
  --texto-tenue: #6e6759;    /* etiquetas chicas (10-14 px). Era #8a8270, que
                                daba entre 3.08 y 3.81 según el fondo y no
                                llegaba a 4.5 en NINGUNO. Ahora 4.52 a 5.60.
                                Sus ocho usos son todos texto */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--texto);
  background: var(--crema);
  line-height: 1.75;
  font-weight: 300;
  overflow-x: hidden;
}

/* Tipografías especiales */
h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1.15; }
.script { font-family: "Great Vibes", "Cormorant Garamond", cursive; font-weight: 400; }

/* Títulos en mayúsculas espaciadas (estilo de la referencia) */
.seccion h2 {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(1.2rem, 5vw, 1.7rem);
  color: var(--azul);
  margin-bottom: 1.8rem;
  font-weight: 500;
}
.script.script, h2.script { text-transform: none; letter-spacing: normal; }

/* Aviso cuando el navegador tiene JavaScript apagado.
   Va arriba del todo y en el azul de la invitación: no es un error del
   sistema, es la invitación explicando por qué no se ve. */
.sin-js {
  position: relative;
  z-index: 5;
  background: var(--azul);
  color: var(--crema);
  padding: 1.4rem 1.2rem;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
}
.sin-js strong { font-weight: 500; letter-spacing: 0.06em; }
.sin-js p + p { margin-top: 0.5rem; }

/* Canvas de fondo */
#lluvia { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.portada, .seccion, footer { position: relative; z-index: 1; }

/* Adornos de hojas reutilizables */
.hoja, .adorno-hoja, .hoja-pie { width: 34px; height: 34px; color: var(--azul-banda); }
svg use { color: inherit; }

/* ======================= PORTADA ======================= */
.portada {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  overflow: hidden;
}
.portada-foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  filter: saturate(0.92);
}
.portada-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(246,239,227,0.55) 0%, rgba(246,239,227,0.78) 55%, var(--crema) 100%);
}
.portada-contenido { position: relative; z-index: 2; max-width: 560px; width: 100%; }

.etiqueta {
  text-transform: uppercase; letter-spacing: 0.45em;
  font-size: 0.72rem; color: var(--azul); margin-bottom: 0.5rem;
}

/* Invitación personalizada (nombre del invitado; solo si el enlace lo trae) */
/* Tarjeta crema para que se lea bien sobre la foto de la portada */
/* [hidden] es del user-agent y lo pisa CUALQUIER regla de clase con display:
   sin esta linea, el bloque del invitado se dibuja VACIO cuando el enlace no
   trae ?nombre= — un recuadro sin nada encima de los novios. El JS hace bien
   su parte (deja el hidden puesto); es el CSS el que lo destapa.
   Detectado el 2026-09-13 en el demo del catalogo. */
[hidden] { display: none !important; }

.invitado {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: 0.9rem 1.6rem 1rem;
  border: 1px solid var(--dorado);
  border-radius: 6px;
  background: rgba(246, 239, 227, 0.88);
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}
.invitado-etiqueta {
  text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.6rem; color: var(--texto-tenue);
}
.invitado-nombre {
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  color: var(--azul); line-height: 1.15; margin-top: 0.2rem;
}
.invitado-pases {
  font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--texto); margin-top: 0.35rem;
}
#nombres { font-size: clamp(3.4rem, 16vw, 6.5rem); color: var(--azul); line-height: 1; }
.fecha-portada { text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.8rem; margin-top: 1.5rem; color: var(--texto); }

/* Divisor con anillos y hojas */
.divisor { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 1.2rem 0; color: var(--dorado); }
.divisor .anillos { width: 64px; height: 40px; color: var(--dorado); }
.divisor .hoja { color: var(--azul-banda); }
.divisor .hoja.izq { transform: rotate(-110deg); }
.divisor .hoja.der { transform: rotate(110deg); }

.flecha { position: absolute; bottom: 1.4rem; font-size: 1.4rem; color: var(--azul); animation: rebote 1.8s infinite; z-index: 2; }
@keyframes rebote { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(8px); opacity: 1; } }

/* ===================== REPRODUCTOR DE MÚSICA ===================== */
.reproductor {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(191,161,94,0.4);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem auto 0;
  max-width: 360px;
}
.barra-tiempo { display: flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; color: var(--texto-tenue); }
.barra { flex: 1; height: 4px; background: rgba(0,0,0,0.12); border-radius: 4px; cursor: pointer; }
.barra-progreso { height: 100%; width: 0%; background: var(--dorado); border-radius: 4px; }
.controles { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin: 0.7rem 0 0.4rem; }
.ctrl {
  background: none; border: none; cursor: pointer; color: var(--azul);
  font-size: 1.1rem; line-height: 1; padding: 4px; transition: transform .15s ease;
}
.ctrl:hover { transform: scale(1.15); }
.ctrl-play {
  width: 52px; height: 52px; border-radius: 50%;
  /* Control: el borde y el simbolo necesitan 3.0, y el dorado claro daba 2.48. */
  border: 2px solid var(--dorado-h); color: var(--dorado-h);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.reproductor-texto {
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.62rem;
  color: var(--texto-tenue); margin-top: 0.4rem;
}

/* ===================== SECCIONES GENERALES ===================== */
.seccion { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem; text-align: center; }
.subtitulo { text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.8rem; color: var(--azul); margin: 0.4rem 0 1.5rem; }
.frase-italica { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.1rem, 3.6vw, 1.4rem); max-width: 540px; margin: 0 auto 1.5rem; color: var(--texto); }

/* Banda de color (frase) */
.banda-verde { background: var(--azul-banda); color: #fff; max-width: none; }
.banda-verde #frase {
  font-family: "Cormorant Garamond", serif; font-size: clamp(1.3rem, 4.6vw, 1.9rem);
  max-width: 620px; margin: 0 auto; line-height: 1.5;
}
.corazon-banda { width: 26px; height: 26px; color: #fff; margin-top: 1.2rem; opacity: 0.9; }
.banda-verde-suave { background: var(--azul-suave); max-width: none; }

/* ===================== GUARDA LA FECHA / CALENDARIO ===================== */
.guarda-fecha h2.script { font-size: clamp(2.6rem, 11vw, 4rem); color: var(--azul); margin-bottom: 0.2rem; }

.marco-dorado {
  position: relative;
  border: 1.5px solid var(--dorado);
  border-radius: 6px;
  padding: 2.2rem 1.6rem;
  max-width: 420px;
  margin: 1rem auto 0;
  background: rgba(255,255,255,0.35);
}
.adorno-hoja { position: absolute; width: 46px; height: 46px; color: var(--azul-banda); }
.esq-sup-izq { top: -18px; left: -10px; transform: rotate(-40deg); }
.esq-inf-der { bottom: -18px; right: -10px; transform: rotate(140deg); }

.calendario-mes { font-family: "Cormorant Garamond", serif; font-size: 1.5rem; color: var(--azul); margin-bottom: 0.8rem; }
.calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-tenue); padding-bottom: 4px; }
.cal-dia { font-family: "Cormorant Garamond", serif; font-size: 1rem; padding: 6px 0; position: relative; }
.cal-vacio { visibility: hidden; }
.cal-boda { color: var(--azul); font-weight: 600; }
.cal-boda::after {
  content: ""; position: absolute; inset: 2px; margin: auto;
  width: 30px; height: 30px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 84 C18 60 8 40 8 26 C8 12 20 6 30 6 C40 6 46 12 50 20 C54 12 60 6 70 6 C80 6 92 12 92 26 C92 40 82 60 50 84 Z' fill='none' stroke='%23bfa15e' stroke-width='5'/%3E%3C/svg%3E");
  left: -2px; right: -2px; top: -4px;
}

/* ===================== CUENTA REGRESIVA ===================== */
.cuenta-regresiva { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; }
.unidad {
  background: #fff; border: 1px solid var(--crema2); border-radius: 14px;
  padding: 0.9rem 0.6rem; min-width: 70px; box-shadow: 0 8px 20px rgba(111,125,87,0.08);
}
.unidad span { display: block; font-family: "Cormorant Garamond", serif; font-size: 2.2rem; font-weight: 600; color: var(--dorado-h); line-height: 1; }
.unidad small { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; color: var(--texto-tenue); }
.dos-puntos { font-size: 1.6rem; color: var(--dorado-h); font-family: "Cormorant Garamond", serif; }

/* ===================== TESTIGOS ===================== */
.testigos-lista { display: grid; gap: 1.6rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
.testigo-etiqueta { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.72rem; color: var(--texto-tenue); }
.testigo-nombre { font-size: 2.1rem; color: var(--azul); line-height: 1.1; }

/* ===================== FECHA CON FOTOS ===================== */
.fecha-grande { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.ff-col { position: relative; flex: 1; max-width: 130px; }
.ff-foto {
  height: 150px; border-radius: 6px; background-size: cover; background-position: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.ff-col span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: clamp(2.4rem, 11vw, 3.6rem);
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

/* ===================== ITINERARIO ===================== */
.linea-tiempo { display: grid; gap: 1.6rem; max-width: 420px; margin: 0 auto; }
.evento-tiempo { display: flex; align-items: center; gap: 1.1rem; text-align: left; }
.evento-tiempo .icono-tiempo { width: 46px; height: 46px; color: var(--azul); flex-shrink: 0; }
.evento-tiempo h3 { font-size: 1.5rem; color: var(--azul); }
.evento-tiempo p { color: var(--texto-tenue); font-size: 0.92rem; }

/* ===================== VESTIMENTA / REGALOS / ICONOS ===================== */
.icono-grande { width: 70px; height: 70px; color: var(--azul); margin: 0.5rem auto 1rem; display: block; }
/* El icono del vestido es más ancho que alto (viewBox 120x100): se le da esa proporción
   para que no quede encogido ni descentrado dentro de una caja cuadrada. */
.vestimenta .icono-grande { width: 84px; height: 70px; }
.vestimenta-tipo { font-family: "Cormorant Garamond", serif; font-size: 1.8rem; color: var(--dorado-h); letter-spacing: 0.1em; text-transform: uppercase; }
.vestimenta-evitar { margin-top: 1rem; font-size: 0.9rem; color: var(--texto); }
.lista-evitar { list-style: none; margin-top: 0.6rem; }
.lista-evitar li { font-family: "Cormorant Garamond", serif; font-size: 1.15rem; color: var(--texto); padding: 0.15rem 0; }

/* ===================== UBICACIÓN ===================== */
.tarjeta-ubicacion { max-width: 380px; }
.ubicacion-nombre { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; color: var(--azul); }
.ubicacion-detalle { color: var(--texto-tenue); font-size: 0.9rem; margin-bottom: 1.2rem; }
.botones-mapa { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

/* ===================== BOTONES ===================== */
.boton {
  display: inline-block; background: var(--azul); color: #fff; text-decoration: none;
  padding: 0.65rem 1.5rem; border-radius: 999px; letter-spacing: 0.12em;
  font-size: 0.78rem; text-transform: uppercase; transition: transform .15s ease, opacity .15s ease;
}
.boton:hover { transform: translateY(-2px); opacity: 0.92; }
.boton-claro { background: var(--dorado-fondo); }  /* letra blanca encima: 4.50 */
.boton-grande { padding: 0.95rem 2.4rem; font-size: 0.9rem; margin-top: 1rem; }

/* ===================== CIERRE ===================== */
.cierre { padding-top: 2rem; }
.arco { width: 240px; margin: 0 auto 1rem; position: relative; }
.arco-foto {
  height: 320px; border-radius: 120px 120px 8px 8px;
  background-size: cover; background-position: center;
  border: 3px solid rgba(255,255,255,0.8);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.arco-texto { position: absolute; bottom: 18px; left: 0; right: 0; color: #fff; font-size: 2.4rem; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
.te-esperamos { font-size: 2.8rem; color: var(--azul); margin: 0.5rem 0 1.5rem; }
.rsvp-texto { max-width: 460px; margin: 0 auto; font-size: 0.95rem; }

/* ===================== PIE ===================== */
footer { text-align: center; padding: 3rem 1.5rem; background: var(--crema2); }
.hoja-pie { width: 40px; height: 40px; color: var(--azul-banda); }
#pie-nombres { font-size: 2.2rem; color: var(--azul); margin-top: 0.4rem; }

/* ===================== PANTALLAS GRANDES ===================== */
@media (min-width: 720px) {
  .testigos-lista { grid-template-columns: 1fr 1fr; }
  .ff-foto { height: 200px; }
  .arco { width: 300px; }
  .arco-foto { height: 400px; }
}


/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================
   Hay gente que activa "reducir movimiento" en el sistema porque el
   movimiento le produce mareo o migraña. No es una preferencia estética:
   es accesibilidad, y una invitación que se abre en el teléfono de 100
   personas la va a encontrar activada en varias.

   Con esa preferencia puesta:
     - la lluvia de pétalos se apaga entera (además, js/animacion.js ni
       siquiera arranca el bucle, así que tampoco gasta batería);
     - el scroll suave pasa a ser instantáneo;
     - las animaciones y transiciones se vuelven inmediatas en vez de
       desaparecer: quitarlas del todo puede dejar un elemento a medio
       camino, y "casi cero" es más seguro que cero.

   TODA ANIMACIÓN NUEVA necesita su alternativa quieta acá abajo. */
@media (prefers-reduced-motion: reduce) {
  #lluvia { display: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ============================================================
   SOLO EN EL DEMO DEL CATÁLOGO
   ============================================================
   Este bloque no existe en la invitación del cliente. Está acá porque el
   demo se publica SIN las fotos de nadie, y un contenedor de foto vacío no
   se lee como "acá va tu foto": se lee como que algo se rompió.

   Los tres huecos van con el mismo azul de banda (--azul-banda, #5a7690)
   porque encima de ellos hay texto BLANCO ya escrito por el diseño —los
   números 20 · 11 · 27 y el "Nos casamos" del arco—. Ese azul da 4.74 con
   blanco: es el mismo valor que el :root documenta para las bandas. Un
   hueco claro dejaría ese texto blanco invisible.
   ============================================================ */

/* Hueco rotulado: la tarjeta del cierre */
.foto-hueco {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 16px; box-sizing: border-box;
  border-radius: 118px 118px 6px 6px;
  background: var(--azul-banda);
  border: 1.5px dashed rgba(255,255,255,0.55);
}
.foto-hueco svg {
  width: 34px; height: 34px; stroke: rgba(255,255,255,0.85);
  fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
.foto-hueco b {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff;
}
.arco-foto { position: relative; }

/* Las tres fotitos detrás de los números de la fecha */
.ff-foto {
  background-color: var(--azul-banda);
  border: 1.5px dashed rgba(255,255,255,0.45);
  box-sizing: border-box;
}

/* La foto de portada. El rótulo va ARRIBA -no al centro- para no taparle los
   nombres, y con z-index 3 para quedar por encima del velo (que es z auto) y
   del contenido (z-index 2). */
.portada-foto {
  background-color: rgba(210,220,229,0.55);   /* --azul-suave, atenuado */
  box-shadow: inset 0 0 0 1.5px rgba(112,94,55,0.35);
}
.portada-foto::after {
  content: "Aquí va su foto de portada";
  position: absolute; top: 16px; left: 0; right: 0; z-index: 3;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dorado-h);
}

/* Aviso de demo. Colores del estudio a propósito: quien lo lee tiene que ver
   que esta barra NO es parte de la invitación. Va en el HTML, no la pone el
   JS: si el script falla, el aviso tiene que seguir estando. */
.demo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: #0F172A; border-top: 1px solid #38BDF8;
  padding: 10px 14px; text-align: center;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #CBD5E1;
}
.demo b { color: #38BDF8; font-weight: 600; }

/* Que la barra no tape el final del pie */
footer { padding-bottom: 56px; }