/* ============================================================
PsicoAlianza — Sitio nuevo 2026 (pagina_nueva)
estilos.css — paleta de marca + overrides de Bootstrap 5.3
Archivo NUEVO. Paleta derivada de los prototipos en
MATERIAL_PAGINAS (carpeta por pagina, prototipo_desktop.png), jul-2026.
Carga DESPUÉS de bootstrap.min.css en el de cada página.
============================================================ */
:root {
/* ---------- Marca — núcleo corporativo ---------- */
--c-blue: #0071BC; /* azul primario: CTA outline, secciones de form, links */
--c-blue-bright: #00A9E4; /* azul brillante: acentos de gradiente */
--c-blue-deep: #0A0A21; /* navy casi negro: footer, header, hero oscuro */
--c-purple: #2A2A80; /* morado de marca (gradientes oscuros compartidos) */
--c-green: #16BF9C; /* verde de conversión: TODOS los CTA "Solicita una demo" */
--c-green-light: #6FCF3D; /* verde lima secundario (acentos tipo "360°") */
--c-yellow: #FFD12E; /* amarillo de marca: acentos de IA */
/* ---------- Neutros ---------- */
--c-bg: #FFFFFF;
--c-bg-soft: #F5F6FA;
--c-bg-dark: #0A0A21;
--c-text: #1D1D1D;
--c-text-muted: #5C6478;
--c-text-on-dark: #E6ECFA;
--c-border: #E1E5EE;
--c-bg-light-soft: #F5F5F5;
/* ---------- Gradientes compartidos ---------- */
--g-azul: linear-gradient(90deg, #2597C5 0%, #2A2A80 100%);
--g-verde-azul: linear-gradient(90deg, #017EAE 0%, #1CD096 100%);
--g-cta: linear-gradient(90deg, #16BF9C 0%, #16BF9C 100%);
/* ---------- Líneas de negocio (temas por línea) ----------
Cada línea tiene su propio acento; se usan en hero, cards,
chips y CTA secundarios de esa línea. No mezclar entre sí. */
--tema-vocacional: #0088B0;
--tema-vocacional-2: #00A9C0;
--g-tema-vocacional: linear-gradient(120deg, #0071BC 0%, #00A9C0 100%);
--tema-seleccion: #5B2A8C;
--tema-seleccion-2: #7B2FB0;
--g-tema-seleccion: linear-gradient(120deg, #4A1F73 0%, #7B2FB0 100%);
--tema-organizacional: #A92345;
--tema-organizacional-2: #462D6E;
--g-tema-organizacional: linear-gradient(135deg, #462D6E 0%, #A92345 100%);
/* ---------- Tipografía ---------- */
--font-sans: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* ---------- Radios y sombras ---------- */
--radius-card: 1rem;
--radius-btn: 50rem;
--radius-sm: .5rem;
--shadow-card: 0 0.375rem 1.5rem rgba(11, 25, 55, .08);
--shadow-card-lg: 0 0.75rem 2.5rem rgba(11, 25, 55, .15);
/* =============================================================
OVERRIDE de variables de Bootstrap 5.3 — así los componentes
nativos (botones, nav-tabs, accordion, carousel, forms) heredan
la marca sin CSS custom adicional.
============================================================= */
--bs-body-font-family: var(--font-sans);
--bs-body-color: var(--c-text);
--bs-body-bg: var(--c-bg);
--bs-link-color-rgb: 0, 113, 188;
--bs-link-hover-color-rgb: 10, 10, 33;
--bs-primary: var(--c-blue);
--bs-primary-rgb: 0, 113, 188;
--bs-secondary: var(--c-purple);
--bs-secondary-rgb: 42, 42, 128;
--bs-success: var(--c-green);
--bs-success-rgb: 22, 191, 156;
--bs-dark: var(--c-blue-deep);
--bs-dark-rgb: 10, 10, 33;
--bs-light: var(--c-bg-soft);
--bs-light-rgb: 245, 246, 250;
--bs-border-radius: var(--radius-sm);
--bs-border-radius-lg: var(--radius-card);
--bs-border-radius-xl: 1.5rem;
--bs-border-radius-pill: var(--radius-btn);
--bs-btn-border-radius: var(--radius-btn);
--bs-nav-tabs-link-active-color: var(--c-blue);
--bs-nav-tabs-link-active-border-color: transparent transparent var(--c-blue);
}
/* ---------- Escalado proporcional desktop (canvas Figma 1920px) ----------
Mismo mecanismo que paginas-anteriores/pagina_psicoalianza/assets/css/styles.css:
1rem = (100vw / 1920) * 16 -> 16px exactos a 1920px, escala lineal sin tope.
Todo el CSS de Bootstrap y de este archivo ya está en rem, así que en
cualquier ancho desktop el layout escala en bloque manteniendo posiciones/
tamaños relativos (sin descuadre respecto al canvas de Figma).
Abajo de 1024px :root queda en 16px (default) -> reglas mobile intactas. */
@media (min-width: 1024px) {
:root { font-size: calc(100vw / 1920 * 16); }
}
/* ---------- Íconos dimensionados por atributo width/height ----------
Los ![]()
decorativos (bullets, íconos de card, logos pequeños) llevan su
tamaño en los atributos width=/height= del HTML, que son px fijos: sin esto
se quedarían del mismo tamaño mientras el texto de al lado escala.
Estas reglas traducen cada tamaño usado a su equivalente en rem.
Van dentro de :where() a propósito: especificidad CERO, así cualquier regla
que sí dimensione la imagen (una clase de la página, .img-fluid, el CSS de
las banderas del selector de país, etc.) le gana sin necesidad de
!important. Solo aplican a los tamaños de ícono (<= 127px); las imágenes
grandes de contenido las sigue controlando su columna / .img-fluid.
Al agregar un ícono con un width= nuevo, añade aquí su línea. */
:where(img[width="12"]) { width: 0.75rem; height: auto; }
:where(img[width="14"]) { width: 0.875rem; height: auto; }
:where(img[width="16"]) { width: 1rem; height: auto; }
:where(img[width="18"]) { width: 1.125rem; height: auto; }
:where(img[width="19"]) { width: 1.1875rem; height: auto; }
:where(img[width="20"]) { width: 1.25rem; height: auto; }
:where(img[width="22"]) { width: 1.375rem; height: auto; }
:where(img[width="24"]) { width: 1.5rem; height: auto; }
:where(img[width="28"]) { width: 1.75rem; height: auto; }
:where(img[width="29"]) { width: 1.8125rem; height: auto; }
:where(img[width="30"]) { width: 1.875rem; height: auto; }
:where(img[width="32"]) { width: 2rem; height: auto; }
:where(img[width="34"]) { width: 2.125rem; height: auto; }
:where(img[width="36"]) { width: 2.25rem; height: auto; }
:where(img[width="37"]) { width: 2.3125rem; height: auto; }
:where(img[width="40"]) { width: 2.5rem; height: auto; }
:where(img[width="43"]) { width: 2.6875rem; height: auto; }
:where(img[width="44"]) { width: 2.75rem; height: auto; }
:where(img[width="48"]) { width: 3rem; height: auto; }
:where(img[width="49"]) { width: 3.0625rem; height: auto; }
:where(img[width="50"]) { width: 3.125rem; height: auto; }
:where(img[width="52"]) { width: 3.25rem; height: auto; }
:where(img[width="55"]) { width: 3.4375rem; height: auto; }
:where(img[width="56"]) { width: 3.5rem; height: auto; }
:where(img[width="60"]) { width: 3.75rem; height: auto; }
:where(img[width="62"]) { width: 3.875rem; height: auto; }
:where(img[width="64"]) { width: 4rem; height: auto; }
:where(img[width="70"]) { width: 4.375rem; height: auto; }
:where(img[width="72"]) { width: 4.5rem; height: auto; }
:where(img[width="75"]) { width: 4.6875rem; height: auto; }
:where(img[width="77"]) { width: 4.8125rem; height: auto; }
:where(img[width="78"]) { width: 4.875rem; height: auto; }
:where(img[width="90"]) { width: 5.625rem; height: auto; }
:where(img[width="91"]) { width: 5.6875rem; height: auto; }
:where(img[width="98"]) { width: 6.125rem; height: auto; }
:where(img[width="126"]) { width: 7.875rem; height: auto; }
:where(img[width="127"]) { width: 7.9375rem; height: auto; }
/* ---------- Reset ligero (complementa el reset de Bootstrap) ---------- */
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { text-decoration: none; }
/* ============================================================
UTILIDADES DE MARCA
============================================================ */
/* CTA de conversión — un solo estilo en todo el sitio.
Texto en DOM en sentence-case; el CSS lo muestra en mayúsculas. */
.btn-psa {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .5rem 4rem;
border-radius: var(--radius-btn);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.3;
letter-spacing: .02em;
text-transform: uppercase;
border: 0.125rem solid transparent;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
white-space: nowrap;
min-height: 3rem;
}
.btn-psa:hover { transform: translateY(-0.0625rem); box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,.15); }
.btn-psa:active { transform: translateY(0); }
.btn-psa-primary {
background: var(--g-cta);
color: #fff;
border-color: #fff;
}
.btn-psa-primary:hover { color: #fff; }
.btn-psa-outline {
background: transparent;
color: var(--c-blue);
border-color: var(--c-blue);
}
.btn-psa-outline:hover { color: var(--c-blue); background: rgba(0,113,188,.06); }
.btn-psa-outline-light {
background: transparent;
color: #fff;
border-color: #fff;
}
.btn-psa-outline-light:hover { color: #fff; background: rgba(255,255,255,.12); }
/* Alto del CTA en móvil: 36px.
Los 3rem de min-height de arriba están pensados para el lienzo de 1920, donde el root
escala; por debajo de 1024px el root se queda en 16px y esos 3rem pasan a ser 48px
literales sobre una pantalla de 390 — el diseño móvil los pide en 36.
El alto lo fija min-height y no el padding a propósito: así el botón sigue creciendo
si la etiqueta se parte en dos líneas, que es lo que hacen varias páginas al quitarle
el white-space:nowrap en móvil.
Los otros dos valores son los que hacen falta para que ese min-height llegue a mandar:
con el padding de .5rem de la clase base y los 2px de borde, una etiqueta de 14px ya
sumaba 38px por sí sola. Y el tamaño de letra baja de 20 a 14px porque a 20 el texto
quedaba pegado a los bordes del pill (26px de línea dentro de 32px libres). */
@media (max-width: 991.98px) {
.btn-psa {
min-height: 2.25rem; /* 36px */
padding-block: .25rem;
font-size: .875rem;
}
}
/* Botón de WhatsApp: reusable en CTA sticky, footer y donde el copy lo pida */
.btn-whatsapp {
display: inline-flex;
align-items: center;
gap: .5rem;
color: #16BF9C;
font-weight: 700;
}
/* El SVG trae su propio círculo de 88x88 con el degradado — el botón nunca lleva
background ni padding, el ícono va a sangre completa (5.5rem = 88px, tamaño nativo).
Espejo de la regla en paginas-anteriores/pagina_psicoalianza/assets/css/styles.css
(el home carga solo esa hoja) — mantener ambas en sync.
z-index 1040: sobre el header fijo de Bootstrap, bajo los modales (1055). */
.wa-sticky {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 1040;
width: 5.5rem;
height: 5.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
transition: transform .15s ease;
}
.wa-sticky:hover { transform: scale(1.05); }
.wa-sticky img, .wa-sticky svg { width: 100%; height: 100%; display: block; }
/* El ícono mobile se queda oculto fuera de su breakpoint: sin esto heredaría el
display:block de la regla de arriba y se dibujaría encima del de escritorio. */
.wa-sticky img.wa-sticky__icon--mobile { display: none; }
@media (max-width: 767px) {
/* Pegado al borde derecho, sin margen — el diseño mobile lo pide a ras.
Ancho/alto en auto: el ícono mobile ya no es un círculo (ver más abajo), así
que el contenedor se ajusta a su forma en vez de imponerle una caja fija.
border-radius y box-shadow fuera: eran para recortar y sombrear el círculo de
escritorio; contra un PNG con su propio recorte (ver whatsapp-sticky.php) el
box-shadow dibujaba un rectángulo detrás de una forma que no lo es. La sombra
equivalente va como filter:drop-shadow en el ícono, que sí se calcula sobre su
alfa real y no sobre la caja. */
.wa-sticky {
width: auto; height: auto;
bottom: 1rem; right: 0;
border-radius: 0;
box-shadow: none;
}
.wa-sticky img.wa-sticky__icon--desktop { display: none; }
.wa-sticky img.wa-sticky__icon--mobile {
display: block;
/* 5.375rem = 86px, el ancho nativo del PNG: sin escalar, para no perder nitidez. */
width: 5.375rem; height: auto;
filter: drop-shadow(0 0.375rem 0.75rem rgba(0, 0, 0, 0.2));
}
}
/* ---------- Flechas circulares de carrusel (Bootstrap Icons) — reusables en cualquier página ---------- */
.carousel-arrow-circle {
width: 3.625rem;
height: 3.625rem;
/* Nunca encoge: como ítem flex se comprimía a lo ancho (pero no a lo alto) cuando la
columna que lo contiene se quedaba corta, y el círculo salía ovalado. */
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .6);
background: transparent;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
z-index: 2;
transition: background .15s ease, border-color .15s ease;
}
.carousel-arrow-circle:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.carousel-arrow-circle.is-dark { border-color: rgba(10, 10, 33, .3); color: var(--c-blue-deep); }
.carousel-arrow-circle.is-dark:hover { background: rgba(10, 10, 33, .06); border-color: var(--c-blue-deep); }
/* ---------- Indicadores de carrusel en línea (junto a un CTA, no flotantes) — reusables ---------- */
.carousel-indicators-inline {
position: static;
margin: 0;
justify-content: flex-start;
gap: 4.4rem;
}
.carousel-indicators-inline [data-bs-target] {
width: .875rem;
height: .875rem;
border-radius: 50%;
opacity: 1;
background-color: transparent;
border: 1.5px solid rgba(255, 255, 255, .5);
margin: 0;
}
.carousel-indicators-inline [data-bs-target].active { background-color: #fff; border-color: #fff; }
.carousel-indicators-inline.is-dark [data-bs-target] { border-color: rgba(10, 10, 33, .3); }
.carousel-indicators-inline.is-dark [data-bs-target].active { background-color: var(--c-blue-deep); border-color: var(--c-blue-deep); }
@media (max-width: 991.98px) {
/* El gap de 4.4rem está pensado para desktop; en mobile desborda el viewport */
.carousel-indicators-inline { gap: 1rem; justify-content: center; }
.carousel-arrow-circle { width: 2.75rem; height: 2.75rem; font-size: 1.15rem; }
}
/* ---------- Encabezados de sección ---------- */
.eyebrow-psa {
display: inline-block;
font-weight: 700;
font-size: .8rem;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--c-blue);
margin-bottom: .5rem;
}
.h-section {
font-weight: 800;
color: var(--c-blue-deep);
}
/* ---------- Secciones de fondo por línea de negocio ---------- */
.bg-tema-vocacional { background: var(--g-tema-vocacional); color: #fff; }
.bg-tema-seleccion { background: var(--g-tema-seleccion); color: #fff; }
.bg-tema-organizacional { background: var(--g-tema-organizacional); color: #fff; }
.bg-navy { background: var(--c-blue-deep); color: #fff; }
.bg-azul { background: var(--g-azul); color: #fff; }
.bg-soft { background: var(--c-bg-soft); }
.bg-light-soft { background: var(--c-bg-light-soft); }
/* ---------- Chips / badges de producto y de línea ---------- */
.chip-psa {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .4rem .9rem;
border-radius: var(--radius-btn);
font-weight: 700;
font-size: .8rem;
background: #fff;
color: var(--c-blue-deep);
box-shadow: var(--shadow-card);
}
.chip-psa img, .chip-psa svg { width: 1.4rem; height: 1.4rem; }
/* ---------- Tarjetas ---------- */
.card-psa {
border: 0;
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
background: #fff;
}
.fw-900 { font-weight: 900 !important; }
/* ============================================================
SEMÁFOROS DE RESULTADO — tres escalas distintas, NO parametrizar
como una sola (regla del material SEO):
.semaforo-seleccion 0-59 rojo / 60-75 amarillo / 76-100 verde
.semaforo-iq 65-79 rojo / 80-89 amarillo / 90-135 verde
.semaforo-clima 0-40 rojo / 41-70 amarillo / 71-100 verde
Uso: 86%
============================================================ */
.semaforo {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
border-radius: var(--radius-sm);
padding: .25rem .6rem;
}
.semaforo--bajo { background: #FDE8E8; color: #C0392B; }
.semaforo--medio { background: #FFF6DA; color: #B7860B; }
.semaforo--alto { background: #E7F8EE; color: #1C8A4E; }
/* Header, footer, formulario de demo, FAQ y modal de éxito ahora usan el
diseño portado de la página antigua — ver assets/css/shared-sections.css
(cargado en partials/head-assets.php) y partials/header.php, footer.php,
form-demo.php, faq.php, modal-exito.php. */
/* ============================================================
TAMAÑOS DE FUENTE — clases globales
Solo controlan font-size (el color se maneja aparte, con las
utilidades de color de Bootstrap o el color heredado del bloque).
Nombradas por su tamaño en px del diseño; el valor va en rem para
que escalen con el root fluido (ver "Escalado proporcional desktop"
arriba): 1rem = 16px hasta 1024px, proporcional al viewport encima.
============================================================ */
.fs-80 { font-size: 5rem !important; } /* 80px */
.fs-70 { font-size: 4.375rem !important; } /* 70px */
.fs-60 { font-size: 3.75rem !important; } /* 60px */
.fs-55 { font-size: 3.4375rem !important; } /* 55px */
.fs-52 { font-size: 3.25rem !important; } /* 52px */
.fs-50 { font-size: 3.125rem !important; } /* 50px */
.fs-45 { font-size: 2.8125rem !important; } /* 45px */
.fs-42 { font-size: 2.625rem !important; } /* 42px */
.fs-40 { font-size: 2.5rem !important; } /* 40px */
.fs-36 { font-size: 2.25rem !important; } /* 36px */
.fs-34 { font-size: 2.125rem !important; } /* 34px */
.fs-32 { font-size: 2rem !important; } /* 32px */
.fs-30 { font-size: 1.875rem !important; } /* 30px */
.fs-28 { font-size: 1.75rem !important; } /* 28px */
.fs-26 { font-size: 1.625rem !important; } /* 26px */
.fs-24 { font-size: 1.5rem !important; } /* 24px */
.fs-22 { font-size: 1.375rem !important; } /* 22px */
.fs-20 { font-size: 1.25rem !important; } /* 20px */
.fs-18 { font-size: 1.125rem !important; } /* 18px */
.fs-16 { font-size: 1rem !important; } /* 16px */
/* ---------- Escala móvil de la tipografía (< 1024px) ----------
Los valores de arriba están pensados para el lienzo de 1920 y solo tienen sentido
mientras el root escala con el viewport. Justo debajo de 1024px ese escalado se apaga
y el root vuelve a 16px fijos, así que cada tamaño pasa a ser literal: un .fs-70 son
70px reales sobre una pantalla de 375. Este bloque redefine la escala para móvil.
Es una compresión monótona, no una división: los titulares bajan mucho, el texto de
lectura casi nada, de modo que la jerarquía se conserva y nada cae por debajo de 13px.
Los tamaños vecinos convergen a propósito (55/52/60 -> 28) porque en un teléfono esa
diferencia de 3px del diseño de escritorio ya no comunica nada.
El breakpoint es 1023.98px —no el `lg` de Bootstrap— porque el problema empieza
exactamente donde muere el escalado del root, no donde colapsan las columnas.
============================================================ */
@media (max-width: 1023.98px) {
.fs-80 { font-size: 2rem !important; } /* 80 -> 32 */
.fs-70 { font-size: 1.875rem !important; } /* 70 -> 30 */
.fs-60 { font-size: 1.75rem !important; } /* 60 -> 28 */
.fs-55 { font-size: 1.75rem !important; } /* 55 -> 28 */
.fs-52 { font-size: 1.75rem !important; } /* 52 -> 28 */
.fs-50 { font-size: 1.625rem !important; } /* 50 -> 26 */
.fs-45 { font-size: 1.5rem !important; } /* 45 -> 24 */
.fs-42 { font-size: 1.375rem !important; } /* 42 -> 22 */
.fs-40 { font-size: 1.3125rem !important; } /* 40 -> 21 */
.fs-36 { font-size: 1.25rem !important; } /* 36 -> 20 */
.fs-34 { font-size: 1.1875rem !important; } /* 34 -> 19 */
.fs-32 { font-size: 1.125rem !important; } /* 32 -> 18 */
.fs-30 { font-size: 1.125rem !important; } /* 30 -> 18 */
.fs-28 { font-size: 1.0625rem !important; } /* 28 -> 17 */
.fs-26 { font-size: 1rem !important; } /* 26 -> 16 */
.fs-24 { font-size: 1rem !important; } /* 24 -> 16 */
.fs-22 { font-size: 0.96875rem !important; } /* 22 -> 15.5 */
.fs-20 { font-size: 0.9375rem !important; } /* 20 -> 15 */
.fs-18 { font-size: 0.875rem !important; } /* 18 -> 14 */
.fs-16 { font-size: 0.8125rem !important; } /* 16 -> 13 */
}
/* ============================================================
Utilidades varias
============================================================ */
/* Padding en rem (no clamp/vw): así escala con el root fluido en vez de
seguir su propia curva. Mismos extremos que el clamp anterior. */
.section-py { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) {
.section-py { padding-top: 5rem; padding-bottom: 5rem; }
}
.only-m { display: none; }
.only-d { display: inline; }
@media (max-width: 767.98px) {
.only-m { display: inline; }
.only-d { display: none; }
}
/* Bootstrap 5.3 no trae variantes responsivas de .w-* (solo .w-auto sin
breakpoint) — se agrega aquí con su misma convención (!important, breakpoint
lg = 992px, igual que el resto de sus utilidades -lg-). */
@media (min-width: 992px) {
.w-lg-auto { width: auto !important; }
.w-lg-50 { width: 50% !important; }
}