/* =========================================================
   PLANTILLA "NUBE & LUNA" — Baby shower, cielo soñador.
   Hoja de estilo AUTOCONTENIDA (NO depende de base.css/temas.css).
   Comparte el contrato de datos del motor (motor.js): mismas clases/IDs/
   data-rol/data-modulo que el resto; cambia el copy y el envoltorio visual.
   Tierno · calmo · mobile-first · accesible · sin dependencias.

   FIRMA: nubes que derivan en parallax (3 capas a distinta velocidad),
   luna creciente dormida + estrellas que titilan, globos suaves al fondo.
   El .divisor es una nubecita dibujada en CSS.
   ========================================================= */

:root {
  --cielo:     #cfe3f2;   /* azul cielo suave */
  --cielo-2:   #dceaf6;   /* cielo más claro (degradado superior) */
  --crema:     #fbf7f0;   /* superficie crema */
  --crema-2:   #f5eee2;   /* crema sombra */
  --oro:       #e3c98a;   /* oro suave */
  --oro-prof:  #cdac63;   /* oro para texto sobre crema (contraste AA) */
  --rosa:      #f4d4d8;   /* rosa bebé */
  --rosa-prof: #c98a96;   /* rosa para texto/acento legible */
  --azul-bb:   #cde3f0;   /* azul bebé (acento alterno) */
  --nube:      #d8dee6;   /* gris nube */
  --nube-blanca:#ffffff;  /* nube llena */
  --tinta:     #4a5568;   /* gris azulado para texto principal (AA sobre crema/cielo) */
  --tinta-2:   #6b7689;   /* gris secundario */
  --luna:      #f3e7c4;   /* amarillo lunar muy suave */

  --f-nombre: "Pacifico", "Segoe Script", cursive;          /* manuscrita tierna */
  --f-titulo: "Fraunces", Georgia, serif;                   /* display redondeada suave */
  --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:96px;
  --filete: rgba(74,85,104,.14);
  --filete-fuerte: rgba(74,85,104,.28);
  --panel: rgba(255,255,255,.62);
  --radio: 22px;
  --radio-sm: 14px;
  --ls: .14em;
  --sombra: 0 14px 34px -18px rgba(74,85,104,.45);
  --transicion: .4s 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.75;
  color: var(--tinta);
  background-color: var(--cielo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Cielo soñador fijo: degradado + estrellas que titilan + luna dormida.
   z-index -3 → cielo base ; las nubes derivantes viven en body::after (-2). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    /* estrellitas titilantes (la animación va en .cielo-estrellas) */
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 72% 14%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.6px 1.6px at 40% 30%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 86% 26%, var(--luna), transparent),
    radial-gradient(1.3px 1.3px at 60% 8%, rgba(255,255,255,.8), transparent),
    /* degradado del cielo (más claro arriba) */
    linear-gradient(180deg, var(--cielo-2) 0%, var(--cielo) 46%, #c2d9ec 100%);
  background-repeat: no-repeat;
}

/* Capa de nubes derivantes (parallax lento) — FIRMA de la plantilla.
   Tres tonos de nube a distintas velocidades, en bucle largo. */
body::after {
  content: ""; position: fixed; inset: -10% -40%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60px 30px at 12% 30%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(90px 42px at 30% 22%, rgba(255,255,255,.7), transparent 72%),
    radial-gradient(70px 34px at 68% 36%, rgba(255,255,255,.78), transparent 70%),
    radial-gradient(110px 50px at 88% 18%, rgba(255,255,255,.6), transparent 72%),
    radial-gradient(80px 38px at 50% 60%, rgba(216,222,230,.5), transparent 72%);
  background-repeat: no-repeat;
  animation: derivar 80s linear infinite;
  will-change: transform;
}

@keyframes derivar { from { transform: translateX(0); } to { transform: translateX(14%); } }
@keyframes titilar { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes flotar  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes deriva-lenta { from { transform: translateX(-8%); } to { transform: translateX(10%); } }
@keyframes deriva-media { from { transform: translateX(-14%); } to { transform: translateX(16%); } }

img { max-width: 100%; display: block; }
iframe { border: 0; }

.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.fade-up.is-visible { opacity: 1; transform: none; }

/* =========================================================
   HERO — cielo soñador con luna dormida y nubes
   ========================================================= */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--esp-7) var(--esp-4);
  /* el cielo (body) ES la portada: ignora cualquier foto de hero */
  background-image: none !important;
  overflow: hidden;
}
.hero__overlay { display: none; }

