/* ==========================================================================
   PraxArt Centro Médico — estilos
   ========================================================================== */

/* ---------- Fuentes self-hosted ---------- */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/montserrat-latin-300-normal.woff2") format("woff2"),url("../fonts/montserrat-latin-300-normal.woff") format("woff");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"),url("../fonts/montserrat-latin-400-normal.woff") format("woff");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"),url("../fonts/montserrat-latin-600-normal.woff") format("woff");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"),url("../fonts/montserrat-latin-700-normal.woff") format("woff");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/roboto-latin-400-normal.woff2") format("woff2"),url("../fonts/roboto-latin-400-normal.woff") format("woff");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/roboto-latin-500-normal.woff2") format("woff2"),url("../fonts/roboto-latin-500-normal.woff") format("woff");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/roboto-latin-600-normal.woff2") format("woff2"),url("../fonts/roboto-latin-600-normal.woff") format("woff");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/roboto-latin-700-normal.woff2") format("woff2"),url("../fonts/roboto-latin-700-normal.woff") format("woff");}

/* ---------- Variables ---------- */
:root{
  --azul:#182E8C;
  --gris:#666666;
  --gris-borde:#ECECEC;
  --blanco:#FFFFFF;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;}
body{font-family:"Montserrat",sans-serif;color:var(--gris);line-height:1.5;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar{background:var(--azul);text-align:center;padding:10px 15px;}
.topbar p{font-family:"Montserrat",sans-serif;font-weight:300;font-size:15px;color:#fff;}
.topbar p strong{font-weight:700;}

.header-logo{background:#fff;text-align:center;padding:10px 15px;}
.header-logo img{width:250px;margin:0 auto;}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  background:url("../img/banner-hero.jpg") center center / cover no-repeat;
  min-height:400px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:20px;
}
.hero h1{
  font-family:"Roboto",sans-serif;font-weight:600;font-size:80px;line-height:1.1;
  color:var(--azul);text-align:center;
}

/* ==========================================================================
   INTRO + SERVICIOS
   ========================================================================== */
.intro{background:#fff;padding:80px 0;text-align:center;}
.intro__text{
  max-width:860px;margin:0 auto;
  font-family:"Montserrat",sans-serif;font-weight:400;font-size:22px;line-height:28px;color:var(--gris);
}
.intro__text strong{font-weight:700;}

.servicios-title{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:36px;color:var(--azul);
  text-align:center;margin-top:40px;
}

/* --- Servicios desktop (imágenes diagonales) --- */
.servicios-desktop{
  display:flex;align-items:flex-start;
  max-width:1010px;margin:20px auto 0;padding:0 15px;
}
.servicios-desktop .serv-col{flex:0 0 28.53%;width:28.53%;min-width:0;}
.servicios-desktop .serv-col:not(:first-child){margin-left:-4.70%;}
.servicios-desktop .serv-col img{width:100%;}

/* --- Servicios mobile (imágenes rectangulares apiladas) --- */
.servicios-mobile{display:none;margin-top:20px;}
.servicios-mobile img{width:100%;margin-bottom:0;}

/* ==========================================================================
   INFRAESTRUCTURA
   ========================================================================== */
.infra{background:var(--azul);padding:40px 0 60px;}
.infra-title{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:36px;color:#fff;text-align:center;
}
.infra-grid{
  display:flex;gap:20px;justify-content:center;align-items:stretch;
  max-width:1120px;margin:20px auto 0;padding:0 20px;
}
.infra-card{
  background:#fff;flex:1 1 0;min-width:0;
  padding:52px 13px;text-align:center;
  transition:transform .3s ease;
}
.infra-card:hover{transform:translateY(-26px);}
.infra-card .num{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:60px;color:var(--azul);line-height:1;
}
.infra-card .label{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:25px;color:var(--gris);line-height:1.25;
  margin-top:12px;white-space:pre-line;
}

/* --- Carrusel mobile de infraestructura --- */
.infra-carousel{display:none;}
.infra-carousel__viewport{overflow:hidden;}
.infra-carousel__track{display:flex;transition:transform .35s ease;}
.infra-carousel__slide{flex:0 0 100%;padding:0 4px;}
.infra-carousel__slide .infra-card{width:100%;padding:70px 30px;}
.infra-carousel__dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
.infra-carousel__dots button{
  width:10px;height:10px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .3s;
}
.infra-carousel__dots button.is-active{background:#fff;}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contacto{background:#fff;padding:70px 0;}
.contacto__wrap{max-width:1200px;margin:0 auto;padding:0 20px;}
.contacto__cols{display:flex;gap:20px;align-items:center;}
.contacto__izq{flex:0 0 40%;max-width:40%;}
.contacto__der{flex:0 0 60%;max-width:60%;display:flex;flex-direction:column;padding-left:20px;}

.contacto-title{
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:36px;color:var(--azul);margin-bottom:24px;
}
.contacto__map{width:100%;border:0;border-radius:2px;height:300px;display:block;}

/* Filas de contacto */
.contacto-row{
  display:flex;align-items:flex-start;gap:10px;
  border-bottom:2px solid var(--gris-borde);
  padding:10px 0 15px 50px;
}
.contacto-row:first-child{padding-top:0;}
.contacto-row .ico{flex:0 0 auto;width:18px;margin-top:2px;}
.contacto-row .ico svg{width:18px;height:18px;fill:var(--azul);display:block;}
.contacto-row .txt{
  font-family:"Montserrat",sans-serif;font-weight:400;font-size:18px;color:var(--gris);
}
.contacto-row .txt a{color:var(--gris);transition:color .3s;}
.contacto-row .txt a:hover{color:var(--azul);}
.contacto-hours{
  font-family:"Montserrat",sans-serif;font-weight:400;font-size:15px;line-height:21px;color:var(--gris);
  margin:6px 0 0 0px;
}
.contacto-hours strong{font-weight:700;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-razon{
  background:var(--gris-borde);
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  padding:10px 15px;
}
.footer-razon img{width:160px;}
.footer-razon p{
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:18px;color:var(--gris);margin-left:15px;
}
.footer-sss{
  background:#fff;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  padding:50px 15px 30px;
}
.footer-sss img{width:250px;}
.footer-sss p{
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:18px;color:var(--gris);margin-left:15px;
}
.footer-sss p span{font-weight:400;}
.footer-sss p a{color:var(--gris);}

/* ==========================================================================
   PÁGINA 404
   ========================================================================== */
.error404{
  min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:60px 20px;
}
.error404 img{width:260px;margin-bottom:30px;}
.error404 h1{font-family:"Roboto",sans-serif;font-weight:600;font-size:64px;color:var(--azul);margin-bottom:10px;}
.error404 p{font-family:"Montserrat",sans-serif;font-size:18px;color:var(--gris);}
.error404 a{color:var(--azul);font-weight:600;}

/* ==========================================================================
   RESPONSIVE — Tablet
   ========================================================================== */
@media(max-width:1024px){
  .topbar p{font-size:14px;}
  .footer-sss p{font-size:14px;}
}

/* ==========================================================================
   RESPONSIVE — Mobile
   ========================================================================== */
@media(max-width:767px){
  .header-logo img{width:199px;}

  .hero{min-height:205px;}
  .hero h1{font-size:67px;}

  .intro{padding:60px 0;}
  .intro__text{max-width:100%;font-size:18px;padding:0 15px;}
  .servicios-title{font-size:28px;}

  .servicios-desktop{display:none;}
  .servicios-mobile{display:block;}

  .infra-title{font-size:28px;}
  .infra-grid{display:none;}
  .infra-carousel{display:block;max-width:100%;padding:20px;margin-top:20px;}

  .contacto{padding:50px 0;}
  .contacto__cols{flex-direction:column;gap:0;align-items:stretch;}
  .contacto__izq,.contacto__der{flex:0 0 100%;max-width:100%;}
  .contacto__der{padding-left:0;margin-top:30px;}
  .contacto-row{padding-left:10px;}

  .footer-razon{gap:0;}
  .footer-razon p{margin-left:0;text-align:center;margin-top:8px;}
  .footer-sss{flex-direction:column;gap:15px;padding:20px 15px;}
  .footer-sss p{margin-left:0;text-align:center;}
}