/* Estilos de la invitación demo. El motor es el mismo; solo cambia la piel. */
@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; }

:root { --chispas: #22e6ff,#8b5cff,#ff3df2,#ffffff,#b6ff5c; }

/* ================= Gala dorada ================= */
html[data-estilo="dorado"] {
  --fondo: #0d0a06; --tinta: #f6efe1; --suave: #d9cba9; --tenue: #b3a37f;
  --cian: #e9cf8a; --violeta: #c9a24e; --magenta: #f3dfae; --lima: #f3dfae;
  --a1-rgb: 233, 207, 138; --a2-rgb: 201, 162, 78; --a3-rgb: 243, 223, 174;
  --vidrio: rgba(28, 21, 10, .62); --borde: rgba(217, 184, 102, .32);
  --neon: linear-gradient(100deg, #f8e8aa 0%, #d9b866 50%, #a8792e 100%);
  --titulos: "Cormorant", Georgia, serif;
  --tintes: 248,232,170|217,184,102|255,248,230;
  --chispas: #f8e8aa,#d9b866,#fff6dc,#a8792e,#ffffff;
}
html[data-estilo="dorado"] .rejilla { display: none; }
html[data-estilo="dorado"] .aurora i:nth-child(1) { background: radial-gradient(circle, rgba(201, 162, 78, .5) 0%, rgba(201, 162, 78, .12) 35%, transparent 68%); }
html[data-estilo="dorado"] .aurora i:nth-child(2) { background: radial-gradient(circle, rgba(140, 90, 40, .45) 0%, transparent 65%); }
html[data-estilo="dorado"] .aurora i:nth-child(3) { background: radial-gradient(circle, rgba(248, 232, 170, .25) 0%, transparent 62%); }
html[data-estilo="dorado"] .boton { color: #1a1206; }
html[data-estilo="dorado"] .boton.sec { color: var(--tinta); }
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); }
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 { -webkit-text-stroke: 0; background: var(--neon); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 18px rgba(201, 162, 78, .35)); animation: none; }
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; --fondo-2: #fdeee6; --tinta: #3b2430; --suave: #634855; --tenue: #7a5f6c;
  --cian: #1f8f88; --violeta: #e0457b; --magenta: #c9a24e; --lima: #1f8f88;
  --a1-rgb: 31, 143, 136; --a2-rgb: 224, 69, 123; --a3-rgb: 201, 162, 78;
  --vidrio: rgba(255, 255, 255, .9); --borde: rgba(224, 69, 123, .24);
  --neon: linear-gradient(100deg, #e0457b 0%, #f07aa0 50%, #c9a24e 100%);
  --titulos: "Cormorant", Georgia, serif;
  --tintes: 224,69,123|31,143,136|201,162,78;
  --chispas: #e0457b,#f7b6c9,#1f8f88,#e9cf8a,#ffffff;
  color-scheme: light;
}
html[data-estilo="floral"] .cielo, html[data-estilo="floral"] .rejilla { display: none; }
html[data-estilo="floral"] .aurora { opacity: .7; }
html[data-estilo="floral"] .aurora i:nth-child(1) { background: radial-gradient(circle, rgba(247, 182, 201, .7) 0%, transparent 65%); }
html[data-estilo="floral"] .aurora i:nth-child(2) { background: radial-gradient(circle, rgba(233, 207, 138, .45) 0%, transparent 65%); }
html[data-estilo="floral"] .aurora i:nth-child(3) { background: radial-gradient(circle, rgba(124, 196, 164, .35) 0%, transparent 65%); }
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; filter: drop-shadow(0 10px 18px rgba(120, 40, 70, .18)); }
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.15; filter: none; }
html[data-estilo="floral"] .nombre .neon-texto { animation: none; }
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 { -webkit-text-stroke: 0; color: var(--violeta); text-shadow: none; animation: none; }
html[data-estilo="floral"] .edad span:last-child { color: var(--magenta); }
html[data-estilo="floral"] .anillo-nucleo span { font-family: "Great Vibes", cursive; font-weight: 400; }

