@import url('fonts.css'); /* fuentes auto-hospedadas (Google Fonts), sin CDN */ /* ========================================================================== Arrullo — Sistema de 3 temas pastel (Fase 2, propuestas de diseno completas) Se activan con data-tema en (lo pone assets/js/temas.js leyendo ?tema=). Cada tema tiene paleta + TIPOGRAFIA propia. Cargar SIEMPRE despues de styles.css. Tema 1 — ROSÉ : rosa/durazno calido. Tipografia Quicksand + Nunito. Tema 2 — CIELO : celeste + menta, fresco. Tipografia Fredoka + Nunito. Tema 3 — LAVANDA : lila/violeta suave, elegante. Tipografia Lora + Nunito. ========================================================================== */ /* Descripcion de mood (oculta; la usa la Fase 2 / lectores) */ .tema-mood { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------- Selector flotante de tema ---------------- */ .tema-switch { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--borde); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(122, 100, 120, 0.18); } .tema-switch .tema-lbl { font-size: .68rem; color: var(--muted); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 0 4px; } .tema-switch button { width: 30px; height: 30px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--borde); background: #fff; color: var(--titulo); font-weight: 800; font-family: inherit; font-size: .9rem; transition: transform .12s ease; } .tema-switch button:hover { transform: translateY(-2px); } .tema-switch button.on { background: var(--cta); color: #fff; border-color: transparent; } /* ========================================================================== TEMA 1 — ROSÉ (explicito; coincide con los valores por defecto de styles.css) ========================================================================== */ html[data-tema="1"] { --crema: #FFF9F5; --crema-2: #FDF3F7; --blanco: #FFFFFF; --rosa: #FFB6C1; --rosa-suave: #FFF0F5; --lavanda: #E6E6FA; --lavanda-2: #EFEBFB; --menta: #CDEBE0; --salvia: #A9D4C2; --amarillo: #FBE7A8; --cta: #E05C7E; --cta-hover: #C9426A; --coral: #F0876F; --texto: #4A414D; --titulo: #3A2E3F; --muted: #9B8F98; --borde: #F1E4EC; --fuente: 'Nunito', 'Segoe UI', system-ui, sans-serif; --fuente-titulo: 'Quicksand', 'Trebuchet MS', sans-serif; } html[data-tema="1"] h1, html[data-tema="1"] h2, html[data-tema="1"] .hero h1 { font-weight: 700; } /* ========================================================================== TEMA 2 — CIELO (celeste + menta; fresco, limpio) ========================================================================== */ html[data-tema="2"] { --crema: #F4FAFF; --crema-2: #EDF5FC; --blanco: #FFFFFF; --rosa: #BBDDF3; --rosa-suave: #E9F3FB; --lavanda: #DCEBF7; --lavanda-2: #E7F1FA; --menta: #CDEBE0; --salvia: #86C6B2; --amarillo: #FBE7A8; --cta: #2F80B8; --cta-hover: #24678f; --coral: #5FB2D8; --texto: #35424E; --titulo: #213241; --muted: #7A8894; --borde: #DCEAF3; --fuente: 'Nunito', 'Segoe UI', system-ui, sans-serif; --fuente-titulo: 'Fredoka', 'Trebuchet MS', sans-serif; } html[data-tema="2"] h1, html[data-tema="2"] h2, html[data-tema="2"] .hero h1, html[data-tema="2"] .seccion-titulo h2, html[data-tema="2"] .pagina-cabecera h1 { font-weight: 600; } html[data-tema="2"] .hero { background: radial-gradient(760px 420px at 82% -5%, rgba(95, 178, 216, .30), transparent 60%), radial-gradient(620px 380px at 8% 110%, rgba(205, 235, 224, .55), transparent 60%); } html[data-tema="2"] .pagina-cabecera { background: radial-gradient(640px 300px at 50% -25%, rgba(95, 178, 216, .28), transparent 60%); } html[data-tema="2"] .confianza-item .ico svg, html[data-tema="2"] .valor-card .ico svg { stroke: var(--cta); } /* ========================================================================== TEMA 3 — LAVANDA (lila/violeta suave; sonador) ========================================================================== */ html[data-tema="3"] { --crema: #FAF7FF; --crema-2: #F3EEFB; --blanco: #FFFFFF; --rosa: #D9C9F0; --rosa-suave: #F2ECFB; --lavanda: #E6E0F7; --lavanda-2: #ECE6F9; --menta: #E2D8F3; --salvia: #B09AD8; --amarillo: #F3E2B8; --cta: #7C5BC0; --cta-hover: #63489f; --coral: #C29CE4; --texto: #403A4D; --titulo: #2C2540; --muted: #8B83A0; --borde: #E8E0F3; --fuente: 'Nunito', 'Segoe UI', system-ui, sans-serif; --fuente-titulo: 'Lora', Georgia, serif; } /* Lavanda: titulares serif elegante Lora (mood sonador/editorial) */ html[data-tema="3"] h1, html[data-tema="3"] h2, html[data-tema="3"] .hero h1, html[data-tema="3"] .seccion-titulo h2, html[data-tema="3"] .pagina-cabecera h1 { font-weight: 600; } html[data-tema="3"] .hero { background: radial-gradient(760px 420px at 82% -5%, rgba(124, 91, 192, .26), transparent 60%), radial-gradient(620px 380px at 8% 110%, rgba(217, 201, 240, .55), transparent 60%); } html[data-tema="3"] .pagina-cabecera { background: radial-gradient(640px 300px at 50% -25%, rgba(124, 91, 192, .24), transparent 60%); } html[data-tema="3"] .confianza-item .ico svg, html[data-tema="3"] .valor-card .ico svg { stroke: var(--cta); }