/* ============================================================ VMED — Pagina publica Solo la portada y lo que ve quien todavia no tiene cuenta. El panel del paciente sigue en cocora.css + vmed.css y aqui no se toca ninguna de sus reglas: esta hoja se carga UNICAMENTE desde _LayoutPublico. Todo el color sale de los tokens de COCORA, asi que el tema claro funciona sin escribir una segunda paleta. Las pocas superposiciones que estaban calculadas sobre el fondo oscuro se corrigen al final, bajo .tema-claro. ============================================================ */ body.publico { font-size: 15px; } .pub-ancho { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* ===================== CABECERA ===================== */ .pub-cab { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); } .pub-cab-fila { display: flex; align-items: center; gap: 26px; height: 68px; } /* .marca viene de COCORA con el borde y el relleno del sidebar. */ .pub-cab .marca, .pub-pie .marca { border: 0; padding: 0; min-height: 0; } .pub-cab .marca:hover { color: var(--text); } .pub-nav { display: flex; gap: 22px; margin-left: auto; font-size: 13.5px; font-weight: 500; } .pub-nav a { color: var(--muted); } .pub-nav a:hover { color: var(--text); } .pub-cab-acciones { display: flex; align-items: center; gap: 9px; } /* ===================== PORTADA ===================== */ .pub-hero { position: relative; padding: 88px 0 72px; overflow: hidden; } /* El halo del de COCORA queda detras del sidebar; aqui la portada necesita el suyo, centrado sobre el titular. */ .pub-hero::before { content: ''; position: absolute; inset: -40% 0 auto 0; height: 720px; z-index: -1; background: radial-gradient(620px 340px at 22% 42%, rgba(34, 197, 94, .16), transparent 62%), radial-gradient(760px 400px at 78% 26%, rgba(6, 182, 212, .17), transparent 62%); pointer-events: none; } .pub-eyebrow { display: inline-block; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; } .pub-hero h1 { font-family: var(--fuente-display); font-size: clamp(32px, 5.4vw, 56px); font-weight: 800; line-height: 1.08; letter-spacing: -.5px; margin: 0 0 20px; max-width: 17ch; } .pub-lead { color: var(--muted); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.65; max-width: 62ch; margin: 0; } .pub-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; } .pub-nota { color: var(--dim); font-size: 12.5px; margin: 16px 0 0; max-width: 52ch; } /* ===================== CIFRAS ===================== */ .pub-cifras { padding: 10px 0 20px; } .pub-cifras .kpi .valor { font-size: clamp(21px, 2.6vw, 28px); overflow-wrap: anywhere; } .pub-cifras .kpi .pie { line-height: 1.45; } /* ===================== SECCIONES ===================== */ .pub-seccion { padding: 74px 0; } .pub-alterna { background: var(--panel2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pub-titulo { max-width: 68ch; margin-bottom: 42px; } .pub-seccion h2, .pub-cierre h2 { font-family: var(--fuente-display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; line-height: 1.18; letter-spacing: -.3px; margin: 0 0 14px; } .pub-titulo p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; } /* ===================== TARJETAS ===================== */ .pub-tarjetas { gap: 18px; } .pub-tarjeta { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radio); padding: 24px 22px; transition: transform .16s, border-color .16s; } .pub-tarjeta:hover { transform: translateY(-2px); border-color: var(--border2); } .pub-tarjeta h3 { font-family: var(--fuente-display); font-size: 16px; font-weight: 700; margin: 15px 0 8px; } .pub-tarjeta p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; } .pub-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); flex-shrink: 0; } .pub-ico svg { width: 21px; height: 21px; } .pub-ico.verde { background: rgba(34, 197, 94, .12); color: var(--green); } .pub-ico.cyan { background: rgba(6, 182, 212, .12); color: var(--cyan2); } .pub-ico.violeta { background: rgba(167, 139, 250, .13); color: var(--violet); } .pub-ico.ambar { background: rgba(251, 191, 36, .12); color: var(--ambar); } .pub-ico.rojo { background: rgba(248, 113, 113, .12); color: var(--rojo); } /* Las tarjetas del problema no invitan a nada: no se elevan al pasar. */ .pub-tarjeta.pub-problema:hover { transform: none; border-color: rgba(248, 113, 113, .3); } /* ===================== PILARES ===================== */ .pub-pilares { gap: 20px; } .pub-pilar { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radio); background: var(--panel); position: relative; overflow: hidden; } .pub-pilar::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand); } .pub-pilar h3 { font-family: var(--fuente-display); font-size: 19px; font-weight: 800; margin: 16px 0 10px; } .pub-pilar p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; } /* ===================== ES / NO ES ===================== Dos columnas enfrentadas. La distincion es el mensaje, asi que el contraste entre ambas tiene que verse antes de leer una sola linea. */ .pub-es-noes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .pub-columna-es, .pub-columna-noes { padding: 24px; border-radius: var(--radio); border: 1px solid var(--border); background: var(--panel); } .pub-columna-es { border-color: rgba(34, 197, 94, .32); } .pub-columna-noes { border-color: rgba(6, 182, 212, .3); } .pub-es-noes h3 { display: flex; align-items: center; gap: 11px; font-family: var(--fuente-display); font-size: 17px; font-weight: 800; margin: 0 0 18px; } .pub-es-noes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pub-es-noes li { padding: 12px 15px 12px 40px; border: 1px solid var(--border); border-radius: var(--radio-sm); background: var(--panel-solido); color: var(--text); font-size: 13.5px; position: relative; } /* Marcas dibujadas, no glifos: un check tipografico cambia de forma segun la fuente que acabe cargando y aqui la marca ES el significado. */ .pub-columna-es li::before { content: ''; position: absolute; left: 16px; top: 17px; width: 10px; height: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); } .pub-columna-noes li::before, .pub-columna-noes li::after { content: ''; position: absolute; left: 16px; top: 19px; width: 12px; height: 2px; background: var(--cyan2); } .pub-columna-noes li::before { transform: rotate(45deg); } .pub-columna-noes li::after { transform: rotate(-45deg); } .pub-marca-si, .pub-marca-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; position: relative; flex-shrink: 0; } .pub-marca-si { background: var(--green); } .pub-marca-no { background: var(--cyan2); } .pub-marca-si::before { content: ''; width: 10px; height: 5px; border-left: 2px solid var(--panel-solido); border-bottom: 2px solid var(--panel-solido); transform: rotate(-45deg) translate(1px, -1px); } .pub-marca-no::before, .pub-marca-no::after { content: ''; position: absolute; width: 12px; height: 2px; background: var(--panel-solido); } .pub-marca-no::before { transform: rotate(45deg); } .pub-marca-no::after { transform: rotate(-45deg); } .pub-remate { margin: 26px 0 0; padding: 18px 24px; border-radius: var(--radio); background: var(--panel-solido); border: 1px solid var(--border); text-align: center; font-family: var(--fuente-display); font-size: clamp(15px, 2vw, 19px); font-weight: 700; } /* ===================== BOVEDA / INDEPENDENCIA ===================== */ .pub-boveda { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 42px; align-items: center; } .pub-boveda h2 { margin-top: 6px; } .pub-bloqueados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pub-bloqueados li { padding: 13px 15px 13px 42px; border: 1px dashed rgba(248, 113, 113, .35); border-radius: var(--radio-sm); background: rgba(248, 113, 113, .05); color: var(--muted); font-size: 13px; font-weight: 600; position: relative; } /* Aspa roja: lo que NO sale de la boveda. */ .pub-bloqueados li::before, .pub-bloqueados li::after { content: ''; position: absolute; left: 16px; top: 21px; width: 13px; height: 2px; background: var(--rojo); } .pub-bloqueados li::before { transform: rotate(45deg); } .pub-bloqueados li::after { transform: rotate(-45deg); } /* ===================== HOJA DE RUTA ===================== Deliberadamente mas apagada que "Que hace": lo que todavia no existe no puede competir visualmente con lo que si funciona. */ .pub-ruta { gap: 16px; } .pub-ruta article { padding: 20px; border: 1px dashed var(--border); border-radius: var(--radio); background: transparent; } .pub-ruta h3 { font-family: var(--fuente-display); font-size: 15px; font-weight: 700; margin: 12px 0 7px; } .pub-ruta p { color: var(--dim); font-size: 13px; line-height: 1.55; margin: 0; } /* ===================== PASOS ===================== */ .pub-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: paso; } .pub-pasos li { display: flex; gap: 16px; align-items: flex-start; } .pub-paso-n { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--brand); color: #04121a; font-family: var(--fuente-display); font-size: 16px; font-weight: 800; } .pub-pasos h3 { font-family: var(--fuente-display); font-size: 16px; font-weight: 700; margin: 6px 0 8px; } .pub-pasos p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0; } /* ===================== DOS COLUMNAS ===================== */ .pub-dos-columnas { display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } .pub-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pub-lista li { padding: 15px 17px 15px 42px; border: 1px solid var(--border); border-radius: var(--radio-sm); background: var(--panel); color: var(--muted); font-size: 13.5px; line-height: 1.6; position: relative; } /* El check va dibujado con bordes: un glifo tipografico cambia de forma y de alineacion segun la fuente que acabe cargando. */ .pub-lista li::before { content: ''; position: absolute; left: 17px; top: 21px; width: 11px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); } .pub-lista b { color: var(--text); font-weight: 600; display: block; margin-bottom: 2px; } /* ===================== AVISO MEDICO ===================== */ .pub-aviso-medico { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border: 1px solid rgba(251, 191, 36, .3); border-radius: var(--radio); background: rgba(251, 191, 36, .07); max-width: 78ch; } .pub-aviso-medico h3 { font-family: var(--fuente-display); font-size: 16px; margin: 0 0 8px; } .pub-aviso-medico p { color: var(--muted); font-size: 13.5px; line-height: 1.65; } /* ===================== CIERRE ===================== */ .pub-cierre { padding: 82px 0; text-align: center; } .pub-cierre .pub-lead { margin: 0 auto; } .pub-cierre .pub-acciones { justify-content: center; } /* ===================== PIE ===================== */ .pub-pie { border-top: 1px solid var(--border); background: var(--panel2); padding: 40px 0 26px; } .pub-pie-fila { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .pub-pie-enlaces { display: grid; gap: 9px; font-size: 13.5px; align-content: start; } .pub-pie-enlaces a { color: var(--muted); } .pub-pie-enlaces a:hover { color: var(--text); } .pub-pie-legal { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--dim); font-size: 11.5px; } /* ===================== RESPONSIVE ===================== */ @media (max-width: 860px) { .pub-nav { display: none; } .pub-cab-fila { gap: 14px; } .pub-cab-acciones { margin-left: auto; } .pub-hero { padding: 56px 0 48px; } .pub-seccion, .pub-cierre { padding: 56px 0; } .pub-dos-columnas { grid-template-columns: 1fr; gap: 30px; } .pub-es-noes { grid-template-columns: 1fr; } .pub-boveda { grid-template-columns: 1fr; gap: 28px; } .pub-ancho { padding: 0 16px; } } @media (max-width: 460px) { .pub-bloqueados { grid-template-columns: 1fr; } } /* ===================== TEMA CLARO ===================== Los halos y los fondos translucidos estan calculados sobre #04070e. Sobre #f6f8fa el verde y el cian se lavan y las tarjetas dejan de despegarse del fondo, asi que aqui se reponen densidad y sombra. */ .tema-claro .pub-hero::before { background: radial-gradient(620px 340px at 22% 42%, rgba(21, 128, 61, .10), transparent 62%), radial-gradient(760px 400px at 78% 26%, rgba(14, 116, 144, .12), transparent 62%); } .tema-claro .pub-alterna, .tema-claro .pub-pie { background: #eef2f6; } .tema-claro .pub-tarjeta, .tema-claro .pub-lista li, .tema-claro .pub-pilar, .tema-claro .pub-columna-es, .tema-claro .pub-columna-noes, .tema-claro .pub-remate { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); } /* En claro los

blancos sobre tarjeta blanca desaparecen. */ .tema-claro .pub-es-noes li { background: #f6f8fa; } .tema-claro .pub-bloqueados li { background: rgba(185, 28, 28, .05); border-color: rgba(185, 28, 28, .3); } .tema-claro .pub-tarjeta:hover { box-shadow: 0 10px 26px -12px rgba(15, 23, 42, .22); } .tema-claro .pub-ico.verde { background: rgba(21, 128, 61, .10); } .tema-claro .pub-ico.cyan { background: rgba(14, 116, 144, .10); } .tema-claro .pub-ico.violeta { background: rgba(109, 40, 217, .10); } .tema-claro .pub-ico.ambar { background: rgba(180, 83, 9, .10); } .tema-claro .pub-ico.rojo { background: rgba(185, 28, 28, .10); } .tema-claro .pub-aviso-medico { background: rgba(180, 83, 9, .07); border-color: rgba(180, 83, 9, .28); }