/* =====================================================================
   Motor de invitaciones — estilos base
   Todo el color y la tipografía salen de las variables que define cada
   tema (motor/temas/*.css). Acá no hay colores fijos.
   ===================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--fondo-pagina);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.cerrada { overflow: hidden; }
html.incrustada { scrollbar-width: none; }
html.incrustada::-webkit-scrollbar { display: none; }

/* La tarjeta es una columna angosta, como en el celular */
.tarjeta {
  max-width: 520px;
  margin: 0 auto;
  background: var(--fondo);
  box-shadow: 0 0 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}

section { padding: 64px 28px; text-align: center; position: relative; }
.suave { background: var(--fondo-2); }
.oscura { background: var(--oscuro); color: var(--sobre-oscuro); }

.rotulo {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--acento-texto, var(--acento));
}
.oscura .rotulo { color: var(--acento-claro); }
h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: calc(46px * var(--script-escala, 1));
  line-height: 1.1;
  margin: 6px 0 22px;
  color: var(--titulos);
}
.oscura h2 { color: var(--sobre-oscuro); }
p { text-wrap: pretty; }
.chico { font-size: 17px; color: var(--tinta-suave); }
.oscura .chico { color: var(--sobre-oscuro-suave); }

.rama { display: block; width: 190px; height: 38px; margin: 0 auto; color: var(--adorno); }
.oscura .rama, #portada .rama { color: var(--acento-claro); }

.boton {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--titulos);
  background: transparent;
  border: 1px solid var(--acento);
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.boton:hover, .boton:focus-visible { background: var(--acento); color: var(--sobre-acento, #fff); }
.boton:focus-visible { outline: 2px solid var(--titulos); outline-offset: 3px; }
.oscura .boton { color: var(--sobre-oscuro); border-color: var(--acento-claro); }
.oscura .boton:hover, .oscura .boton:focus-visible { background: var(--acento-claro); color: var(--oscuro); }
.boton.lleno { background: var(--oscuro); border-color: var(--oscuro); color: var(--sobre-oscuro); }
.boton.lleno:hover, .boton.lleno:focus-visible { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento, #fff); }
.oscura .boton.lleno { background: var(--acento-claro); border-color: var(--acento-claro); color: var(--oscuro); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }

/* ---------- Portada (sobre cerrado) ---------- */
#portada {
  position: fixed; inset: 0; z-index: 50; width: var(--ancho-fijo, auto);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px; text-align: center;
  color: var(--sobre-oscuro);
  background: var(--portada);
  transition: opacity .9s ease, visibility .9s ease, transform .9s ease;
}
#portada.abierta { opacity: 0; visibility: hidden; transform: translateY(-4%); }
#portada .marco {
  border: 1px solid var(--linea-oscura);
  padding: 44px 26px 38px;
  width: min(100%, 400px);
  position: relative;
}
#portada .marco::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid var(--linea-oscura); opacity: .5;
  pointer-events: none;
}
#portada .rotulo { color: var(--acento-claro); margin-top: 18px; }
#portada .nombres { font-family: var(--script); font-size: calc(58px * var(--script-escala, 1)); line-height: 1.05; margin: 14px 0 6px; }
#portada .nombres span { display: block; font-size: .6em; color: var(--acento-claro); margin: 2px 0; }
#portada .aviso { font-size: 16px; font-style: var(--enfasis, italic); color: var(--sobre-oscuro-suave); margin: 26px 0 18px; }
#portada .boton { color: var(--sobre-oscuro); border-color: var(--acento-claro); }
#portada .boton:hover, #portada .boton:focus-visible { background: var(--acento-claro); color: var(--oscuro); }

/* ---------- Encabezado ---------- */
#inicio { padding: 84px 28px 72px; background: var(--inicio, var(--fondo)); }
#inicio .nombres { font-family: var(--script); font-size: calc(72px * var(--script-escala, 1)); line-height: 1; color: var(--titulos); margin: 22px 0 8px; }
#inicio .nombres span { display: block; font-size: .56em; color: var(--acento); margin: 6px 0; }
#inicio .apellidos { font-family: var(--sans); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 26px; }
#inicio .subtitulo { font-style: var(--enfasis, italic); font-size: 21px; color: var(--tinta-suave); margin-top: 20px; }
#inicio .fecha-grande {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--sans); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; font-size: 14px;
  margin-top: 26px;
}
#inicio .fecha-grande b {
  font-family: var(--serif); font-weight: 500; font-size: 54px; letter-spacing: 0; line-height: 1;
  padding: 0 16px; border-left: 1px solid var(--linea); border-right: 1px solid var(--linea);
  color: var(--titulos);
}
#inicio .anio { margin-top: 14px; color: var(--tinta-suave); }

/* ---------- Texto ---------- */
#frase p { font-size: var(--frase-tam, 23px); font-style: var(--enfasis, italic); max-width: 380px; margin: 0 auto 16px; }
#frase .cancion { margin-top: 30px; font-style: normal; font-size: 16px; font-family: var(--sans); font-weight: 300; letter-spacing: .04em; color: var(--sobre-oscuro-suave); }
#frase .cancion em { font-family: var(--serif); font-size: 21px; color: var(--acento-claro); }

/* ---------- Destacados (padrinos, damas, etc.) ---------- */
.grupos { display: grid; gap: 26px; max-width: 380px; margin: 0 auto; }
.grupos p { font-size: 25px; line-height: 1.3; color: var(--titulos); }
.grupos .rotulo { display: block; margin-bottom: 6px; }

/* ---------- Lugares ---------- */
.datos { display: grid; grid-template-columns: 1fr 1fr; max-width: 380px; margin: 0 auto 30px; }
.datos div { padding: 6px 10px; }
.datos div + div { border-left: 1px solid var(--linea); }
.datos strong { display: block; white-space: nowrap; font-weight: 500; font-size: min(30px, 7.2vw); color: var(--titulos); margin-top: 4px; }
.lugar { padding: 22px 0; }
.lugar + .lugar { border-top: 1px solid var(--linea); }
.lugar-nombre { font-size: 30px; font-weight: 500; color: var(--titulos); line-height: 1.2; margin-top: 4px; }
.lugar .botones { margin-top: 16px; }

/* ---------- Cuenta regresiva ---------- */
.cuenta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 400px; margin: 0 auto; }
.cuenta div { border: 1px solid var(--linea-oscura); border-radius: 4px; padding: 16px 4px 12px; }
.cuenta b { display: block; font-weight: 500; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.cuenta span { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--acento-claro); }
.cuenta-fin { font-size: 26px; font-style: var(--enfasis, italic); }

/* ---------- Itinerario ---------- */
.itinerario { list-style: none; max-width: 340px; margin: 0 auto; text-align: left; position: relative; }
.itinerario::before { content: ""; position: absolute; left: 82px; top: 10px; bottom: 10px; width: 1px; background: var(--linea); }
.itinerario li { display: grid; grid-template-columns: 66px 1fr; gap: 34px; padding: 12px 0; position: relative; }
.itinerario li::before {
  content: ""; position: absolute; left: 77px; top: 23px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--fondo); border: 1px solid var(--acento);
}
.itinerario time { font-family: var(--sans); font-size: 15px; letter-spacing: .08em; color: var(--acento-texto, var(--acento)); text-align: right; padding-top: 5px; }
.itinerario b { font-weight: 500; font-size: 23px; color: var(--titulos); display: block; line-height: 1.2; }
.itinerario small { font-size: 16px; color: var(--tinta-suave); }

/* ---------- Menú ---------- */
.menu summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sobre-oscuro); border: 1px solid var(--acento-claro); border-radius: 999px; padding: 13px 26px;
  transition: background .25s, color .25s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu summary:focus-visible, .menu[open] summary { background: var(--acento-claro); color: var(--oscuro); }
.menu .carta { margin: 30px auto 0; max-width: 340px; border-top: 1px solid var(--linea-oscura); }
.menu .paso { padding: 20px 0; border-bottom: 1px solid var(--linea-oscura); }
.menu .paso p { font-size: 21px; line-height: 1.3; margin-top: 8px; }
.nota-menu { font-style: var(--enfasis, italic); font-size: 18px; color: var(--sobre-oscuro-suave); margin-top: 26px; }

/* ---------- Fotos ---------- */
#galeria { padding-left: 0; padding-right: 0; }
.carrusel {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 28px 18px; scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel figure {
  flex: 0 0 74%; aspect-ratio: 4 / 5; scroll-snap-align: center;
  border-radius: 4px; overflow: hidden; background: var(--fondo-2);
  border: 6px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
}
.carrusel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flechas { display: flex; gap: 12px; justify-content: center; margin-top: 6px; }
.flechas button {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--acento);
  background: transparent; color: var(--titulos); font-size: 20px; cursor: pointer; font-family: var(--serif);
}
.flechas button:hover, .flechas button:focus-visible { background: var(--acento); color: var(--sobre-acento, #fff); }

/* Ilustración que ocupa el lugar de una foto (demos o fotos pendientes) */
.ilustracion {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--titulos);
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
}
.ilustracion svg { width: 38%; max-width: 110px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ilustracion.v0 { background: linear-gradient(160deg, var(--ilus-1), var(--ilus-2)); }
.ilustracion.v1 { background: linear-gradient(200deg, var(--ilus-2), var(--ilus-3)); }
.ilustracion.v2 { background: linear-gradient(130deg, var(--ilus-3), var(--ilus-1)); }
.ilustracion.v3 { background: radial-gradient(circle at 30% 20%, var(--ilus-1), var(--ilus-3)); }

/* ---------- Historia: fotos tipo polaroid ---------- */
.polaroid {
  position: relative; margin: 0; padding: 8px 8px 38px;
  background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .2); rotate: -3deg;
}
.polaroid.derecha { rotate: 2.5deg; }
.polaroid .marco { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.polaroid .marco > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.polaroid .ilustracion svg { width: 46%; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 4px; font-family: var(--script); font-size: calc(26px * var(--script-escala, 1)); line-height: 1; color: var(--titulos); }
.polaroids { display: flex; justify-content: center; margin: 26px 0 30px; }
.polaroids .polaroid { width: 50%; max-width: 210px; }
.polaroids .polaroid + .polaroid { margin-left: -10px; margin-top: 18px; }
.polaroids.una .polaroid { width: 70%; max-width: 270px; }
#historia h2 { margin-bottom: 0; }

/* ---------- Textos sueltos ---------- */
.angosto { max-width: 360px; margin-left: auto; margin-right: auto; }
.destacado { font-size: 26px; color: var(--titulos); }

/* ---------- Hospedaje ---------- */
.opciones { display: grid; gap: 14px; max-width: 380px; margin: 24px auto 0; }
.opcion { border: 1px solid var(--linea); border-radius: 8px; padding: 18px 16px; background: rgba(255, 255, 255, .5); }
.opcion b { display: block; font-weight: 500; font-size: 24px; color: var(--titulos); line-height: 1.2; }
.opcion .boton { margin-top: 12px; padding: 9px 22px; }

/* ---------- Hashtag ---------- */
.hashtag { font-family: var(--script); font-size: calc(44px * var(--script-escala, 1)); line-height: 1.15; margin: 10px 0 16px; overflow-wrap: anywhere; }

/* ---------- Preguntas ---------- */
.preguntas { max-width: 380px; margin: 0 auto; text-align: left; border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); padding: 14px 4px; }
.preguntas summary { cursor: pointer; list-style: none; font-weight: 500; font-size: 21px; color: var(--titulos); padding-right: 26px; position: relative; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 24px; color: var(--acento); }
.preguntas details[open] summary::after { content: "–"; }
.preguntas p { margin-top: 8px; font-size: 18px; color: var(--tinta-suave); }

/* ---------- Regalo ---------- */
.qr {
  width: 200px; height: 200px; margin: 26px auto 10px; padding: 12px;
  background: #fff; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.alias {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 16px; max-width: 100%;
  background: #fff; border: 1px dashed var(--acento); border-radius: 6px; padding: 10px 14px 10px 18px; overflow-wrap: anywhere;
  font-family: var(--sans); font-size: 16px; letter-spacing: .06em; color: var(--tinta);
}
.alias small { flex: 1 0 100%; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--acento-texto, var(--acento)); }

