/* ============================================================
   Maquetacion SIDERAL
   Cielo estrellado de fondo, luna sobre la portada, cenefas de
   estrellas entre secciones y lunas asomando por los costados.

   Imagenes opcionales en assets/img (todas con transparencia):
     sideral-luna.png            luna llena
     sideral-luna-creciente.png  luna en cuarto creciente
     sideral-cenefa.png          cenefa de estrellas
   Si alguna falta, la plantilla sigue funcionando sin ella.
   ============================================================ */

.layout-sideral{background-color:var(--c-fondo)}

/* ---------- Cielo estrellado ----------
   Tres capas de puntos generadas con degradados: no pesa nada y
   se ve nitido en cualquier pantalla. */
.layout-sideral::before,
.layout-sideral::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0
}
.layout-sideral::before{
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 78% 12%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 32% 62%,#dfe9f7,transparent),
    radial-gradient(1.8px 1.8px at 88% 74%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 55% 34%,#cfe0f5,transparent),
    radial-gradient(1.5px 1.5px at 8%  84%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 68% 92%,#e6eefb,transparent),
    radial-gradient(1.1px 1.1px at 45% 8%, #fff,transparent);
  background-size:340px 340px;
  opacity:.75
}
.layout-sideral::after{
  background-image:
    radial-gradient(2.2px 2.2px at 24% 44%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 92% 28%,#ffe9b8,transparent),
    radial-gradient(1.4px 1.4px at 60% 78%,#fff,transparent),
    radial-gradient(1.9px 1.9px at 16% 66%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 80% 54%,#dbe8fa,transparent);
  background-size:520px 520px;
  opacity:.55;
  animation:titileo 4.5s ease-in-out infinite
}
@keyframes titileo{
  0%,100%{opacity:.55}
  50%{opacity:.18}
}
@media(prefers-reduced-motion:reduce){
  .layout-sideral::after{animation:none}
}

/* El contenido siempre por encima del cielo */
.layout-sideral .portada-inv,
.layout-sideral .bloque-fondo,
.layout-sideral .guarda,
.layout-sideral .inv-pie,
.layout-sideral .barra-flotante{position:relative;z-index:1}

/* ---------- Portada ---------- */
.layout-sideral .portada-inv{
  min-height:100svh;padding:150px 22px 80px;background-color:transparent
}
.layout-sideral .portada-inv.con-foto{
  background-blend-mode:multiply;
  background-color:rgba(11,26,46,.55)
}

/* Luna sobre la portada */
.layout-sideral .portada-inv::before{
  content:"";position:absolute;top:-70px;left:50%;transform:translateX(-50%);
  width:min(360px,78vw);aspect-ratio:1;
  background:url("../../assets/img/sideral-luna.png") center/contain no-repeat;
  pointer-events:none;opacity:.95
}
@media(max-width:640px){
  .layout-sideral .portada-inv{padding-top:120px}
  .layout-sideral .portada-inv::before{top:-50px;width:min(240px,70vw)}
}

/* Nubes tenues cruzando la portada, por detras de la luna */
.layout-sideral .portada-inv::after{
  content:"";position:absolute;left:0;right:0;top:40px;height:180px;
  background:url("../../assets/img/sideral-nubes.png") center/cover no-repeat;
  opacity:.16;pointer-events:none
}
@media(max-width:640px){
  .layout-sideral .portada-inv::after{top:20px;height:120px}
}

.layout-sideral .etiqueta-sup{
  order:2;color:var(--c-acento);font-size:clamp(19px,5vw,26px);
  text-transform:none;letter-spacing:.02em;margin:0 0 18px;
  font-family:var(--f-texto);font-weight:400
}
.layout-sideral .fecha-portada{
  order:-1;font-family:var(--f-texto);font-size:15px;letter-spacing:.1em;margin-bottom:14px
}
.layout-sideral .portada-int{display:flex;flex-direction:column}
.layout-sideral .nombres{
  color:#fff;font-size:clamp(56px,16vw,104px);line-height:1;font-weight:400;
  text-shadow:0 4px 24px rgba(0,0,0,.45)
}
.layout-sideral .portada-int .adorno{order:1;margin:6px 0 10px}
.layout-sideral .frase{
  order:3;font-style:normal;font-size:clamp(16px,4.2vw,19px);
  position:relative;padding:26px 0 10px;max-width:520px
}
/* Comillas decorativas alrededor de la frase */
.layout-sideral .frase::before,
.layout-sideral .frase::after{
  content:"\201C";position:absolute;left:50%;transform:translateX(-50%);
  font-family:var(--f-texto);font-size:44px;line-height:1;color:var(--c-acento2);opacity:.75
}
.layout-sideral .frase::before{top:-4px}
.layout-sideral .frase::after{content:"\201D";bottom:-24px}

/* ---------- Cenefas de estrellas ---------- */
.layout-sideral .guarda{height:110px;background:transparent}
.layout-sideral .guarda.con-imagen{
  height:110px;
  background-image:
    var(--guarda-img),
    linear-gradient(180deg,var(--g-top) 50%,var(--g-bot) 50%);
  background-repeat:repeat-x,no-repeat;
  background-position:center center,center center;
  background-size:auto 100%,100% 100%
}
.layout-sideral .guarda.en-portada.abajo{margin-top:-55px}
@media(max-width:640px){
  .layout-sideral .guarda,
  .layout-sideral .guarda.con-imagen{height:72px}
  .layout-sideral .guarda.en-portada.abajo{margin-top:-36px}
}

/* ---------- Bloques ---------- */
.layout-sideral .bloque-fondo.tono-a{background:var(--c-fondo)}
.layout-sideral .bloque-fondo.tono-b{background:var(--c-tarjeta)}

/* Lunas asomando por los costados.
   La lateral ya viene cortada, asi que se pega al borde;
   la creciente entra un poco desde fuera. */
.layout-sideral .bloque-fondo{position:relative;overflow:hidden}
.layout-sideral .con-luna-der::after,
.layout-sideral .con-luna-izq::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  pointer-events:none;opacity:.92
}
.layout-sideral .con-luna-der::after{
  right:0;width:min(210px,30vw);aspect-ratio:220/278;
  background:url("../../assets/img/sideral-luna-lateral.png") right center/contain no-repeat
}
.layout-sideral .con-luna-izq::after{
  left:-42px;width:min(190px,28vw);aspect-ratio:196/302;
  background:url("../../assets/img/sideral-luna-creciente.png") left center/contain no-repeat
}
@media(max-width:640px){
  .layout-sideral .con-luna-der::after{width:118px;opacity:.6}
  .layout-sideral .con-luna-izq::after{left:-34px;width:104px;opacity:.6}
}

/* ---------- Secciones ---------- */
.layout-sideral .seccion{padding:58px 22px;background:transparent}
.layout-sideral .seccion .int{max-width:700px;position:relative;z-index:2}

.layout-sideral .titulo{
  color:var(--c-acento);font-size:clamp(34px,8.5vw,52px);
  font-weight:400;margin-bottom:6px;line-height:1.1
}
.layout-sideral .titulo::after{display:none}
.layout-sideral .titulo + .parrafo,
.layout-sideral .titulo + .nota{font-size:16px;opacity:.9;margin-bottom:22px}

/* ---------- Cuenta regresiva ---------- */
.layout-sideral .cuenta{gap:0;margin-top:14px}
.layout-sideral .cuenta .cr{
  border:0;background:transparent;box-shadow:none;padding:0 18px;min-width:0;
  border-right:1px solid rgba(233,239,248,.28);border-radius:0
}
.layout-sideral .cuenta .cr:last-child{border-right:0}
.layout-sideral .cuenta .cr b{
  color:#fff;font-family:var(--f-texto);font-size:clamp(34px,9vw,46px);font-weight:400
}
.layout-sideral .cuenta .cr small{
  color:var(--c-acento2);text-transform:lowercase;letter-spacing:.04em;font-size:13px;margin-top:2px
}

/* ---------- Tarjetas ---------- */
.layout-sideral .tarjeta-lugar,
.layout-sideral .tarjeta-inv,
.layout-sideral .detalle{
  background:var(--c-tarjeta);
  border:1px solid rgba(169,205,240,.22);
  border-radius:var(--radio);
  box-shadow:0 18px 44px rgba(0,0,0,.35)
}
.layout-sideral .bloque-fondo.tono-b .tarjeta-lugar,
.layout-sideral .bloque-fondo.tono-b .tarjeta-inv,
.layout-sideral .bloque-fondo.tono-b .detalle{background:var(--c-fondo)}

.layout-sideral .tarjeta-lugar{padding:42px 26px}
.layout-sideral .lugar-nombre{font-family:var(--f-texto);font-size:21px;color:#fff}
.layout-sideral .lugar-hora{color:var(--c-acento2);text-transform:none;letter-spacing:.04em;font-size:15px}
.layout-sideral .lugar-dir{font-size:15px;opacity:.85}
.layout-sideral .icono-lugar{color:var(--c-acento2)}
.layout-sideral .tarjeta-inv h3,
.layout-sideral .detalle b{color:var(--c-acento);font-family:var(--f-titulos);font-size:26px}
.layout-sideral .etiqueta-det{color:var(--c-acento2)}

/* ---------- Botones ---------- */
.layout-sideral .btn-inv{
  background:var(--c-acento2);color:#0b1a2e;border-color:var(--c-acento2);
  border-radius:var(--radio);font-family:var(--f-texto);
  text-transform:none;letter-spacing:.03em;font-size:15px;padding:12px 30px
}
.layout-sideral .btn-inv:hover{background:#fff;border-color:#fff;color:#0b1a2e}
.layout-sideral .btn-inv.lleno{background:var(--c-acento2);color:#0b1a2e}

/* ---------- Padres, itinerario ---------- */
.layout-sideral .bloque-padres .rol{color:var(--c-acento2);text-transform:none;letter-spacing:.04em;font-size:14px}
.layout-sideral .nombres-lista{font-family:var(--f-texto);font-size:19px;color:#fff}
.layout-sideral .linea-tiempo::before{background:var(--c-acento);opacity:.4}
.layout-sideral .linea-tiempo .punto{border-color:var(--c-acento);background:var(--c-fondo)}
.layout-sideral .hora-it{color:var(--c-acento2);text-transform:none;letter-spacing:.04em;font-size:13.5px}
.layout-sideral .act-it{font-family:var(--f-texto);font-size:20px;color:#fff}
.layout-sideral .codigo-vest{color:var(--c-acento);font-size:34px}

/* ---------- Galeria ---------- */
.layout-sideral .galeria-inv figure{border-radius:var(--radio);border:1px solid rgba(169,205,240,.18)}

/* ---------- Formulario ---------- */
.layout-sideral .campo-inv input,
.layout-sideral .campo-inv textarea{
  background:rgba(255,255,255,.06);border-color:rgba(169,205,240,.3);color:var(--c-texto)
}
.layout-sideral .campo-inv label,
.layout-sideral .campo-inv .label-grupo{color:var(--c-acento2);letter-spacing:.1em}
.layout-sideral .opciones-rsvp span{background:rgba(255,255,255,.06);border-color:rgba(169,205,240,.3)}
.layout-sideral .opciones-rsvp input:checked + span{background:var(--c-acento2);color:#0b1a2e;border-color:var(--c-acento2)}
.layout-sideral .gracias{background:var(--c-tarjeta);border-color:var(--c-acento)}
.layout-sideral .palomita{background:var(--c-acento);color:#0b1a2e}
.layout-sideral .clabe{background:rgba(255,255,255,.08)}

/* ---------- Pie ---------- */
.layout-sideral .inv-pie{border-top:0;padding-top:26px;background:transparent}
.layout-sideral .inv-pie p{color:var(--c-acento);font-size:40px}
.layout-sideral .inv-pie .fecha{font-family:var(--f-texto);color:var(--c-texto);opacity:.8}

/* ---------- Barra flotante ---------- */
.layout-sideral .btn-flotante{
  background:var(--c-acento2);color:#0b1a2e;border-radius:var(--radio);
  font-family:var(--f-texto);text-transform:none;letter-spacing:.04em;font-size:15px
}
.layout-sideral .btn-flotante.secundario{background:transparent;color:var(--c-acento2);border-color:var(--c-acento2)}
.layout-sideral .barra-flotante{background:rgba(11,26,46,.92)}