/* ==========================================================================
Vital Red — estilos base
Orden: tokens · reset · utilidades · componentes · secciones
Los ajustes por tamaño de pantalla viven en css/responsive.css
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
Los tres colores base están tomados tal cual del sistema clínico de Vital Red,
que los documenta como los colores de su logotipo:
#031962 azul marino («VITAL») → --navy-900
#E00001 rojo («RED») → --red-600
#0253BE azul del aro exterior → --blue-600
El resto de la escala son variaciones calculadas a partir de esos tres.
Contraste con blanco verificado: rojo 5.04:1 · azul 7.04:1 · marino 15.92:1.
-------------------------------------------------------------------------- */
:root {
--navy-950: #020E3A;
--navy-900: #031962;
--navy-800: #072278;
--navy-700: #0B3496;
--blue-700: #0244A0;
--blue-600: #0253BE;
--blue-500: #1C7DE8;
--blue-200: #A8CCF7;
--blue-100: #E5EFFD;
--blue-050: #F1F7FE;
--red-600: #E00001;
--red-500: #F51A20;
/* Color de la llamada a la acción principal. Es una variable propia y no el
rojo directo para que cada paleta decida: aquí sigue siendo el rojo de
marca; en la institucional pasa a azul petróleo. */
--cta: var(--red-600);
--cta-hover: #C40001;
--cta-sombra: rgba(224, 0, 1, .85);
--cta-sombra-fuerte: rgba(224, 0, 1, .95);
--white: #FFFFFF;
--gray-050: #F5F7FA;
--gray-100: #EDF1F7;
--gray-200: #DFE6F0;
--gray-300: #C9D4E3;
--text: #172033;
--text-2: #667085;
--text-inv: #FFFFFF;
--text-inv-2: #B9CBE4;
--line: #E4EAF3;
--line-dark: rgba(255, 255, 255, .14);
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 22px;
--radius-xl: 30px;
--shadow-xs: 0 1px 2px rgba(7, 27, 59, .05);
--shadow-sm: 0 2px 10px rgba(7, 27, 59, .06);
--shadow-md: 0 14px 34px -16px rgba(7, 27, 59, .26);
--shadow-lg: 0 28px 60px -28px rgba(7, 27, 59, .40);
--font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
--container: 1200px;
--gutter: 20px;
--header-h: 74px;
--actionbar-h: 0px;
--ease: cubic-bezier(.22, .68, .3, 1);
}
/* --------------------------------------------------------------------------
2. Reset y base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
/* Reserva el espacio de la barra de desplazamiento para que abrir un modal
no desplace el contenido. */
scrollbar-gutter: stable;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
color: var(--text);
background: var(--white);
overflow-x: hidden;
padding-bottom: var(--actionbar-h);
-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.18;
letter-spacing: 0;
margin: 0 0 .5em;
color: inherit;
text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible {
outline: 3px solid var(--blue-500);
outline-offset: 2px;
border-radius: 4px;
}
/* Sobre fondos oscuros el contorno cambia a blanco para conservar el contraste. */
.topbar :focus-visible,
.hero :focus-visible,
.section--dark :focus-visible,
.especialidades :focus-visible,
.empresas__cta :focus-visible,
.contacto__datos :focus-visible,
.footer :focus-visible {
outline-color: #FFFFFF;
}
::selection { background: var(--blue-500); color: #fff; }
/* Barra de desplazamiento discreta en navegadores compatibles */
@supports (scrollbar-color: auto) {
html { scrollbar-color: var(--gray-300) transparent; }
}
/* --------------------------------------------------------------------------
3. Utilidades
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.skip-link {
position: absolute;
left: 50%;
top: -100px;
transform: translateX(-50%);
z-index: 200;
background: var(--navy-900);
color: #fff;
padding: 12px 22px;
border-radius: 0 0 12px 12px;
font-weight: 600;
transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; text-decoration: none; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
inline-size: var(--ico, 20px);
block-size: var(--ico, 20px);
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
/* --------------------------------------------------------------------------
Contenedor de icono
Un único tratamiento para todas las secciones claras: fondo con un
degradado muy suave, filo superior claro y un halo tenue alrededor. Da
volumen sin recargar y unifica la iconografía de toda la página.
-------------------------------------------------------------------------- */
/* Reflejo superior: da volumen sin recurrir a más color. */
/* El icono, por encima del reflejo y con más cuerpo. */
/* El relleno vertical va en una variable porque las composiciones a sangre
(«Cómo funciona», «Red de médicos») necesitan restarlo para que su fotografía
llegue al borde de la sección. */
:root { --section-pad: clamp(60px, 7vw, 104px); }
.section { padding-block: var(--section-pad); }
.section--tint { background: var(--gray-050); }
.section--dark {
background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 58%, var(--navy-800) 100%);
color: var(--text-inv);
}
section[id], main[id] { scroll-margin-top: calc(var(--header-h) + 18px); }
.section__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.section__head--light { color: var(--text-inv); }
.section__title {
font-size: clamp(1.75rem, 1.15rem + 2.3vw, 2.7rem);
margin-bottom: .45em;
}
.section__sub {
font-size: clamp(1rem, .96rem + .2vw, 1.12rem);
color: var(--text-2);
margin: 0;
}
.section__head--light .section__sub { color: var(--text-inv-2); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-size: .8rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--blue-600);
--ico: 16px;
}
.eyebrow::before {
content: "";
inline-size: 22px;
block-size: 3px;
border-radius: 2px;
background: var(--red-600);
}
.eyebrow--light { color: var(--blue-200); }
.lead {
font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
color: var(--text-2);
line-height: 1.6;
}
.section--dark .lead, .contacto .lead { color: var(--text-inv-2); }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
min-block-size: 40px;
font-weight: 600;
color: var(--blue-600);
--ico: 18px;
}
.link-arrow:hover { text-decoration: none; gap: 12px; }
.link-arrow { transition: gap .2s var(--ease); }
.link-arrow--sm { font-size: .9rem; margin-top: 8px; }
.linkish {
color: var(--blue-600);
font-weight: 600;
text-decoration: underline;
padding: 0;
}
.disclaimer {
margin-top: 36px;
padding: 16px 20px;
border-inline-start: 3px solid var(--blue-500);
border-radius: 0 10px 10px 0;
background: var(--blue-050);
font-size: .88rem;
line-height: 1.6;
color: var(--text-2);
}
.disclaimer .ico { color: var(--blue-600); margin-top: 2px; }
/* --------------------------------------------------------------------------
Acento de marca en tarjetas
Al pasar el cursor aparece un filo superior con el degradado azul→rojo de
los aros del logotipo. Es el detalle que distingue a Vital Red de una
tarjeta genérica, sin añadir ruido en reposo.
-------------------------------------------------------------------------- */
.acard__inner {
position: relative;
overflow: hidden;
}
.acard__inner::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 3px;
background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-500) 46%, var(--red-600) 100%);
opacity: 0;
transform: scaleX(.35);
transform-origin: left center;
transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.acard__inner:hover::before { opacity: 1; transform: none; }
/* Animación de entrada (se desactiva si el usuario reduce el movimiento) */
.reveal { opacity: 1; }
.js-anim .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }
/* --------------------------------------------------------------------------
4. Botones
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 11px 22px;
border-radius: 999px;
border: 1.5px solid transparent;
font-family: var(--font-body);
font-size: .95rem;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s var(--ease), color .2s var(--ease),
border-color .2s var(--ease), transform .18s var(--ease), box-shadow .2s var(--ease);
--ico: 19px;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
/* El botón principal lleva el mismo brillo superior que los contenedores de
icono: los hace ver como piezas sólidas y no como rectángulos planos. */
/* El color sale de variables y no de la regla: así la paleta alterna puede
cambiarlo sin duplicar el botón. En la paleta institucional la llamada a la
acción es azul petróleo y el rojo se reserva para los acentos de marca. */
.btn--primary {
background-color: var(--cta);
background-image: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 58%);
color: #fff;
box-shadow:
inset 0 -1px 0 rgba(0, 0, 0, .16),
0 10px 24px -12px var(--cta-sombra);
}
.btn--primary:hover {
background-color: var(--cta-hover);
box-shadow:
inset 0 -1px 0 rgba(0, 0, 0, .16),
0 14px 28px -12px var(--cta-sombra-fuerte);
}
/* Variantes de tamaño y ancho. Se habían perdido: sin ellas los botones
pequeños y los de ancho completo salían con la medida por omisión. */
.btn--sm { min-block-size: 42px; padding: 9px 18px; font-size: .88rem; }
.btn--lg { min-block-size: 54px; padding: 14px 30px; font-size: 1rem; }
.btn--block { inline-size: 100%; justify-content: center; }
.btn--blue { background: var(--blue-600); color: #fff; }
.btn--blue:hover { background: var(--blue-700); }
.btn--outline { background: transparent; color: var(--navy-800); border-color: var(--gray-300); }
.btn--outline:hover { border-color: var(--blue-600); color: var(--blue-600); background: var(--blue-050); }
.btn--outline-light { color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn--outline-light:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .1); }
/* --------------------------------------------------------------------------
5. Barra superior
Franja fina y sobria sobre azul marino. Los datos de contacto van en blanco
puro: es lo primero que alguien busca para llamar, así que no puede quedar
apagado ni depender del color de fondo de la página.
-------------------------------------------------------------------------- */
.topbar {
background: var(--navy-950);
color: #fff;
font-size: .86rem;
}
.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
min-height: 40px;
flex-wrap: wrap;
}
.topbar__status {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0;
font-weight: 500;
color: #fff;
}
.topbar__dot {
inline-size: 8px; block-size: 8px;
border-radius: 50%;
background: #35D07F;
box-shadow: 0 0 0 3px rgba(53, 208, 127, .22);
/* Latido muy lento: refuerza el «24/7» sin distraer. */
animation: latido 3s ease-in-out infinite;
}
@keyframes latido {
0%, 100% { box-shadow: 0 0 0 3px rgba(53, 208, 127, .22); }
50% { box-shadow: 0 0 0 7px rgba(53, 208, 127, .06); }
}
.topbar__links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar__link {
display: inline-flex;
align-items: center;
gap: 8px;
min-block-size: 40px;
padding: 7px 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .08);
background: rgba(255, 255, 255, .06);
color: #fff;
font-weight: 600;
--ico: 16px;
transition: color .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
/* El icono acompaña, no compite: azul claro con contraste suficiente. */
.topbar__link .ico { color: var(--blue-200); }
.topbar__link:hover { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); text-decoration: none; }
.topbar__link:hover .ico { color: #fff; }
.topbar__link--join { color: #fff; font-weight: 700; }
/* Redes sociales de la barra superior.
Círculos discretos, sin el color de marca de cada red: sobre el azul marino
de la barra un azul de Facebook o un degradado de Instagram cantarían más que
el teléfono, que es el dato que de verdad importa. El icono va en el mismo
azul claro que los demás iconos de la barra y sólo pasa a blanco al pasar por
encima, igual que `.topbar__link`.
34 px de lado: no alteran los 40 px de alto de la barra y siguen muy por
encima del mínimo de área táctil. */
.topbar__redes {
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.topbar__red {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 34px;
block-size: 34px;
border-radius: 50%;
color: var(--blue-200);
border: 1px solid transparent;
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.topbar__red .ico { inline-size: 17px; block-size: 17px; fill: currentColor; stroke: none; }
.topbar__red:hover {
color: #fff;
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .18);
text-decoration: none;
}
/* --------------------------------------------------------------------------
6. Encabezado y navegación
-------------------------------------------------------------------------- */
.header {
position: sticky;
top: 0;
z-index: 60;
background: rgba(255, 255, 255, .94);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--line);
transition: box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.header.is-scrolled { box-shadow: 0 8px 26px -18px rgba(7, 27, 59, .5); background: rgba(255, 255, 255, .98); }
.header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: var(--header-h);
}
/* `flex: none` evita que el menú comprima la marca: al encogerse, la bajada
(que no parte palabras) se salía de su caja y se encimaba con «Inicio». */
.brand { display: inline-flex; align-items: center; gap: 11px; min-block-size: 46px; flex: none; }
.brand:hover { text-decoration: none; }
.brand__mark { inline-size: 54px; block-size: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.12rem;
letter-spacing: .13em;
color: var(--navy-900);
white-space: nowrap;
}
.brand__tag {
font-size: .76rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-2);
font-weight: 500;
white-space: nowrap;
}
/* En el encabezado no cabe: marca + bajada + siete enlaces + botón suman más
que el ancho del contenedor, y la bajada terminaba encimada sobre el menú.
La bajada oficial se conserva completa en el pie de página. */
.header .brand__tag { display: none; }
@media (min-width: 1241px) {
.header__inner { gap: 16px; }
.header .brand {
gap: 10px;
min-inline-size: 0;
}
.header .brand__mark { inline-size: 52px; }
.header .brand__tag {
display: block;
max-inline-size: 198px;
overflow: hidden;
text-overflow: ellipsis;
font-size: .66rem;
letter-spacing: .035em;
color: #52637C;
}
.nav { gap: 14px; }
.nav__link {
padding-inline: 8px;
font-size: .89rem;
}
.nav__cta {
min-height: 44px;
padding-inline: 18px;
}
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
display: block;
padding: 9px 11px;
border-radius: 9px;
font-size: .93rem;
font-weight: 500;
color: var(--navy-800);
white-space: nowrap;
transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav__link:hover { color: var(--blue-600); background: var(--blue-050); text-decoration: none; }
.nav__link.is-active { color: var(--blue-600); font-weight: 600; }
.burger {
display: none;
align-items: center;
justify-content: center;
/* Por encima del panel para que el botón de cerrar siempre sea visible. */
position: relative;
z-index: 80;
inline-size: 46px;
block-size: 46px;
background: #fff;
border-radius: 12px;
border: 1px solid var(--line);
color: var(--navy-900);
--ico: 24px;
}
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }
.nav-scrim {
position: fixed;
inset: 0;
z-index: 55;
background: rgba(4, 16, 42, .5);
backdrop-filter: blur(2px);
}
/* --------------------------------------------------------------------------
7. Hero de portada
Una sola composición: fotografía amplia a la derecha, texto a la izquierda
sobre la zona clara y nada montado encima. Ocupa alrededor del 80 % de la
altura visible para que al entrar se lea como portada, no como una sección
comprimida.
PARA CAMBIAR LAS FOTOGRAFÍAS: se sustituyen los archivos de
assets/images/hero/ conservando los nombres, o se editan las rutas del HTML.
El encuadre de cada una se afina en .hero__foto--1/2/3.
-------------------------------------------------------------------------- */
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
align-items: center;
min-block-size: min(82vh, 780px);
padding-block: clamp(48px, 5vw, 72px) clamp(72px, 7vw, 104px);
background: var(--white);
}
.hero__medios { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__foto {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.1s var(--ease);
}
.hero__foto.is-activa { opacity: 1; }
.hero__foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Encuadre por fotografía: mantiene los rostros dentro y a la derecha. */
.hero__foto--1 img { object-position: 80% 26%; }
.hero__foto--2 img { object-position: 76% 30%; }
.hero__foto--3 img { object-position: 78% 24%; }
/* Degradado blanco solo por la izquierda: da fondo al texto sin apagar la
fotografía, que fue creada clara a propósito. */
.hero__medios::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(96deg, #fff 14%, rgba(255, 255, 255, .93) 36%, rgba(255, 255, 255, .5) 54%, rgba(255, 255, 255, 0) 74%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__slides { display: grid; margin: 0; padding: 0; list-style: none; }
/* Todas en la misma celda: la caja no salta al cambiar de diapositiva. */
.hero__slide {
grid-area: 1 / 1;
max-inline-size: min(620px, 100%);
opacity: 0;
transform: translateY(12px);
transition: opacity .5s var(--ease), transform .5s var(--ease);
pointer-events: none;
}
.hero__slide.is-activa { opacity: 1; transform: none; pointer-events: auto; }
.hero__title {
margin: 0 0 20px;
/* Medida pensada para que el titular más largo entre en tres líneas sin
bajar el cuerpo de la tipografía. */
max-inline-size: 15ch;
font-family: var(--font-display);
font-size: clamp(1.9rem, 3.9vw, 3.05rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: .002em;
text-transform: uppercase;
text-wrap: balance;
color: var(--navy-900);
}
/* Solo la primera diapositiva. Es la portada de la marca, así que el titular
crece y se aprieta el interlineado: con cuatro palabras cortas puede permitirse
un cuerpo mayor sin desbordar. Las otras dos siguen con la medida de arriba. */
.hero__title--marca {
max-inline-size: 13ch;
font-size: clamp(2.15rem, 4.6vw, 3.75rem);
line-height: 1.04;
letter-spacing: -.012em;
margin-bottom: 22px;
}
/* El nombre como remate, no como una línea más del titular: cuerpo menor, muy
espaciado y precedido del filete azul→rojo de la marca. Se lee como firma. */
.hero__marca {
display: block;
margin-top: .46em;
font-size: .365em;
font-weight: 700;
letter-spacing: .3em;
line-height: 1.1;
color: var(--blue-700);
}
.hero__marca::before {
content: "";
display: block;
inline-size: 62px;
block-size: 3px;
margin-bottom: .62em;
border-radius: 2px;
background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-500) 46%, var(--red-600) 100%);
}
.hero__lead {
margin: 0 0 32px;
max-inline-size: 44ch;
font-size: clamp(1rem, 1.35vw, 1.08rem);
line-height: 1.62;
color: var(--text-2);
}
/* Los rótulos van en mayúsculas por CSS, no en el HTML: así el texto sigue
siendo legible para lectores de pantalla y al copiarlo. */
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__acciones .btn {
text-transform: uppercase;
letter-spacing: .05em;
font-size: .82rem;
min-block-size: 50px;
padding-inline: 26px;
}
/* En la portada el botón principal va plano: el brillo y la sombra amplia lo
hacían ver publicitario junto a una fotografía tan limpia. */
.hero__acciones .btn--primary {
background-image: none;
box-shadow: none;
}
.hero__acciones .btn--primary:hover { box-shadow: none; }
/* Flechas pegadas a los bordes, discretas y solo visibles en pantallas anchas. */
.hero__flecha {
position: absolute;
inset-block-start: 50%;
z-index: 3;
translate: 0 -50%;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 46px;
block-size: 46px;
border-radius: 50%;
border: 1px solid var(--gray-200);
background: rgba(255, 255, 255, .72);
color: var(--navy-800);
--ico: 18px;
transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.hero__flecha--ant { inset-inline-start: clamp(10px, 2vw, 26px); }
.hero__flecha--sig { inset-inline-end: clamp(10px, 2vw, 26px); }
.hero__flecha:hover { border-color: var(--blue-600); color: var(--blue-600); background: #fff; }
.hero__flecha--ant .ico { transform: rotate(180deg); }
/* Puntos centrados cerca del borde inferior. */
.hero__puntos {
position: absolute;
inset-block-end: clamp(22px, 3vw, 34px);
inset-inline: 0;
z-index: 3;
display: flex;
justify-content: center;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.hero__puntos li { display: inline-flex; }
/* El botón es alto y transparente para que el dedo lo alcance; la raya visible
la dibuja el pseudoelemento, centrada dentro de esa zona. */
.hero__puntos button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 34px;
block-size: 44px;
background: none;
}
.hero__puntos button::before {
content: "";
inline-size: 22px;
block-size: 3px;
border-radius: 2px;
background: var(--gray-300);
transition: background .4s var(--ease), inline-size .4s var(--ease);
}
.hero__puntos button:hover::before { background: var(--blue-500); }
.hero__puntos button[aria-current="true"] { inline-size: 46px; }
.hero__puntos button[aria-current="true"]::before { inline-size: 34px; background: var(--red-600); }
/* --------------------------------------------------------------------------
8. Pilares · franja editorial
Los cuatro conceptos que antes flotaban en tarjetas sobre el hero. Ahora
cierran la introducción como una franja de texto: un filete arriba, títulos
pequeños y una frase cada uno. Sin cajas, sin sombras y sin iconos, para que
el inicio quede despejado y la fotografía del hero sea la protagonista.
-------------------------------------------------------------------------- */
.pilares {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(20px, 2.6vw, 38px);
margin: clamp(38px, 4.5vw, 60px) 0 0;
padding: 0;
list-style: none;
}
.pilares li {
padding-block-start: 18px;
border-block-start: 2px solid var(--blue-600);
}
/* Solo el primero lleva el filete en azul; el resto en gris, para que el
acento marque el inicio de la franja sin repetirse cuatro veces. */
.pilares li + li { border-block-start-color: var(--gray-200); }
.pilares h3 {
margin: 0 0 6px;
font-size: .96rem;
line-height: 1.3;
color: var(--navy-900);
}
.pilares p {
margin: 0;
font-size: .88rem;
line-height: 1.55;
color: var(--text-2);
}
/* --------------------------------------------------------------------------
9. Introducción
-------------------------------------------------------------------------- */
.intro__grid {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
.intro__body p + p { margin-top: 1em; }
.intro__body .link-arrow { margin-top: 8px; }
/* --------------------------------------------------------------------------
9 bis. Experiencia y capacidad
Fotografía a sangre bajo un velo azul marino. La fuerza la llevan la imagen,
los números y el contraste: sin tarjetas ni un icono por cifra.
-------------------------------------------------------------------------- */
.capacidad {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(64px, 8vw, 112px);
color: var(--text-inv);
background-color: var(--navy-950);
}
/* La fotografía va como fondo, no como ![]()
: así nunca altera el ancho del
documento y se puede oscurecer sin capas extra. */
.capacidad::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: url("../assets/images/editorial/capacidad-fondo.webp");
background-size: cover;
background-position: center 38%;
opacity: .3;
}
.capacidad::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(105deg, rgba(2, 10, 40, .95) 8%, rgba(3, 25, 98, .82) 52%, rgba(3, 25, 98, .62) 100%);
}
.capacidad__inner { position: relative; z-index: 1; }
.capacidad__head { max-inline-size: 46ch; }
.capacidad__head .section__title { color: #fff; }
.capacidad__sub {
margin: 14px 0 0;
font-size: 1.02rem;
line-height: 1.6;
color: var(--text-inv-2);
}
.cifras {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(20px, 3vw, 44px);
margin-block: clamp(38px, 5vw, 62px) 0;
}
/* Separadores discretos, no tarjetas. */
.cifra + .cifra {
border-inline-start: 1px solid rgba(168, 204, 247, .24);
padding-inline-start: clamp(20px, 3vw, 44px);
}
.cifra__valor {
display: flex;
align-items: baseline;
gap: 2px;
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.6rem, 4.6vw, 4rem);
/* Con 1 exacto la caja de línea queda por debajo del alto real del glifo en
Sora y los trazos altos rozan el borde. */
line-height: 1.08;
color: #fff;
/* Los dígitos no bailan mientras sube el contador. */
font-variant-numeric: tabular-nums;
}
/* El contador reescribe este número muchas veces por segundo; con cifras de
ancho fijo el bloque no se mueve mientras sube. */
.cifra__n { font-variant-numeric: tabular-nums; }
.cifra__sufijo { font-size: .5em; color: var(--blue-200); }
.cifra__etiqueta {
margin: 14px 0 0;
font-size: 1rem;
font-weight: 600;
color: #fff;
}
.cifra__detalle {
margin: 6px 0 0;
font-size: .86rem;
line-height: 1.5;
color: var(--text-inv-2);
}
.capacidad__pie {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
margin-top: clamp(34px, 4vw, 52px);
}
.capacidad__aviso {
margin: 0;
font-size: .82rem;
color: var(--blue-200);
}
/* --------------------------------------------------------------------------
9 quater. Franja de asistencia empresarial
Tres fotografías que se funden despacio bajo un velo azul marino. Las capas
van como fondo de un , no como ![]()
: no alteran el ancho del
documento y el fundido es solo opacidad, que el navegador compone barato.
-------------------------------------------------------------------------- */
.banda {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(70px, 9vw, 128px);
color: var(--text-inv);
background-color: var(--navy-950);
}
.banda__fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.banda__img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 42%;
opacity: 0;
transition: opacity 1.6s var(--ease);
}
.banda__img.is-activa { opacity: .34; }
.banda__img--1 { background-image: url("../assets/images/asistencias/seguridad.webp"); }
.banda__img--2 { background-image: url("../assets/images/asistencias/pyme.webp"); }
.banda__img--3 { background-image: url("../assets/images/asistencias/contable.webp"); }
.banda::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(100deg, rgba(2, 10, 40, .94) 6%, rgba(3, 25, 98, .8) 55%, rgba(3, 25, 98, .58) 100%);
}
.banda__inner .section__title { max-inline-size: min(520px, 100%); color: #fff; }
.banda__texto {
max-inline-size: min(560px, 100%);
margin: 14px 0 26px;
font-size: 1.04rem;
line-height: 1.6;
color: var(--text-inv-2);
}
/* Indicador mínimo: tres rayas finas, sin controles encima de la fotografía. */
.banda__pasos {
display: flex;
gap: 8px;
margin: clamp(28px, 3.4vw, 40px) 0 0;
padding: 0;
list-style: none;
}
.banda__pasos li {
inline-size: 34px;
block-size: 3px;
border-radius: 2px;
background: rgba(255, 255, 255, .26);
transition: background .5s var(--ease), inline-size .5s var(--ease);
}
.banda__pasos li.is-activa { inline-size: 54px; background: var(--red-500); }
/* --------------------------------------------------------------------------
9 ter. Testimonios
De dos en dos en escritorio, de uno en uno en celular, con la tarjeta de
medida fija para que el bloque no cambie de alto al pasar de vista.
-------------------------------------------------------------------------- */
/* Composición centrada: rompe el ritmo alineado a la izquierda del resto de
la página y le da a la sección su propio aire. */
.testimonios__head {
max-inline-size: min(680px, 100%);
margin-inline: auto;
text-align: center;
}
/* Dos tarjetas a la vista, del mismo tamaño siempre. Las seis están en una
única fila de retícula, así que todas heredan la altura de la más alta: al
deslizar no cambia el alto del bloque ni se mueve lo que viene debajo. */
.testimonios__marco { max-inline-size: 1080px; margin-inline: auto; }
.testimonios__pista { overflow: hidden; }
.testimonios__pista:focus-visible {
outline: 3px solid var(--blue-500);
outline-offset: 8px;
border-radius: 8px;
}
.testimonios__vista {
--hueco: clamp(20px, 2.4vw, 30px);
--pagina: 0;
display: grid;
grid-auto-flow: column;
/* Dos columnas dentro del encuadre; las demás se salen y quedan ocultas. */
grid-auto-columns: calc((100% - var(--hueco)) / 2);
gap: var(--hueco);
margin: 0;
padding: 0;
list-style: none;
/* Cada paso avanza el ancho del encuadre más un hueco. */
transform: translateX(calc(var(--pagina) * -1 * (100% + var(--hueco))));
transition: transform .5s var(--ease);
}
.testimonio {
display: flex;
min-block-size: 300px;
}
.testimonio__cita {
position: relative;
display: flex;
flex-direction: column;
inline-size: 100%;
margin: 0;
padding: clamp(28px, 2.8vw, 40px);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
background: #fff;
}
/* Comilla como marca tipográfica, no como adorno. */
.testimonio__cita::before {
content: "\201C";
position: absolute;
inset-block-start: 4px;
inset-inline-start: clamp(18px, 2.2vw, 28px);
font-family: var(--font-display);
font-size: 4.2rem;
line-height: 1;
color: var(--blue-100);
pointer-events: none;
}
.testimonio__texto {
position: relative;
margin: 0;
font-size: 1rem;
line-height: 1.66;
color: var(--navy-800);
text-wrap: pretty;
}
/* La firma se ancla al pie de la tarjeta, no al final del texto. */
.testimonio__firma {
margin-block-start: auto;
padding-block-start: clamp(20px, 2.2vw, 26px);
}
.testimonio__nombre {
margin: 0 0 3px;
font-family: var(--font-display);
font-size: .98rem;
line-height: 1.35;
font-weight: 600;
color: var(--navy-900);
}
.testimonio__meta { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--text-2); }
.testimonios__controles {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: clamp(24px, 3vw, 34px);
}
.testimonios__btn {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 46px;
block-size: 46px;
flex: none;
border-radius: 50%;
border: 1px solid var(--gray-200);
background: #fff;
color: var(--navy-800);
--ico: 19px;
transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.testimonios__btn:hover { border-color: var(--blue-600); color: var(--blue-600); background: var(--blue-050); }
#testimonioAnterior .ico { transform: rotate(180deg); }
.testimonios__conteo {
margin: 0;
min-inline-size: 5ch;
text-align: center;
font-size: .88rem;
font-variant-numeric: tabular-nums;
color: var(--text-2);
}
@media (prefers-reduced-motion: reduce) {
.testimonios__vista { transition: none; }
}
.testimonios__aviso {
max-inline-size: 860px;
margin: 18px auto 0;
font-size: .82rem;
color: var(--text-2);
}
/* Los nueve servicios oficiales, en retícula tipográfica. Un filete fino, el
número en pequeño, el nombre con presencia y la descripción debajo. Sin
iconos, sin tarjeta, sin sombra y sin fondo individual: el peso lo llevan la
tipografía y el espacio.
Las columnas se alinean al inicio para que todas las fichas arranquen a la
misma altura aunque el texto tenga distinto largo. */
.salud__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 3.4vw, 48px) clamp(28px, 3.6vw, 56px);
align-content: start;
margin: clamp(34px, 4vw, 52px) 0 0;
padding: 0;
list-style: none;
}
.salud__item {
padding-block-start: 18px;
border-block-start: 1px solid var(--gray-200);
}
.salud__n {
margin: 0 0 10px;
font-family: var(--font-display);
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
line-height: 1;
color: var(--blue-600);
font-variant-numeric: tabular-nums;
}
.salud__nombre {
margin: 0 0 8px;
font-size: 1.12rem;
line-height: 1.3;
color: var(--navy-900);
text-wrap: balance;
}
.salud__texto {
margin: 0;
font-size: .9rem;
line-height: 1.6;
color: var(--text-2);
}
/* Composición partida sobre fondo claro: la fotografía manda y el texto va al
lado. Antes era una caja azul marino con arco y puntos rojos, que era lo
último que quedaba con aspecto de plantilla. */
/* Composición a sangre por la DERECHA. Es la imagen especular de
`.proceso__grid` —ver allí la explicación de por qué no se usa `vw`—: aire,
texto y fotografía. Va a la derecha, y no a la izquierda como «Cómo
funciona» y «Red de médicos», para que las cuatro secciones con fotografía
grande no caigan todas del mismo lado.
Este bloque vive fuera del `.container` de «Servicios de salud», así que
arrastra él mismo el relleno lateral del sistema de columnas. */
.especialidades {
display: grid;
grid-template-columns:
minmax(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)))
minmax(0, calc(var(--container) / 2))
minmax(0, 1fr);
column-gap: 0;
align-items: stretch;
margin-top: clamp(40px, 5vw, 68px);
}
/* Las columnas se asignan a mano. Con tres columnas y dos hijos, la colocación
automática los mete en la primera y la segunda, y la primera es el aire
lateral: el texto quedaba aplastado y la fotografía en medio de la página. */
.especialidades__body {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline-end: clamp(28px, 4vw, 64px);
}
/* Sólo se come el relleno inferior de la sección: arriba tiene encima la lista
de servicios, así que ahí el aire hace falta. */
.especialidades__media {
grid-column: 3;
margin: 0 0 calc(-1 * var(--section-pad));
min-block-size: clamp(420px, 42vw, 640px);
}
.especialidades__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
/* La médica está en el tercio izquierdo del original: el encuadre se corre
hacia ese lado para que quede junto al texto y no pegada al borde de la
pantalla, y algo alto para no cortarle la cabeza al recortar. */
object-position: 34% 28%;
}
.especialidades__body h3 {
margin-bottom: .5em;
font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem);
color: var(--navy-900);
}
.especialidades__body > p { color: var(--text-2); line-height: 1.62; }
/* Lista editorial en columnas: sin viñeta de color, solo un filete que separa. */
.especialidades__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(20px, 2.4vw, 34px);
margin: clamp(22px, 2.6vw, 30px) 0 clamp(26px, 3vw, 34px);
padding: 0;
list-style: none;
}
.especialidades__list li {
padding-block: 11px;
border-block-start: 1px solid var(--gray-200);
font-size: .93rem;
color: var(--navy-800);
}
.especialidades__list li:nth-child(-n + 2) { border-block-start: 0; padding-block-start: 0; }
/* Barra de categorías: pestañas alineadas sobre un filete continuo, con el
buscador al otro extremo de la misma línea. Sustituye a las píldoras sueltas,
que se leían como etiquetas desordenadas y competían con las tarjetas. */
.catalogo__tools {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 10px 32px;
/* Buscador, pestañas, conteo y tarjetas tienen que leerse como una sola
herramienta de búsqueda, no como cuatro bloques sueltos. Los cuatro huecos
se recortaron a la vez: 26 → 14 aquí, 18 → 10 bajo el conteo. */
margin-bottom: 14px;
border-block-end: 1px solid var(--line);
}
.filtros { display: flex; flex-wrap: wrap; gap: 0 26px; }
.filtro {
display: inline-flex;
align-items: baseline;
gap: 7px;
min-block-size: 44px;
padding: 12px 0 11px;
border: 0;
/* El filete de la pestaña activa se monta sobre el de la barra. */
border-block-end: 2px solid transparent;
margin-block-end: -1px;
background: transparent;
font-size: .93rem;
font-weight: 500;
color: var(--text-2);
white-space: nowrap;
transition: color .18s var(--ease), border-color .18s var(--ease);
}
.filtro:hover { color: var(--navy-900); }
/* El número es información, no adorno: se distingue por tamaño, no por un gris
tan claro que no se pueda leer. */
.filtro__n { font-size: .76rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* Se nota cuál está elegida sin recuadros ni fondos de color. */
.filtro[aria-pressed="true"] {
color: var(--navy-900);
font-weight: 600;
border-block-end-color: var(--blue-600);
}
.filtro[aria-pressed="true"] .filtro__n { color: var(--blue-600); }
/* Buscador al extremo derecho de la misma línea, en un tono discreto para que
la barra se lea de un tirón. */
.buscador {
position: relative;
display: flex;
align-items: center;
inline-size: min(100%, 300px);
margin-block-end: 6px;
}
.buscador__icon {
position: absolute;
inset-inline-start: 13px;
color: var(--text-2);
pointer-events: none;
--ico: 17px;
}
.buscador input {
inline-size: 100%;
min-height: 44px;
padding: 9px 46px 9px 39px;
border-radius: 10px;
border: 1px solid var(--gray-200);
background: var(--gray-050);
font-size: .9rem;
transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.buscador input:focus {
outline: none;
background: #fff;
border-color: var(--blue-500);
box-shadow: 0 0 0 3px var(--blue-100);
}
.buscador input::-webkit-search-cancel-button { display: none; }
.buscador__clear {
position: absolute;
inset-inline-end: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 40px; block-size: 40px;
border-radius: 8px;
color: var(--text-2);
--ico: 15px;
}
/* El `display` de la regla anterior le ganaba al atributo `hidden`, así que la
equis se veía también con el campo vacío. */
.buscador__clear[hidden] { display: none; }
.buscador__clear:hover { background: var(--gray-100); color: var(--navy-900); }
.catalogo__nota {
margin: 0 0 10px;
padding: 12px 16px;
border-inline-start: 3px solid var(--blue-500);
border-radius: 0 10px 10px 0;
background: var(--blue-050);
font-size: .9rem;
color: var(--text-2);
}
.catalogo__conteo { margin: 0 0 10px; font-size: .87rem; color: var(--text-2); }
.catalogo__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 18px;
align-items: stretch;
}
.acard { display: flex; }
/* Ficha de directorio, no de tienda: sin sombra en reposo y con un borde muy
fino. Al pasar el cursor se levanta apenas y aparece una sombra suave. */
.acard__inner {
display: flex;
flex-direction: column;
inline-size: 100%;
overflow: hidden;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 14px;
transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
/* Sin salto al pasar el cursor: en una retícula de veintinueve fichas el
levantamiento se sentía de tienda. Basta el borde y el acercamiento leve. */
.acard__inner:hover { border-color: var(--blue-200); }
/* Fotografía de la asistencia: es la misma que se amplía en el detalle. */
.acard__media {
position: relative;
margin: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--gray-100);
}
.acard__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.acard__inner:hover .acard__media img { transform: scale(1.05); }
/* La fotografía de Ambulancias destacaba de más entre las 29: medida, es la
segunda más saturada (0.601 frente a una mediana de 0.339, un 77 % por
encima) y además más oscura que la media (0.442 frente a 0.506). Se equilibra
con un ajuste no destructivo —el archivo no se toca— y acotado a esa tarjeta,
para no alterar las otras veintiocho. */
.acard[data-id="ambulancia"] .acard__media img {
filter: saturate(.82) brightness(1.05);
}
.acard__body { padding: 16px 18px 0; }
.acard__title {
font-size: 1.04rem;
line-height: 1.28;
margin-bottom: .38em;
color: var(--navy-900);
text-wrap: balance;
}
.acard__text {
font-size: .89rem;
color: var(--text-2);
line-height: 1.55;
margin: 0 0 16px;
}
/* Una sola acción, separada del texto por un filete fino y con el mismo
tratamiento de enlace con flecha que el resto de la página. */
.acard__foot {
display: flex;
margin-top: auto;
margin-inline: 18px;
padding: 0 0 16px;
border-block-start: 1px solid var(--line);
}
.acard__btn {
display: inline-flex;
align-items: center;
gap: 8px;
min-block-size: 44px;
padding: 10px 0;
border: 0;
background: transparent;
font-size: .87rem;
font-weight: 600;
color: var(--blue-700);
transition: color .18s var(--ease), gap .18s var(--ease);
--ico: 15px;
}
.acard__btn:hover { color: var(--navy-900); gap: 12px; }
.catalogo__vacio {
padding: 30px;
text-align: center;
color: var(--text-2);
background: var(--gray-050);
border-radius: var(--radius);
}
.catalogo__mas { display: flex; justify-content: center; margin-top: 26px; }
.catalogo__mas:empty { display: none; }
/* --------------------------------------------------------------------------
12. Modal de detalle
-------------------------------------------------------------------------- */
.modal {
position: fixed;
inset: 0;
z-index: 120;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(4, 16, 42, .62); backdrop-filter: blur(3px); }
.modal__dialog {
position: relative;
inline-size: min(680px, 100%);
max-block-size: min(88vh, 860px);
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6);
animation: modalIn .28s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal__close {
position: absolute;
inset-block-start: 14px;
inset-inline-end: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 40px; block-size: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: var(--navy-900);
box-shadow: var(--shadow-sm);
--ico: 20px;
}
.modal__close:hover { background: #fff; }
.modal__media { position: relative; }
.modal__contenido { display: contents; }
.modal__media img {
inline-size: 100%;
aspect-ratio: 16 / 8;
object-fit: cover;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal__body { padding: 26px clamp(22px, 3vw, 34px) clamp(24px, 3vw, 32px); }
/* La categoría, como antetítulo del detalle y no como etiqueta de color: el
mismo tratamiento que los antetítulos del resto de la página. */
.modal__cat {
display: block;
margin-bottom: 10px;
font-family: var(--font-display);
font-size: .76rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--blue-700);
}
.modal__body h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); }
.modal__resumen { color: var(--text-2); }
.modal__sub {
margin: 22px 0 12px;
font-family: var(--font-display);
font-size: .82rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--navy-800);
}
.modal__incluye {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 8px 18px;
}
.modal__incluye li { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; --ico: 17px; }
.modal__incluye .ico { color: var(--blue-600); margin-top: 3px; stroke-width: 2.6; }
.modal__nota {
margin-top: 22px;
padding: 13px 16px;
border-radius: 12px;
background: var(--gray-050);
font-size: .85rem;
color: var(--text-2);
}
/* Aquí sí se ofrece el contacto, ya con la asistencia explicada. Va bajo un
filete y con un rótulo corto, para que se lea como cierre y no como anuncio. */
.modal__acciones { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.modal__acciones-tit {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: .95rem;
font-weight: 600;
color: var(--navy-900);
}
.modal__botones { display: flex; flex-wrap: wrap; gap: 10px; }
/* --------------------------------------------------------------------------
13. Cómo funciona
-------------------------------------------------------------------------- */
/* Composición editorial: fotografía a un lado, pasos al otro. */
.proceso { position: relative; isolation: isolate; overflow: hidden; }
/* Composición a sangre por la izquierda: la fotografía llega al borde de la
pantalla y el texto sigue alineado con el sistema de columnas del sitio.
Cómo se consigue sin `vw`: este mismo elemento es el `.container`, así que se
le quita el ancho máximo y el relleno y pasa a ocupar todo el ancho. A partir
de ahí los porcentajes de la rejilla se miden sobre el ancho REAL del
elemento, que ya descuenta la barra de desplazamiento. Con `50vw` la sección
se pasaría de largo justo el ancho de esa barra y el documento desbordaría.
Las tres columnas son: fotografía (lo que sobre), texto (media caja del
contenedor) y aire derecho, calculado para que el texto termine exactamente
donde termina el contenedor del resto de la página. */
.proceso__grid {
display: grid;
max-width: none;
padding-inline: 0;
grid-template-columns:
minmax(0, 1fr)
minmax(0, calc(var(--container) / 2))
minmax(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)));
/* Sin hueco entre columnas: con `gap` la tercera columna, que va vacía,
añadiría una separación de más y el texto dejaría de cuadrar. La
separación la pone el relleno del texto. */
column-gap: 0;
align-items: stretch;
}
/* El texto se centra respecto a la altura de la fotografía. Con `stretch` la
columna ocupa todo el alto, así que el centrado lo hace el propio bloque. */
.proceso__cuerpo {
display: flex;
flex-direction: column;
justify-content: center;
padding-inline-start: clamp(28px, 4vw, 64px);
padding-block: clamp(24px, 3vw, 48px);
}
/* Sin marco, sin sombra y sin radio: la fotografía es un plano de la sección,
no una ventana dentro de ella. El alto lo marca el contenido, con un mínimo
para que nunca quede como una franja estrecha. */
.proceso__media {
/* Se come el relleno vertical de la sección para tocar su borde superior e
inferior: si queda una franja de fondo arriba y abajo, la fotografía
vuelve a leerse como una lámina apoyada encima en vez de como un plano de
la propia sección. El texto conserva su relleno. */
margin: calc(-1 * var(--section-pad)) 0;
min-block-size: clamp(420px, 44vw, 660px);
}
.proceso__media picture { display: block; block-size: 100%; }
.proceso__media img,
.proceso__media picture {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
/* Encuadre de la tabla técnica. */
object-position: 50% 32%;
}
/* Los tres pasos como una línea vertical numerada, no como tarjetas. */
.pasos { display: grid; gap: 0; margin: clamp(26px, 3vw, 36px) 0 0; }
.paso {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: clamp(16px, 2vw, 26px);
align-items: start;
padding-block: clamp(18px, 2.2vw, 26px);
}
.paso + .paso { border-block-start: 1px solid rgba(168, 204, 247, .22); }
.paso__num {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 700;
line-height: 1;
color: var(--red-500);
font-variant-numeric: tabular-nums;
}
.paso h3 { margin-bottom: .22em; font-size: 1.06rem; color: #fff; }
.paso p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--text-inv-2); }
/* Remate de la sección: la acción queda a la vista al terminar de leer los
tres pasos, junto a la aclaración de disponibilidad. */
.pasos__cierre {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 28px;
margin-top: clamp(24px, 3vw, 34px);
}
.pasos__nota {
flex: 1 1 34ch;
margin: 0;
font-size: .88rem;
color: var(--text-inv-2);
max-width: 62ch;
}
/* --------------------------------------------------------------------------
15. Documentación clínica
-------------------------------------------------------------------------- */
.doc__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
gap: clamp(32px, 5vw, 64px);
align-items: center;
}
.doc__list { margin: 22px 0; display: grid; gap: 10px; }
.doc__list li { display: flex; align-items: flex-start; gap: 11px; --ico: 19px; }
.doc__list .ico { color: var(--blue-600); margin-top: 4px; stroke-width: 2.6; }
.doc__legal { font-size: .88rem; color: var(--text-2); }
.doc__visual { display: flex; flex-direction: column; align-items: center; }
/* Escenario del reporte: un panel oscuro le da peso al documento, que antes
flotaba solo sobre el fondo blanco y pasaba desapercibido. */
.doc__escenario {
/* Marco sobrio: sin arco ni píldora, con aire suficiente para que la tableta
respire y quede a la altura del bloque de texto. */
display: flex;
align-items: center;
justify-content: center;
padding: clamp(26px, 3.4vw, 46px);
border-radius: var(--radius-lg);
background: linear-gradient(155deg, var(--navy-950), var(--navy-800));
}
.tablet__frame::after {
content: "";
position: absolute;
inset-block-start: 5px;
inset-inline-start: 50%;
transform: translateX(-50%);
inline-size: 46px; block-size: 4px;
border-radius: 3px;
background: rgba(255, 255, 255, .2);
}
.tablet__screen {
border-radius: 14px;
overflow: hidden;
background: #fff;
max-block-size: 540px;
overflow-y: hidden;
}
.tablet__screen img { inline-size: 100%; }
.doc__caption {
margin: 18px 0 0;
text-align: center;
font-size: .86rem;
color: var(--text-2);
}
.doc__caption .ico { color: var(--blue-600); }
.empresas__grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr);
gap: clamp(20px, 3vw, 34px);
align-items: start;
}
/* Lista editorial numerada: el número marca el orden de lectura y el filete
separa cada beneficio, sin convertir cada idea en una tarjeta. */
.ecards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(26px, 3.4vw, 46px);
margin: 0;
padding: 0;
list-style: none;
counter-reset: beneficio;
}
.ecards li {
counter-increment: beneficio;
padding-block: 20px;
border-block-start: 1px solid var(--gray-200);
}
/* La primera de cada columna no necesita filete: ya la separa el título. */
.ecards li:nth-child(-n + 2) { border-block-start: 0; padding-block-start: 0; }
.ecards h3 {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 6px;
font-size: 1.02rem;
color: var(--navy-900);
}
.ecards h3::before {
content: counter(beneficio, decimal-leading-zero);
font-size: .78rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--blue-600);
font-variant-numeric: tabular-nums;
}
.ecards p {
margin: 0;
padding-inline-start: 27px;
font-size: .89rem;
line-height: 1.58;
color: var(--text-2);
}
.empresas__cta {
position: sticky;
top: calc(var(--header-h) + 20px);
padding: clamp(26px, 3vw, 34px);
border-radius: var(--radius-lg);
background: linear-gradient(155deg, var(--navy-950), var(--navy-800));
color: var(--text-inv);
box-shadow: var(--shadow-lg);
}
.empresas__cta h3 { font-size: 1.3rem; }
.empresas__cta p { color: var(--text-inv-2); font-size: .95rem; margin-bottom: 22px; }
.empresas__cta .btn + .btn { margin-top: 10px; }
/* --------------------------------------------------------------------------
16. Red de proveedores
-------------------------------------------------------------------------- */
/* Misma arquitectura a sangre que «Cómo funciona» —ver el comentario de
`.proceso__grid`—, pero con su propia proporción: aquí la fotografía es
apaisada y el texto es más corto, así que el bloque es menos alto y la foto
no se estira a lo vertical. Coherente, no idéntica. */
.red__grid {
display: grid;
max-width: none;
padding-inline: 0;
grid-template-columns:
minmax(0, 1fr)
minmax(0, calc(var(--container) / 2))
minmax(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)));
column-gap: 0;
align-items: stretch;
}
.red__body {
display: flex;
flex-direction: column;
justify-content: center;
padding-inline-start: clamp(28px, 4vw, 64px);
padding-block: clamp(24px, 3vw, 48px);
}
.red__media {
margin: calc(-1 * var(--section-pad)) 0;
position: relative;
min-block-size: clamp(360px, 36vw, 560px);
}
/* El grupo está en el tercio derecho del original, junto al texto, y el muro
despejado cae hacia el borde de la pantalla. El encuadre se corre hacia ellos
para que el recorte —que a 1366 px se come los costados— no los parta. */
.red__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 66% 42%; }
.red__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(200deg, rgba(7, 27, 59, .28), transparent 55%);
pointer-events: none;
}
.red__list { display: grid; gap: 10px; margin: 20px 0 28px; }
.red__list li { display: flex; align-items: flex-start; gap: 11px; --ico: 19px; }
.red__list .ico { color: var(--blue-600); margin-top: 4px; stroke-width: 2.6; }
.red__hint { margin-top: 14px; font-size: .85rem; color: var(--text-2); }
/* --------------------------------------------------------------------------
18. Sobre nosotros
-------------------------------------------------------------------------- */
/* A sangre por la derecha, como «Especialidades», pero con su propio ritmo:
aquí el relato es largo y lleva cita y valores, así que la columna de texto
manda en el alto y la fotografía la acompaña de arriba abajo. */
.nosotros__grid {
display: grid;
max-width: none;
padding-inline: 0;
grid-template-columns:
minmax(var(--gutter), calc(50% - var(--container) / 2 + var(--gutter)))
minmax(0, calc(var(--container) / 2))
minmax(0, 1fr);
column-gap: 0;
align-items: stretch;
}
.nosotros__body {
grid-column: 2;
padding-inline-end: clamp(28px, 4vw, 64px);
padding-block: clamp(8px, 1.5vw, 24px);
}
.nosotros__body p + p { margin-top: 1em; }
.nosotros__media {
grid-column: 3;
margin: calc(-1 * var(--section-pad)) 0;
min-block-size: clamp(420px, 44vw, 680px);
}
.nosotros__media img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
/* Las dos personas están en el tercio derecho del original: el encuadre se
corre hacia ellas para que no queden cortadas contra el borde. */
object-position: 68% 50%;
}
.quote {
margin: 28px 0 0;
padding: 24px 26px 24px 30px;
border-radius: var(--radius);
border-inline-start: 4px solid var(--red-600);
background: #fff;
box-shadow: var(--shadow-sm);
position: relative;
}
.quote__mark {
--ico: 30px;
color: var(--blue-100);
fill: currentColor;
stroke: none;
margin-bottom: 6px;
}
.quote p {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.02rem, .98rem + .3vw, 1.16rem);
font-weight: 600;
color: var(--navy-900);
line-height: 1.45;
}
/* Lista editorial numerada en lugar de tres tarjetas con icono: la página ya
apoya bastante en iconografía y aquí el peso lo llevan el número y el texto. */
.valores { display: grid; gap: 0; }
.valores li {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
column-gap: 14px;
align-items: baseline;
padding-block: 16px;
}
.valores li + li { border-block-start: 1px solid var(--line); }
.valores__n {
grid-row: 1 / 3;
font-family: var(--font-display);
font-size: .84rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--red-600);
font-variant-numeric: tabular-nums;
}
.valores h3 {
grid-column: 2;
margin-bottom: .18em;
font-size: 1rem;
color: var(--navy-900);
}
.valores p { grid-column: 2; margin: 0; font-size: .89rem; line-height: 1.55; color: var(--text-2); }
/* --------------------------------------------------------------------------
18. Galería
-------------------------------------------------------------------------- */
/* Los cuatro contextos que nombra el propio texto de la sección: casa,
consultorio, camino y empresa. Cada mosaico lleva su fotografía real. */
/* Cuatro paneles fotográficos: la imagen es el elemento principal y el texto
va encima, sobre un degradado que garantiza la lectura. Sin iconos. */
/* Una sola banda continua en lugar de cuatro tarjetas sueltas: separadas por
huecos y sobre fondo blanco se veían flotando, sin relación entre sí. */
.contextos {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
overflow: hidden;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.contexto {
position: relative;
/* La proporción vive en el panel, no en la imagen: así los cuatro miden
exactamente igual y la fotografía llena su hueco sin dejar franjas. */
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--navy-900);
}
/* Línea fina de separación entre paneles, del propio azul de la marca. */
.contexto + .contexto { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .16); }
.contexto img {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
/* Encuadre alto: deja las caras en el tercio superior, lejos del pie. */
/* Encuadre de la tabla técnica: el sujeto vive en el tercio superior. */
object-position: 50% 28%;
transition: transform .6s var(--ease);
}
.contexto:hover img { transform: scale(1.06); }
.contexto__pie {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
padding: 24px 20px 22px;
background: linear-gradient(to top, rgba(2, 12, 48, .95) 12%, rgba(2, 12, 48, .68) 46%, rgba(2, 12, 48, 0) 100%);
}
.contexto__pie h3 {
margin: 0 0 4px;
font-size: 1.12rem;
color: #fff;
}
.contexto__pie p {
margin: 0;
font-size: .86rem;
line-height: 1.45;
color: var(--text-inv-2);
/* Una de las cuatro descripciones cabe en un renglón; se reserva el alto de
dos para que los títulos queden a la misma altura en toda la banda. */
min-block-size: 2.9em;
}
/* --------------------------------------------------------------------------
19. Preguntas frecuentes
-------------------------------------------------------------------------- */
/* Dos columnas y dos filas: la cabecera y el bloque de ayuda se reparten la
columna izquierda y el acordeón ocupa la derecha completa. Así la izquierda
no queda con un vacío enorme debajo del título. */
.faq__grid {
display: grid;
grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
grid-template-rows: auto 1fr;
gap: clamp(28px, 4vw, 60px);
align-items: start;
}
.faq__head { grid-column: 1; grid-row: 1; }
.faq__list { grid-column: 2; grid-row: 1 / span 2; }
.faq__cierre { grid-column: 1; grid-row: 2; align-self: start; margin-top: 8px; }
.faq__head .btn { margin-top: 22px; }
.faq__list { display: grid; gap: 0; border-block-start: 1px solid var(--gray-200); }
/* Salida del acordeón: en móvil la cabecera queda muy arriba, así que al
terminar de leer las preguntas hay un camino directo al canal de contacto. */
.faq__cierre {
padding: 24px 22px;
border-radius: var(--radius);
border: 1px solid var(--blue-100);
background: linear-gradient(160deg, var(--blue-050), #fff 70%);
font-size: .95rem;
color: var(--text-2);
}
.faq__cierre p { margin: 0 0 14px; }
.faq__cierre strong {
display: block;
margin-bottom: 4px;
color: var(--navy-900);
font-size: 1.02rem;
}
.faq__cierre a {
display: inline-flex;
align-items: center;
/* Es una acción, no un enlace de prosa: necesita alto cómodo para el dedo. */
min-block-size: 44px;
gap: 7px;
font-weight: 600;
color: var(--blue-600);
--ico: 17px;
transition: gap .2s var(--ease);
}
.faq__cierre a:hover { text-decoration: none; gap: 11px; }
/* Acordeón de líneas: sin caja ni borde alrededor de cada pregunta. */
.faq__item {
background: transparent;
border: 0;
border-block-end: 1px solid var(--gray-200);
border-radius: 0;
overflow: hidden;
transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq__item[open] { border-color: var(--blue-200); box-shadow: var(--shadow-sm); }
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
color: var(--navy-900);
--ico: 20px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--blue-600); }
.faq__item summary .ico { color: var(--blue-600); transition: transform .25s var(--ease); }
.faq__item[open] summary .ico { transform: rotate(180deg); }
.faq__body {
padding: 0 22px 20px;
color: var(--text-2);
font-size: .95rem;
animation: faqIn .25s var(--ease);
}
.faq__body p { margin: 0; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
/* --------------------------------------------------------------------------
20. Contacto
-------------------------------------------------------------------------- */
/* Sección clara: el azul institucional se reserva para la cabecera del
formulario, no para el fondo entero. Los datos van como lista editorial con
filetes finos, sin un cuadro con icono por cada dato. */
.contacto { color: var(--text); }
.contacto .section__title { color: var(--navy-900); }
/* La cabecera venía preparada para fondo oscuro. */
.contacto .section__sub { color: var(--text-2); }
.contacto .eyebrow { color: var(--blue-600); }
.contacto__grid {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: clamp(30px, 4vw, 60px);
align-items: start;
margin-top: clamp(30px, 4vw, 44px);
}
.datos { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.datos li {
padding-block: 18px;
border-block-start: 1px solid var(--gray-200);
}
.datos li:first-child { border-block-start: 0; padding-block-start: 0; }
.datos h3 {
margin: 0 0 .35em;
font-size: .78rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--blue-600);
}
.datos a {
display: inline-block;
/* Alto cómodo para el dedo: son el teléfono y los correos, lo primero que
alguien toca desde el celular. */
padding-block: 9px;
color: var(--navy-900);
font-size: 1.04rem;
font-weight: 600;
}
.datos a:hover { color: var(--blue-600); }
.datos address { color: var(--navy-900); font-size: 1rem; line-height: 1.55; font-style: normal; }
.datos__meta { margin: 4px 0 0; font-size: .85rem; color: var(--text-2); }
.datos .link-arrow { display: inline-flex; font-size: .9rem; margin-top: 6px; }
.contacto__form {
padding: clamp(24px, 3vw, 36px);
border-radius: var(--radius-lg);
background: #fff;
color: var(--text);
box-shadow: var(--shadow-lg);
}
.contacto__form h3 { font-size: 1.3rem; }
.contacto__form-intro { font-size: .88rem; color: var(--text-2); margin-bottom: 22px; }
.campo { margin-bottom: 16px; }
.campo label {
display: block;
margin-bottom: 6px;
font-size: .87rem;
font-weight: 600;
color: var(--navy-800);
}
.campo label span[aria-hidden] { color: var(--red-600); }
.campo__opt { font-weight: 400; color: var(--text-2); }
.campo input, .campo select, .campo textarea {
inline-size: 100%;
min-height: 46px;
padding: 11px 14px;
border-radius: 12px;
border: 1.5px solid var(--gray-200);
background: #fff;
font-size: .95rem;
transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.campo textarea { min-height: 108px; resize: vertical; line-height: 1.55; }
.campo select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
padding-right: 42px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
outline: none;
border-color: var(--blue-500);
box-shadow: 0 0 0 4px rgba(22, 131, 230, .16);
}
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--red-600); }
.campo__error { margin: 6px 0 0; font-size: .82rem; color: var(--red-600); font-weight: 500; }
.campo-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.form__aviso { margin: 14px 0 0; font-size: .87rem; color: var(--text-2); min-height: 1.2em; }
.form__aviso.is-ok { color: #0F7B4F; font-weight: 500; }
/* Mapa de la sede. Estas reglas se habían perdido en una reescritura anterior
del archivo y el mapa quedaba sin marco ni tarjeta; se reconstruyen aquí. */
.mapa {
position: relative;
margin-top: clamp(34px, 4vw, 52px);
}
.mapa__marco {
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--gray-200);
background: var(--gray-100);
line-height: 0;
}
.mapa__iframe {
inline-size: 100%;
/* 460 px dejaba la zona del mapa muy vacía junto a la tarjeta. */
block-size: clamp(300px, 34vw, 360px);
border: 0;
display: block;
}
/* Tarjeta con la dirección, apoyada sobre una esquina del mapa. */
.mapa__tarjeta {
position: absolute;
inset-block-end: 26px;
inset-inline-start: 26px;
max-inline-size: 320px;
padding: 22px 22px 24px;
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow-lg);
}
.mapa__tarjeta h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--navy-900); }
.mapa__tarjeta address {
margin: 0 0 14px;
font-style: normal;
font-size: .9rem;
line-height: 1.55;
color: var(--text-2);
}
.mapa__nota {
margin: 14px 0 0;
font-size: .82rem;
color: var(--text-2);
}
/* --------------------------------------------------------------------------
21. Footer
-------------------------------------------------------------------------- */
.footer { background: var(--navy-950); color: var(--text-inv-2); }
.footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
gap: clamp(28px, 3.5vw, 48px);
padding-block: clamp(46px, 5vw, 68px);
}
.footer .brand { margin-bottom: 18px; }
.footer .brand__mark { inline-size: 60px; }
.footer .brand__name { color: #fff; font-size: 1.2rem; }
.footer .brand__tag { color: var(--text-inv-2); }
.footer__brand p { font-size: .92rem; line-height: 1.65; margin-bottom: 20px; }
.footer__title {
font-size: .84rem;
font-weight: 600;
letter-spacing: .11em;
text-transform: uppercase;
color: #fff;
margin-bottom: 18px;
}
.footer__col ul { display: grid; gap: 2px; }
.footer__col a { display: inline-block; padding-block: 9px; color: var(--text-inv-2); font-size: .92rem; }
.footer__col a:hover { color: #fff; }
.footer__contacto { display: grid; gap: 12px; }
.footer__contacto .ico { color: var(--blue-500); margin-top: 9px; }
.footer__contacto address, .footer__contacto span { padding-block: 5px; }
.footer__contacto address { font-size: .92rem; line-height: 1.55; }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__bottom-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding-block: 20px;
padding-inline-end: 92px;
font-size: .86rem;
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal a { display: inline-block; padding-block: 10px; color: var(--text-inv-2); }
.footer__legal a:hover { color: #fff; }
/* --------------------------------------------------------------------------
22. Páginas de texto (aviso de privacidad, error 404)
-------------------------------------------------------------------------- */
.prosa { max-inline-size: 76ch; }
.prosa h2 {
margin-top: 2.2em;
font-size: clamp(1.15rem, 1.06rem + .4vw, 1.35rem);
color: var(--navy-900);
}
.prosa p, .prosa li { color: var(--text-2); }
.prosa ul {
display: grid;
gap: 8px;
margin: 0 0 1.2em;
padding-inline-start: 4px;
}
.prosa ul li { display: flex; gap: 11px; }
.prosa ul li::before {
content: "";
flex: none;
inline-size: 6px; block-size: 6px;
margin-top: 11px;
border-radius: 50%;
background: var(--blue-500);
}
.prosa__fecha { font-size: .88rem; color: var(--text-2); margin-bottom: 2em; }
.prosa__contacto { padding: 0; }
.prosa__contacto li { align-items: center; --ico: 19px; }
.prosa__contacto li::before { display: none; }
.prosa__contacto .ico { color: var(--blue-600); }
.error404 {
display: grid;
align-items: center;
min-block-size: calc(100dvh - 260px);
text-align: center;
padding-block: clamp(60px, 10vw, 120px);
}
.error404 .prosa { margin-inline: auto; }
.error404__code {
display: inline-block;
font-family: var(--font-display);
font-size: clamp(3.6rem, 2rem + 7vw, 6rem);
font-weight: 700;
line-height: 1;
letter-spacing: -.04em;
background: linear-gradient(120deg, var(--blue-600), var(--red-600));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: .18em;
}
.error404__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
/* --------------------------------------------------------------------------
23. Botón flotante y barra de acciones
-------------------------------------------------------------------------- */
.fab {
position: fixed;
inset-block-end: 24px;
inset-inline-end: 24px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 20px;
border-radius: 999px;
background: #25D366;
color: #06301A;
font-weight: 600;
font-size: .92rem;
box-shadow: 0 14px 32px -12px rgba(37, 211, 102, .85);
--ico: 22px;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.fab:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -14px rgba(37, 211, 102, .95); text-decoration: none; }
.fab .ico { fill: currentColor; stroke: none; }
.fab__text { font-weight: 600; font-size: .92rem; }
.footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
/* --------------------------------------------------------------------------
Presencia internacional
Composición partida: el relato a la izquierda y los países a la derecha, en
una columna de rótulos grandes separados por filetes finos. Sin fotografía ni
iconos, como el resto de las secciones editoriales. Los dos rótulos son
cortos a propósito: se sustituyen sin tocar la maquetación cuando lleguen los
datos definitivos.
-------------------------------------------------------------------------- */
/* Fondo abstracto de la sección. Va como imagen de fondo y no como ![]()
: así
no puede alterar el ancho del documento. La textura tiene el color en el
tercio derecho y en el borde inferior, justo donde no hay texto largo; aun
así se le pone un velo blanco encima para no depender solo de eso. */
.presencia {
position: relative;
isolation: isolate;
overflow: hidden;
}
.presencia::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: url("../assets/images/editorial/presencia-colombia-bandera.webp");
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
}
/* Velo que aclara la mitad izquierda, que es donde vive el texto. La derecha
queda casi limpia para que se vea la onda. */
.presencia::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(95deg, #fff 24%, rgba(255, 255, 255, .88) 50%, rgba(255, 255, 255, .6) 74%, rgba(255, 255, 255, .34) 100%);
}
.presencia__grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
gap: clamp(32px, 5vw, 76px);
align-items: center;
}
.presencia__body { max-inline-size: 58ch; }
.presencia__body p + p { margin-top: 1em; }
.presencia__body .link-arrow { margin-top: 18px; }
.presencia__paises { margin: 0; padding: 0; list-style: none; }
.presencia__paises li {
padding-block: clamp(20px, 2.6vw, 28px);
border-block-start: 1px solid var(--line);
}
.presencia__paises li:first-child { border-block-start: 0; padding-block-start: 0; }
.presencia__paises li:last-child { padding-block-end: 0; }
.presencia__pais {
margin: 0 0 4px;
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--navy-900);
}
/* Más oscuros que el gris de texto secundario del resto del sitio: estos
rótulos caen justo sobre la zona de color del fondo, y con `--text-2` el
contraste bajaba a 2.9:1 medido sobre los píxeles pintados. */
.presencia__nota { margin: 0; font-size: .92rem; font-weight: 500; color: var(--navy-800); }
/* --------------------------------------------------------------------------
Redes sociales
Bloque con rótulo y con el nombre de cada red escrito. Antes era un icono
suelto en el pie y el cliente no lo identificaba: un símbolo sin texto se
lee como decoración, no como un enlace. Se usa en el pie (fondo oscuro) y en
la sección de contacto (variante clara, `.redes--claro`).
-------------------------------------------------------------------------- */
.redes { margin-top: clamp(24px, 3vw, 32px); }
.redes__titulo {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: .82rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--blue-200);
}
.redes__enlaces { display: flex; flex-wrap: wrap; gap: 10px; }
/* Se llama `redes__enlace` y no `red` porque `red` ya estaba ocupado: la sección
«Red de médicos y proveedores» es ``. Con el
nombre corto, esta regla la convertía en un botón a media página. */
.redes__enlace {
display: inline-flex;
align-items: center;
gap: 10px;
min-block-size: 44px; /* zona táctil mínima */
padding: 10px 18px 10px 15px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .05);
font-size: .93rem;
font-weight: 600;
color: #fff;
--ico: 19px;
transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.redes__enlace .ico { fill: currentColor; stroke: none; }
.redes__enlace:hover {
border-color: rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .12);
color: #fff;
text-decoration: none;
}
.redes__enlace:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Variante para fondo claro: la de la sección de contacto. */
.redes--claro .redes__titulo { color: var(--text-2); }
.redes--claro .redes__enlace {
border-color: var(--gray-200);
background: #fff;
color: var(--navy-800);
}
.redes--claro .redes__enlace:hover {
border-color: var(--blue-600);
background: var(--blue-050);
color: var(--blue-700);
}
.redes--claro .redes__enlace:focus-visible { outline-color: var(--blue-500); }
.actionbar { display: none; }
/* Con el menú móvil abierto se retira la barra inferior: así no queda ningún
control fuera del menú ni por encima de él. */
body.menu-abierto .actionbar { display: none !important; }
/* --------------------------------------------------------------------------
24. Preferencia de movimiento reducido
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
.js-anim .reveal { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
25. Impresión
-------------------------------------------------------------------------- */
@media print {
.topbar, .header, .fab, .actionbar, .hero__medios, .modal { display: none !important; }
body { color: #000; }
.section--dark, .contacto, .footer { background: #fff !important; color: #000 !important; }
}