.alias button {
  font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  background: var(--oscuro); color: var(--sobre-oscuro); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
}

/* ---------- Confirmación ---------- */
.valor { margin-top: 26px; }
.valor summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-family: var(--sans); font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento-claro); border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.valor summary::-webkit-details-marker { display: none; }
.valor .monto { font-size: 44px; font-weight: 500; margin-top: 16px; line-height: 1; }

.form-rsvp { max-width: 360px; margin: 26px auto 0; text-align: left; display: grid; gap: 14px; }
.form-rsvp label { display: grid; gap: 6px; }
.form-rsvp label > span { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--acento-claro); }
.form-rsvp input, .form-rsvp select, .form-rsvp textarea {
  width: 100%; font: inherit; font-size: 18px; color: var(--sobre-oscuro);
  background: rgba(255, 255, 255, .07); border: 1px solid var(--linea-oscura); border-radius: 6px; padding: 10px 12px;
}
.form-rsvp select option { color: #222; }
.form-rsvp textarea { min-height: 76px; resize: vertical; }
.form-rsvp input:focus, .form-rsvp select:focus, .form-rsvp textarea:focus { outline: 2px solid var(--acento-claro); outline-offset: 1px; }
.form-rsvp .boton { justify-self: center; margin-top: 6px; }
.form-rsvp .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

footer { background: var(--oscuro-2); color: var(--sobre-oscuro-suave); text-align: center; padding: 46px 28px 54px; }
footer .nombres { font-family: var(--script); font-size: calc(40px * var(--script-escala, 1)); color: var(--sobre-oscuro); line-height: 1.1; }
footer p:not(.nombres) { font-family: var(--sans); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; margin-top: 8px; }

/* ---------- Botón de música ---------- */
#btn-musica {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--acento-claro); background: var(--oscuro); color: var(--sobre-oscuro);
  display: none; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
#btn-musica.visible { display: flex; }
#btn-musica svg { width: 20px; height: 20px; }
#btn-musica.pausada { opacity: .6; }
#btn-musica.pausada .ondas { display: none; }

/* ---------- Vista previa del editor: marca de agua hasta que se publique ---------- */
.marca-agua::after {
  content: "VISTA PREVIA"; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 500; font-size: 34px; letter-spacing: .3em;
  color: rgba(120, 120, 120, .16); rotate: -32deg; white-space: nowrap;
}

/* ---------- Aparición al hacer scroll ---------- */
.js .aparece { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.js .aparece.visible { opacity: 1; transform: none; }
/* Modo captura (?captura): todo visible al instante, para sacar imágenes */
.captura .aparece { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece { opacity: 1; transform: none; transition: none; }
  #portada { transition: none; }
}

@media (max-width: 380px) {
  body { font-size: 18px; }
  section { padding: 54px 20px; }
  #inicio .nombres { font-size: calc(60px * var(--script-escala, 1)); }
  #portada .nombres { font-size: calc(48px * var(--script-escala, 1)); }
  h2 { font-size: calc(40px * var(--script-escala, 1)); }
  .cuenta b { font-size: 32px; }
}
/* La fecha larga ("Miércoles 22 Septiembre") tiene que entrar siempre */
#inicio .fecha-grande { max-width: 100%; }
@media (max-width: 380px) {
  #inicio .fecha-grande { gap: 10px; font-size: 12px; letter-spacing: .1em; }
  #inicio .fecha-grande b { font-size: 44px; padding: 0 11px; }
}
@media (max-width: 340px) {
  #inicio .fecha-grande { gap: 8px; font-size: 11px; letter-spacing: .06em; }
  #inicio .fecha-grande b { font-size: 38px; padding: 0 9px; }
  h2 { font-size: calc(34px * var(--script-escala, 1)); }
  #inicio .nombres { font-size: calc(52px * var(--script-escala, 1)); }
  #portada .nombres { font-size: calc(42px * var(--script-escala, 1)); }
}

/* =====================================================================
   DISEÑOS
   El diseño de un modelo cambia la forma (portada, marcos, adornos, botones);
   los colores y las letras siguen saliendo de la paleta y la tipografía.
   "clasico" es todo lo de arriba, sin cambios.
   ===================================================================== */
.monograma { display: none; }

/* ---------- Arco: marcos y fotos con forma de arco ---------- */
[data-diseno="arco"] #portada .marco { border-radius: 999px 999px 0 0; padding: 96px 26px 40px; }
[data-diseno="arco"] #portada .marco::before { border-radius: 999px 999px 0 0; }
[data-diseno="arco"] #inicio { padding: 150px 34px 80px; }
[data-diseno="arco"] #inicio::before { content: ""; position: absolute; inset: 34px 20px 30px; border: 1px solid var(--linea); border-radius: 999px 999px 0 0; pointer-events: none; }
[data-diseno="arco"] #inicio::after { content: ""; position: absolute; inset: 42px 28px 38px; border: 1px solid var(--linea); border-radius: 999px 999px 0 0; opacity: .5; pointer-events: none; }
[data-diseno="arco"] .polaroids { gap: 26px; margin: 32px 0 34px; }
[data-diseno="arco"] .polaroid { background: none; box-shadow: none; rotate: 0deg; padding: 0 0 40px; }
[data-diseno="arco"] .polaroids .polaroid + .polaroid { margin: 0; }
[data-diseno="arco"] .polaroids .polaroid { width: 43%; }
[data-diseno="arco"] .polaroid .marco { border-radius: 999px 999px 0 0; outline: 1px solid var(--acento); outline-offset: 6px; }
[data-diseno="arco"] .carrusel figure { border-radius: 999px 999px 6px 6px; border: 0; outline: 1px solid var(--acento); outline-offset: 5px; box-shadow: none; }
[data-diseno="arco"] .carrusel { gap: 26px; padding-top: 10px; padding-bottom: 24px; }
[data-diseno="arco"] .cuenta div { border-radius: 999px 999px 4px 4px; padding-top: 26px; }
[data-diseno="arco"] .qr { border-radius: 110px 110px 6px 6px; height: 226px; padding-top: 34px; }

/* ---------- Jardín: formas orgánicas y esquinas redondeadas ---------- */
[data-diseno="jardin"] .tarjeta section { overflow: hidden; }
[data-diseno="jardin"] .tarjeta section:not(.oscura)::after {
  content: ""; position: absolute; width: 190px; height: 190px; right: -76px; top: -64px; z-index: 0;
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; background: var(--adorno); opacity: .2; pointer-events: none;
}
[data-diseno="jardin"] .tarjeta section:not(.oscura):nth-of-type(even)::after { right: auto; left: -84px; top: auto; bottom: -72px; background: var(--acento); opacity: .14; }
[data-diseno="jardin"] .tarjeta section > * { position: relative; z-index: 1; }
[data-diseno="jardin"] #inicio::before {
  content: ""; position: absolute; width: 230px; height: 230px; left: -90px; bottom: -80px;
  border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; background: var(--acento); opacity: .13; pointer-events: none;
}
[data-diseno="jardin"] .oscura { border-radius: 34px; margin: 0 12px; }
[data-diseno="jardin"] #portada .marco { border-radius: 34px; }
[data-diseno="jardin"] #portada .marco::before { border-radius: 28px; }
[data-diseno="jardin"] .polaroid { border-radius: 24px; padding: 9px 9px 40px; }
[data-diseno="jardin"] .polaroid .marco { border-radius: 17px; }
[data-diseno="jardin"] .polaroids.una { margin-bottom: 64px; }
[data-diseno="jardin"] .polaroids.una .polaroid {
  border-radius: 50%; padding: 10px; rotate: 0deg; width: 66%; max-width: 250px;
  box-shadow: 0 0 0 1px var(--adorno), 0 0 0 10px var(--fondo), 0 0 0 11px var(--adorno);
}
[data-diseno="jardin"] .polaroids.una .polaroid .marco { border-radius: 50%; aspect-ratio: 1; }
[data-diseno="jardin"] .polaroids.una .polaroid figcaption { bottom: -44px; }
[data-diseno="jardin"] .carrusel figure { border-radius: 28px; border-width: 5px; }
[data-diseno="jardin"] .cuenta { gap: 12px; }
[data-diseno="jardin"] .cuenta div { border-radius: 50%; aspect-ratio: 1; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
[data-diseno="jardin"] .cuenta b { font-size: 30px; }
[data-diseno="jardin"] .qr { border-radius: 26px; }
[data-diseno="jardin"] .alias, [data-diseno="jardin"] .opcion { border-radius: 18px; }
[data-diseno="jardin"] .form-rsvp input, [data-diseno="jardin"] .form-rsvp select, [data-diseno="jardin"] .form-rsvp textarea { border-radius: 14px; }

/* ---------- Moderno: bloques de color, formas rectas y encabezado a todo color ---------- */
[data-diseno="moderno"] #portada { overflow: hidden; }
[data-diseno="moderno"] #portada::before { content: ""; position: absolute; width: 360px; height: 360px; right: -130px; top: -130px; border-radius: 50%; background: var(--acento); }
[data-diseno="moderno"] #portada::after { content: ""; position: absolute; width: 200px; height: 200px; left: -80px; bottom: -70px; border-radius: 50%; border: 22px solid var(--acento-claro); opacity: .5; }
[data-diseno="moderno"] #portada .marco { border: 0; text-align: left; padding: 30px 6px; z-index: 1; }
[data-diseno="moderno"] #portada .marco::before { display: none; }
[data-diseno="moderno"] #portada .rama, [data-diseno="moderno"] #inicio .rama { margin-left: -64px; }
[data-diseno="moderno"] #portada .nombres span, [data-diseno="moderno"] #inicio .nombres span { display: inline; font-size: .5em; margin: 0 .12em; }
[data-diseno="moderno"] #inicio { background: var(--oscuro); color: var(--sobre-oscuro); text-align: left; padding: 96px 30px 60px; }
[data-diseno="moderno"] #inicio .rotulo { color: var(--acento-claro); }
[data-diseno="moderno"] #inicio .nombres { color: var(--sobre-oscuro); font-size: calc(84px * var(--script-escala, 1)); line-height: .98; }
[data-diseno="moderno"] #inicio .nombres span { color: var(--acento-claro); }
[data-diseno="moderno"] #inicio .apellidos, [data-diseno="moderno"] #inicio .subtitulo, [data-diseno="moderno"] #inicio .anio { color: var(--sobre-oscuro-suave); }
[data-diseno="moderno"] #inicio .rama { color: var(--acento-claro); }
[data-diseno="moderno"] #inicio .fecha-grande b { color: var(--sobre-oscuro); border-color: var(--linea-oscura); }
[data-diseno="moderno"] .boton { border-radius: 6px; }
[data-diseno="moderno"] .tarjeta section:not(#inicio) > .rotulo { display: inline-block; background: var(--acento-texto, var(--acento)); color: #fff; padding: 6px 13px; border-radius: 4px; letter-spacing: .2em; }
[data-diseno="moderno"] .tarjeta .oscura > .rotulo { background: var(--acento-claro); color: var(--oscuro); }
[data-diseno="moderno"] h2 { margin-top: 14px; }
[data-diseno="moderno"] .polaroids { gap: 26px; }
[data-diseno="moderno"] .polaroid { rotate: 0deg; padding: 0 0 40px; box-shadow: 10px 10px 0 var(--acento); }
[data-diseno="moderno"] .polaroid.derecha { rotate: 0deg; box-shadow: 10px 10px 0 var(--adorno); }
[data-diseno="moderno"] .polaroids .polaroid + .polaroid { margin-left: 0; }
[data-diseno="moderno"] .polaroids .polaroid { width: 44%; }
[data-diseno="moderno"] .carrusel figure { border-radius: 0; border: 0; box-shadow: 8px 8px 0 var(--acento); }
[data-diseno="moderno"] .carrusel { gap: 24px; padding-bottom: 26px; }
[data-diseno="moderno"] .cuenta div { background: var(--acento-claro); border: 0; border-radius: 6px; color: var(--oscuro); }
[data-diseno="moderno"] .cuenta span { color: var(--oscuro); }
[data-diseno="moderno"] .itinerario li::before { border-radius: 2px; background: var(--acento); }
[data-diseno="moderno"] .qr, [data-diseno="moderno"] .alias, [data-diseno="moderno"] .opcion { border-radius: 4px; }
[data-diseno="moderno"] .qr { box-shadow: 8px 8px 0 var(--acento); }

/* ---------- Minimal: todo claro, líneas finas y mucho aire ---------- */
[data-diseno="minimal"] .oscura {
  background: var(--fondo); color: var(--tinta);
  --sobre-oscuro: var(--tinta); --sobre-oscuro-suave: var(--tinta-suave); --acento-claro: var(--acento); --linea-oscura: var(--linea);
}
[data-diseno="minimal"] .suave { background: var(--fondo); }
[data-diseno="minimal"] .tarjeta section + section { border-top: 1px solid var(--linea); }
[data-diseno="minimal"] .oscura .boton:hover, [data-diseno="minimal"] .oscura .boton:focus-visible { color: var(--sobre-acento, #fff); }
[data-diseno="minimal"] .oscura .boton.lleno { background: var(--titulos); border-color: var(--titulos); color: var(--fondo); }
[data-diseno="minimal"] .menu summary:hover, [data-diseno="minimal"] .menu[open] summary { color: var(--sobre-acento, #fff); }
[data-diseno="minimal"] .form-rsvp input, [data-diseno="minimal"] .form-rsvp select, [data-diseno="minimal"] .form-rsvp textarea { background: transparent; border-radius: 0; border-width: 0 0 1px; padding-left: 2px; }
[data-diseno="minimal"] #portada {
  background: var(--fondo); color: var(--tinta);
  --sobre-oscuro: var(--tinta); --sobre-oscuro-suave: var(--tinta-suave); --acento-claro: var(--acento); --linea-oscura: var(--linea);
}
[data-diseno="minimal"] #portada .marco { border-color: var(--linea); }
[data-diseno="minimal"] #portada .marco::before { display: none; }
[data-diseno="minimal"] #portada .boton:hover { color: var(--sobre-acento, #fff); }
[data-diseno="minimal"] .monograma {
  display: flex; align-items: center; justify-content: center; gap: 4px; width: 84px; height: 84px; margin: 0 auto 22px;
  border: 1px solid var(--acento); border-radius: 50%; font-family: var(--serif); font-size: 26px; letter-spacing: .04em; color: var(--titulos);
}
[data-diseno="minimal"] .monograma span { font-size: .6em; color: var(--acento); }
[data-diseno="minimal"] #portada .nombres { font-size: calc(46px * var(--script-escala, 1)); }
[data-diseno="minimal"] #inicio { background: var(--fondo); padding-top: 96px; }
[data-diseno="minimal"] #inicio .nombres { font-size: calc(60px * var(--script-escala, 1)); }
[data-diseno="minimal"] .boton { border-radius: 0; }
[data-diseno="minimal"] .polaroids { gap: 14px; }
[data-diseno="minimal"] .polaroid, [data-diseno="minimal"] .polaroid.derecha { rotate: 0deg; box-shadow: none; border: 1px solid var(--linea); }
[data-diseno="minimal"] .polaroids .polaroid + .polaroid { margin: 0; }
[data-diseno="minimal"] .carrusel figure { border-radius: 0; border: 0; box-shadow: none; }
[data-diseno="minimal"] .cuenta { gap: 0; }
[data-diseno="minimal"] .cuenta div { border-radius: 0; border-width: 0 0 0 1px; padding: 6px 4px; }
[data-diseno="minimal"] .cuenta div:first-child { border-left: 0; }
[data-diseno="minimal"] .qr { border-radius: 0; box-shadow: none; border: 1px solid var(--linea); }
[data-diseno="minimal"] .alias, [data-diseno="minimal"] .opcion { border-radius: 0; }
[data-diseno="minimal"] footer { background: var(--fondo); color: var(--tinta-suave); border-top: 1px solid var(--linea); }
[data-diseno="minimal"] footer .nombres { color: var(--titulos); }
[data-diseno="minimal"] #btn-musica { background: var(--fondo); color: var(--tinta); border-color: var(--tinta); }

/* =====================================================================
   FOTO DE PORTADA (opcional, versión Premium)
   En el encabezado va como retrato; en la portada, de fondo y atenuada.
   ===================================================================== */
.retrato {
  width: 200px; aspect-ratio: 1; margin: 0 auto 30px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1px var(--acento), 0 0 0 9px var(--fondo), 0 0 0 10px var(--linea);
}
.retrato img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portada-foto { position: absolute; inset: 0; overflow: hidden; }
.portada-foto img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.portada-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--oscuro) 50%, transparent), color-mix(in srgb, var(--oscuro-2) 82%, transparent));
}
#portada .marco { z-index: 1; }
[data-diseno="arco"] .retrato { width: 190px; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; }
[data-diseno="jardin"] .retrato { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
[data-diseno="moderno"] .retrato { margin-left: 0; border-radius: 8px; box-shadow: 10px 10px 0 var(--acento); }
[data-diseno="minimal"] .retrato { width: 220px; aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; }
[data-diseno="minimal"] .portada-foto { display: none; }

/* Foto de ambiente del modelo: detrás de los nombres, solo en los diseños de encabezado oscuro */
.ambiente { display: none; position: absolute; inset: 0; overflow: hidden; }
.ambiente img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.ambiente::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--oscuro-2) 30%, transparent) 0%, color-mix(in srgb, var(--oscuro-2) 62%, transparent) 55%, var(--oscuro-2) 100%);
}
:is([data-diseno="neon"], [data-diseno="estrellas"], [data-diseno="luces"]) .ambiente { display: block; }
[data-diseno="luces"] .ambiente::after { background: linear-gradient(180deg, color-mix(in srgb, var(--oscuro-2) 45%, transparent) 0%, color-mix(in srgb, var(--oscuro) 70%, transparent) 55%, var(--oscuro) 100%); }
.portada-foto.de-ambiente img { opacity: .7; }
[data-diseno="minimal"] .portada-foto.de-ambiente { display: none; }
/* Con foto real de bola de espejos o luces, el dibujo de la bola y sus haces sobra */
.con-ambiente[data-diseno="neon"] .decor :is(.bola, .haz) { display: none; }
.con-ambiente[data-diseno="neon"] #inicio { padding-top: 150px; background: var(--oscuro-2); }
.con-ambiente[data-diseno="neon"] #portada .marco { margin-top: 0; }