/* Luna creciente dormida (arriba a la derecha) */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  top: 12%; right: 16%;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--luna);
  box-shadow: -16px 0 0 0 var(--cielo-2), 0 0 38px rgba(243,231,196,.7);
  animation: flotar 7s ease-in-out infinite;
}
/* Nubes derivantes adicionales tras el nombre (2 capas extra de parallax) */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70px 32px at 20% 72%, rgba(255,255,255,.9), transparent 72%),
    radial-gradient(54px 26px at 24% 70%, rgba(255,255,255,.9), transparent 72%),
    radial-gradient(96px 40px at 80% 80%, rgba(255,255,255,.8), transparent 72%),
    radial-gradient(60px 30px at 74% 78%, rgba(255,255,255,.8), transparent 72%);
  background-repeat: no-repeat;
  animation: deriva-lenta 64s ease-in-out infinite alternate;
}

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

/* monograma tierno (motor.js → data-rol="hero-sello") */
.hero__sello {
  width: 70px; height: 70px; margin-bottom: var(--esp-4);
  display: grid; place-items: center;
  background: var(--nube-blanca); color: var(--rosa-prof);
  border-radius: 50%;
  font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 600;
  box-shadow: var(--sombra), inset 0 0 0 4px rgba(244,212,216,.5);
}
.hero__sello:empty { display: none; }

.hero__intro {
  font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls);
  font-size: .82rem; font-weight: 600; color: var(--rosa-prof);
  margin-bottom: var(--esp-3);
}
.hero__nombres {
  font-family: var(--f-nombre); font-weight: 400;
  font-size: clamp(3.4rem, 19vw, 6.5rem); line-height: 1.04;
  color: var(--tinta);
  text-shadow: 0 2px 0 rgba(255,255,255,.8);
}
.hero__amp { display: block; font-size: .4em; }
.hero__sub {
  font-family: var(--f-titulo); font-weight: 500; font-style: italic;
  font-size: clamp(1rem, 4.4vw, 1.2rem); color: var(--tinta-2);
  margin-top: var(--esp-2);
}
.hero__fecha {
  display: inline-flex; align-items: center; gap: var(--esp-3);
  margin-top: var(--esp-4);
  font-family: var(--f-texto); text-transform: uppercase; letter-spacing: var(--ls);
  font-size: clamp(.78rem, 3.4vw, .96rem); font-weight: 600; color: var(--tinta);
}
.hero__fecha::before, .hero__fecha::after {
  content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--oro);
}
.hero__scroll {
  margin-top: var(--esp-6); color: var(--rosa-prof); text-decoration: none;
  font-size: 1.6rem; line-height: 1; border-radius: 50%;
}
.hero__flecha { display: inline-block; animation: flotar 2.4s ease-in-out infinite; }

/* =========================================================
   ESTRUCTURA — secciones (tarjetas crema sobre el cielo)
   ========================================================= */
main { padding: var(--esp-5) var(--esp-3) var(--esp-7); }

.bienvenida, .contador, .evento, .itinerario, .dress-code,
.mesa-regalos, .rsvp {
  max-width: 560px; margin: 0 auto var(--esp-5);
  text-align: center;
  background: var(--crema);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: var(--esp-6) var(--esp-4);
  position: relative;
}

/* Divisor: una nubecita dibujada (3 bultos + base) */
.divisor {
  position: relative; display: block; width: 64px; height: 30px;
  margin: 0 auto var(--esp-3); font-size: 0;
}
.divisor::before {
  content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 56px; height: 16px; border-radius: 10px; background: var(--nube-blanca);
  box-shadow: 0 6px 14px -8px rgba(74,85,104,.5);
}
.divisor::after {
  content: ""; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: 40px; height: 26px; pointer-events: none;
  background:
    radial-gradient(circle at 30% 70%, var(--nube-blanca) 42%, transparent 44%),
    radial-gradient(circle at 50% 38%, var(--nube-blanca) 50%, transparent 52%),
    radial-gradient(circle at 72% 66%, var(--nube-blanca) 40%, transparent 42%);
}

/* Títulos de sección */
.seccion__titulo, .bienvenida__titulo {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(1.6rem, 6vw, 2.3rem); line-height: 1.15;
  color: var(--tinta); letter-spacing: .005em;
  margin-bottom: var(--esp-4);
}
.bienvenida__titulo { color: var(--rosa-prof); }
.bienvenida__texto {
  max-width: 460px; margin: 0 auto; color: var(--tinta-2);
  font-size: 1.06rem; font-style: italic; font-family: var(--f-titulo); font-weight: 500;
}

/* =========================================================
   CUENTA REGRESIVA — pastillas de nube
   ========================================================= */
