/* Un tema = un juego de tokens. `data-tema` en lo activa. Añadir un estilo nuevo es añadir un bloque aquí, nada más. */ /* ── XV Años: azul empolvado sobre blanco frío, mucho aire ────── */ [data-tema="xv"] { --inv-fondo: #fcfdff; --inv-fondo-alt: #eef3fa; --inv-texto: #1e2c42; --inv-suave: #64748b; --inv-acento: #43689b; --inv-linea: rgba(30,44,66,.14); --portada-fondo: linear-gradient(165deg, #f4f8fd 0%, #dae6f5 55%, #b8cee8 100%); --portada-texto: #22364f; --hero-brillo: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(67,104,155,.14), transparent 70%); /* Las hojas del libro también en blanco frío, no en crema. */ --libro-paginas: #f7fafd; } /* ── Boda: editorial, arena y tinta ───────────────────────────── */ [data-tema="boda"] { --inv-fondo: #fdfcf9; --inv-fondo-alt: #f2eee5; --inv-texto: #2f2e2a; --inv-suave: #77746c; --inv-acento: #9c8558; --inv-linea: rgba(47,46,42,.14); --portada-fondo: linear-gradient(165deg, #fbfaf7 0%, #efeae0 58%, #ddd5c6 100%); --portada-texto: #3b3a35; --hero-brillo: radial-gradient(ellipse 60% 50% at 50% 4%, rgba(156,133,88,.12), transparent 72%); } /* ── Cumpleaños: nocturno, neón contenido ─────────────────────── */ [data-tema="cumple"] { --inv-fondo: #14131c; --inv-fondo-alt: #1d1b2b; --inv-texto: #f3efff; --inv-suave: #a9a2c4; --inv-acento: #c9a2ff; --inv-linea: rgba(243,239,255,.14); --portada-fondo: linear-gradient(150deg, #191825 0%, #2f2450 48%, #6d3ba8 100%); --portada-texto: #f6efff; --hero-brillo: radial-gradient(ellipse 75% 60% at 50% 0%, rgba(201,162,255,.20), transparent 70%); } /* En oscuro los controles claros de la hoja base no funcionan. */ [data-tema="cumple"] .btn--claro { --btn-texto: var(--inv-texto); --btn-borde: rgba(243,239,255,.3); } [data-tema="cumple"] .btn--claro:hover { --btn-fondo: var(--inv-acento); --btn-texto: #14131c; --btn-borde: var(--inv-acento); } [data-tema="cumple"] .btn:not(.btn--claro):not(.btn--oro) { --btn-fondo: var(--inv-acento); --btn-texto: #14131c; --btn-borde: var(--inv-acento); } [data-tema="cumple"] .musica { background: rgba(29,27,43,.85); color: var(--inv-texto); } [data-tema="cumple"] .campo input, [data-tema="cumple"] .campo select, [data-tema="cumple"] .campo textarea { background: var(--inv-fondo-alt); } [data-tema="cumple"] .rsvp__radio:has(input:checked) { color: #14131c; } /* El carrusel trae flechas blancas con texto oscuro: en tema oscuro se invierten para no ser dos manchas blancas sobre la foto. */ [data-tema="cumple"] .carrusel__nav { background: rgba(29, 27, 43, .82); color: var(--inv-texto); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); } [data-tema="cumple"] .carrusel__nav:hover { background: rgba(41, 38, 60, .95); } [data-tema="cumple"] .carrusel__nav[disabled]:hover { background: rgba(29, 27, 43, .82); } /* ── Open House: la paleta original del proyecto del cliente ───── */ [data-tema="openhouse"] { --inv-fondo: #f4e7d3; --inv-fondo-alt: #ebdbc2; --inv-texto: #3b2a1c; --inv-suave: #7a6449; --inv-acento: #7a5a22; --inv-linea: rgba(59,42,28,.18); }