/* ================= Minimal ================= */
html[data-estilo="minimal"] {
  --fondo: #f6f5f2; --fondo-2: #ffffff; --tinta: #111111; --suave: #3d3d3d; --tenue: #5f5f5f;
  --cian: #111111; --violeta: #111111; --magenta: #8a8a8a; --lima: #111111;
  --a1-rgb: 17, 17, 17; --a2-rgb: 17, 17, 17; --a3-rgb: 120, 120, 120;
  --vidrio: #ffffff; --borde: rgba(0, 0, 0, .14);
  --neon: linear-gradient(#111111, #111111);
  --titulos: "Sora", system-ui, sans-serif;
  --tintes: 17,17,17|120,120,120|60,60,60;
  --chispas: #111111,#8a8a8a,#d8d8d8,#111111,#bdbdbd;
  color-scheme: light;
}
html[data-estilo="minimal"] .cielo, html[data-estilo="minimal"] .rejilla, html[data-estilo="minimal"] .aurora { display: none; }
html[data-estilo="minimal"] .vidrio { backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .35); }
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: -.03em; }
html[data-estilo="minimal"] .nombre { font-weight: 300; filter: none; }
html[data-estilo="minimal"] .nombre .neon-texto { animation: none; }
html[data-estilo="minimal"] .edad { font-weight: 200; }
html[data-estilo="minimal"] .edad span { -webkit-text-stroke: 0; color: #111; text-shadow: none; animation: none; }
html[data-estilo="minimal"] .edad span:last-child { color: #8a8a8a; }
html[data-estilo="minimal"] .anillo-luz { animation-duration: 14s; }
html[data-estilo="minimal"] .anillo::before, html[data-estilo="minimal"] .anillo-orbita i { box-shadow: 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"] .sello { color: #fff; box-shadow: none; }
html[data-estilo="minimal"] .boton { box-shadow: none; }
html[data-estilo="minimal"] .boton:hover { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }

/* ================= ajustes comunes de los estilos alternos ================= */
html:not([data-estilo="neon"]) .boton { box-shadow: 0 10px 30px -12px rgba(var(--a2-rgb), .7), 0 0 0 1px rgba(255, 255, 255, .14) inset; }
html:not([data-estilo="neon"]) .boton.sec { background: transparent; box-shadow: 0 0 0 1.5px rgba(var(--a2-rgb), .7) inset; color: var(--tinta); }
html:not([data-estilo="neon"]) .boton.sec:hover { background: rgba(var(--a2-rgb), .1); }
html:not([data-estilo="neon"]) #b-abrir { animation: none; }
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); border-color: rgba(var(--a2-rgb), .18); }
html[data-estilo="floral"] input[type="text"], html[data-estilo="floral"] input[type="email"],
html[data-estilo="minimal"] input[type="text"], html[data-estilo="minimal"] input[type="email"] { background: #fff; }
html[data-estilo="floral"] .error, html[data-estilo="floral"] .error-campo,
html[data-estilo="minimal"] .error, html[data-estilo="minimal"] .error-campo { color: #b0245e; }
html[data-estilo="floral"] input[aria-invalid="true"], html[data-estilo="minimal"] input[aria-invalid="true"] { border-color: #b0245e; }
html[data-estilo="floral"] .a-demo, html[data-estilo="floral"] .sonido, html[data-estilo="floral"] .se-boton,
html[data-estilo="minimal"] .a-demo, html[data-estilo="minimal"] .sonido, html[data-estilo="minimal"] .se-boton { background: rgba(255, 255, 255, .85); }
html[data-estilo="floral"] .se-lista, html[data-estilo="minimal"] .se-lista { background: rgba(255, 255, 255, .96); }
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, .5); background: rgba(0, 0, 0, .07); }
html[data-estilo="floral"] .tarjeta, html[data-estilo="minimal"] .tarjeta { box-shadow: 0 30px 70px -40px rgba(80, 30, 50, .45); }
html[data-estilo="dorado"] .edad, html[data-estilo="floral"] .edad, html[data-estilo="dorado"] .cuenta b, html[data-estilo="floral"] .cuenta b { font-variant-numeric: lining-nums tabular-nums; }
html[data-estilo="floral"] .nombre { line-height: 1; margin-bottom: -6px; }
html[data-estilo="dorado"] .nombre { line-height: 1; }