.contador__lista { list-style: none; display: flex; gap: var(--esp-2); justify-content: center; flex-wrap: wrap; }
.contador__item {
  min-width: 70px; padding: var(--esp-3) var(--esp-2);
  background: var(--nube-blanca); border: 1px solid var(--filete);
  border-radius: var(--radio-sm); box-shadow: 0 8px 18px -14px rgba(74,85,104,.5);
}
.contador__num {
  display: block; font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(1.8rem, 8vw, 2.5rem); line-height: 1; color: var(--rosa-prof);
}
.contador__label {
  display: block; margin-top: var(--esp-2);
  font-size: .6rem; text-transform: uppercase; letter-spacing: .16em; color: var(--tinta-2);
  font-weight: 600;
}

/* =========================================================
   EVENTO (la reunión) + MAPA
   ========================================================= */
.evento__hora {
  display: inline-block; font-family: var(--f-texto); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; color: var(--rosa-prof);
  margin-bottom: var(--esp-2);
}
.evento__lugar { font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.4rem,5vw,1.9rem); color: var(--tinta); line-height: 1.15; }
.evento__direccion { color: var(--tinta-2); margin: var(--esp-2) 0 var(--esp-4); }
.evento__mapa { border: 1px solid var(--filete); border-radius: var(--radio-sm); overflow: hidden; }
.evento__mapa iframe { width: 100%; height: 280px; display: block; }

.evento__boton, .mesa-regalos__link {
  display: inline-block; margin-top: var(--esp-4);
  padding: var(--esp-2) var(--esp-5); border: none;
  border-radius: 999px; color: var(--tinta); text-decoration: none;
  background: var(--oro);
  font-family: var(--f-texto); font-weight: 700; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .14em;
  box-shadow: 0 10px 22px -12px rgba(227,201,138,.95);
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.evento__boton:hover, .mesa-regalos__link:hover {
  background: var(--oro-prof); transform: translateY(-2px);
  box-shadow: 0 14px 26px -12px rgba(205,172,99,.95);
}
.evento__boton:active, .mesa-regalos__link:active { transform: translateY(0); }

/* =========================================================
   ITINERARIO — el plan del día
   ========================================================= */
.itinerario__lista { list-style: none; max-width: 420px; margin: 0 auto; text-align: left; }
.itinerario__item {
  display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: var(--esp-3);
  padding: var(--esp-3) 0; border-bottom: 1px dashed var(--filete-fuerte);
}
.itinerario__item:last-child { border-bottom: none; }
.itinerario__hora { font-family: var(--f-titulo); font-weight: 600; font-size: 1.05rem; color: var(--rosa-prof); }
.itinerario__actividad { color: var(--tinta); }

/* =========================================================
   DRESS CODE
   ========================================================= */
.dress-code__descripcion { max-width: 440px; margin: 0 auto var(--esp-4); color: var(--tinta-2); }
.dress-code__colores { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
.dress-code__color { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--nube-blanca); box-shadow: 0 6px 14px -8px rgba(74,85,104,.6); }

/* =========================================================
   MESA / PAÑALERA DE REGALOS
   ========================================================= */
.mesa-regalos__mensaje { max-width: 440px; margin: 0 auto var(--esp-4); color: var(--tinta-2); }
.mesa-regalos__lista { display: flex; flex-wrap: wrap; gap: var(--esp-3); justify-content: center; }
.mesa-regalos__link { margin-top: 0; background: var(--rosa); color: var(--tinta); box-shadow: 0 10px 22px -12px rgba(244,212,216,.95); }
.mesa-regalos__link:hover { background: var(--rosa-prof); color: var(--crema); box-shadow: 0 14px 26px -12px rgba(201,138,150,.9); }

/* =========================================================
   GALERÍA — carrusel a sangre
   ========================================================= */
.galeria { padding: var(--esp-3) 0 var(--esp-5); max-width: none; margin: 0 0 var(--esp-5); }
.carrusel { position: relative; max-width: 900px; margin: 0 auto; }
.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 84%; 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(--nube-blanca); border-radius: var(--radio-sm); box-shadow: var(--sombra); 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(--nube-blanca); color: var(--rosa-prof); font-size: 1.4rem; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--sombra);
}
.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: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--rosa-prof); background: transparent; padding: 0; cursor: pointer; }
.carrusel__dot.is-active { background: var(--rosa-prof); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(74,85,104,.82); 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: 5px solid var(--nube-blanca); border-radius: var(--radio-sm); }
.lightbox__cerrar { position: absolute; top: var(--esp-3); right: var(--esp-3); background: var(--nube-blanca); border: none; border-radius: 50%; width: 46px; height: 46px; color: var(--rosa-prof); font-size: 1.8rem; cursor: pointer; line-height: 1; box-shadow: var(--sombra); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--nube-blanca); border: none; border-radius: 50%; width: 46px; height: 46px; color: var(--rosa-prof); font-size: 1.7rem; cursor: pointer; box-shadow: var(--sombra); }
.lightbox__nav--prev { left: var(--esp-2); } .lightbox__nav--next { right: var(--esp-2); }

