/* ============================================================
   Maquetacion JARDIN
   Guardas florales entre secciones, fondo de color y el
   contenido dentro de tarjetas blancas.
   ============================================================ */

.layout-jardin{--c-hoja:#9db69a}

/* ---------- Guardas florales ----------
   Las reglas comunes de las cenefas (colores, mezcla, repeticion)
   viven en assets/css/invitacion.css. Aqui solo van las medidas
   propias de esta maquetacion. */
.layout-jardin .guarda.con-imagen{height:165px}
@media(max-width:900px){.layout-jardin .guarda.con-imagen{height:120px}}
@media(max-width:640px){.layout-jardin .guarda.con-imagen{height:92px}}

/* ---------- Portada ---------- */
.layout-jardin .portada-inv{min-height:96svh;padding:60px 22px 120px}
.layout-jardin .portada-inv .fecha-portada{
  order:-1;font-size:12px;letter-spacing:.22em;margin-bottom:22px;opacity:.95
}
.layout-jardin .portada-int{display:flex;flex-direction:column}
.layout-jardin .nombres{font-size:clamp(46px,13vw,78px);font-weight:300}
.layout-jardin .etiqueta-sup{
  order:1;font-size:15px;letter-spacing:.06em;text-transform:none;
  opacity:.9;margin:2px 0 18px;font-style:italic
}
.layout-jardin .portada-int .adorno{order:2;margin:0 0 16px}
.layout-jardin .frase{order:3;font-size:15px;font-style:normal;opacity:.9;max-width:420px}
.layout-jardin .flecha-abajo{bottom:14px}

/* Cenefas que enmarcan la portada, montadas sobre la foto */
.layout-jardin .guarda.en-portada{position:relative;z-index:3}
/* La de arriba entra completa en la foto; la de abajo queda a caballo
   entre la foto y la seccion siguiente, para tapar el borde. */
.layout-jardin .guarda.en-portada.abajo{margin-top:-90px}
@media(max-width:900px){.layout-jardin .guarda.en-portada.abajo{margin-top:-66px}}
@media(max-width:640px){.layout-jardin .guarda.en-portada.abajo{margin-top:-50px}}
/* En la portada las flores van directamente sobre la foto, sin franja
   de color, para que no se note donde empieza y termina la imagen.
   (Solo es posible si el PNG tiene fondo transparente.)            */
.layout-jardin .guarda.en-portada.con-alfa{
  background-image:var(--guarda-img);
  background-repeat:repeat-x;
  background-position:center center;
  background-size:auto 100%;
  background-color:transparent
}

/* La cenefa de arriba se agranda un poco y se ancla al borde inferior:
   asi el margen transparente que traen estas imagenes queda recortado
   y las flores tocan el borde superior de la pantalla, sin dejar ver
   una franja de la foto por encima. */
.layout-jardin .guarda.en-portada.arriba.con-alfa{
  background-position:center bottom;
  background-size:auto 132%
}
/* Ademas la subimos un poco: el borde superior de la cenefa no es
   recto (entre grupo y grupo de flores hay huecos) y por ahi se
   alcanzaba a ver el inicio de la foto. */
.layout-jardin .guarda.en-portada.arriba{margin-top:-24px;margin-bottom:-141px}
@media(max-width:900px){
  .layout-jardin .guarda.en-portada.arriba{margin-top:-18px;margin-bottom:-102px}
}
@media(max-width:640px){
  .layout-jardin .guarda.en-portada.arriba{margin-top:-14px;margin-bottom:-78px}
}
/* Si la imagen no tuviera transparencia, se usa una franja de color
   para que el recuadro blanco no quede a la vista */
.layout-jardin .guarda.en-portada.sin-alfa{--g-top:var(--c-fondo);--g-bot:var(--c-fondo)}
.layout-jardin .portada-inv{padding-block:calc(60px + 165px) calc(120px + 165px)}
@media(max-width:640px){
  .layout-jardin .portada-inv{padding-block:calc(40px + 92px) calc(70px + 92px)}
}

/* ---------- Bloques de fondo ----------
   Alternamos secciones sobre color y sobre blanco. */
.layout-jardin .bloque-fondo.tono-a{background:var(--c-fondo)}
.layout-jardin .bloque-fondo.tono-b{background:var(--c-tarjeta)}

.layout-jardin .seccion{padding:62px 22px;background:transparent}
.layout-jardin .seccion .int{max-width:720px}

.layout-jardin .titulo{
  color:var(--c-acento);font-weight:400;font-size:clamp(28px,6.8vw,40px);margin-bottom:10px
}
.layout-jardin .titulo::after{display:none}
.layout-jardin .titulo + .parrafo,
.layout-jardin .titulo + .nota{font-size:15.5px;opacity:.8;margin-bottom:24px}

/* ---------- Botones estilo pastilla ---------- */
.layout-jardin .btn-inv{
  background:var(--c-acento);color:#fff;border-color:var(--c-acento);
  border-radius:8px;padding:11px 26px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500
}
.layout-jardin .btn-inv:hover{background:var(--c-texto);border-color:var(--c-texto);color:#fff}
.layout-jardin .btn-inv.lleno{border-radius:8px}

/* ---------- Cuenta regresiva ---------- */
.layout-jardin .sec-cuenta .titulo{margin-bottom:18px}
.layout-jardin .cuenta{gap:6px}
.layout-jardin .cuenta .cr{
  border:0;background:transparent;box-shadow:none;min-width:70px;padding:4px
}
.layout-jardin .cuenta .cr b{font-size:38px;color:var(--c-acento);font-weight:300}
.layout-jardin .cuenta .cr small{font-size:11px;letter-spacing:.05em;text-transform:lowercase;opacity:.65}

/* ---------- Tarjetas blancas ---------- */
.layout-jardin .tarjeta-lugar{
  background:var(--c-tarjeta);border:0;border-radius:16px;
  box-shadow:0 14px 38px rgba(70,54,88,.12);padding:38px 26px
}
.layout-jardin .lugar-nombre{font-size:20px;color:var(--c-texto)}
.layout-jardin .lugar-hora{color:var(--c-texto);opacity:.6;letter-spacing:.06em;text-transform:none;font-size:14px}
.layout-jardin .lugar-dir{font-size:14px;opacity:.7}
.layout-jardin .icono-lugar{color:var(--c-acento2)}

.layout-jardin .tarjeta-inv{
  background:var(--c-tarjeta);border:0;border-radius:16px;
  box-shadow:0 12px 30px rgba(70,54,88,.10);padding:30px 24px
}
.layout-jardin .tarjeta-inv h3{color:var(--c-acento);font-size:21px}

/* Detalles como tarjetas en fila (Musica / Dress code / Notas) */
.layout-jardin .rejilla-detalles{gap:16px}
.layout-jardin .detalle{
  background:var(--c-tarjeta);border:0;border-radius:16px;padding:26px 18px;
  box-shadow:0 12px 30px rgba(70,54,88,.10)
}
.layout-jardin .etiqueta-det{color:var(--c-acento);font-size:11px}
.layout-jardin .detalle b{color:var(--c-texto);font-size:19px}

/* ---------- Padres ---------- */
.layout-jardin .bloque-padres .rol{color:var(--c-acento);text-transform:none;letter-spacing:.04em;font-size:13px}
.layout-jardin .nombres-lista{font-size:18px}

/* ---------- Itinerario ---------- */
.layout-jardin .linea-tiempo::before{background:var(--c-acento2);opacity:.6}
.layout-jardin .linea-tiempo .punto{border-color:var(--c-acento2);background:var(--c-tarjeta)}
.layout-jardin .hora-it{color:var(--c-acento);text-transform:none;letter-spacing:.04em;font-size:12.5px}
.layout-jardin .act-it{font-size:19px}

/* ---------- Vestimenta ---------- */
.layout-jardin .codigo-vest{color:var(--c-acento);font-size:26px}

/* ---------- Galeria: la del centro mas grande ---------- */
.layout-jardin .galeria-inv{grid-template-columns:repeat(3,1fr);gap:12px;align-items:center}
.layout-jardin .galeria-inv figure{border-radius:14px;aspect-ratio:3/4}
.layout-jardin .galeria-inv figure:nth-child(3n+2){
  aspect-ratio:3/4.6;box-shadow:0 14px 34px rgba(70,54,88,.18)
}
@media(max-width:640px){
  .layout-jardin .galeria-inv{grid-template-columns:repeat(2,1fr)}
  .layout-jardin .galeria-inv figure:nth-child(3n+2){aspect-ratio:3/4}
}

/* ---------- RSVP ---------- */
.layout-jardin .sec-rsvp .int{
  background:var(--c-tarjeta);border-radius:18px;padding:40px 24px;
  box-shadow:0 14px 38px rgba(70,54,88,.10)
}
.layout-jardin .campo-inv input,
.layout-jardin .campo-inv textarea{background:#fbf9fe;border-color:rgba(107,63,160,.20)}
.layout-jardin .opciones-rsvp span{background:#fbf9fe;border-color:rgba(107,63,160,.20)}
.layout-jardin .opciones-rsvp input:checked + span{background:var(--c-acento);color:#fff;border-color:var(--c-acento)}
.layout-jardin .palomita{color:#fff}
.layout-jardin .gracias{border-color:var(--c-acento2)}

/* ---------- Pie ---------- */
.layout-jardin .inv-pie{background:var(--c-fondo);border-top:0;padding-top:34px}
.layout-jardin .inv-pie p{color:var(--c-acento);font-size:30px}
.layout-jardin .inv-pie .fecha{color:var(--c-texto);opacity:.7}

/* ---------- Barra flotante ---------- */
.layout-jardin .btn-flotante{border-radius:8px;color:#fff}
.layout-jardin .btn-flotante.secundario{color:var(--c-acento);background:var(--c-tarjeta)}