/* =====================================================================
Landing pages (/payer-enrollment/, /hrsa-readiness/, ...)
Se carga DESPUES de site.css y no redefine nada suyo. Todo lo que ya
existe se reutiliza tal cual: .band, .band--navy, .band--offwhite,
.wrap, .eyebrow, .lede, .btn, .split, .shot, y —esto es lo que evita
la mayor parte del CSS nuevo— .problem__title / .problem__grid /
.problem__item, que en site.css son selectores sueltos y no dependen
de estar dentro de .problem.
Lo unico que NO se reutiliza de la portada es .hero, porque arrastra
64px de margen bajo los botones pensados para que la captura del hero
los solape. Sin captura ese margen es hueco. De ahi .lp-intro.
Estas paginas no llevan traduccion: se escriben en ingles y el
declara data-lang-lock="en". No hay estilos de idioma aqui.
===================================================================== */
/* ---- Cabecera de la pagina -----------------------------------------
Mismo papel que .hero pero sin solapamiento: el padding superior es
el de .hero (el encabezado fijo tapa la banda en la primera pintura y
el padding de .band no basta para despejarlo). */
.lp-intro{
padding-top:152px;
padding-bottom:var(--sp-section);
}
@media (max-width:1024px){
.lp-intro{
padding-top:128px;
padding-bottom:var(--sp-section-sm);
}
}
@media (max-width:767px){
.lp-intro{ padding-top:112px; }
}
/* fs-6 y no fs-7: el h1 de estas paginas es una frase, no un lema de
cuatro palabras como el de la portada, y a 56px parte en cinco
lineas. Mismo criterio que en la calculadora. */
.lp-intro h1{
max-width:900px;
margin:0 0 24px;
color:var(--white);
font-size:var(--fs-6);
font-weight:800;
line-height:1.12;
letter-spacing:-.02em;
}
@media (max-width:767px){
.lp-intro h1{ font-size:var(--fs-5); }
}
.lp-intro .lede{
max-width:720px;
margin-bottom:32px;
}
.lp-actions{
display:flex;
flex-wrap:wrap;
gap:16px;
}
@media (max-width:479px){
.lp-actions{
flex-direction:column;
align-items:stretch;
}
}
/* ---- Prosa ----------------------------------------------------------
Ancho de medida limitado. Un parrafo a 1200px son unos 150 caracteres
por linea y el ojo pierde el renglon al saltar. */
.lp-prose{
max-width:760px;
}
.lp-prose p{
margin:0 0 20px;
color:var(--slate);
font-size:var(--fs-3);
line-height:1.7;
}
.lp-prose p:last-child{ margin-bottom:0; }
.lp-prose strong{ color:var(--navy); font-weight:600; }
.band--navy .lp-prose p{ color:rgba(255,255,255,.82); }
.band--navy .lp-prose strong{ color:var(--white); }
/* Enlaces dentro del texto.
El sitio no tenia ninguno: la portada enlaza con botones y con el
menu, asi que nunca hizo falta una regla y los de estas paginas
caian al azul por defecto del navegador. Sobre blanco quedaba fuera
de la paleta; sobre .band--navy quedaba azul oscuro sobre azul
oscuro y el enlace desaparecia — paso de verdad en la lista de
"What RIEL changes" de la pagina de screening.
--teal-deep sobre claro (~4.8:1) y --teal sobre la banda navy
(~5.7:1). El teal claro NO se usa nunca como texto sobre fondo
claro; ahi da 2.9:1. */
.lp-prose a,
.lp-list a,
.lp-note a{
color:var(--teal-deep);
text-decoration:underline;
text-underline-offset:3px;
}
.lp-prose a:hover,
.lp-list a:hover,
.lp-note a:hover,
.lp-prose a:focus-visible,
.lp-list a:focus-visible,
.lp-note a:focus-visible{
color:var(--navy);
}
.band--navy .lp-prose a,
.band--navy .lp-list a,
.band--navy .lp-note a{
color:var(--teal);
}
.band--navy .lp-prose a:hover,
.band--navy .lp-list a:hover,
.band--navy .lp-note a:hover,
.band--navy .lp-prose a:focus-visible,
.band--navy .lp-list a:focus-visible,
.band--navy .lp-note a:focus-visible{
color:var(--white);
}
.lp-h3{
margin:40px 0 12px;
color:var(--navy);
font-size:var(--fs-4);
font-weight:600;
line-height:1.3;
}
.band--navy .lp-h3{ color:var(--white); }
/* ---- Dos columnas de texto -----------------------------------------
Para el "que cambia / que no cambia". Deliberadamente sin iconos ni
colores de semaforo: la columna de la derecha dice lo que el producto
NO hace, y vestirla de rojo la convertiria en una objecion. */
.lp-two{
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;
align-items:start;
}
@media (max-width:767px){
.lp-two{
grid-template-columns:1fr;
gap:32px;
}
}
.lp-two h3{
margin:0 0 16px;
padding-bottom:12px;
border-bottom:2px solid var(--teal);
color:var(--navy);
font-size:var(--fs-4);
font-weight:600;
}
.band--navy .lp-two h3{ color:var(--white); }
.lp-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:14px;
}
.lp-list li{
position:relative;
padding-left:20px;
color:var(--slate);
font-size:var(--fs-3);
line-height:1.6;
}
.lp-list li::before{
content:"";
position:absolute;
left:0;
top:.62em;
width:7px;
height:7px;
border-radius:50%;
background:var(--teal);
}
.band--navy .lp-list li{ color:rgba(255,255,255,.82); }
/* ---- Rejilla de cuatro -----------------------------------------------
Para conjuntos de cuatro terminos que hay que leer juntos y comparar
—los cuatro estados de verificacion, por ejemplo—. .problem__grid es
de tres y meterle un cuarto lo descuadra; esta baja a 2x2 en tableta
en vez de a una columna, porque cuatro items apilados dejan de leerse
como un conjunto y pasan a leerse como una lista cualquiera. */
.lp-four{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:32px;
}
@media (max-width:1024px){
.lp-four{ grid-template-columns:repeat(2, 1fr); gap:40px 32px; }
}
@media (max-width:559px){
.lp-four{ grid-template-columns:1fr; gap:32px; }
}
.lp-four h3{
margin:0 0 10px;
padding-bottom:10px;
border-bottom:2px solid var(--teal);
color:var(--navy);
font-size:var(--fs-3);
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
}
.lp-four p{
margin:0;
color:var(--slate);
font-size:var(--fs-2);
line-height:1.65;
}
.band--navy .lp-four h3{ color:var(--white); }
.band--navy .lp-four p{ color:rgba(255,255,255,.82); }
/* ---- Infografia -----------------------------------------------------
Las infografias del cliente NO van dentro de .shot: .shot simula una
ventana de navegador y estas no son capturas de pantalla. Mismo
contrato width:100%/height:auto que .shot img — sin el, el atributo
width/height del HTML gana y la imagen sale deformada. */
.lp-figure{
display:block;
width:100%;
height:auto;
border-radius:var(--radius);
}
/* ---- Nota de fuente -------------------------------------------------
Las citas normativas van visiblemente separadas de la prosa de venta,
con la referencia entera a la vista. Si alguien quiere comprobarla,
tiene el numero de seccion delante; no hay que fiarse de la parafrasis. */
.lp-note{
margin-top:32px;
padding:20px 24px;
border-left:3px solid var(--teal);
background:var(--offwhite);
border-radius:0 var(--radius) var(--radius) 0;
}
.lp-note p{
margin:0 0 12px;
color:var(--slate);
font-size:var(--fs-2);
line-height:1.65;
}
.lp-note p:last-child{ margin-bottom:0; }
.lp-note strong{ color:var(--navy); font-weight:600; }
.band--navy .lp-note{
background:rgba(255,255,255,.06);
border-left-color:var(--teal);
}
.band--navy .lp-note p{ color:rgba(255,255,255,.78); }
.band--navy .lp-note strong{ color:var(--white); }
/* =====================================================================
Centro de recursos (/resources/)
Comparte todo lo de arriba: .lp-intro, .lp-prose, .lp-note, .lp-list.
Lo unico propio es el indice y el bloque de fuentes al final de cada
pieza.
===================================================================== */
/* ---- Indice ---------------------------------------------------------
Tarjetas enlazadas enteras. El titulo va dentro del y la tarjeta
no es un gigante con un dentro: asi el lector de pantalla
anuncia el titulo como el enlace, y no el parrafo entero. */
.res-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:32px;
}
@media (max-width:767px){
.res-grid{ grid-template-columns:1fr; gap:24px; }
}
.res-card{
padding:28px 28px 26px;
background:var(--white);
border:1px solid #E2E8F0;
border-radius:var(--radius);
}
.res-card h3{
margin:0 0 10px;
font-size:var(--fs-4);
font-weight:600;
line-height:1.3;
}
/* El enlace del titulo NO lleva subrayado ni el teal del cuerpo: la
tarjeta entera ya se lee como un destino, y doce titulos subrayados
seguidos convierten el indice en una lista de enlaces azules. */
.res-card h3 a{
color:var(--navy);
text-decoration:none;
}
.res-card h3 a:hover,
.res-card h3 a:focus-visible{
color:var(--teal-deep);
text-decoration:underline;
text-underline-offset:3px;
}
.res-card p{
margin:0;
color:var(--slate);
font-size:var(--fs-2);
line-height:1.65;
}
.res-cat{
margin:0 0 40px;
}
.res-cat h2{
margin:0 0 8px;
}
.res-cat > p{
max-width:760px;
margin:0 0 28px;
color:var(--slate);
font-size:var(--fs-3);
line-height:1.7;
}
/* ---- Columna de lectura de una pieza --------------------------------
Las piezas son SOLO texto: no hay capturas ni columnas que
equilibren el ancho. Con .lp-prose (760px) pegado a la izquierda de
un .wrap de 1200px, a 1440px queda media pagina vacia a la derecha y
se lee como un fallo de maquetacion, no como una decision. En las
landing no pasa porque alternan con splits e imagenes.
La solucion es estrechar el .wrap ENTERO en vez de centrar solo el
parrafo: asi el rotulo, el h1, el cuerpo, las fuentes y el cierre
comparten borde izquierdo. Centrar unicamente el bloque de texto
habria dejado el eyebrow alineado a un sitio y el cuerpo a otro, que
es peor que el problema original. Las bandas siguen ocupando el ancho
completo; lo unico que se estrecha es su contenido. */
.res-article .wrap{
max-width:820px;
}
.res-article .lp-prose{
max-width:none;
}
/* ---- Fuentes --------------------------------------------------------
Cada pieza termina con sus fuentes primarias, enteras y enlazadas.
Es la diferencia entre un recurso que un oficial de cumplimiento
guarda y uno que descarta: puede comprobar cada afirmacion sin
fiarse de la parafrasis. */
.res-sources{
margin-top:48px;
padding-top:28px;
border-top:2px solid var(--teal);
}
.res-sources h2{
margin:0 0 8px;
font-size:var(--fs-4);
}
.res-sources ul{
list-style:none;
margin:16px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
}
.res-sources li{
color:var(--slate);
font-size:var(--fs-2);
line-height:1.6;
}
.res-sources a{
color:var(--teal-deep);
text-decoration:underline;
text-underline-offset:3px;
}
.res-sources a:hover,
.res-sources a:focus-visible{ color:var(--navy); }
/* ---- Cierre ---------------------------------------------------------
La llamada final centrada, sobre banda navy, igual que .roi-teaser en
la portada. */
.lp-cta{ text-align:center; }
.lp-cta h2{ margin:0 0 16px; }
.lp-cta .lede{
max-width:700px;
margin:0 auto 32px;
}
.lp-cta .lp-actions{ justify-content:center; }