/* ---------- Reproductor de YouTube o Spotify ---------- */
.reproductor { max-width: 380px; margin: 26px auto 0; border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .25); }
.reproductor.youtube { aspect-ratio: 16 / 9; }
.reproductor.spotify { height: 152px; }
.reproductor iframe { display: block; width: 100%; height: 100%; border: 0; }
.reproductor.muestra { display: flex; align-items: center; justify-content: center; padding: 10px; border: 1px dashed var(--linea-oscura); font-family: var(--sans); font-size: 13px; letter-spacing: .06em; color: var(--sobre-oscuro-suave); }

/* ---------- Mesas ---------- */
.buscar-mesa { max-width: 340px; margin: 22px auto 0; }
.buscar-mesa input { width: 100%; font: inherit; font-size: 19px; text-align: center; color: var(--tinta); background: #fff; border: 1px solid var(--acento); border-radius: 999px; padding: 12px 18px; }
.buscar-mesa input:focus { outline: 2px solid var(--acento); outline-offset: 2px; }
#mesa-resultado { margin-top: 16px; display: grid; gap: 10px; }
.mesa-hallada { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; background: rgba(255, 255, 255, .5); }
.mesa-quien { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.mesa-cual { font-size: 30px; font-weight: 500; line-height: 1.15; color: var(--titulos); }
[data-diseno="neon"] .mesa-hallada { background: rgba(255, 255, 255, .05); }
[data-diseno="neon"] .buscar-mesa input { background: rgba(255, 255, 255, .08); color: #fff; }
[data-diseno="minimal"] .buscar-mesa input, [data-diseno="minimal"] .mesa-hallada { border-radius: 0; }

/* ---------- Texto libre ---------- */
#nota .botones { margin-top: 20px; }

/* =====================================================================
   DISEÑOS DE FIESTA: confeti, neon, estrellas y luces
   Cada uno suma un dibujo (.decor) en la portada, el encabezado y el cierre.
   Los dibujos se hacen con código y toman los colores de la paleta.
   ===================================================================== */
.decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.decor svg { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 100%; max-width: 640px; height: 100%; overflow: visible; }
.decor ~ * { position: relative; z-index: 1; }
.decor .k1 { color: var(--acento); }
.decor .k2 { color: var(--adorno); }
.decor .k3 { color: var(--acento-claro); }
.decor .k4 { color: var(--decor-4, var(--titulos)); }
#portada .decor, .oscura .decor { --decor-4: var(--sobre-oscuro); }
.decor .pieza { fill: currentColor; }
.decor .trazo { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.decor .hilo { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .6; }
@keyframes titila { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.decor .tw1 { animation: titila 3.2s ease-in-out infinite; }
.decor .tw2 { animation: titila 4.6s ease-in-out -1.3s infinite; }
.decor .tw3 { animation: titila 5.8s ease-in-out -2.7s infinite; }
.captura .decor [class*="tw"] { animation: none; }
@media (prefers-reduced-motion: reduce) { .decor [class*="tw"] { animation: none; } }

/* Encabezado oscuro (estrellas y luces): los textos pasan a claro */
:is([data-diseno="estrellas"], [data-diseno="luces"]) #inicio { color: var(--sobre-oscuro); }
:is([data-diseno="estrellas"], [data-diseno="luces"]) #inicio .rotulo { color: var(--acento-claro); }
:is([data-diseno="estrellas"], [data-diseno="luces"]) #inicio .nombres { color: var(--sobre-oscuro); }
:is([data-diseno="estrellas"], [data-diseno="luces"]) #inicio .nombres span,
:is([data-diseno="estrellas"], [data-diseno="luces"]) #inicio .rama { color: var(--acento-claro); }
:is([data-diseno="estrellas"], [data-diseno="luces"]) #inicio :is(.apellidos, .subtitulo, .anio) { color: var(--sobre-oscuro-suave); }
:is([data-diseno="estrellas"], [data-diseno="luces"]) #inicio .fecha-grande b { color: var(--sobre-oscuro); border-color: var(--linea-oscura); }
:is([data-diseno="estrellas"], [data-diseno="luces"], [data-diseno="moderno"]) .retrato { box-shadow: 0 0 0 1px var(--acento-claro), 0 0 0 9px color-mix(in srgb, var(--sobre-oscuro) 10%, transparent); }
[data-diseno="moderno"] .retrato { box-shadow: 10px 10px 0 var(--acento); }

/* ---------- Confeti: banderines, papel picado y formas divertidas ---------- */
[data-diseno="confeti"] #inicio { padding-top: 132px; }
[data-diseno="confeti"] #portada .marco { border: 0; border-radius: 28px; background: color-mix(in srgb, var(--oscuro-2) 62%, transparent); }
[data-diseno="confeti"] #portada .marco::before { border-radius: 22px; border-style: dashed; opacity: .8; }
[data-diseno="confeti"] .boton { border-width: 2px; box-shadow: 0 4px 0 var(--acento); }
[data-diseno="confeti"] .boton:active { translate: 0 3px; box-shadow: 0 1px 0 var(--acento); }
[data-diseno="confeti"] .boton.lleno { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--acento) 62%, #000); }
[data-diseno="confeti"] .oscura .boton { box-shadow: 0 4px 0 var(--acento-claro); }
[data-diseno="confeti"] .oscura .boton.lleno { background: var(--acento-claro); border-color: var(--acento-claro); color: var(--oscuro); box-shadow: 0 4px 0 color-mix(in srgb, var(--acento-claro) 60%, #000); }
[data-diseno="confeti"] .tarjeta .oscura { z-index: 1; }
[data-diseno="confeti"] .tarjeta .oscura::before, [data-diseno="confeti"] .tarjeta .oscura::after {
  content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; pointer-events: none;
  background: radial-gradient(circle at 10px 10px, var(--oscuro) 9.6px, transparent 10px) 0 0 / 20px 10px repeat-x;
}
[data-diseno="confeti"] .tarjeta .oscura::after { top: auto; bottom: -10px; background-image: radial-gradient(circle at 10px 0, var(--oscuro) 9.6px, transparent 10px); }
[data-diseno="confeti"] .tarjeta section:not(.oscura) > .rotulo { display: inline-block; background: var(--acento-texto, var(--acento)); color: #fff; border-radius: 999px; padding: 6px 16px; letter-spacing: .2em; rotate: -2deg; }
[data-diseno="confeti"] h2 { margin-top: 14px; }
[data-diseno="confeti"] .cuenta { gap: 12px; }
[data-diseno="confeti"] .cuenta div { border: 0; border-radius: 16px; background: var(--acento-claro); color: var(--oscuro); rotate: -3deg; padding: 18px 4px 14px; box-shadow: 0 5px 0 color-mix(in srgb, var(--acento) 70%, #000); }
[data-diseno="confeti"] .cuenta div:nth-child(even) { rotate: 3deg; background: var(--sobre-oscuro); }
[data-diseno="confeti"] .cuenta span { color: var(--oscuro); }
[data-diseno="confeti"] .polaroid::before { content: ""; position: absolute; left: 50%; top: -12px; width: 74px; height: 24px; translate: -50% 0; rotate: -4deg; background: color-mix(in srgb, var(--adorno) 72%, transparent); }
[data-diseno="confeti"] .carrusel { padding-top: 14px; padding-bottom: 26px; }
[data-diseno="confeti"] .carrusel figure { border-radius: 14px; border-width: 7px; rotate: -1.6deg; }
[data-diseno="confeti"] .carrusel figure:nth-child(even) { rotate: 1.6deg; }
[data-diseno="confeti"] .itinerario li::before { width: 13px; height: 13px; left: 76px; background: var(--acento); }
[data-diseno="confeti"] .itinerario li:nth-child(even)::before { background: var(--adorno); border-color: var(--adorno); }
[data-diseno="confeti"] .qr { border-radius: 18px; rotate: 2deg; }
[data-diseno="confeti"] .alias, [data-diseno="confeti"] .opcion { border-radius: 16px; border-style: dashed; border-width: 2px; }
[data-diseno="confeti"] .retrato { width: 190px; aspect-ratio: 4 / 5; border-radius: 10px; border: 8px solid #fff; rotate: -3deg; box-shadow: 0 10px 26px rgba(0, 0, 0, .22); }

/* ---------- Neón: todo oscuro, letras y bordes que brillan, bola de espejos ---------- */
[data-diseno="neon"] .tarjeta, [data-diseno="neon"] #portada {
  --fondo: var(--oscuro-2); --fondo-2: var(--oscuro); --tinta: var(--sobre-oscuro); --tinta-suave: var(--sobre-oscuro-suave);
  --titulos: #fff; --acento-texto: var(--acento-claro); --linea: var(--linea-oscura);
  --ilus-1: color-mix(in srgb, var(--acento) 34%, var(--oscuro)); --ilus-2: color-mix(in srgb, var(--adorno) 30%, var(--oscuro)); --ilus-3: color-mix(in srgb, var(--acento) 16%, var(--oscuro-2));
}
[data-diseno="neon"] .tarjeta { color: var(--tinta); box-shadow: 0 0 70px color-mix(in srgb, var(--acento) 34%, transparent); }
[data-diseno="neon"] .tarjeta section + section { border-top: 1px solid; border-image: linear-gradient(90deg, transparent 6%, var(--acento), var(--adorno), transparent 94%) 1; }
[data-diseno="neon"] #inicio {
  padding-top: 186px;
  background: radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--acento) 40%, transparent), transparent 46%),
              radial-gradient(circle at 90% 36%, color-mix(in srgb, var(--adorno) 30%, transparent), transparent 42%), var(--oscuro-2);
}
[data-diseno="neon"] #portada {
  background: radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--acento) 42%, transparent), transparent 45%),
              radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--adorno) 34%, transparent), transparent 45%), var(--oscuro-2);
}
[data-diseno="neon"] #inicio .nombres, [data-diseno="neon"] #portada .nombres { color: #fff; text-shadow: 0 0 5px #fff, 0 0 16px var(--acento), 0 0 38px var(--acento), 0 0 80px var(--acento); }
[data-diseno="neon"] #inicio .nombres span, [data-diseno="neon"] #portada .nombres span { color: var(--adorno); text-shadow: 0 0 12px var(--adorno); }
[data-diseno="neon"] h2 { color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--adorno) 80%, transparent), 0 0 34px var(--adorno); }
[data-diseno="neon"] .rotulo { color: var(--acento-claro); }
[data-diseno="neon"] .rama { color: var(--adorno); filter: drop-shadow(0 0 6px var(--adorno)); }
[data-diseno="neon"] #portada .marco { margin-top: 90px; border: 2px solid var(--acento); border-radius: 22px; box-shadow: 0 0 18px var(--acento), inset 0 0 18px color-mix(in srgb, var(--acento) 45%, transparent); background: color-mix(in srgb, var(--oscuro-2) 55%, transparent); }
[data-diseno="neon"] #portada .marco::before { display: none; }
[data-diseno="neon"] .boton, [data-diseno="neon"] #portada .boton { border-color: var(--acento); color: #fff; box-shadow: 0 0 12px color-mix(in srgb, var(--acento) 70%, transparent), inset 0 0 10px color-mix(in srgb, var(--acento) 35%, transparent); }
[data-diseno="neon"] .boton:hover, [data-diseno="neon"] .boton:focus-visible, [data-diseno="neon"] #portada .boton:hover { background: var(--acento); color: var(--sobre-acento, #fff); }
[data-diseno="neon"] .boton.lleno, [data-diseno="neon"] .oscura .boton.lleno { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento, #fff); }
[data-diseno="neon"] .menu summary { border-color: var(--acento); box-shadow: 0 0 12px color-mix(in srgb, var(--acento) 70%, transparent); }
[data-diseno="neon"] .cuenta div { border: 1.5px solid var(--adorno); border-radius: 14px; box-shadow: 0 0 14px color-mix(in srgb, var(--adorno) 60%, transparent), inset 0 0 12px color-mix(in srgb, var(--adorno) 30%, transparent); }
[data-diseno="neon"] .cuenta b { color: #fff; text-shadow: 0 0 10px var(--adorno); }
[data-diseno="neon"] .polaroids { gap: 22px; }
[data-diseno="neon"] .polaroids .polaroid + .polaroid { margin-left: 0; }
[data-diseno="neon"] .polaroid { background: transparent; padding: 0 0 40px; box-shadow: none; }
[data-diseno="neon"] .polaroid .marco { border-radius: 14px; box-shadow: 0 0 0 2px var(--acento), 0 0 22px var(--acento); }
[data-diseno="neon"] .polaroid.derecha .marco { box-shadow: 0 0 0 2px var(--adorno), 0 0 22px var(--adorno); }
[data-diseno="neon"] .carrusel { gap: 22px; padding-top: 14px; padding-bottom: 28px; }
[data-diseno="neon"] .carrusel figure { border: 0; border-radius: 16px; background: var(--oscuro); box-shadow: 0 0 0 2px var(--acento), 0 0 18px color-mix(in srgb, var(--acento) 70%, transparent); }
[data-diseno="neon"] .alias { background: transparent; color: var(--sobre-oscuro); border-color: var(--adorno); }
[data-diseno="neon"] .alias button { background: var(--acento); color: var(--sobre-acento, #fff); }
[data-diseno="neon"] .opcion { background: rgba(255, 255, 255, .05); border-radius: 14px; }
[data-diseno="neon"] .itinerario li::before { background: var(--acento); border-color: var(--acento); box-shadow: 0 0 10px var(--acento); }
[data-diseno="neon"] .flechas button { color: #fff; }
[data-diseno="neon"] .retrato { box-shadow: 0 0 0 2px var(--acento), 0 0 24px var(--acento), 0 0 70px color-mix(in srgb, var(--acento) 55%, transparent); }
[data-diseno="neon"] .decor .bokeh { fill: currentColor; filter: blur(5px); }
[data-diseno="neon"] .decor .haz { fill: currentColor; opacity: .1; }
[data-diseno="neon"] .decor .brillo { fill: #fff; }
[data-diseno="neon"] .decor .bola-fondo { fill: color-mix(in srgb, var(--sobre-oscuro) 82%, var(--adorno)); }
[data-diseno="neon"] .decor .bola-lineas { fill: none; stroke: var(--oscuro); stroke-width: 1.1; opacity: .5; }
[data-diseno="neon"] .decor .bola-brillo { fill: #fff; opacity: .55; }
[data-diseno="neon"] .decor .bola-hilo { stroke: var(--sobre-oscuro-suave); stroke-width: 1.5; }
[data-diseno="neon"] .decor .bola { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--adorno) 80%, transparent)); }

/* ---------- Estrellas: cielo de noche con luna ---------- */
[data-diseno="estrellas"] #inicio {
  padding: 112px 28px 88px;
  background: radial-gradient(ellipse at 50% 118%, color-mix(in srgb, var(--acento) 44%, transparent), transparent 62%), linear-gradient(180deg, var(--oscuro-2), var(--oscuro));
}
[data-diseno="estrellas"] #portada { background: radial-gradient(ellipse at 50% 112%, color-mix(in srgb, var(--acento) 42%, transparent), transparent 60%), linear-gradient(180deg, var(--oscuro-2), var(--oscuro)); }
[data-diseno="estrellas"] #portada .marco { border-radius: 200px 200px 18px 18px; padding-top: 84px; border-color: var(--acento-claro); background: color-mix(in srgb, var(--oscuro-2) 40%, transparent); }
[data-diseno="estrellas"] #portada .marco::before { border-radius: 194px 194px 12px 12px; }
[data-diseno="estrellas"] .decor .estrella { fill: #fff; }
[data-diseno="estrellas"] .decor .brillo, [data-diseno="estrellas"] .decor .luna { fill: var(--acento-claro); }
[data-diseno="estrellas"] .decor .luna { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--acento-claro) 70%, transparent)); }
[data-diseno="estrellas"] .tarjeta .oscura, [data-diseno="estrellas"] footer {
  background-image: radial-gradient(1.4px 1.4px at 9% 18%, #fffc, transparent 100%), radial-gradient(1px 1px at 24% 64%, #fff9, transparent 100%),
    radial-gradient(1.6px 1.6px at 41% 12%, #fffb, transparent 100%), radial-gradient(1px 1px at 58% 82%, #fff8, transparent 100%),
    radial-gradient(1.3px 1.3px at 72% 28%, #fffc, transparent 100%), radial-gradient(1px 1px at 88% 58%, #fff9, transparent 100%),
    radial-gradient(1.5px 1.5px at 94% 10%, #fffb, transparent 100%), radial-gradient(1px 1px at 5% 88%, #fff8, transparent 100%);
}
[data-diseno="estrellas"] .cuenta div { border-radius: 999px 999px 10px 10px; border-color: var(--acento-claro); padding-top: 26px; }
[data-diseno="estrellas"] .carrusel { gap: 22px; padding-top: 10px; padding-bottom: 30px; }
[data-diseno="estrellas"] .carrusel figure { border: 0; border-radius: 18px; box-shadow: 0 0 0 1px var(--acento), 0 14px 30px rgba(0, 0, 0, .25); }
[data-diseno="estrellas"] .polaroid { border-radius: 10px; }
[data-diseno="estrellas"] .polaroid .marco { border-radius: 6px; }
[data-diseno="estrellas"] .qr, [data-diseno="estrellas"] .alias, [data-diseno="estrellas"] .opcion { border-radius: 14px; }

/* ---------- Luces: guirnaldas de luces cálidas, fotos colgadas ---------- */
[data-diseno="luces"] #inicio { padding: 150px 28px 80px; background: linear-gradient(180deg, var(--oscuro-2), var(--oscuro) 72%); }
[data-diseno="luces"] #inicio .nombres { text-shadow: 0 0 26px color-mix(in srgb, var(--acento-claro) 60%, transparent); }
[data-diseno="luces"] #portada { background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--acento-claro) 30%, transparent), transparent 55%), linear-gradient(180deg, var(--oscuro-2), var(--oscuro)); }
[data-diseno="luces"] #portada .marco { border: 0; margin-top: 60px; }
[data-diseno="luces"] #portada .marco::before { display: none; }
[data-diseno="luces"] #confirmar { padding-top: 128px; }
[data-diseno="luces"] .decor .cable { fill: none; stroke: var(--sobre-oscuro-suave); stroke-width: 1.4; }
[data-diseno="luces"] .decor .zocalo { fill: var(--sobre-oscuro-suave); }
[data-diseno="luces"] .decor .f1 { color: #ffe9a8; }
[data-diseno="luces"] .decor .f2 { color: var(--acento-claro); }
[data-diseno="luces"] .decor .f3 { color: color-mix(in srgb, var(--adorno) 70%, #fff); }
[data-diseno="luces"] .decor .foco { fill: currentColor; filter: drop-shadow(0 0 5px currentColor) drop-shadow(0 0 12px currentColor); }
[data-diseno="luces"] .cuenta div { border: 2px dotted var(--acento-claro); border-radius: 12px; }
[data-diseno="luces"] .boton { border-radius: 10px; }
[data-diseno="luces"] .polaroids { position: relative; padding-top: 20px; }
[data-diseno="luces"] .polaroids::before { content: ""; position: absolute; left: 4%; right: 4%; top: 6px; height: 1px; background: var(--tinta-suave); }
[data-diseno="luces"] .polaroid::before { content: ""; position: absolute; left: 50%; top: -16px; width: 9px; height: 26px; translate: -50% 0; border-radius: 2px; background: var(--acento); }
[data-diseno="luces"] .carrusel figure { border-radius: 10px; }
[data-diseno="luces"] .qr, [data-diseno="luces"] .alias, [data-diseno="luces"] .opcion { border-radius: 12px; }

/* =====================================================================
   MOTIVOS (dibujos propios de algunos modelos) Y DISEÑO EDITORIAL
   ===================================================================== */
.decor .fino { stroke-width: 1.6; }
.decor .nervio { fill: none; stroke: var(--fondo); stroke-width: 1.2; opacity: .6; }
.decor .cuadro-a { fill: #fff; }
.decor .cuadro-b { fill: #17171a; }
.decor .agua1 { opacity: .55; }
.decor .agua2 { opacity: .4; }
.decor .cancha { fill: none; stroke: var(--sobre-oscuro-suave); stroke-width: 2; }
.decor .cancha circle { fill: var(--sobre-oscuro-suave); }
[data-motivo="futbol"] #inicio { padding-top: 124px; }
[data-diseno="moderno"] #inicio .decor { --decor-4: var(--sobre-oscuro); }
[data-diseno="jardin"] .tarjeta section > .decor, [data-diseno="jardin"] .tarjeta section > .ambiente { position: absolute; z-index: 0; }
/* Con motivo propio, el encabezado deja lugar arriba para el dibujo */
[data-motivo="carrera"] #inicio { padding-top: 120px; }
[data-motivo="carrera"] #portada .marco, [data-motivo="comic"] #portada .marco { position: relative; }
[data-motivo="monos"] #inicio { padding-top: 112px; }
[data-motivo="castillo"] #inicio { padding-top: 160px; }
[data-motivo="castillo"] .decor > svg > g:first-child { translate: 0 62px; }
[data-motivo="espacio"] .decor .estrella { fill: #fff; }
/* Los motivos reemplazan a los banderines del diseño confeti, pero conservan sus formas divertidas */

/* ---------- Editorial: foto grande, tipografía de revista, bloques numerados ---------- */
[data-diseno="editorial"] .tarjeta { counter-reset: bloque; }
[data-diseno="editorial"] section { padding: 72px 30px; }
[data-diseno="editorial"] #inicio { padding: 104px 0 68px; background: var(--fondo); }
[data-diseno="editorial"] #inicio:has(.retrato) { padding-top: 0; }
[data-diseno="editorial"] #inicio > :not(.retrato):not(.decor):not(.ambiente) { padding-left: 30px; padding-right: 30px; }
[data-diseno="editorial"] .retrato { width: 100%; aspect-ratio: 4 / 5; border-radius: 0; box-shadow: none; margin: 0 0 46px; }
[data-diseno="editorial"] #inicio .rotulo { letter-spacing: .42em; }
[data-diseno="editorial"] #inicio .nombres { font-size: calc(78px * var(--script-escala, 1)); line-height: 1.02; letter-spacing: -.01em; margin-top: 18px; }
[data-diseno="editorial"] #inicio .nombres span { font-size: .4em; font-style: italic; margin: 10px 0; }
[data-diseno="editorial"] .rama { height: 26px; }
[data-diseno="editorial"] .tarjeta section:not(#inicio) > .rotulo::before { counter-increment: bloque; content: counter(bloque, decimal-leading-zero) "  —  "; }
[data-diseno="editorial"] h2 { margin-top: 12px; letter-spacing: -.01em; }
[data-diseno="editorial"] .boton { border-radius: 0; }
[data-diseno="editorial"] .polaroids { gap: 10px; margin: 30px -30px 34px; }
[data-diseno="editorial"] .polaroid, [data-diseno="editorial"] .polaroid.derecha { rotate: 0deg; padding: 0 0 40px; background: none; box-shadow: none; }
[data-diseno="editorial"] .polaroids .polaroid { width: 50%; max-width: none; }
[data-diseno="editorial"] .polaroids .polaroid + .polaroid { margin: 0; }
[data-diseno="editorial"] .polaroids.una .polaroid { width: 100%; max-width: none; }
[data-diseno="editorial"] .polaroid .marco { aspect-ratio: 3 / 4; }
[data-diseno="editorial"] .polaroids.una .polaroid .marco { aspect-ratio: 4 / 5; }
[data-diseno="editorial"] .carrusel figure { flex-basis: 84%; border: 0; border-radius: 0; box-shadow: none; }
[data-diseno="editorial"] .cuenta { gap: 0; }
[data-diseno="editorial"] .cuenta div { border: 0; border-radius: 0; padding: 4px; position: relative; }
[data-diseno="editorial"] .cuenta div + div::before { content: ":"; position: absolute; left: -5px; top: 0; font-size: 36px; line-height: 1; opacity: .5; }
[data-diseno="editorial"] .cuenta b { font-size: 46px; font-weight: 400; }
[data-diseno="editorial"] .itinerario li::before { width: 7px; height: 7px; left: 79px; top: 25px; border-radius: 0; background: var(--acento); }
[data-diseno="editorial"] .qr { border-radius: 0; box-shadow: none; border: 1px solid var(--linea); }
[data-diseno="editorial"] .alias, [data-diseno="editorial"] .opcion, [data-diseno="editorial"] .mesa-hallada { border-radius: 0; }
[data-diseno="editorial"] .buscar-mesa input, [data-diseno="editorial"] .form-rsvp input, [data-diseno="editorial"] .form-rsvp select, [data-diseno="editorial"] .form-rsvp textarea { border-radius: 0; }
[data-diseno="editorial"] #portada { justify-content: flex-end; padding-bottom: 9vh; }
[data-diseno="editorial"] #portada .marco { border: 0; padding: 20px 6px; }
[data-diseno="editorial"] #portada .marco::before { display: none; }
[data-diseno="editorial"] .portada-foto img { opacity: .8; }
[data-diseno="editorial"] .portada-foto::after { background: linear-gradient(180deg, transparent 25%, color-mix(in srgb, var(--oscuro-2) 88%, transparent) 78%); }
[data-diseno="editorial"] #portada .nombres { font-size: calc(66px * var(--script-escala, 1)); }
[data-diseno="editorial"] footer { background: var(--fondo); color: var(--tinta-suave); border-top: 1px solid var(--linea); }
[data-diseno="editorial"] footer .nombres { color: var(--titulos); }
@media (max-width: 380px) { [data-diseno="editorial"] #inicio .nombres { font-size: calc(62px * var(--script-escala, 1)); } [data-diseno="editorial"] .cuenta b { font-size: 36px; } }

/* =====================================================================
   MÁS DISEÑOS: acuarela, deco, boleto y botanico
   ===================================================================== */

/* ---------- Acuarela: manchas de color suaves, formas irregulares ---------- */
[data-diseno="acuarela"] #inicio {
  padding-top: 104px;
  background: radial-gradient(70% 34% at 0% 0%, color-mix(in srgb, var(--adorno) 50%, transparent), transparent 72%),
              radial-gradient(60% 30% at 100% 6%, color-mix(in srgb, var(--acento) 30%, transparent), transparent 70%),
              radial-gradient(85% 28% at 50% 100%, color-mix(in srgb, var(--adorno) 32%, transparent), transparent 72%), var(--fondo);
}
[data-diseno="acuarela"] .tarjeta section:not(.oscura):not(#inicio) {
  background-image: radial-gradient(62% 42% at 6% 0%, color-mix(in srgb, var(--adorno) 30%, transparent), transparent 70%),
                    radial-gradient(52% 36% at 100% 100%, color-mix(in srgb, var(--acento) 18%, transparent), transparent 70%);
}
[data-diseno="acuarela"] .tarjeta section:not(.oscura):nth-of-type(even):not(#inicio) {
  background-image: radial-gradient(62% 42% at 100% 0%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 70%),
                    radial-gradient(52% 36% at 0% 100%, color-mix(in srgb, var(--adorno) 30%, transparent), transparent 70%);
}
[data-diseno="acuarela"] .oscura { margin: 0 12px; border-radius: 44px 18px 52px 22px / 26px 48px 20px 44px; }
[data-diseno="acuarela"] #portada { background: radial-gradient(70% 40% at 0% 0%, color-mix(in srgb, var(--acento) 55%, transparent), transparent 70%), radial-gradient(70% 40% at 100% 100%, color-mix(in srgb, var(--adorno) 45%, transparent), transparent 70%), var(--oscuro); }
[data-diseno="acuarela"] #portada .marco { border: 0; border-radius: 46px 20px 54px 24px / 28px 50px 22px 46px; background: color-mix(in srgb, var(--oscuro-2) 46%, transparent); }
[data-diseno="acuarela"] #portada .marco::before { display: none; }
[data-diseno="acuarela"] .retrato { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; box-shadow: 0 0 0 10px color-mix(in srgb, var(--adorno) 40%, transparent), 0 0 0 24px color-mix(in srgb, var(--adorno) 18%, transparent); margin-bottom: 44px; }
[data-diseno="acuarela"] .polaroid { border-radius: 8px; box-shadow: 0 12px 30px color-mix(in srgb, var(--oscuro) 22%, transparent); }
[data-diseno="acuarela"] .carrusel figure { border-radius: 26px 60px 26px 60px; border-width: 5px; }
[data-diseno="acuarela"] .cuenta { gap: 12px; }
[data-diseno="acuarela"] .cuenta div { border: 0; aspect-ratio: 1; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: color-mix(in srgb, var(--sobre-oscuro) 13%, transparent); border-radius: 46% 54% 50% 50% / 54% 46% 54% 46%; }
[data-diseno="acuarela"] .cuenta div:nth-child(even) { border-radius: 54% 46% 48% 52% / 46% 54% 46% 54%; }
[data-diseno="acuarela"] .cuenta b { font-size: 30px; }
[data-diseno="acuarela"] .boton:not(.lleno) { background: color-mix(in srgb, var(--acento) 12%, transparent); }
[data-diseno="acuarela"] .qr { border-radius: 30px 14px 34px 16px; }
[data-diseno="acuarela"] .alias, [data-diseno="acuarela"] .opcion, [data-diseno="acuarela"] .mesa-hallada { border-radius: 20px 10px 22px 12px; }

/* ---------- Déco: líneas finas, abanicos y esquinas cortadas ---------- */
[data-diseno="deco"] #inicio { padding: 132px 38px 84px; }
[data-diseno="deco"] #inicio::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--linea); pointer-events: none; }
[data-diseno="deco"] #inicio .rotulo, [data-diseno="deco"] .rotulo { letter-spacing: .42em; }
[data-diseno="deco"] .tarjeta section + section { border-top: 3px double var(--linea); }
[data-diseno="deco"] .tarjeta .oscura + section, [data-diseno="deco"] .tarjeta section + .oscura { border-top-color: var(--linea-oscura); }
[data-diseno="deco"] .boton { border-radius: 0; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
[data-diseno="deco"] .boton:not(.lleno) { background: color-mix(in srgb, var(--acento) 14%, transparent); }
[data-diseno="deco"] .oscura .boton:not(.lleno), [data-diseno="deco"] #portada .boton { background: color-mix(in srgb, var(--acento-claro) 16%, transparent); }
[data-diseno="deco"] #portada .marco { border-radius: 0; border-color: var(--acento-claro); padding-top: 110px; }
[data-diseno="deco"] #portada .marco::before { inset: 6px; }
[data-diseno="deco"] #portada .decor { display: none; }
[data-diseno="deco"] #portada .marco::after { content: ""; position: absolute; left: 50%; top: 0; width: 180px; height: 90px; translate: -50% 0; border-radius: 0 0 90px 90px;
  background: repeating-conic-gradient(from 90deg at 50% 0, var(--acento-claro) 0 1deg, transparent 1deg 11.25deg); opacity: .8; -webkit-mask: radial-gradient(circle at 50% 0, transparent 26px, #000 27px); mask: radial-gradient(circle at 50% 0, transparent 26px, #000 27px); }
[data-diseno="deco"] .retrato { border-radius: 0; box-shadow: none; clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%); }
[data-diseno="deco"] .polaroid, [data-diseno="deco"] .polaroid.derecha { rotate: 0deg; background: none; box-shadow: none; padding: 0 0 40px; }
[data-diseno="deco"] .polaroids { gap: 22px; }
[data-diseno="deco"] .polaroids .polaroid + .polaroid { margin: 0; }
[data-diseno="deco"] .polaroids .polaroid { width: 44%; }
[data-diseno="deco"] .polaroid .marco { outline: 1px solid var(--acento); outline-offset: 5px; }
[data-diseno="deco"] .carrusel { gap: 24px; padding-top: 10px; padding-bottom: 26px; }
[data-diseno="deco"] .carrusel figure { border: 0; border-radius: 0; box-shadow: none; outline: 1px solid var(--acento); outline-offset: 5px; }
[data-diseno="deco"] .cuenta div { border-radius: 0; border-color: var(--acento-claro); outline: 1px solid var(--linea-oscura); outline-offset: 3px; }
[data-diseno="deco"] .itinerario li::before { border-radius: 0; rotate: 45deg; }
[data-diseno="deco"] .qr, [data-diseno="deco"] .alias, [data-diseno="deco"] .opcion, [data-diseno="deco"] .mesa-hallada, [data-diseno="deco"] .buscar-mesa input { border-radius: 0; }
[data-diseno="deco"] .form-rsvp input, [data-diseno="deco"] .form-rsvp select, [data-diseno="deco"] .form-rsvp textarea { border-radius: 0; }

/* ---------- Boleto: la invitación como una entrada, con talón y código de barras ---------- */
[data-diseno="boleto"] #inicio { margin: 14px 12px 22px; border-radius: 18px; padding: 118px 24px 96px; background: var(--oscuro); color: var(--sobre-oscuro); overflow: hidden; }
[data-diseno="boleto"] #inicio .rotulo { color: var(--acento-claro); }
[data-diseno="boleto"] #inicio .nombres { color: var(--sobre-oscuro); }
[data-diseno="boleto"] #inicio .nombres span, [data-diseno="boleto"] #inicio .rama { color: var(--acento-claro); }
[data-diseno="boleto"] #inicio :is(.apellidos, .subtitulo, .anio) { color: var(--sobre-oscuro-suave); }
[data-diseno="boleto"] #inicio .fecha-grande b { color: var(--sobre-oscuro); border-color: var(--linea-oscura); }
[data-diseno="boleto"] #inicio::after { content: ""; position: absolute; left: 50%; bottom: 26px; width: 62%; height: 40px; translate: -50% 0; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--sobre-oscuro) 0 2px, transparent 2px 5px, var(--sobre-oscuro) 5px 9px, transparent 9px 11px, var(--sobre-oscuro) 11px 12px, transparent 12px 16px, var(--sobre-oscuro) 16px 19px, transparent 19px 23px); }
[data-diseno="boleto"] .decor .leyenda { font-family: var(--sans); font-size: 15px; letter-spacing: .3em; fill: var(--acento-claro); }
[data-diseno="boleto"] .decor .troquel { fill: none; stroke: var(--sobre-oscuro-suave); stroke-width: 2; stroke-dasharray: 7 7; }
[data-diseno="boleto"] .decor .muesca { fill: var(--fondo); }
[data-diseno="boleto"] #portada .decor .muesca { fill: none; }
[data-diseno="boleto"] .retrato { border-radius: 12px; box-shadow: 0 0 0 1px var(--acento-claro), 0 0 0 7px color-mix(in srgb, var(--sobre-oscuro) 10%, transparent); rotate: -2deg; }
[data-diseno="boleto"] #portada .marco { border: 2px dashed var(--acento-claro); border-radius: 16px; padding-top: 96px; background: color-mix(in srgb, var(--oscuro-2) 50%, transparent); }
[data-diseno="boleto"] #portada .marco::before { display: none; }
[data-diseno="boleto"] #portada .decor { display: none; }
[data-diseno="boleto"] .tarjeta section + section:not(.oscura) { border-top: 2px dashed var(--linea); }
[data-diseno="boleto"] .tarjeta .oscura { margin: 0 12px; border-radius: 18px; }
[data-diseno="boleto"] .boton { border-radius: 8px; border-style: dashed; border-width: 2px; }
[data-diseno="boleto"] .boton.lleno { border-style: solid; }
[data-diseno="boleto"] .cuenta div { border: 2px dashed var(--acento-claro); border-radius: 10px; }
[data-diseno="boleto"] .polaroid { border-radius: 4px; }
[data-diseno="boleto"] .polaroid::before { content: ""; position: absolute; left: 50%; top: -11px; width: 70px; height: 22px; translate: -50% 0; rotate: 3deg; background: color-mix(in srgb, var(--acento) 55%, transparent); }
[data-diseno="boleto"] .carrusel figure { border-radius: 10px; }
[data-diseno="boleto"] .qr, [data-diseno="boleto"] .alias, [data-diseno="boleto"] .opcion { border-radius: 10px; }
[data-diseno="boleto"] .alias, [data-diseno="boleto"] .opcion { border-style: dashed; border-width: 2px; }

/* ---------- Botánico: ramas dibujadas en línea y marcos finos ---------- */
[data-diseno="botanico"] #inicio { padding: 150px 34px 80px; }
[data-diseno="botanico"] #inicio::before { content: ""; position: absolute; inset: 12px; border: 1px solid var(--linea); border-radius: 4px; pointer-events: none; }
[data-diseno="botanico"] #confirmar { padding-top: 120px; }
[data-diseno="botanico"] #portada .marco { border-radius: 4px; padding-top: 60px; }
[data-diseno="botanico"] #portada .marco::before { border-radius: 2px; }
[data-diseno="botanico"] #portada .decor .k2, [data-diseno="botanico"] #portada .decor .k1 { color: var(--acento-claro); }
[data-diseno="botanico"] .retrato { width: 190px; aspect-ratio: 4 / 5; border-radius: 50%; box-shadow: 0 0 0 1px var(--acento), 0 0 0 8px var(--fondo), 0 0 0 9px var(--linea); }
[data-diseno="botanico"] .polaroid, [data-diseno="botanico"] .polaroid.derecha { rotate: 0deg; box-shadow: none; border: 1px solid var(--linea); }
[data-diseno="botanico"] .polaroids { gap: 14px; }
[data-diseno="botanico"] .polaroids .polaroid + .polaroid { margin: 0; }
[data-diseno="botanico"] .carrusel figure { border-radius: 6px; border: 0; box-shadow: none; outline: 1px solid var(--acento); outline-offset: 5px; }
[data-diseno="botanico"] .carrusel { gap: 24px; padding-top: 10px; padding-bottom: 26px; }
[data-diseno="botanico"] .cuenta div { border-radius: 50%; aspect-ratio: 1; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
[data-diseno="botanico"] .cuenta b { font-size: 30px; }
[data-diseno="botanico"] .boton { letter-spacing: .24em; }
[data-diseno="botanico"] .qr, [data-diseno="botanico"] .alias, [data-diseno="botanico"] .opcion { border-radius: 6px; }

/* =====================================================================
   DISEÑOS CON LA FOTO COMO PROTAGONISTA: franja, sobre, lineal, ventana, postal
   Comparten tres piezas que el resto no muestra: las iniciales, la fecha corta
   (17 . 04 . 27), el botón de música rodeado por una frase y el calendario del mes.
   ===================================================================== */
.iniciales, .fecha-corta, .melodia, .calendario, .retrato.segunda { display: none; }

/* Botón de música con la frase alrededor */
:is([data-diseno="franja"], [data-diseno="lineal"], [data-diseno="sobre"], [data-diseno="ventana"], [data-diseno="postal"]) .melodia { display: block; position: relative; width: 230px; height: 230px; margin: 34px auto 0; }
.melodia svg { width: 100%; height: 100%; }
.melodia text { font-family: var(--serif); font-size: 17px; letter-spacing: .08em; fill: currentColor; }
.melodia button { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; translate: -50% -50%; border-radius: 50%; border: 3px solid currentColor; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; }
.melodia button svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.melodia button:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 4px; }

/* Calendario del mes, con el día del evento marcado */
:is([data-diseno="franja"], [data-diseno="lineal"], [data-diseno="sobre"], [data-diseno="ventana"], [data-diseno="postal"], [data-diseno="editorial"]) .calendario { display: block; max-width: 300px; margin: 0 auto 30px; }
.calendario .mes { font-family: var(--script); font-size: calc(36px * var(--script-escala, 1)); line-height: 1.1; color: var(--titulos); margin-bottom: 14px; }
.calendario .semana, .calendario .dias { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 6px; font-family: var(--sans); font-size: 14px; }
.calendario .semana { margin-bottom: 8px; color: var(--tinta-suave); letter-spacing: .1em; }
.calendario .semana b { font-weight: 500; }
.calendario .dias span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; }
.calendario .dia-evento { background: var(--oscuro); color: var(--sobre-oscuro); font-weight: 500; }

/* Cuenta regresiva con dos puntos, sin cajas (franja y lineal) */
:is([data-diseno="franja"], [data-diseno="lineal"]) .cuenta { gap: 0; }
:is([data-diseno="franja"], [data-diseno="lineal"]) .cuenta div { border: 0; border-radius: 0; padding: 4px; position: relative; }
:is([data-diseno="franja"], [data-diseno="lineal"]) .cuenta div + div::before { content: ":"; position: absolute; left: -5px; top: 0; font-size: 38px; line-height: 1; }
:is([data-diseno="franja"], [data-diseno="lineal"]) .cuenta b { font-family: var(--serif); font-size: 48px; font-weight: 400; }
:is([data-diseno="franja"], [data-diseno="lineal"]) :is(.retrato img, .polaroid img, .carrusel img, .portada-foto img) { filter: grayscale(1); }
:is([data-diseno="franja"], [data-diseno="lineal"]) .boton { border-radius: 0; }
:is([data-diseno="franja"], [data-diseno="lineal"]) .polaroid, :is([data-diseno="franja"], [data-diseno="lineal"]) .polaroid.derecha { rotate: 0deg; border-radius: 0; box-shadow: none; border: 1px solid var(--linea); }
:is([data-diseno="franja"], [data-diseno="lineal"]) .polaroids { gap: 12px; }
:is([data-diseno="franja"], [data-diseno="lineal"]) .polaroids .polaroid + .polaroid { margin: 0; }
:is([data-diseno="franja"], [data-diseno="lineal"]) .carrusel figure { border: 0; border-radius: 0; box-shadow: none; }
:is([data-diseno="franja"], [data-diseno="lineal"]) :is(.qr, .alias, .opcion, .mesa-hallada) { border-radius: 0; }
@media (max-width: 380px) { :is([data-diseno="franja"], [data-diseno="lineal"]) .cuenta b { font-size: 38px; } }

/* ---------- Franja: fotos a toda pantalla y, en el medio, una franja con las iniciales, los nombres y la fecha ---------- */
[data-diseno="franja"] #inicio { --alto-foto: min(150vw, 660px); padding: calc(var(--alto-foto) + 48px) 28px 60px;
  background: linear-gradient(160deg, var(--oscuro), var(--oscuro-2)) top / 100% var(--alto-foto) no-repeat, var(--fondo); }
.captura[data-diseno="franja"] #inicio, .incrustada[data-diseno="franja"] #inicio { --alto-foto: 600px; }
[data-diseno="franja"] .retrato { display: block; position: absolute; left: 0; top: 0; width: 100%; height: var(--alto-foto); aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0; }
[data-diseno="franja"] #inicio:has(.segunda) .retrato { width: calc(50% - 3px); }
[data-diseno="franja"] #inicio .retrato.segunda { left: auto; right: 0; }
[data-diseno="franja"] #inicio::before { content: ""; position: absolute; left: 50%; top: calc(var(--alto-foto) * .16); width: 142px; height: calc(var(--alto-foto) * .68); translate: -50% 0; background: var(--fondo); border-radius: 3px; z-index: 1; }
[data-diseno="franja"] :is(.iniciales, .fecha-corta) { display: block; }
[data-diseno="franja"] #inicio :is(.iniciales, .nombres, .fecha-corta) { position: absolute; left: 50%; width: 142px; margin: 0; translate: -50% 0; z-index: 2; color: var(--titulos); }
[data-diseno="franja"] .iniciales { top: calc(var(--alto-foto) * .2); font-family: var(--serif); font-size: 84px; line-height: 1; }
[data-diseno="franja"] .iniciales span { display: block; font-size: .3em; margin: 4px 0; color: var(--acento); }
[data-diseno="franja"] #inicio .nombres { top: auto; bottom: calc(100% - var(--alto-foto) * .76); font-size: calc(30px * var(--script-escala, 1)); line-height: 1.05; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; padding: 0 6px; }
[data-diseno="franja"] #inicio .nombres span { display: none; }
[data-diseno="franja"] .fecha-corta { top: calc(var(--alto-foto) * .78); font-family: var(--serif); font-size: 21px; letter-spacing: .06em; }
[data-diseno="franja"] #portada .marco { border-radius: 0; background: color-mix(in srgb, var(--oscuro-2) 40%, transparent); }
[data-diseno="franja"] #portada .marco::before { display: none; }
[data-diseno="franja"] .portada-foto img { opacity: .6; }

/* ---------- Lineal y Ventana: la foto a un costado y, al otro, iniciales, nombres y fecha ---------- */
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio { display: grid; grid-template-columns: 62% 1fr; grid-template-rows: auto auto auto 1fr; padding: 0 0 56px; }
[data-diseno="ventana"] #inicio { grid-template-columns: 1fr 58%; padding-top: 26px; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio > :not(.decor):not(.ambiente) { min-width: 0; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) .retrato { display: block; grid-area: 1 / 1 / 5 / 2; width: 100%; aspect-ratio: 5 / 9; border-radius: 0; box-shadow: none; margin: 0; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio:not(:has(.retrato))::before { content: ""; grid-area: 1 / 1 / 5 / 2; aspect-ratio: 5 / 9; background: linear-gradient(160deg, var(--ilus-1), var(--ilus-2)); }
[data-diseno="ventana"] .retrato, [data-diseno="ventana"] #inicio:not(:has(.retrato))::before { grid-area: 1 / 2 / 5 / 3; width: calc(100% - 22px); border-radius: 999px 999px 0 0; outline: 1px solid var(--acento); outline-offset: 7px; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) :is(.iniciales, .fecha-corta) { display: block; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) .iniciales { grid-area: 1 / 2; padding: 54px 6px 0; font-family: var(--serif); font-size: 62px; line-height: 1; color: var(--titulos); }
:is([data-diseno="lineal"], [data-diseno="ventana"]) .iniciales span { font-size: .36em; color: var(--acento); margin: 0 -4px; vertical-align: middle; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio .nombres { grid-area: 2 / 2; margin: 34px 0 0; padding: 0 8px; font-size: calc(30px * var(--script-escala, 1)); line-height: 1.1; overflow-wrap: anywhere; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio .nombres span { font-size: .7em; margin: 2px 0; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) .fecha-corta { grid-area: 3 / 2; margin-top: 12px; font-family: var(--serif); font-size: 19px; letter-spacing: .04em; color: var(--tinta-suave); }
[data-diseno="ventana"] :is(.iniciales, .fecha-corta) { grid-column: 1; }
[data-diseno="ventana"] #inicio .nombres { grid-column: 1; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio > .rotulo { grid-area: 5 / 1 / 6 / 3; margin-top: 40px; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio > .apellidos { display: none; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio > div:has(> .rama) { grid-area: 6 / 1 / 7 / 3; margin-top: 12px; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio > .subtitulo { grid-area: 7 / 1 / 8 / 3; padding: 0 28px; }
:is([data-diseno="lineal"], [data-diseno="ventana"]) #inicio > div:last-child { grid-area: 8 / 1 / 9 / 3; }
[data-diseno="lineal"] .tarjeta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"); }
[data-diseno="lineal"] #inicio, [data-diseno="lineal"] .suave { background-color: transparent; }
[data-diseno="lineal"] #inicio { background-image: none; }
[data-diseno="lineal"] #portada .marco { border-radius: 0; }
[data-diseno="lineal"] #portada .marco::before { display: none; }
[data-diseno="ventana"] .carrusel figure { border-radius: 999px 999px 6px 6px; border: 0; outline: 1px solid var(--acento); outline-offset: 5px; box-shadow: none; }
[data-diseno="ventana"] .carrusel { gap: 26px; padding-top: 10px; padding-bottom: 24px; }
[data-diseno="ventana"] .cuenta div { border-radius: 999px 999px 4px 4px; padding-top: 26px; }
[data-diseno="ventana"] #portada .marco { border-radius: 999px 999px 0 0; padding-top: 96px; }
[data-diseno="ventana"] #portada .marco::before { border-radius: 999px 999px 0 0; }

/* ---------- Sobre: flores, un sobre del que asoman las fotos y un lacre ---------- */
[data-diseno="sobre"] #inicio { display: flex; flex-direction: column; align-items: center; padding: 120px 24px 64px; }
[data-diseno="sobre"] #inicio > .nombres { order: 1; margin-top: 0; }
[data-diseno="sobre"] #inicio > .apellidos { order: 2; margin-bottom: 4px; }
[data-diseno="sobre"] #inicio > .rotulo { order: 3; font-size: 15px; letter-spacing: .2em; margin-top: 6px; }
[data-diseno="sobre"] #inicio > .sobre-carta { order: 4; }
[data-diseno="sobre"] #inicio > .subtitulo { order: 5; margin-top: 30px; }
[data-diseno="sobre"] #inicio > div:has(> .rama) { order: 6; margin-top: 18px; }
[data-diseno="sobre"] #inicio > div:last-child { order: 7; width: min(100%, 360px); margin-top: 26px; padding: 26px 14px 30px; background: #fff; border-radius: 18px; box-shadow: 0 12px 34px color-mix(in srgb, var(--oscuro) 14%, transparent); }
[data-diseno="sobre"] #inicio .fecha-grande { margin-top: 0; }
.sobre-carta { position: relative; width: 300px; height: 310px; margin: 46px auto 0; }
.sobre-carta .solapa { position: absolute; left: 0; right: 0; top: 96px; height: 214px; border-radius: 6px; background: color-mix(in srgb, var(--adorno) 82%, var(--oscuro)); }
.sobre-carta .solapa::before { content: ""; position: absolute; left: 0; right: 0; top: -78px; height: 80px; background: inherit; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.sobre-carta .foto { position: absolute; top: 0; width: 148px; height: 190px; overflow: hidden; background: #fff; border: 5px solid #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.sobre-carta .foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sobre-carta .f1 { left: 18px; top: 26px; rotate: -9deg; }
.sobre-carta .f2 { right: 16px; rotate: 11deg; }
.sobre-carta .frente { position: absolute; left: 0; right: 0; bottom: 0; height: 172px; border-radius: 0 0 6px 6px; background: var(--adorno); clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .12)); }
.sobre-carta .lacre { position: absolute; left: 50%; top: 199px; width: 70px; height: 70px; translate: -50% 0; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acento) 60%, #fff), var(--acento) 55%, color-mix(in srgb, var(--acento) 70%, #000)); box-shadow: 0 4px 10px rgba(0, 0, 0, .25), inset 0 0 0 5px color-mix(in srgb, var(--acento) 80%, #000); }
.sobre-carta .lacre svg { width: 34px; height: 34px; fill: none; stroke: color-mix(in srgb, var(--acento) 45%, #000); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
[data-diseno="sobre"] .decor .hoja { fill: color-mix(in srgb, var(--oscuro) 34%, var(--adorno)); opacity: .75; }
[data-diseno="sobre"] .decor .petalos { fill: none; stroke: color-mix(in srgb, var(--acento) 70%, #fff); stroke-width: 1.4; stroke-linecap: round; }
[data-diseno="sobre"] #confirmar { padding-top: 110px; }
[data-diseno="sobre"] .tarjeta .oscura { margin: 0 12px; border-radius: 22px; }
[data-diseno="sobre"] .polaroid { border-radius: 4px; }
[data-diseno="sobre"] .carrusel figure { border-radius: 14px; }
[data-diseno="sobre"] :is(.qr, .alias, .opcion, .mesa-hallada) { border-radius: 16px; }
[data-diseno="sobre"] .lugar { background: #fff; border-radius: 18px; padding: 24px 16px; margin-top: 16px; box-shadow: 0 10px 28px color-mix(in srgb, var(--oscuro) 10%, transparent); }
[data-diseno="sobre"] .lugar + .lugar { border-top: 0; }
/* La portada es el sobre cerrado: el botón de abrir es el lacre */
[data-diseno="sobre"] #portada { background: var(--adorno); color: var(--tinta);
  --sobre-oscuro: var(--tinta); --sobre-oscuro-suave: var(--tinta-suave); --acento-claro: var(--acento-texto, var(--acento)); --linea-oscura: var(--linea); }
[data-diseno="sobre"] #portada::before { content: ""; position: absolute; inset: 0 0 auto 0; height: calc(50% - 96px); background: color-mix(in srgb, var(--adorno) 86%, var(--oscuro)); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
[data-diseno="sobre"] #portada .decor, [data-diseno="sobre"] #portada .portada-foto { display: none; }
[data-diseno="sobre"] #portada .marco { border: 0; display: flex; flex-direction: column; align-items: center; padding-top: 0; }
[data-diseno="sobre"] #portada .marco::before { display: none; }
[data-diseno="sobre"] #portada .marco > .rama, [data-diseno="sobre"] #portada .aviso { display: none; }
[data-diseno="sobre"] #portada .marco > .rotulo { order: 3; margin-top: 26px; }
[data-diseno="sobre"] #portada .marco > .nombres { order: 4; font-size: calc(44px * var(--script-escala, 1)); }
[data-diseno="sobre"] #portada .boton { order: 1; width: 132px; height: 132px; padding: 0 14px; border: 0; white-space: normal; line-height: 1.3; font-size: 12px; letter-spacing: .14em; color: color-mix(in srgb, var(--acento) 30%, #000);
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--acento) 55%, #fff), var(--acento) 55%, color-mix(in srgb, var(--acento) 70%, #000)); box-shadow: 0 8px 18px rgba(0, 0, 0, .28), inset 0 0 0 7px color-mix(in srgb, var(--acento) 80%, #000); }
[data-diseno="sobre"] #portada .boton:hover { color: #000; }

/* ---------- Postal: foto pegada con cinta, estampilla y matasellos ---------- */
[data-diseno="postal"] #inicio { padding: 150px 26px 70px; }
[data-diseno="postal"] #inicio::before { content: ""; position: absolute; inset: 12px; border: 2px dashed var(--linea); pointer-events: none; }
[data-diseno="postal"] .retrato { display: block; width: 82%; aspect-ratio: 4 / 3; border-radius: 2px; border: 9px solid #fff; rotate: -3deg; box-shadow: 0 12px 28px rgba(0, 0, 0, .22); margin-bottom: 36px; }
[data-diseno="postal"] .retrato.segunda { display: none; }
[data-diseno="postal"] .fecha-corta { display: inline-block; margin: 10px 0 16px; padding: 5px 14px; border: 2px solid var(--acento-texto, var(--acento)); color: var(--acento-texto, var(--acento)); font-family: var(--sans); font-size: 15px; letter-spacing: .14em; rotate: -4deg; }
[data-diseno="postal"] .decor .muescas circle { fill: var(--fondo); }
[data-diseno="postal"] .tarjeta section + section:not(.oscura) { border-top: 2px dashed var(--linea); }
[data-diseno="postal"] .polaroid::before { content: ""; position: absolute; left: 50%; top: -11px; width: 70px; height: 22px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--adorno) 75%, transparent); }
[data-diseno="postal"] .carrusel figure { border-radius: 2px; border-width: 8px; rotate: -1.4deg; }
[data-diseno="postal"] .carrusel figure:nth-child(even) { rotate: 1.4deg; }
[data-diseno="postal"] .carrusel { padding-top: 14px; padding-bottom: 26px; }
[data-diseno="postal"] .boton { border-radius: 4px; }
[data-diseno="postal"] .cuenta div { border-style: dashed; border-radius: 2px; }
[data-diseno="postal"] #portada .marco { border: 2px dashed var(--linea-oscura); border-radius: 2px; }
[data-diseno="postal"] #portada .marco::before { display: none; }
[data-diseno="postal"] #portada .decor { display: none; }