/* =========================================================
   RSVP
   ========================================================= */
.rsvp__nota { color: var(--tinta-2); margin-bottom: var(--esp-4); font-style: italic; font-family: var(--f-titulo); font-weight: 500; }
.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-style: italic; color: var(--rosa-prof); }
.campo { margin-bottom: var(--esp-4); border: none; }
.campo__label { display: block; margin-bottom: var(--esp-2); font-size: .72rem; font-weight: 700; color: var(--rosa-prof); text-transform: uppercase; letter-spacing: .12em; }
.campo__input {
  width: 100%; padding: var(--esp-3); font-family: var(--f-texto); font-size: 1rem; color: var(--tinta);
  background: var(--nube-blanca); border: 1px solid var(--filete-fuerte); border-radius: var(--radio-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo__input::placeholder { color: var(--tinta-2); opacity: .6; }
.campo__input:focus-visible { outline: none; border-color: var(--rosa-prof); box-shadow: 0 0 0 3px rgba(244,212,216,.6); }
.rsvp__opciones { display: flex; flex-direction: column; gap: var(--esp-2); }
.rsvp__radio { display: flex; align-items: center; gap: var(--esp-2); cursor: pointer; }
.rsvp__radio input { accent-color: var(--rosa-prof); width: 18px; height: 18px; }
.boton {
  display: block; width: 100%; margin-top: var(--esp-3);
  padding: var(--esp-3); border: none; border-radius: 999px;
  background: var(--oro); color: var(--tinta);
  font-family: var(--f-texto); font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; cursor: pointer;
  box-shadow: 0 12px 24px -12px rgba(227,201,138,.95);
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.boton:hover { background: var(--oro-prof); transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton:disabled { opacity: .55; cursor: default; transform: none; }
.boton:focus-visible { outline: 3px solid var(--rosa-prof); 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(--rosa-prof); }
.rsvp__estado--error { color: #c0556a; }

/* foco visible global para enlaces/botones del esqueleto */
a:focus-visible, button:focus-visible { outline: 3px solid var(--rosa-prof); outline-offset: 2px; }
.hero__scroll:focus-visible, .carrusel__nav:focus-visible, .musica:focus-visible { outline: 3px solid var(--rosa-prof); outline-offset: 3px; }

/* =========================================================
   MÚSICA (botón flotante = globito)
   ========================================================= */
.musica { position: fixed; bottom: var(--esp-3); right: var(--esp-3); z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--rosa); color: var(--crema); cursor: pointer; display: grid; place-items: center; font-size: 1.3rem; box-shadow: var(--sombra); }
.musica[aria-pressed="true"] .musica__icono { animation: girar 4s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* =========================================================
   PIE — colofón con nubecita
   ========================================================= */
.pie { position: relative; text-align: center; padding: var(--esp-7) var(--esp-4) calc(var(--esp-7) + 60px); }
.pie::before {
  content: ""; position: absolute; top: var(--esp-5); left: 50%; transform: translateX(-50%);
  width: 54px; height: 18px; border-radius: 12px; background: var(--nube-blanca);
  box-shadow: -16px 4px 0 -3px var(--nube-blanca), 16px 4px 0 -4px var(--nube-blanca), 0 8px 16px -8px rgba(74,85,104,.4);
}
.pie__nombres { font-family: var(--f-nombre); font-size: 2.6rem; color: var(--tinta); text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.pie__fecha { text-transform: uppercase; letter-spacing: var(--ls); font-size: .74rem; margin: var(--esp-2) 0 var(--esp-3); color: var(--tinta-2); font-weight: 600; }
.pie__credito { font-size: .66rem; text-transform: uppercase; letter-spacing: .2em; color: var(--rosa-prof); opacity: .85; font-weight: 600; }

/* =========================================================
   BARRA DE PREVIEW (dev)
   ========================================================= */
.preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(74,85,104,.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: var(--oro); color: #2e3440; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 768px) {
  main { padding-top: var(--esp-6); }
  .bienvenida, .contador, .evento, .itinerario, .dress-code, .mesa-regalos, .rsvp { max-width: 620px; padding: var(--esp-7) var(--esp-5); }
  .carrusel__slide { flex: 0 0 58%; }
  .carrusel__slide img { aspect-ratio: 16/10; }
  .evento__mapa iframe { height: 340px; }
}

/* =========================================================
   ACCESIBILIDAD — prefers-reduced-motion: TODO quieto
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade-up { opacity: 1; transform: none; }
}