
:root{
 --azul:#0878d6;
 --marino:#0a315e;
 --gris:#526c84;
 --claro:#eef7fe;
 --fondo:#f7fbff;
 --borde:#d8e7f2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 font-family:Arial,Helvetica,sans-serif;
 color:var(--marino);
 background:white;
 line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%}
section{scroll-margin-top:115px}
.contenedor{
 width:min(1160px,calc(100% - 36px));
 margin:auto;
}
header{
 position:sticky;
 top:0;
 z-index:30;
 background:white;
 border-bottom:1px solid var(--borde);
 box-shadow:0 4px 20px #103c6510;
}
.cabecera{
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:20px;
 padding:14px 0;
}
.marca{
 display:flex;
 align-items:center;
 gap:13px;
 font-weight:800;
}
.marca img{
 width:95px;
 height:70px;
 object-fit:contain;
}
.marca span{
 font-size:18px;
 line-height:1.13;
}
.marca small{
 display:block;
 color:var(--azul);
 letter-spacing:2px;
 font-size:11px;
 margin-top:5px;
}
.menu{
 display:flex;
 flex-wrap:wrap;
 gap:16px;
 align-items:center;
}
.menu a{
 font-size:14px;
 font-weight:700;
}
.menu a:hover{color:var(--azul)}
.menu .contactar{
 background:var(--azul);
 color:white;
 border-radius:12px;
 padding:12px 18px;
}
.hero{
 background:linear-gradient(120deg,#0a3975,#087bd6);
 color:white;
 padding:65px 0;
}
.hero-grid{
 display:grid;
 grid-template-columns:1fr .84fr;
 align-items:center;
 gap:45px;
}
.eyebrow{
 font-size:12px;
 letter-spacing:3px;
 text-transform:uppercase;
 font-weight:800;
}
.hero h1{
 font-size:clamp(36px,4.6vw,58px);
 line-height:1.1;
 margin:18px 0 24px;
}
.hero p{
 color:#eaf4ff;
 font-size:18px;
}
.botones{
 display:flex;
 flex-wrap:wrap;
 gap:12px;
 margin-top:24px;
}
.boton{
 display:inline-block;
 background:var(--azul);
 color:white;
 border:1px solid transparent;
 border-radius:11px;
 padding:13px 20px;
 font:800 14px Arial,sans-serif;
 text-align:center;
 cursor:pointer;
}
.boton:hover{filter:brightness(.95)}
.boton.blanco{
 background:white;
 color:var(--marino);
}
.boton.contorno{
 background:transparent;
 border-color:#ffffffa8;
}
.foto-principal{
 background:white;
 padding:8px;
 border-radius:23px;
 overflow:hidden;
 box-shadow:0 18px 45px #001b4270;
}
.foto-principal img{
 width:100%;
 aspect-ratio:1/1;
 object-fit:cover;
 display:block;
 border-radius:15px;
}
.foto-principal p{
 color:var(--marino);
 font-size:13px;
 font-weight:700;
 margin:10px 7px 4px;
}
.friso{
 background:var(--fondo);
 padding:22px 0;
 border-bottom:1px solid var(--borde);
}
.friso-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:14px;
}
.dato{
 background:white;
 border:1px solid var(--borde);
 border-radius:13px;
 padding:15px 18px;
}
.dato strong{display:block}
.dato span{
 display:block;
 color:var(--gris);
 font-size:13px;
}
.seccion{padding:70px 0}
.seccion.alt{background:var(--fondo)}
.etiqueta{
 color:var(--azul);
 font-weight:800;
 font-size:12px;
 text-transform:uppercase;
 letter-spacing:2px;
}
h2{
 font-size:clamp(28px,3.4vw,40px);
 line-height:1.15;
 margin:9px 0 16px;
}
.descripcion{
 max-width:780px;
 color:var(--gris);
 margin-bottom:28px;
}
.dos{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:22px;
}
.tres{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:18px;
}
.tarjeta{
 background:white;
 border:1px solid var(--borde);
 border-radius:19px;
 padding:25px;
 box-shadow:0 8px 24px #183f6710;
}
.tarjeta p,.tarjeta ul{color:var(--gris)}
.tarjeta ul{padding-left:21px}
.tarjeta li{margin-bottom:8px}
.atencion-card{background:#eff8ff}
.atencion-card h3{
 font-size:24px;
 margin:4px 0 10px;
}
.atencion-card .boton{margin-top:12px}
.nota{
 font-size:13px;
 color:var(--gris);
 margin-top:18px;
}

/* EQUIPO MÉDICO */

.medico{
 padding:0;
 overflow:hidden;
 display:flex;
 flex-direction:column;
}
.foto-medico{
 width:100%;
 height:350px;
 object-fit:cover;
 object-position:center 25%;
 background:#eaf3fa;
 display:block;
}
.contenido-medico{
 padding:26px;
 flex:1;
 display:flex;
 flex-direction:column;
}
.contenido-medico h3{
 font-size:25px;
 line-height:1.25;
 margin:0 0 7px;
}
.especialidad{
 color:var(--azul)!important;
 font-weight:700;
 margin:0 0 9px;
}
.credenciales{flex:1}
.horario{
 background:#eaf5fd;
 border-radius:12px;
 padding:15px;
 margin:18px 0;
}
.horario strong,.horario span{display:block}
.horario span{font-size:14px}
.contenido-medico .boton{align-self:flex-start}

/* SERVICIOS */

.icono{font-size:26px;margin-bottom:12px}
.servicio h3{font-size:20px;margin:4px 0 10px}
.servicio p{font-size:14px;margin:0}

/* OBRAS SOCIALES */

details{
 background:white;
 border:1px solid var(--borde);
 border-radius:16px;
 padding:23px;
}
summary{
 cursor:pointer;
 font-size:18px;
 font-weight:700;
 color:var(--azul);
}
#buscarObra{
 width:100%;
 display:block;
 margin:19px 0 10px;
 border:1px solid #b9cede;
 border-radius:11px;
 padding:13px;
 font:inherit;
}
.lista-obras{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:9px;
}
.obra{
 background:var(--fondo);
 border-radius:9px;
 padding:10px 12px;
 font-size:13px;
 overflow-wrap:anywhere;
}

