/* ============================================================================ TEMAS de Carla Masajes --------------------------------------------------------------------------- Dos pieles con las MISMAS variables: · kawaii → rosa Hello Kitty (el favorito de Carla). PREDETERMINADO. · oscuro → la piel negra y dorada original. tema.js pone data-tema en antes de pintar, así que estas reglas ([data-tema]) siempre ganan al :root en línea de cada página. Los nombres viejos (--noche, --oro, --crema…) se conservan como alias para no tener que reescribir el CSS de las páginas. ========================================================================= */ /* ---------------------------- KAWAII (por defecto) ---------------------- */ :root, :root[data-tema="kawaii"] { --fondo: #ffb3d8; /* rosa chicle: el fondo manda */ --sup: #ffffff; --sup2: #ffd9ec; --acento: #c81e6e; /* rosa fuerte, legible sobre el rosa del fondo */ --acento2: #8e2bb8; /* morado para hover y brillos */ --texto: #3a0f2a; /* ciruela casi negro: contraste alto sobre rosa */ --suave: #5c1c43; /* texto secundario, más oscuro para que se lea */ --lila: #b98cff; /* segundo acento (detalles) */ --tinta: #ffffff; /* texto sobre acento sólido */ --borde: rgba(200,30,110,.38); --borde-fino: rgba(200,30,110,.22); --borde-medio: rgba(200,30,110,.30); --borde-fuerte:rgba(200,30,110,.55); --velo: rgba(255,179,216,.92); /* barra superior translúcida */ --velo-modal: rgba(255,179,216,.94); /* fondo de modales y puerta +18 */ --sombra: 0 10px 30px rgba(160,20,90,.20); --fuente-titulo: 'Baloo 2', 'Trebuchet MS', sans-serif; --fuente-texto: 'Quicksand', 'Segoe UI', sans-serif; --titulo-espaciado: .01em; --radio: 20px; /* esquinas: más redondeadas en kawaii */ /* alias de compatibilidad con el CSS ya escrito */ --noche: var(--fondo); --carbon: var(--sup); --carbon2: var(--sup2); --oro: var(--acento); --oro2: var(--acento2); --crema: var(--texto); --piedra: var(--suave); --rosa: var(--acento); --rojo: #ff3d71; --verde: #3fbf8f; } /* ------------------------------- OSCURO --------------------------------- */ :root[data-tema="oscuro"] { --fondo: #0d0a12; --sup: #161020; --sup2: #1f1729; --acento: #d9a441; --acento2: #e9c46a; --texto: #f0e6d8; --suave: #9a8fa5; --lila: #c94f7c; --tinta: #1d1508; --borde: rgba(217,164,65,.25); --borde-fino: rgba(217,164,65,.14); --borde-medio: rgba(217,164,65,.25); --borde-fuerte:rgba(217,164,65,.40); --velo: rgba(13,10,18,.85); --velo-modal: rgba(10,7,14,.90); --sombra: 0 20px 60px rgba(0,0,0,.5); --fuente-titulo: 'Bebas Neue', sans-serif; --fuente-texto: 'Raleway', sans-serif; --titulo-espaciado: .06em; --radio: 16px; --noche: var(--fondo); --carbon: var(--sup); --carbon2: var(--sup2); --oro: var(--acento); --oro2: var(--acento2); --crema: var(--texto); --piedra: var(--suave); --rosa: #c94f7c; --rojo: #e0445c; --verde: #4fbf7a; } /* ------------------------- detalles propios del tema -------------------- */ /* Lluvia de corazoncitos MUY sutil, pintada en el fondo del propio body. OJO: NO usar un ::before a pantalla completa + "body > *{position:relative}" para colocarlo: esa regla pisa el position:sticky de

(más especificidad) y la barra deja de quedarse arriba al hacer scroll. */ /* El fondo vive en y el queda TRANSPARENTE: así el rastro del zorro (un lienzo con z-index -1 dentro del body) se pinta por encima del fondo y por debajo del contenido. */ :root[data-tema="kawaii"] body { background-color: transparent; } :root[data-tema="kawaii"] { font-weight: 500; /* el texto fino se lee peor sobre claro */ background-color: var(--fondo); /* al revés: fondo rosa y los corazones BLANCOS */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M20 30c0-4 3-7 7-7 2.5 0 4 1.2 5 2.7C33 24.2 34.5 23 37 23c4 0 7 3 7 7 0 7-12 13-12 13S20 37 20 30z' fill='%23ffffff' fill-opacity='.45'/%3E%3Cpath d='M60 68c0-2.6 2-4.6 4.6-4.6 1.6 0 2.6.8 3.3 1.8.7-1 1.7-1.8 3.3-1.8C73.8 63.4 76 65.4 76 68c0 4.6-8 8.6-8 8.6S60 72.6 60 68z' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E"); } /* Los corazones se quedan QUIETOS al hacer scroll: sube el contenido, no el fondo. Se hace con una capa fija DETRÁS de todo (z-index -2, por debajo del lienzo del rastro del zorro, que va en -1) y NO con background-attachment: fixed, que descolocaba la composición de la página al desplazarse. OJO: la capa es un ::before del BODY, sin tocar el resto de elementos (una regla tipo «body > * {position:relative}» rompería el

pegajoso). */ :root[data-tema="kawaii"] body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-color: var(--fondo); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M20 30c0-4 3-7 7-7 2.5 0 4 1.2 5 2.7C33 24.2 34.5 23 37 23c4 0 7 3 7 7 0 7-12 13-12 13S20 37 20 30z' fill='%23ffffff' fill-opacity='.45'/%3E%3Cpath d='M60 68c0-2.6 2-4.6 4.6-4.6 1.6 0 2.6.8 3.3 1.8.7-1 1.7-1.8 3.3-1.8C73.8 63.4 76 65.4 76 68c0 4.6-8 8.6-8 8.6S60 72.6 60 68z' fill='%23ffffff' fill-opacity='.35'/%3E%3C/svg%3E"); } /* en queda solo el color (evita el destello blanco antes de pintar) */ :root[data-tema="kawaii"] { background-image: none; } /* el lacito de los títulos, en blanco para que resalte sobre el rosa */ :root[data-tema="kawaii"] .titulo::after { color: #fff; } :root[data-tema="kawaii"] h1, :root[data-tema="kawaii"] h2, :root[data-tema="kawaii"] h3 { font-weight: 700; } /* Lacito de Hello Kitty junto a los títulos de sección (decorativo). */ :root[data-tema="kawaii"] .titulo::after { content: " ♡"; color: var(--acento2); } /* LEGIBILIDAD del modo rosa: el texto va sobre un fondo rosa CON corazones, así que se le pone un HALO blanco (un bordeado suave) que lo despega del fondo y de los corazones. Se hereda a todo desde el body. Los títulos y el texto en rosa/morado (que sobre rosa contrastan poco) son los que más lo agradecen. */ :root[data-tema="kawaii"] body { text-shadow: 0 0 2px rgba(255,255,255,.85), 0 1px 1px rgba(255,255,255,.9); } :root[data-tema="kawaii"] h1, :root[data-tema="kawaii"] h2, :root[data-tema="kawaii"] h3, :root[data-tema="kawaii"] .logo, :root[data-tema="kawaii"] .codigo, :root[data-tema="kawaii"] .nivelGrande { /* en los títulos, un bordeado más marcado (4 direcciones) para que canten */ text-shadow: 1px 1px 0 rgba(255,255,255,.95), -1px 1px 0 rgba(255,255,255,.95), 1px -1px 0 rgba(255,255,255,.95), -1px -1px 0 rgba(255,255,255,.95), 0 0 3px rgba(255,255,255,.7); } /* dentro de botones/pastillas de color SÓLIDO el texto es blanco: el halo blanco lo emborrona, así que ahí se quita */ :root[data-tema="kawaii"] .btnOro, :root[data-tema="kawaii"] .btnOro *, :root[data-tema="kawaii"] .cta, :root[data-tema="kawaii"] .pest.activa, :root[data-tema="kawaii"] .chapa.si, :root[data-tema="kawaii"] .marca, :root[data-tema="kawaii"] button[style*="gradient"] { text-shadow: none; } /* ---------------------------- selector de tema -------------------------- */ /* El botón lo inyecta tema.js en la barra de navegación de cada página. */ #btnTema { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 1.05rem; line-height: 1; padding: 4px 6px; border-radius: 999px; color: var(--acento); transition: transform .15s, color .15s; } #btnTema:hover { transform: scale(1.15) rotate(-8deg); color: var(--acento2); } /* ---------------- LUZ LED alrededor de los botones de RESERVA -------------- */ /* Una luz recorre el borde sin parar, para llamar la atención. Va con los colores del tema (rosa/morado en kawaii, oro en oscuro). Se aplica poniendo la clase .ledReserva en el botón. */ @property --ledAng { syntax: ''; initial-value: 0deg; inherits: false; } .ledReserva { position: relative; z-index: 0; isolation: isolate; } .ledReserva::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; padding: 3px; /* un punto de luz brillante que da la vuelta; el resto, transparente */ background: conic-gradient(from var(--ledAng), transparent 0deg, transparent 200deg, var(--acento2) 255deg, #fff 288deg, var(--acento) 320deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 4px var(--acento)) drop-shadow(0 0 9px var(--acento2)); animation: ledReservaGira 2.3s linear infinite; pointer-events: none; } @keyframes ledReservaGira { to { --ledAng: 360deg; } } @media (prefers-reduced-motion: reduce) { .ledReserva::before { animation: none; opacity: .6; } } /* Navegadores sin @property: la vuelta no anima, así que en su lugar el botón LATE con un halo (mismo objetivo: llamar la atención). */ @supports not (background: conic-gradient(from var(--ledAng), red 0deg, red 360deg)) { .ledReserva::before { display: none; } .ledReserva { animation: ledReservaLate 1.6s ease-in-out infinite; } @keyframes ledReservaLate { 0%, 100% { box-shadow: 0 0 6px var(--acento), 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 18px var(--acento2), 0 0 0 2px rgba(255,255,255,.5); } } }