/* ============================================================ TEMA OSCURO (es el que se ve por defecto). El tema claro sigue existiendo: el botón del menú (sol/luna) los cambia. Todo se activa con . ============================================================ */ html[data-tema="oscuro"] { color-scheme: dark; --bg: #17111a; --paper: #241a29; --card: #261c2b; --card2: #2e2234; --ink: #f6efe6; --text2: #d8cddd; --muted: #b7aabf; --line: rgba(255,255,255,.13); --coral-d: #ff8b70; --teal: #4fd1cc; --rose: rgba(228,87,63,.2); --lav: #1f1733; } html[data-tema="oscuro"] body { background: var(--bg); color: var(--ink); } html[data-tema="oscuro"] .lead, html[data-tema="oscuro"] .step p, html[data-tema="oscuro"] .feat p { color: var(--muted); } /* menú */ html[data-tema="oscuro"] .nav { background: rgba(23,17,26,.84); } html[data-tema="oscuro"] .nav__links a { color: var(--ink); } .tema-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--ink); background: transparent; transition: transform .4s var(--ease), background .3s; } .tema-btn:hover { background: rgba(127,127,127,.15); transform: rotate(20deg); } .tema-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tema-btn .sol { display: none; } html[data-tema="oscuro"] .tema-btn .sol { display: block; } html[data-tema="oscuro"] .tema-btn .luna { display: none; } .nav .wrap { gap: .6rem; } .logo { flex-shrink: 0; white-space: nowrap; } @media (max-width: 400px) { .logo { font-size: 1.12rem; gap: .45rem; } .logo svg { width: 30px; height: 30px; } .nav__der { gap: .4rem; } .nav .btn--sm { padding: .5rem .9rem; font-size: .88rem; } .tema-btn { width: 40px; height: 40px; } } .nav__der { display: flex; align-items: center; gap: .6rem; } /* botones */ html[data-tema="oscuro"] .btn--ghost { border-color: rgba(246,239,230,.75); color: var(--ink); } html[data-tema="oscuro"] .btn--ghost:hover { background: var(--ink); color: #17111a; } html[data-tema="oscuro"] .btn--light { background: #f6efe6; color: #241a2e; } /* portada */ html[data-tema="oscuro"] .hero { background: radial-gradient(900px 500px at 85% 10%, rgba(122,92,214,.22), transparent 60%), radial-gradient(700px 420px at 5% 0%, rgba(228,87,63,.16), transparent 60%); } html[data-tema="oscuro"] .hero::after { background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), rgba(242,181,68,.13), transparent 60%); } html[data-tema="oscuro"] .chips li { background: var(--card); border-color: var(--line); color: var(--ink); } html[data-tema="oscuro"] .blob { background: linear-gradient(140deg, rgba(228,87,63,.42), rgba(122,92,214,.42)); filter: blur(.5px); } html[data-tema="oscuro"] .phone { box-shadow: 0 24px 40px -18px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.22); } html[data-tema="oscuro"] .estilos .phone { box-shadow: 0 20px 30px -18px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.22); } html[data-tema="oscuro"] .cinta--2 { background: #f6efe6; color: #17111a; } html[data-tema="oscuro"] .cinta--2 span { color: #17111a; } /* cómo funciona */ html[data-tema="oscuro"] .step { background: var(--card); border-color: var(--line); } html[data-tema="oscuro"] .step:nth-child(3)::before { color: #241a2e; } /* cada una, única */ html[data-tema="oscuro"] .uniq { background: linear-gradient(180deg, #2a1a22, var(--bg)); } html[data-tema="oscuro"] .uniq__list li { background: var(--card); color: var(--ink); border-color: var(--coral); } html[data-tema="oscuro"] .uniq__list li:hover { color: #fff; } html[data-tema="oscuro"] .uniq__note { background: var(--card); color: var(--text2); } html[data-tema="oscuro"] .uniq__note strong { color: var(--ink); } html[data-tema="oscuro"] .phone--tuya { color: var(--coral-d); } /* carrusel (ya era oscuro: se separa un poco del resto) */ html[data-tema="oscuro"] .rail-sec { background: #0f0a12; } /* funciones */ html[data-tema="oscuro"] .feat { background: var(--card); border-color: var(--line); } html[data-tema="oscuro"] .feat:hover { box-shadow: 0 18px 30px -20px rgba(0,0,0,.9); } html[data-tema="oscuro"] .feat svg { background: rgba(228,87,63,.2); stroke: #ff8b70; } html[data-tema="oscuro"] .feat:nth-child(3n+2) svg { background: rgba(122,92,214,.25); stroke: #c0adff; } html[data-tema="oscuro"] .feat:nth-child(3n) svg { background: rgba(15,125,123,.3); stroke: #4fd1cc; } html[data-tema="oscuro"] .feat .tag { background: rgba(122,92,214,.25); color: #cdbcff; } /* paquetes */ html[data-tema="oscuro"] .pk-sec { background: linear-gradient(180deg, var(--bg), #241623 40%, var(--bg)); } html[data-tema="oscuro"] .pk { background: var(--card); border-color: var(--line); box-shadow: 0 24px 40px -28px rgba(0,0,0,.9); } html[data-tema="oscuro"] .pk--top { border-color: var(--coral); box-shadow: 0 30px 60px -30px rgba(228,87,63,.6); } html[data-tema="oscuro"] .pk__desc { color: var(--text2); } html[data-tema="oscuro"] .pk li::before { background: rgba(228,87,63,.22); color: #ff8b70; } html[data-tema="oscuro"] .pk--c li::before { background: rgba(15,125,123,.3); color: #4fd1cc; } html[data-tema="oscuro"] .pk--f li::before { background: rgba(255,255,255,.16); color: #fff; } html[data-tema="oscuro"] .pk__precio small, html[data-tema="oscuro"] .pk__pago, html[data-tema="oscuro"] .pk__estilo { color: var(--muted); } /* demo */ html[data-tema="oscuro"] .demo-sec { background: var(--lav); } html[data-tema="oscuro"] .demo__info p { color: var(--text2); } html[data-tema="oscuro"] .tabs { background: var(--card); border-color: var(--line); } html[data-tema="oscuro"] .tabs button { color: var(--ink); } html[data-tema="oscuro"] .tabs button[aria-selected="true"] { background: var(--ink); color: #17111a; } html[data-tema="oscuro"] .demo__phone .phone { box-shadow: 0 34px 50px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.22); } /* eventos y preguntas */ html[data-tema="oscuro"] .ev { background: var(--card); color: var(--ink); border-color: var(--line); } html[data-tema="oscuro"] .ev:hover { border-color: var(--coral); } html[data-tema="oscuro"] .ev small { color: var(--muted); } html[data-tema="oscuro"] .ev--on { background: var(--coral); border-color: var(--coral); color: #fff; } html[data-tema="oscuro"] .ev--on small { color: #ffe0d8; } html[data-tema="oscuro"] .faq details { background: var(--card); border-color: var(--line); } html[data-tema="oscuro"] .faq details[open] { border-color: var(--coral); } html[data-tema="oscuro"] .faq summary::after { background: rgba(228,87,63,.22); color: #ff8b70; } html[data-tema="oscuro"] .faq p { color: var(--text2); } /* cierre y pie ya eran oscuros */ html[data-tema="oscuro"] footer { background: #0f0a12; } html[data-tema="oscuro"] .cierre { background: #21142a; } /* enfoque visible */ html[data-tema="oscuro"] :focus-visible { outline-color: #4fd1cc; }