/* ESCUELA DE PACIENTES */

.escuela{
 padding:38px;
 background:linear-gradient(120deg,#e5f4ff,#fbfdff);
 border:1px solid #cde6f7;
 border-radius:23px;
}
.escuela p{color:#385b7b}
.temas-escuela{
 display:flex;
 flex-wrap:wrap;
 gap:9px;
 margin:18px 0 28px;
}
.temas-escuela span{
 background:white;
 border:1px solid #c4deee;
 border-radius:30px;
 color:#15548b;
 padding:7px 12px;
 font-size:13px;
 font-weight:700;
}
.escuela-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:18px;
}
.escuela-card{
 padding:25px;
 background:white;
 border:1px solid #d2e5f3;
 border-radius:17px;
 display:flex;
 flex-direction:column;
 min-height:275px;
 box-shadow:0 6px 17px #143d6110;
}
.escuela-icono{
 background:#edf7ff;
 border-radius:13px;
 width:54px;
 height:54px;
 display:grid;
 place-items:center;
 font-size:26px;
 margin-bottom:13px;
}
.escuela-card h3{
 font-size:20px;
 line-height:1.3;
 margin:0 0 8px;
}
.escuela-card p{
 color:#466780;
 font-size:14px;
 margin:0 0 18px;
 flex:1;
}
.escuela-card .boton{align-self:flex-start}
.nota-escuela{
 color:#53718b!important;
 font-size:13px!important;
 margin:22px 0 0;
}

/* VENTANA DE ACCESO */

#accesoPacientes{
 width:min(480px,calc(100% - 28px));
 max-height:90vh;
 overflow:auto;
 border:0;
 border-radius:22px;
 padding:28px;
 color:var(--marino);
 background:white;
 box-shadow:0 18px 60px #041d3b44;
}
#accesoPacientes::backdrop{
 background:#061d37a9;
}
.acceso-superior{
 display:flex;
 justify-content:space-between;
 align-items:flex-start;
 gap:10px;
}
#accesoPacientes h2{
 font-size:26px;
 margin:0;
}
.cerrar-acceso{
 background:#eaf3fc;
 border:0;
 border-radius:9px;
 padding:2px 12px;
 color:var(--marino);
 font-size:28px;
 cursor:pointer;
}
#accesoPacientes p{
 color:#4a6881;
 font-size:14px;
}
#accesoPacientes form{
 display:flex;
 flex-direction:column;
 gap:9px;
}
#accesoPacientes label{
 font-size:14px;
 font-weight:700;
 margin-top:8px;
}
#accesoPacientes input{
 width:100%;
 padding:13px;
 font-size:16px;
 border:1px solid #b6cddd;
 border-radius:10px;
}
.grupo-clave{position:relative}
.grupo-clave input{padding-right:78px!important}
.grupo-clave button{
 position:absolute;
 right:6px;
 top:6px;
 background:#eaf4fc;
 border:0;
 border-radius:8px;
 padding:8px 11px;
 color:#0b5b9e;
 cursor:pointer;
}
#ingresarPaciente{margin-top:13px}
#ingresarPaciente:disabled{opacity:.65}
#mensajeAcceso{
 min-height:23px;
 white-space:pre-line;
 overflow-wrap:anywhere;
}
.enlace-registro{
 color:var(--azul);
 text-decoration:underline;
 font-weight:700;
 font-size:13px;
}

