/* ══════════════════════════════════════════════════════════════════════ cvm-tema.css — el sistema de color de los tres cvm+. ── El problema que resuelve ── Los tres verticales usaban EXACTAMENTE la misma escala de grises (#0A0A0A, #141414, #1A1A1A, #2A2A2A) y se diferenciaban en una sola variable de acento. Medical y retail eran, literalmente, la misma página con `--teal` cambiado. Por eso la experiencia se sentía monótona: no era falta de color, era que **los tres eran el mismo gris**. Un gris puro (saturación 0) además se lee muerto en pantalla. Todo estudio de marca serio tinta sus neutros: el "negro" de una marca clínica no es el mismo negro que el de una marca de consumo, aunque los dos midan 4 % de luminosidad. ── El concepto: cada industria tiene su temperatura ── · medical — FRÍO. Neutros tintados de cian. Sensación de aire, de limpio, de precisión. Acento teal, apoyo azul. · retail — CÁLIDO. Neutros tintados de ámbar. Sensación de góndola, de movimiento, de plata circulando. Acento naranja, apoyo magenta. · founder — ELÉCTRICO. Neutros tintados de violeta. Sensación de madrugada trabajando. Acento morado, apoyo amarillo. La saturación de los neutros va entre 15 % y 28 %, y siempre por debajo del 25 % de luminosidad. Es la franja donde el ojo percibe temperatura sin que parezca un monitor descalibrado. ── Cómo se usa ── Se pone `data-v="medical|retail|founder"` en el de la página. Como todo se define sobre las MISMAS variables que ya usaban las hojas (`--negro`, `--carbon`, `--panel`…), no hay que tocar ni una regla existente: la página entera cambia de temperatura sola. ══════════════════════════════════════════════════════════════════════ */ :root { /* cvm+ sin vertical: la marca troncal. Violeta muy contenido. */ --ac: #7C3AED; --ac2: #FFD60A; --aura1: rgba(124, 58, 237, .16); --aura2: rgba(255, 214, 10, .07); } /* ─────────────────────────────────────────────────────────── medical */ html[data-v="medical"] { --negro: #070C0E; --carbon: #0D1519; --panel: #121B1F; --panel2: #19242A; --linea: #24333A; --linea2: #2F424A; --gris: #93A5AC; --gris2: #66787F; --ac: #2DD4BF; /* teal — el que ya tenía */ --ac2: #4A9EFF; /* azul profundo: el acorde, no la nota suelta */ --aura1: rgba(45, 212, 191, .15); --aura2: rgba(74, 158, 255, .10); } /* ──────────────────────────────────────────────────────────── retail */ html[data-v="retail"] { --negro: #0D0908; --carbon: #16100C; --panel: #1C1511; --panel2: #251C16; --linea: #33271F; --linea2: #423428; --gris: #B0A093; --gris2: #7E7062; --ac: #FF9F0A; /* naranja de góndola */ --ac2: #FF5E9F; /* magenta: lo que hace que no sea solo "naranja" */ --aura1: rgba(255, 159, 10, .14); --aura2: rgba(255, 94, 159, .09); } /* ─────────────────────────────────────────────────────────── founder */ html[data-v="founder"] { --negro: #09070D; --carbon: #110D19; --panel: #17121F; --panel2: #1E1828; --linea: #2A2136; --linea2: #382D47; --gris: #A29AB4; --gris2: #726A85; --ac: #9D5CFF; --ac2: #FFD60A; --aura1: rgba(157, 92, 255, .17); --aura2: rgba(255, 214, 10, .08); } /* ══════════════════════════════════════════════════════════════════════ PROFUNDIDAD Lo segundo que hacía sentir plana la pantalla: todo estaba en el mismo plano. Fondo liso, tarjeta lisa, borde de 1 px. Sin una sola fuente de luz, sin una sola sombra, sin un solo gradiente. Eso es lo que se lee como "sin concepto de diseñador". El aura es UNA fuente de luz difusa arriba a la izquierda y un rebote abajo a la derecha. Va en un pseudo-elemento fijo detrás de todo, así que no cuesta un solo nodo del DOM y no interfiere con nada. ══════════════════════════════════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(70ch 60ch at 12% -8%, var(--aura1), transparent 62%), radial-gradient(60ch 55ch at 92% 108%, var(--aura2), transparent 60%); } /* Trama fina. Al 2 % no se ve como cuadrícula: se siente como textura, y es lo que evita que un fondo oscuro grande se lea como un vacío. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.020) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.020) 1px, transparent 1px); background-size: 68px 68px; /* Se desvanece hacia abajo: arriba da estructura, abajo estorbaría. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 65%); mask-image: linear-gradient(to bottom, #000 0%, transparent 65%); } @media (prefers-reduced-transparency: reduce) { body::before, body::after { display: none; } } /* ══════════════════════════════════════════════════════════════════════ LOS TRES PILARES Esta banda se agregó al HTML sin su CSS: salía como tres líneas de texto suelto, sin caja, sin color y sin borde —`display:inline`, fondo transparente, cero padding—. Era, textualmente, lo más plano de la página. Cada pilar lleva el color de SU vertical, no el de la página. Es el único lugar donde los tres se ven juntos, y es ahí donde la diferencia de temperatura tiene que quedar clara de un vistazo. ══════════════════════════════════════════════════════════════════════ */ .pilares { padding: 74px 0; position: relative; } @media (max-width: 720px) { .pilares { padding: 52px 0; } } .pilares-cab { margin-bottom: 26px; } .pilares-cab .et { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--gris2, #6B6B6B); display: block; margin-bottom: 9px; } .pilares-cab h2 { font-size: clamp(26px, 4.6vw, 40px); font-weight: 900; letter-spacing: -1.4px; text-transform: lowercase; line-height: 1.05; margin: 0; } .pilares-cab h2 em { font-style: normal; color: var(--amarillo, #FFD60A); } /* La línea que ata las tres representaciones de lo mismo — el menú, el diagnóstico del hero y esta banda. Sin ella, nadie conecta que «Salud» y «cvm+ medical» son la misma puerta y el sitio se lee como si vendiera nueve cosas en vez de tres. */ .pilares-sub { font-size: 14.5px; line-height: 1.6; color: var(--gris, #9A9A9A); max-width: 62ch; margin-top: 10px; } .pilares-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } /* SALUD-OCULTO · con dos puertas en vez de tres, la rejilla de tres dejaba una columna vacía a la derecha. Un hueco así se lee como que falta algo, que es justo lo que no queremos que se lea. Al volver a encender cvm+ medical se quita la clase `dos` del HTML y esta regla deja de aplicar sola. */ .pilares-g.dos { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 0 auto; } @media (max-width: 860px) { .pilares-g, .pilares-g.dos { grid-template-columns: 1fr; } } .pil { --p: var(--morado, #7C3AED); position: relative; display: flex; flex-direction: column; gap: 7px; padding: 22px 22px 18px; border-radius: 16px; background: var(--panel, #1A1A1A); border: 1px solid var(--linea, #2A2A2A); text-decoration: none; color: inherit; overflow: hidden; isolation: isolate; transition: transform .22s cubic-bezier(.22,1,.36,1), border-color .22s, box-shadow .22s; } /* El resplandor de la tarjeta. Vive en un pseudo-elemento con opacidad 0 y se enciende al pasar: animar `opacity` no repinta el layout, animar el `background` sí. */ .pil::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 8% 0%, color-mix(in srgb, var(--p) 22%, transparent), transparent 68%); opacity: .45; transition: opacity .22s; } /* La barra de color arriba: la firma de cada vertical. */ .pil::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--p), transparent 78%); } .pil:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--p) 55%, var(--linea, #2A2A2A)); box-shadow: 0 18px 44px color-mix(in srgb, var(--p) 22%, transparent); } .pil:hover::before { opacity: 1; } .pil .pt { width: 9px; height: 9px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p) 18%, transparent); margin-bottom: 4px; } .pil b { font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: var(--blanco, #FAFAFA); line-height: 1.15; } .pil .d { font-size: 13.5px; line-height: 1.55; color: var(--gris, #9A9A9A); flex: 1; } .pil .go { font-size: 13px; font-weight: 700; color: var(--p); margin-top: 8px; letter-spacing: -.1px; transition: transform .22s; } .pil:hover .go { transform: translateX(3px); } /* Cada pilar con su temperatura, sin importar en qué página esté. */ .pil.med { --p: #2DD4BF; } .pil.ret { --p: #FF9F0A; } .pil.fou { --p: #9D5CFF; } /* Navegadores sin color-mix: el diseño no puede depender de él. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .pil::before { background: none; } .pil:hover { border-color: var(--linea2, #343434); box-shadow: 0 18px 44px rgba(0,0,0,.5); } .pil .pt { box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .pil, .pil::before, .pil .go { transition: none; } .pil:hover { transform: none; } } /* Con el dedo no hay hover: el estado de reposo tiene que verse ya completo. */ @media (pointer: coarse) { .pil::before { opacity: .8; } .pil { padding: 20px; } }