/* Diseños de invitación (clase p-<diseño> en el body). La Clásica es la base de invitacion.html; aquí van los otros 5.
   Los adornos SVG salen de disenos.js. Colores: --fondo, --texto, --acento (del evento). */

/* ---------- Comunes ---------- */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.portada .dentro, .portada .bajar, .portada .para { z-index: 2; }
.fecha-mod { display: none; }
.talavera, .emblema-estrella { display: block; margin: 0 auto 14px; }
.adorno-linea { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto; color: var(--acento); }
.adorno-linea i { display: block; width: 46px; height: 1px; background: currentColor; opacity: .55; }
.adorno-linea .rama.chica { width: 92px; height: auto; }
.adorno-linea .estrella.chica { width: 14px; height: 14px; }
.adorno-linea .serpentina.chica { width: 120px; height: auto; }

/* Arco (Jardín y Celeste) */
.arco { position: absolute; left: 50%; top: 50%; width: min(80vw, 360px); height: min(76svh, 640px); transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--acento) 60%, transparent); border-radius: 999px 999px 22px 22px; }
.arco::after { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--acento) 32%, transparent); border-radius: 999px 999px 16px 16px; }
.con-foto .arco, .con-foto .arco::after { border-color: rgba(255, 255, 255, .55); }

/* =================== Jardín: arco con ramas de eucalipto, cursiva elegante =================== */
.p-jardin { --letra: "Cormorant Garamond", Georgia, serif; }
.p-jardin .marco, .p-jardin .ramo { display: none; }
.p-jardin .rama { position: absolute; width: 168px; height: auto; color: var(--acento); }
.p-jardin .rama.a { left: calc(50% - min(40vw, 180px) - 40px); top: calc(50% - min(38svh, 320px) + 56px); transform: rotate(-8deg); }
.p-jardin .rama.b { right: calc(50% - min(40vw, 180px) - 40px); bottom: calc(50% - min(38svh, 320px) + 18px); transform: rotate(172deg); }
.p-jardin .con-foto .rama { color: #fff; }
.p-jardin .nombres { font: italic 400 clamp(58px, 16vw, 94px)/1 var(--letra); }
.p-jardin .nombres .y { font: italic 400 .48em/1.35 var(--letra); }
.p-jardin .antetitulo { letter-spacing: .4em; }
.p-jardin h2, .p-jardin .saludo { font: italic 400 44px/1.1 var(--letra); }
.p-jardin .gracias { font: italic 400 38px/1.1 var(--letra); }
.p-jardin .lugar, .p-jardin .confirmar-caja { border-radius: 170px 170px 22px 22px; }
.p-jardin .lugar .info, .p-jardin .confirmar-caja { padding-top: 46px; }
.p-jardin .cuenta div { border-radius: 60px 60px 14px 14px; }

/* =================== Moderna: editorial, Bodoni, líneas finas =================== */
.p-moderna { --letra: "Bodoni Moda", Didot, "Times New Roman", serif; }
.p-moderna .marco, .p-moderna .ramo, .p-moderna .fecha-corta { display: none; }
.p-moderna .dentro::before { content: ""; display: block; width: 1px; height: 64px; background: currentColor; opacity: .45; margin: 0 auto 24px; }
.p-moderna .antetitulo { font-size: 11px; letter-spacing: .62em; }
.p-moderna .nombres { font: 500 clamp(44px, 13vw, 82px)/1.02 var(--letra); text-transform: uppercase; letter-spacing: .05em; }
.p-moderna .nombres .y { font: italic 400 .6em/1.3 var(--letra); text-transform: none; letter-spacing: 0; color: var(--acento); }
.p-moderna .con-foto .nombres .y { color: #fff; }
.p-moderna .fecha-mod { display: grid; grid-template-columns: 1fr auto auto auto 1fr; gap: 16px; align-items: center; margin: 28px auto 8px; max-width: 340px;
  font: 500 11px/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.p-moderna .fecha-mod span:first-child { text-align: right; }
.p-moderna .fecha-mod span:last-child { text-align: left; }
.p-moderna .fecha-mod i { display: block; width: 1px; height: 30px; background: currentColor; opacity: .45; }
.p-moderna .fecha-mod b { font: 500 24px/1 var(--letra); letter-spacing: .04em; }
.p-moderna .ciudad { font: 500 11px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; font-style: normal; margin-top: 12px; }
.p-moderna h2 { font: italic 400 40px/1.1 var(--letra); color: var(--texto); }
.p-moderna .sub { letter-spacing: .42em; color: var(--acento); }
.p-moderna .saludo { font: 500 28px/1.15 var(--letra); text-transform: uppercase; letter-spacing: .06em; color: var(--texto); }
.p-moderna .gracias { font: italic 400 38px/1.1 var(--letra); color: var(--texto); }
.p-moderna .mensaje { font-style: normal; }
.p-moderna .lugar, .p-moderna .cuenta div, .p-moderna .regalo, .p-moderna .confirmar-caja { border-radius: 0; border-color: color-mix(in srgb, var(--texto) 18%, transparent); }
.p-moderna .boton { border-radius: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.p-moderna .cuenta b { font-family: var(--letra); }
.p-moderna .itinerario time { font-family: var(--letra); font-size: 17px; }

/* =================== Mexicana: papel picado y talavera =================== */
.p-mexicana .marco, .p-mexicana .ramo { display: none; }
.picado-svg { display: block; width: 100%; height: auto; color: var(--texto); }
.p-mexicana .picado-svg.arriba { position: absolute; top: -2px; left: 0; }
.p-mexicana .portada { padding-top: calc(120px + env(safe-area-inset-top)); }
.p-mexicana .para { top: calc(118px + env(safe-area-inset-top)); }
.p-mexicana .portada:not(.con-foto) .nombres { color: var(--acento); }
.p-mexicana .nombres .y { color: #1F4E99; }
.p-mexicana .con-foto .nombres .y { color: #fff; }
.p-mexicana h2 { color: var(--acento); }
.p-mexicana .lugar, .p-mexicana .confirmar-caja, .p-mexicana .regalo { border: 2px solid color-mix(in srgb, #1F4E99 25%, transparent); border-radius: 18px; }
.p-mexicana .cuenta div { border: 2px solid color-mix(in srgb, #1F4E99 22%, transparent); }
.p-mexicana .cuenta b { color: #1F4E99; }
.p-mexicana footer .picado-svg { max-width: 560px; margin: -10px auto 18px; }

/* =================== Celeste: cielo suave, nubes y estrellas, arco =================== */
.p-celeste { --letra: "Cormorant Garamond", Georgia, serif; }
.p-celeste .marco, .p-celeste .ramo { display: none; }
.p-celeste .portada:not(.con-foto) { background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 20%, #fff) 0%, color-mix(in srgb, var(--acento) 8%, var(--fondo)) 45%, var(--fondo) 85%); }
.p-celeste .nube { position: absolute; color: #fff; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--acento) 18%, transparent)); }
.p-celeste .nube.n1 { width: 150px; top: 9%; left: -26px; opacity: .95; }
.p-celeste .nube.n2 { width: 110px; top: 18%; right: -18px; opacity: .85; }
.p-celeste .nube.n3 { width: 180px; bottom: 7%; right: 8%; opacity: .7; }
.p-celeste .estrella { position: absolute; width: 14px; color: color-mix(in srgb, var(--acento) 70%, #fff); }
.p-celeste .estrella.s1 { top: 14%; left: 30%; } .p-celeste .estrella.s2 { top: 28%; right: 22%; width: 10px; }
.p-celeste .estrella.s3 { bottom: 24%; left: 16%; width: 11px; } .p-celeste .estrella.s4 { bottom: 15%; right: 30%; width: 8px; }
.p-celeste .con-foto .nube { opacity: .35; } .p-celeste .con-foto .estrella { color: #fff; }
.p-celeste .estrella.emblema-estrella { position: static; display: block; width: 26px; height: 26px; margin: 0 auto 14px; color: var(--acento); }
.p-celeste .adorno-linea .estrella { position: static; }
.p-celeste .con-foto .emblema-estrella { color: #fff; }
.p-celeste .nombres { font: 500 clamp(54px, 15vw, 88px)/1 var(--letra); }
.p-celeste .nombres .y { font-style: italic; font-weight: 400; }
.p-celeste h2, .p-celeste .saludo { font: 500 40px/1.1 var(--letra); }
.p-celeste .gracias { font: italic 500 36px/1.1 var(--letra); }
.p-celeste .lugar, .p-celeste .confirmar-caja, .p-celeste .regalo { border-radius: 30px; }
.p-celeste .cuenta div { border-radius: 999px; padding: 18px 4px 14px; }

/* =================== Fiesta: serpentinas, confeti fino, letra con carácter =================== */
.p-fiesta { --letra: "DM Serif Display", Georgia, serif; }
.p-fiesta .marco, .p-fiesta .ramo { display: none; }
.p-fiesta .confeti { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.p-fiesta .con-foto .confeti { opacity: .75; }
.p-fiesta .serpentina { position: absolute; width: 240px; height: auto; }
.p-fiesta .serpentina.a { top: 3%; left: -40px; transform: rotate(-12deg); }
.p-fiesta .serpentina.b { bottom: 12%; right: -46px; transform: rotate(168deg); }
.p-fiesta .nombres { font: 400 clamp(54px, 15vw, 92px)/1.02 var(--letra); }
.p-fiesta .nombres .y { font: italic 400 .52em/1.3 var(--letra); }
.p-fiesta .portada:not(.con-foto) .nombres { color: var(--acento); }
.p-fiesta h2 { font: italic 400 42px/1.1 var(--letra); }
.p-fiesta .gracias, .p-fiesta .saludo { font: italic 400 36px/1.1 var(--letra); }
.p-fiesta .lugar, .p-fiesta .confirmar-caja, .p-fiesta .cuenta div, .p-fiesta .regalo { border-radius: 22px; border-width: 2px; }
.p-fiesta .boton { font-weight: 700; }
.p-fiesta footer .serpentina { position: static; display: block; margin: 0 auto 10px; width: 200px; }

/* Con foto de portada: solo los adornos finos (los dibujos grandes se ven caseros encima de una foto). */
.p-jardin .con-foto .rama, .p-celeste .con-foto .nube, .p-fiesta .con-foto .serpentina { display: none; }