/* ============================================================
   Maquetacion VENECIA
   Baile de mascaras: azul profundo con confeti dorado, titulos
   en versales espaciadas y antifaces separando las secciones.

   Imagenes opcionales en assets/img (con transparencia):
     venecia-antifaz.png   trio de antifaces (separador, centrado)
     venecia-confeti.png   particulas doradas (textura de fondo)
   Si falta el confeti se dibujan particulas con CSS.
   ============================================================ */

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

/* ---------- Confeti dorado de fondo ---------- */
.layout-venecia::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0
}
/* Con imagen propia */
.layout-venecia.con-confeti::before{
  background-image:var(--confeti-img);
  background-repeat:repeat;
  background-size:1100px auto;
  opacity:.55
}
/* Respaldo dibujado: motas doradas de distintos tamanos */
.layout-venecia:not(.con-confeti)::before{
  background-image:
    radial-gradient(2px 2px at 6% 12%,#e2c176,transparent),
    radial-gradient(1.4px 1.4px at 14% 30%,#d9b76a,transparent),
    radial-gradient(2.4px 2.4px at 91% 18%,#e8cd8c,transparent),
    radial-gradient(1.6px 1.6px at 84% 42%,#d9b76a,transparent),
    radial-gradient(1.8px 1.8px at 4% 68%,#e2c176,transparent),
    radial-gradient(2.2px 2.2px at 96% 76%,#e8cd8c,transparent),
    radial-gradient(1.3px 1.3px at 22% 88%,#d9b76a,transparent),
    radial-gradient(1.7px 1.7px at 76% 94%,#e2c176,transparent);
  background-size:460px 460px;
  opacity:.7
}

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

/* ---------- Portada ---------- */
.layout-venecia .portada-inv{
  min-height:100svh;padding:70px 22px 90px;
  background-color:var(--c-fondo);
  background-image:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.07),transparent 60%)
}
/* Con foto: queda muy oscurecida detras, como en el modelo */
.layout-venecia .portada-inv.con-foto{
  background-color:rgba(13,26,51,.72);
  background-blend-mode:multiply
}

.layout-venecia .portada-int{display:flex;flex-direction:column;max-width:620px}

/* Filete dorado sobre el nombre */
.layout-venecia .fecha-portada{
  order:-2;font-size:14px;letter-spacing:.06em;text-transform:none;
  margin:0 0 10px;opacity:.95
}
.layout-venecia .portada-int::before{
  content:"";order:-1;display:block;width:230px;max-width:70%;height:1px;
  background:var(--c-acento);margin:0 auto 22px;opacity:.9
}
.layout-venecia .nombres{
  color:#fff;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(38px,9.6vw,64px);line-height:1.06;font-weight:400
}
.layout-venecia .etiqueta-sup{
  order:1;color:var(--c-acento);font-family:var(--f-titulos);
  font-size:clamp(19px,4.8vw,25px);letter-spacing:.22em;text-transform:uppercase;
  margin:18px 0 0
}
.layout-venecia .portada-int .adorno{display:none}
.layout-venecia .frase{
  order:2;font-family:var(--f-texto);font-style:normal;
  font-size:14.5px;line-height:1.75;opacity:.9;margin-top:26px;max-width:480px
}

/* ---------- Separador de antifaces ----------
   A diferencia de las cenefas florales, el motivo NO se repite:
   va centrado, montado sobre el cambio de tono. */
.layout-venecia .guarda{height:150px;background:linear-gradient(180deg,var(--g-top) 50%,var(--g-bot) 50%)}
.layout-venecia .guarda.con-imagen{
  height:150px;
  background-image:
    var(--guarda-img),
    linear-gradient(180deg,var(--g-top) 50%,var(--g-bot) 50%);
  background-repeat:no-repeat,no-repeat;
  background-position:center bottom,center center;
  background-size:auto 96%,100% 100%
}
.layout-venecia .guarda.en-portada.abajo{margin-top:-75px}
@media(max-width:640px){
  .layout-venecia .guarda,
  .layout-venecia .guarda.con-imagen{height:96px}
  .layout-venecia .guarda.en-portada.abajo{margin-top:-48px}
}

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

/* ---------- Secciones ---------- */
.layout-venecia .seccion{padding:56px 22px;background:transparent}
.layout-venecia .seccion .int{max-width:700px}

.layout-venecia .titulo{
  color:#fff;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(24px,5.6vw,34px);font-weight:400;margin-bottom:8px;line-height:1.25
}
.layout-venecia .titulo::after{display:none}
.layout-venecia .titulo + .parrafo,
.layout-venecia .titulo + .nota{
  color:var(--c-acento);font-family:var(--f-texto);font-size:14.5px;
  opacity:1;margin-bottom:24px
}
.layout-venecia .parrafo{font-family:var(--f-texto);font-size:15px}

/* ---------- Cuenta regresiva ---------- */
.layout-venecia .cuenta{gap:0;margin-top:10px}
.layout-venecia .cuenta .cr{
  border:0;border-right:1px solid rgba(217,183,106,.4);border-radius:0;
  background:transparent;box-shadow:none;padding:0 20px;min-width:0
}
.layout-venecia .cuenta .cr:last-child{border-right:0}
.layout-venecia .cuenta .cr b{color:var(--c-acento);font-size:clamp(32px,8vw,42px);font-weight:400}
.layout-venecia .cuenta .cr small{
  color:var(--c-texto);opacity:.75;text-transform:lowercase;letter-spacing:.04em;font-size:12.5px
}
/* Corazon dorado bajo el reloj, como en el modelo */
.layout-venecia .sec-cuenta .int::after{
  content:"\2665";display:block;color:var(--c-acento);font-size:22px;margin-top:22px
}

/* ---------- Tarjetas ---------- */
.layout-venecia .tarjeta-lugar,
.layout-venecia .tarjeta-inv,
.layout-venecia .detalle{
  background:var(--c-fondo);
  border:1px solid rgba(217,183,106,.28);
  border-radius:var(--radio);
  box-shadow:none
}
.layout-venecia .bloque-fondo.tono-a .tarjeta-lugar,
.layout-venecia .bloque-fondo.tono-a .tarjeta-inv,
.layout-venecia .bloque-fondo.tono-a .detalle{background:var(--c-tarjeta)}

.layout-venecia .tarjeta-lugar{padding:40px 26px}
.layout-venecia .tarjeta-lugar .titulo{margin-bottom:16px}
.layout-venecia .lugar-nombre{font-family:var(--f-texto);font-size:16px;color:var(--c-texto);opacity:.9}
.layout-venecia .lugar-hora{
  color:var(--c-acento);font-family:var(--f-titulos);font-size:19px;
  text-transform:uppercase;letter-spacing:.14em
}
.layout-venecia .lugar-dir{font-family:var(--f-texto);font-size:14px;opacity:.8}
.layout-venecia .lugar-nota{font-size:13px}
.layout-venecia .icono-lugar{color:var(--c-acento)}
.layout-venecia .tarjeta-inv h3{
  color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:20px
}
.layout-venecia .etiqueta-det{color:var(--c-acento);letter-spacing:.16em}
.layout-venecia .detalle b{color:#fff;font-size:19px}

/* ---------- Botones blancos ---------- */
.layout-venecia .btn-inv{
  background:var(--c-acento2);color:#0d1a33;border-color:var(--c-acento2);
  border-radius:var(--radio);font-family:var(--f-texto);
  text-transform:none;letter-spacing:.02em;font-size:14px;padding:12px 34px;font-weight:500
}
.layout-venecia .btn-inv:hover{background:var(--c-acento);border-color:var(--c-acento);color:#0d1a33}
.layout-venecia .btn-inv.lleno{background:var(--c-acento2);color:#0d1a33}

/* ---------- Padres, itinerario, vestimenta ---------- */
.layout-venecia .bloque-padres .rol{
  color:var(--c-acento);letter-spacing:.16em;font-size:11.5px
}
.layout-venecia .nombres-lista{font-family:var(--f-texto);font-size:16px}
.layout-venecia .linea-tiempo::before{background:var(--c-acento);opacity:.35}
.layout-venecia .linea-tiempo .punto{border-color:var(--c-acento);background:var(--c-fondo)}
.layout-venecia .hora-it{color:var(--c-acento);letter-spacing:.16em;font-size:11.5px}
.layout-venecia .act-it{font-family:var(--f-texto);font-size:17px;color:#fff}
.layout-venecia .codigo-vest{
  color:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:24px
}

/* ---------- Galeria: la del centro enmarcada en dorado ---------- */
.layout-venecia .galeria-inv{grid-template-columns:repeat(3,1fr);gap:14px;align-items:center}
.layout-venecia .galeria-inv figure{border-radius:2px;background:#fff;padding:10px 10px 34px}
.layout-venecia .galeria-inv figure:nth-child(3n+2){background:var(--c-acento);padding:14px 14px 44px}
.layout-venecia .galeria-inv img{border-radius:1px}
@media(max-width:640px){
  .layout-venecia .galeria-inv{grid-template-columns:repeat(2,1fr);gap:10px}
  .layout-venecia .galeria-inv figure{padding:7px 7px 22px}
  .layout-venecia .galeria-inv figure:nth-child(3n+2){padding:7px 7px 22px}
}

/* ---------- Formulario ---------- */
.layout-venecia .campo-inv input,
.layout-venecia .campo-inv textarea{
  background:rgba(255,255,255,.06);border-color:rgba(217,183,106,.32);color:var(--c-texto)
}
.layout-venecia .campo-inv label,
.layout-venecia .campo-inv .label-grupo{color:var(--c-acento);letter-spacing:.14em}
.layout-venecia .opciones-rsvp span{background:rgba(255,255,255,.06);border-color:rgba(217,183,106,.32)}
.layout-venecia .opciones-rsvp input:checked + span{
  background:var(--c-acento);color:#0d1a33;border-color:var(--c-acento)
}
.layout-venecia .gracias{background:var(--c-tarjeta);border-color:var(--c-acento)}
.layout-venecia .palomita{background:var(--c-acento);color:#0d1a33}
.layout-venecia .clabe{background:rgba(255,255,255,.08)}

/* ---------- Pie ---------- */
.layout-venecia .inv-pie{border-top:0;padding-top:30px;background:transparent}
.layout-venecia .inv-pie .adorno{display:none}
.layout-venecia .inv-pie p{
  color:#fff;text-transform:uppercase;letter-spacing:.1em;font-size:28px
}
.layout-venecia .inv-pie .fecha{color:var(--c-acento);font-family:var(--f-texto)}
.layout-venecia .inv-pie::before{
  content:"";display:block;width:180px;height:1px;background:var(--c-acento);
  margin:0 auto 22px;opacity:.9
}

/* ---------- Barra flotante ---------- */
.layout-venecia .btn-flotante{
  background:var(--c-acento2);color:#0d1a33;border-radius:var(--radio);
  font-family:var(--f-texto);text-transform:none;letter-spacing:.02em;font-size:14px
}
.layout-venecia .btn-flotante.secundario{
  background:transparent;color:var(--c-acento2);border-color:var(--c-acento2)
}
.layout-venecia .barra-flotante{background:rgba(13,26,51,.94)}