/* CONTACTO */

.contacto-dato{
 padding:12px 0;
 border-bottom:1px solid var(--borde);
}
.contacto-dato strong{display:block}
.contacto-dato a{color:var(--azul)}
footer{
 background:#082c58;
 color:white;
 text-align:center;
 padding:36px 15px;
}
footer p{
 color:#dce9f8;
 font-size:14px;
}
.flotante{
 position:fixed;
 right:18px;
 bottom:18px;
 background:#098968;
 color:white;
 border-radius:35px;
 padding:13px 20px;
 box-shadow:0 8px 28px #0c27454f;
 z-index:32;
 font-weight:800;
}

/* CELULARES */

@media(max-width:960px){
 .hero-grid{gap:20px}
 .escuela-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:740px){
 .hero-grid,.dos,.tres,.friso-grid{
  grid-template-columns:1fr;
 }
 .hero{padding:45px 0}
 .seccion{padding:48px 0}
 .foto-principal{max-width:500px}
 .lista-obras{grid-template-columns:1fr 1fr}
 .foto-medico{height:400px}
}
@media(max-width:680px){
 .escuela-grid{grid-template-columns:1fr}
 .escuela{padding:22px}
 .escuela-card{min-height:auto}
}
@media(max-width:480px){
 .marca img{width:75px;height:58px}
 .marca span{font-size:15px}
 .menu{gap:10px}
 .menu a{font-size:12px}
 .lista-obras{grid-template-columns:1fr}
 .foto-medico{height:330px}
}

/* Navegación de cuenta — etapa 1; no modifica el diseño de las lecciones. */
.mct-utility-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;margin:0 0 14px;border-bottom:1px solid #d6e8f6;font:14px/1.4 Arial,sans-serif}
.mct-utility-nav a,.mct-utility-nav button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;border:1px solid #bdd9ed;border-radius:9px;background:white;color:#075497;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;white-space:normal}
.mct-utility-nav [hidden],#mctAccountNotice[hidden],#mctDialogSignOut[hidden]{display:none!important}
.mct-account-notice,.mct-legacy-notice{padding:12px 15px;margin:12px 0;border:1px solid #d6e8f6;border-radius:9px;background:#edf7ff;color:#123954;font:14px/1.6 Arial,sans-serif;overflow-wrap:anywhere}
.mct-account-notice a{color:#075497;text-decoration:underline;font-weight:700;display:inline-block;min-height:44px;padding:10px 0}
.mct-nav-wrap{width:min(1120px,calc(100% - 36px));margin:auto}
.mct-legacy-notice{background:#fff4de;border-color:#dfbd77}
.mct-latest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:25px 0}.mct-latest-grid>p{grid-column:1/-1}.mct-news-card{background:white;border:1px solid #d9e3e6;border-radius:8px;overflow:hidden}.mct-news-card a{display:block;text-decoration:none;color:#173b55}.mct-news-card figure{margin:0;aspect-ratio:1.6;background:#eaf1f2}.mct-news-card img{width:100%;height:100%;object-fit:cover;display:block}.mct-news-card h3,.mct-news-card p,.mct-news-card span{margin:16px;display:block}.mct-news-card h3{font-size:22px}.mct-news-card span{font-size:14px;font-weight:bold;color:#0878c9}@media(max-width:700px){.mct-latest-grid{grid-template-columns:1fr}}

[hidden]{display:none!important}:focus-visible{outline:3px solid #b45b12;outline-offset:4px}.saltar{position:absolute;left:12px;top:-100px;padding:12px;background:white;z-index:100}.saltar:focus{top:12px}footer a{text-decoration:underline} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}