/* Pieles de la invitación demo. El motor es el mismo; solo cambia el arte.
   Gala dorada es la piel por defecto; Jardín y Minimalista se activan con data-estilo. */
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/fonts/cormorant-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Great Vibes"; src: url("/fonts/greatvibes.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* ================= Gala dorada (por defecto) ================= */
:root, html[data-estilo="dorado"] {
  --fondo: #0d0a06; --tinta: #f6efe1; --suave: #d9cba9; --tenue: #b3a37f;
  --acento1: #e9cf8a; --acento2: #c9a24e; --acento3: #f3dfae; --etiqueta-color: #e9cf8a;
  --a1-rgb: 233, 207, 138; --a2-rgb: 201, 162, 78; --a3-rgb: 243, 223, 174;
  --tarjeta: #17120a; --borde: rgba(217, 184, 102, .32); --borde-campo: #8a7a5c; --campo: #0d0a06;
  --degradado: linear-gradient(100deg, #f8e8aa 0%, #d9b866 50%, #b0823a 100%);
  --boton-tinta: #1a1206; --error: #ffb4a3;
  --titulos: "Cormorant", Georgia, serif;
  --estrellas: 255, 244, 228;
  --chispas: #f8e8aa,#d9b866,#fff6dc,#a8792e,#ffffff;
  color-scheme: dark;
}
html[data-estilo="dorado"] h1, html[data-estilo="dorado"] h2 { font-weight: 500; letter-spacing: 0; }
html[data-estilo="dorado"] .nombre { font-style: italic; font-weight: 500; font-size: clamp(3.2rem, 15vw, 5.6rem); line-height: 1; }
html[data-estilo="dorado"] .portal-titulo { font-size: clamp(2.4rem, 9vw, 4rem); font-style: italic; }
html[data-estilo="dorado"] .edad { font-weight: 300; font-size: clamp(5rem, 24vw, 9rem); }
html[data-estilo="dorado"] .edad span[aria-hidden] { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-estilo="dorado"] .cuenta b { font-weight: 500; font-size: clamp(1.7rem, 7vw, 2.3rem); }
html[data-estilo="dorado"] .anillo-nucleo span { font-style: italic; font-weight: 500; }

/* ================= Jardín ================= */
html[data-estilo="floral"] {
  --fondo: #fff7f1; --tinta: #3b2430; --suave: #634855; --tenue: #6f5361;
  --acento1: #146b66; --acento2: #b8325f; --acento3: #7a5a1c; --etiqueta-color: #146b66;
  --a1-rgb: 20, 107, 102; --a2-rgb: 184, 50, 95; --a3-rgb: 122, 90, 28;
  --tarjeta: #ffffff; --borde: rgba(184, 50, 95, .26); --borde-campo: #9a6b7b; --campo: #ffffff;
  --degradado: linear-gradient(100deg, #b8325f 0%, #c0436f 50%, #7a5a1c 100%);
  --boton-tinta: #ffffff; --error: #a3204f;
  --titulos: "Cormorant", Georgia, serif;
  --estrellas: 184, 50, 95;
  --chispas: #e0457b,#f7b6c9,#1f8f88,#e9cf8a,#ffffff;
  color-scheme: light;
}
html[data-estilo="floral"] .cielo { display: none; }
html[data-estilo="floral"] .flores { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
html[data-estilo="floral"] .flores img { position: absolute; height: auto; }
html[data-estilo="floral"] .flores .f1 { width: clamp(150px, 30vw, 300px); left: -40px; bottom: -30px; }
html[data-estilo="floral"] .flores .f2 { width: clamp(80px, 14vw, 150px); right: -30px; top: 40%; transform: rotate(-18deg); opacity: .9; }
html[data-estilo="floral"] .flores .f3 { width: clamp(60px, 10vw, 110px); left: 4%; top: 14%; transform: rotate(14deg); opacity: .85; }
html[data-estilo="floral"] h1, html[data-estilo="floral"] h2 { font-weight: 500; letter-spacing: 0; }
html[data-estilo="floral"] .nombre { font-family: "Great Vibes", cursive; font-weight: 400; font-size: clamp(3.6rem, 17vw, 6.4rem); line-height: 1; margin-bottom: -6px; }
html[data-estilo="floral"] .portal-titulo { font-size: clamp(2.4rem, 9vw, 4rem); font-style: italic; }
html[data-estilo="floral"] .edad { font-weight: 400; font-size: clamp(4.6rem, 22vw, 8rem); }
html[data-estilo="floral"] .edad span[aria-hidden] { color: #b8325f; }
html[data-estilo="floral"] .edad span[aria-hidden]:last-child { color: #7a5a1c; }
html[data-estilo="floral"] .anillo-nucleo span { font-family: "Great Vibes", cursive; font-weight: 400; }
html[data-estilo="floral"] .tarjeta { box-shadow: 0 30px 70px -40px rgba(80, 30, 50, .45); }

/* ================= Minimalista ================= */
html[data-estilo="minimal"] {
  --fondo: #f6f5f2; --tinta: #111111; --suave: #3d3d3d; --tenue: #595959;
  --acento1: #111111; --acento2: #111111; --acento3: #6b6b6b; --etiqueta-color: #3d3d3d;
  --a1-rgb: 17, 17, 17; --a2-rgb: 17, 17, 17; --a3-rgb: 107, 107, 107;
  --tarjeta: #ffffff; --borde: rgba(0, 0, 0, .14); --borde-campo: #767676; --campo: #ffffff;
  --degradado: linear-gradient(#111111, #111111);
  --boton-tinta: #ffffff; --error: #a3204f;
  --titulos: "IBM Plex Sans", system-ui, sans-serif;
  --estrellas: 17, 17, 17;
  --chispas: #111111,#8a8a8a,#d8d8d8,#111111,#bdbdbd;
  color-scheme: light;
}
html[data-estilo="minimal"] .cielo { display: none; }
html[data-estilo="minimal"] .tarjeta::before, html[data-estilo="minimal"] .tarjeta-brillo { display: none; }
html[data-estilo="minimal"] h1, html[data-estilo="minimal"] h2 { font-weight: 300; letter-spacing: -.02em; }
html[data-estilo="minimal"] .nombre { font-weight: 300; }
html[data-estilo="minimal"] .edad { font-weight: 300; }
html[data-estilo="minimal"] .edad span[aria-hidden] { color: #111; }
html[data-estilo="minimal"] .edad span[aria-hidden]:last-child { color: #6b6b6b; }
html[data-estilo="minimal"] .anillo-luz { animation-duration: 14s; }
html[data-estilo="minimal"] .anillo::before { display: none; }
html[data-estilo="minimal"] .anillo-nucleo { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
html[data-estilo="minimal"] .anillo-nucleo span { font-weight: 300; }
html[data-estilo="minimal"] .tarjeta { box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .35); }

/* ================= piezas claras (Jardín y Minimalista) ================= */
html[data-estilo="floral"] .flotante, html[data-estilo="minimal"] .flotante { background: rgba(255, 255, 255, .94); }
html[data-estilo="floral"] .se-lista, html[data-estilo="minimal"] .se-lista { background: #ffffff; }
html[data-estilo="floral"] .se-lista button, html[data-estilo="minimal"] .se-lista button { color: #222; background: rgba(0, 0, 0, .04); }
html[data-estilo="floral"] .se-lista button[aria-checked="true"], html[data-estilo="minimal"] .se-lista button[aria-checked="true"] { border-color: rgba(0, 0, 0, .55); background: rgba(0, 0, 0, .07); }
html[data-estilo="floral"] .datos > div, html[data-estilo="minimal"] .datos > div { background: rgba(var(--a2-rgb), .04); }
html[data-estilo="floral"] .cuenta div, html[data-estilo="minimal"] .cuenta div { background: rgba(var(--a2-rgb), .05); }
html[data-estilo="floral"] .edad, html[data-estilo="dorado"] .edad, html[data-estilo="dorado"] .cuenta b, html[data-estilo="floral"] .cuenta b { font-variant-numeric: lining-nums tabular-nums; }