/* ============================================================ TEMA PLATINO — variante en blanco, negro y gris platino. No sustituye a nada: se carga DESPUÉS de estilo.css y solo pinta cuando algún antepasado lleva data-tema="platino" (normalmente el de la página). Sin ese atributo, la web sigue amarilla y negra. Para activarlo en una página: Para volver al amarillo: quita el atributo. La idea: en monocromo el acento no puede ser un color, así que lo hace el contraste. El botón principal es negro sobre fondo claro y blanco sobre fondo negro (como en las páginas de producto de Apple), y la frase destacada del titular pasa a un degradado de grafito. ============================================================ */ [data-tema="platino"] { /* Plateado, no gris cemento: los grises llevan un punto de azul. Es lo que separa un gris neutro de una superficie metálica. */ --platino: #c4cad4; --platino-claro: #dce1e9; --platino-oscuro: #949cab; /* Las superficies y las líneas se enfrían con el mismo criterio */ --gris: #eef1f5; --gris-2: #dde2e9; --linea: rgba(22, 32, 51, 0.13); --tinta-2: #6a7180; --tinta-3: #8b93a1; /* Los tres tokens de marca se reciclan en clave platino. Así, cualquier sitio que use var(--amarillo) y se me haya pasado sale gris, no amarillo. */ --amarillo: var(--platino); --amarillo-2: var(--platino-oscuro); --amarillo-tinta: var(--tinta-2); } /* ---------- Logo ---------- */ /* El logo del archivo es amarillo; se desatura para no romper el monocromo */ [data-tema="platino"] .marca .logo-img { filter: grayscale(1) contrast(1.05); } /* ---------- Frase destacada del titular ---------- */ /* Grafito con brillo: todos los tonos lo bastante oscuros para leerse en blanco */ [data-tema="platino"] .destaca { background: linear-gradient(100deg, #4a4a4f 0%, #1d1d1f 45%, #57575c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Sobre negro se invierte: titanio claro */ [data-tema="platino"] .oscuro .destaca { background: linear-gradient(100deg, #ffffff 0%, var(--platino) 50%, var(--platino-oscuro) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Etiquetas ---------- */ [data-tema="platino"] .chip { background: var(--gris); color: var(--tinta-2); border-color: var(--platino); } [data-tema="platino"] .chip .punto { background: var(--tinta-3); } [data-tema="platino"] .oscuro .chip { background: rgba(255, 255, 255, 0.1); color: var(--platino); border-color: rgba(255, 255, 255, 0.22); } [data-tema="platino"] .oscuro .chip .punto { background: var(--platino); } /* ---------- Botón principal: negro en claro, blanco en oscuro ---------- */ [data-tema="platino"] .btn-amarillo { background: var(--tinta); color: #fff; } [data-tema="platino"] .btn-amarillo:hover { background: #3a3a3d; } [data-tema="platino"] .oscuro .btn-amarillo { background: #fff; color: var(--tinta); } [data-tema="platino"] .oscuro .btn-amarillo:hover { background: var(--platino-claro); } [data-tema="platino"] .oscuro .enlace-mas { color: #fff; } /* ---------- Numerales y fichas ---------- */ [data-tema="platino"] .numeral { color: var(--tinta-3); } /* ---------- Iconos de las capacidades ---------- */ [data-tema="platino"] .especs .esp .ico { background: var(--gris); color: var(--tinta); } [data-tema="platino"] .oscuro .especs .esp .ico { background: rgba(255, 255, 255, 0.1); color: #fff; } /* ---------- Tira de capacidades ---------- */ [data-tema="platino"] .tira .item .circulo { background: var(--tinta); color: #fff; } /* ---------- Formularios ---------- */ [data-tema="platino"] .campo input:focus, [data-tema="platino"] .otro-input:focus { border-color: var(--tinta-3); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } [data-tema="platino"] .avatar-op.sel { border-color: var(--tinta); background: var(--platino-claro); } /* ---------- Confirmaciones ---------- */ [data-tema="platino"] .gracias-msg .tick { background: var(--tinta); color: #fff; } /* ---------- Huecos por rellenar (política de privacidad) ---------- */ [data-tema="platino"] .hueco { background: var(--platino-claro); border-bottom-color: var(--tinta-3); } /* ============================================================ Piezas propias de páginas concretas. Van aquí para no tener que duplicar el tema en cada archivo; los selectores que no existan en una página simplemente no pintan nada. ============================================================ */ /* ---------- Portada: resplandor detrás del titular ---------- */ [data-tema="platino"] .hero::before { background: radial-gradient(closest-side, rgba(210, 210, 215, 0.62), rgba(210, 210, 215, 0.16) 52%, transparent 74%); } /* ---------- Botón de play del vídeo del taller ---------- */ [data-tema="platino"] .video-ph .play { background: #fff; color: var(--tinta); } /* ---------- Estrellas de los testimonios ---------- */ [data-tema="platino"] .estrellas { color: var(--tinta-2); } /* ---------- Móvil del setter ---------- */ [data-tema="platino"] .escena::after { background: radial-gradient(closest-side, rgba(210, 210, 215, 0.26), transparent 72%); } [data-tema="platino"] .chat-av { background: var(--tinta); color: #fff; } /* El "en línea" y el visto de la llamada agendada dejan de ser verdes: el encargo era blanco, negro y platino. Si se quieren recuperar, basta con borrar estas dos reglas. */ [data-tema="platino"] .chat-top div span { color: var(--tinta-3); } [data-tema="platino"] .flotante .tick { background: var(--tinta); color: #fff; } [data-tema="platino"] .escribiendo i { background: var(--platino); } [data-tema="platino"] .chat-bot .enviar { background: var(--tinta); color: #fff; } /* ---------- Frase de refuerzo del cierre ---------- */ [data-tema="platino"] .oscuro .band-sub { color: var(--platino); } /* ---------- Página de "formulario enviado" ---------- */ [data-tema="platino"] .principal::before { background: radial-gradient(closest-side, rgba(210, 210, 215, 0.6), rgba(210, 210, 215, 0.15) 52%, transparent 74%); } [data-tema="platino"] .check-big { background: var(--tinta); color: #fff; } [data-tema="platino"] .paso .num { background: var(--tinta); color: #fff; } /* ============================================================ Jerarquía del titular en monocromo. Con el amarillo, la frase destacada resaltaba por color. Sin color, si dejamos el resto en negro, lo destacado queda MÁS claro que lo demás y resta énfasis en vez de darlo. Así que se invierte: el arranque del titular baja a gris y la frase destacada se queda con el negro. (:has() no está en navegadores antiguos; ahí el titular se ve todo oscuro, que es exactamente como está hoy: degrada sin romperse.) ============================================================ */ [data-tema="platino"] .t-hero:has(.destaca), [data-tema="platino"] .t-seccion:has(.destaca), [data-tema="platino"] .t-sub:has(.destaca) { color: var(--tinta-2); } [data-tema="platino"] .oscuro .t-hero:has(.destaca), [data-tema="platino"] .oscuro .t-seccion:has(.destaca), [data-tema="platino"] .oscuro .t-sub:has(.destaca) { color: var(--platino-oscuro); } /* Y la frase destacada se lleva el extremo del contraste */ [data-tema="platino"] .destaca { background: linear-gradient(100deg, #1d1d1f 0%, #000000 45%, #2e2e32 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-tema="platino"] .oscuro .destaca { background: linear-gradient(100deg, #ffffff 0%, #ffffff 45%, var(--platino) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ============================================================ Brillo de metal cepillado. Un gris plano se lee como gris; lo que lo convierte en plateado es que la luz no le caiga uniforme. Las bandas grises pasan a un degradado muy suave en diagonal, y los bordes de las tarjetas llevan un filo claro arriba, como el canto de una pieza de aluminio. ============================================================ */ [data-tema="platino"] .seccion.gris { background: linear-gradient(168deg, #f7f9fb 0%, #e7ebf1 46%, #f2f4f8 100%); } [data-tema="platino"] .pie { background: linear-gradient(168deg, #f2f4f8 0%, #e9edf2 100%); } /* Filo de luz en la parte de arriba de las piezas claras */ [data-tema="platino"] .tarjeta, [data-tema="platino"] .caso, [data-tema="platino"] .video-box { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 12px rgba(22, 32, 51, 0.07); } [data-tema="platino"] .caso:hover, [data-tema="platino"] .tarjeta-hover:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 16px 44px rgba(22, 32, 51, 0.14); } /* Resplandor del hero y halo del móvil, en plateado */ [data-tema="platino"] .hero::before, [data-tema="platino"] .principal::before { background: radial-gradient(closest-side, rgba(196, 202, 212, 0.72), rgba(196, 202, 212, 0.2) 52%, transparent 74%); } [data-tema="platino"] .escena::after { background: radial-gradient(closest-side, rgba(196, 202, 212, 0.3), transparent 72%); } /* Y la propia frase destacada coge el reflejo: grafito con un pase de luz */ [data-tema="platino"] .destaca { background: linear-gradient(100deg, #2b3040 0%, #0d1018 38%, #3d4455 62%, #14181f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Sobre negro, la frase destacada va en blanco puro: el degradado metálico la dejaba con tramos grises y perdía fuerza justo donde va la afirmación fuerte. El arranque del titular sigue en gris, así que el contraste entre las dos mitades es el máximo posible. */ [data-tema="platino"] .oscuro .destaca { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: #fff; } /* ---------- "Prueba el setter en directo" sobre la banda negra ---------- Pasa de píldora de contorno a píldora blanca con letra negra. Nota: así queda igual que el botón principal de la banda de cierre; no chocan porque están en secciones distintas, pero la jerarquía entre acción principal y secundaria deja de notarse por la forma del botón. */ [data-tema="platino"] .oscuro .btn-linea { background: #fff; color: var(--tinta); border-color: #fff; } [data-tema="platino"] .oscuro .btn-linea:hover { background: var(--platino-claro); border-color: var(--platino-claro); } /* ---------- Capa de sonido del vídeo del taller ---------- */ [data-tema="platino"] .capa-icono { background: #fff; color: var(--tinta); } [data-tema="platino"] .video-ph a { color: #fff; text-decoration: underline; } /* ---------- "Prueba el setter en directo" sobre fondo claro ---------- Deja de ser una píldora de contorno y pasa a ir rellena en plateado con la letra negra, para que resalte al lado del botón principal en vez de desaparecer sobre el blanco. La versión sobre banda negra (más arriba en este archivo) es blanca, y le gana en especificidad, así que no se pisan. */ [data-tema="platino"] .btn-linea { background: var(--platino); color: var(--tinta); border-color: transparent; } [data-tema="platino"] .btn-linea:hover { background: var(--platino-oscuro); border-color: transparent; }