/* ============================================================
   prem_modern.css — premod-20261020
   Skin moderno "Trust & Authority" para indexsitewebprem (theme
   MedService). Capa de ANULACIÓN: se carga después de style.css
   y responsive.css; no se toca ningún archivo del theme.
   El color de marca llega por --pm-brand (inyectado en el head
   de cada plantilla desde $colorfondobarra).
   ============================================================ */

:root{
  --pm-brand:#336699;                 /* lo pisa el <style> del head */
  --pm-ink:#16222f;                   /* titulares */
  --pm-body:#3f4e5e;                  /* texto corrido */
  --pm-muted:#6b7a89;
  --pm-bg-soft:#f5f8fb;
  --pm-line:#e4eaf1;
  --pm-card:#ffffff;
  --pm-r-sm:10px; --pm-r:14px; --pm-r-lg:18px;
  --pm-sh-sm:0 1px 2px rgba(16,34,56,.05),0 3px 10px rgba(16,34,56,.06);
  --pm-sh:0 4px 10px rgba(16,34,56,.07),0 18px 38px -12px rgba(16,34,56,.18);
  --pm-font-h:'Poppins','Segoe UI',system-ui,sans-serif;
  --pm-font-b:'Open Sans','Segoe UI',system-ui,sans-serif;
  --pm-t:220ms cubic-bezier(.2,.7,.3,1);
  /* derivados de la marca: base sin color-mix, abajo los pisa @supports */
  --pm-brand-dark:var(--pm-brand);
  --pm-brand-soft:#f3f7fb;
  --pm-brand-line:#cfdce9;
  --pm-brand-ring:rgba(40,90,150,.3);
}
@supports (color: color-mix(in srgb, red, blue)){
  :root{
    --pm-brand-dark:color-mix(in srgb, var(--pm-brand) 82%, #000);
    --pm-brand-soft:color-mix(in srgb, var(--pm-brand) 7%, #fff);
    --pm-brand-line:color-mix(in srgb, var(--pm-brand) 25%, #fff);
    --pm-brand-ring:color-mix(in srgb, var(--pm-brand) 35%, transparent);
  }
}

/* ---------- 1. Base y tipografía ---------- */
body{
  font-family:var(--pm-font-b);
  color:var(--pm-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--pm-font-h);
  color:var(--pm-ink);
  letter-spacing:-0.015em;
  line-height:1.25;
}
p{line-height:1.7}
a{transition:color var(--pm-t)}
::selection{background:var(--pm-brand);color:#fff}
:focus-visible{outline:3px solid var(--pm-brand-ring);outline-offset:2px;border-radius:4px}
@media (min-width:992px){
  ::-webkit-scrollbar{width:11px}
  ::-webkit-scrollbar-track{background:#eef2f6}
  ::-webkit-scrollbar-thumb{background:#b9c6d3;border-radius:8px;border:2px solid #eef2f6}
  ::-webkit-scrollbar-thumb:hover{background:var(--pm-brand)}
}

/* Acentos del theme (cian #00a3c8) unificados al color de marca */
.blue-color, .blue-color h2, .blue-color h3, .blue-color h4, .blue-color h5,
.blue-color h6, .blue-color p, .blue-color a, .blue-color li, .blue-color i,
.steelblue-color .blue-color, .blue-color span{color:var(--pm-brand)}
/* agtit-20261020: los titulares .steelblue-color vuelven al color del sitio
   (el <style> del head los pinta, p.ej. #134A7C en agenciaseo); el skin ya no
   los fuerza a --pm-ink. Los p/li siguen en --pm-body (regla de abajo). */
.steelblue-color p, .steelblue-color li{color:var(--pm-body)}

/* Etiquetitas de sección (h5 pequeñas sobre el título) */
section .h5-sm.blue-color{
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;
}
.grey-color, .grey-color p{color:var(--pm-muted)}

/* ---------- 2. Botones ---------- */
.btn{
  font-family:var(--pm-font-h);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.02em;
  padding:13px 28px;
  border-radius:12px;
  transition:transform var(--pm-t), box-shadow var(--pm-t),
             background-color var(--pm-t), border-color var(--pm-t), color var(--pm-t);
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--pm-sh)}
.btn:active{transform:translateY(0)}
.btn-blue, .white-color .btn-blue{
  background-color:var(--pm-brand);
  border-color:var(--pm-brand);
  color:#fff;
}
.btn-blue:hover, .btn-blue:focus,
.blue-hover:hover, .blue-hover:focus{
  background-color:var(--pm-brand-dark)!important;
  border-color:var(--pm-brand-dark)!important;
  color:#fff!important;
}
.btn-tra-white{border-width:2px;border-radius:12px;backdrop-filter:blur(2px)}
.black-hover:hover{background-color:#131a22!important;border-color:#131a22!important}

/* ---------- 3. Hero ---------- */
#hero-6 h2{
  font-weight:800;
  font-size:clamp(1.9rem, 4.6vw, 3.4rem);
  letter-spacing:-0.01em;
  text-shadow:0 2px 24px rgba(5,20,40,.45);
}
#hero-6 h5{
  font-weight:600;letter-spacing:.22em;font-size:.85rem;opacity:.92;
}
#hero-6 .caption p{
  padding:0 12%;
  font-size:1.08rem;line-height:1.7;
  text-shadow:0 1px 14px rgba(5,20,40,.5);
}
@media (max-width:767px){
  #hero-6 .caption p{padding:0 4%}
}
.hero-section .btn{margin-top:26px}

/* ---------- 4. Cajas de servicio ---------- */
.sbox-1{
  background:var(--pm-card);
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r-lg);
  padding:34px 24px 28px;
  margin-bottom:30px;
  box-shadow:var(--pm-sh-sm);
  transition:transform var(--pm-t), box-shadow var(--pm-t), border-color var(--pm-t);
}
.sbox-1:hover{
  transform:translateY(-5px);
  box-shadow:var(--pm-sh);
  border-color:var(--pm-brand-line);
}
.sbox-1 h5{margin-top:18px;font-weight:600}
.sbox-1.icon-md [class*="flaticon-"]:before,
.sbox-1.icon-md [class*="flaticon-"]:after{color:var(--pm-brand)}

.sbox-5{
  border:1px solid var(--pm-line);
  border-radius:var(--pm-r);
  overflow:hidden;
  box-shadow:var(--pm-sh-sm);
  transition:transform var(--pm-t), box-shadow var(--pm-t), border-color var(--pm-t);
}
.sbox-5:hover{transform:translateY(-5px);box-shadow:var(--pm-sh);border-color:var(--pm-brand-line)}
.sbox-5 img{border-radius:0}
.sbox-5 h5{font-weight:600;text-transform:none;font-size:1.1rem;letter-spacing:0}
.sbox-5-txt{padding:6px 24px 34px}

/* ---------- 5. Tabs (servicios con pestañas) ---------- */
.tabs-section .nav-tabs{border-bottom:1px solid var(--pm-line);gap:6px}
.tabs-section .nav-tabs .nav-link{
  border:1px solid transparent;
  border-radius:999px;
  padding:12px 18px;
  font-family:var(--pm-font-h);font-weight:600;color:var(--pm-body);
  transition:background-color var(--pm-t), color var(--pm-t), border-color var(--pm-t);
}
.tabs-section .nav-tabs .nav-link:hover{background:var(--pm-brand-soft);color:var(--pm-brand)}
.tabs-section .nav-tabs .nav-link.active{
  background:var(--pm-brand);color:#fff;border-color:var(--pm-brand);
}
.tab-img img{border-radius:var(--pm-r);box-shadow:var(--pm-sh-sm)}

/* ---------- 6. Equipo / doctores ---------- */
.doctor-1{
  border-radius:var(--pm-r);
  margin-bottom:46px;
  box-shadow:var(--pm-sh-sm);
  transition:transform var(--pm-t), box-shadow var(--pm-t);
}
.doctor-1:hover{transform:translateY(-5px);box-shadow:var(--pm-sh)}
.doctor-1 .hover-overlay, .doctor-1 .hover-overlay > img{border-radius:var(--pm-r) var(--pm-r) 0 0}
.doctor-meta{
  background:var(--pm-card);
  border:1px solid var(--pm-line);border-top:0;
  border-radius:0 0 var(--pm-r) var(--pm-r);
  padding:18px 16px 20px;
}
.doctor-meta h5{font-weight:600}
.doctor-meta span{color:var(--pm-muted);font-size:.92rem;margin-top:4px}

/* ---------- 7. Galería / overlays ---------- */
.hover-overlay{border-radius:var(--pm-r)}
.hover-overlay img{transition:transform 600ms cubic-bezier(.2,.7,.3,1)}
.item-overlay{transition:opacity var(--pm-t)}

/* ---------- 8. Secciones / fondos ---------- */
.bg-lightgrey{background-color:var(--pm-bg-soft)!important}
.txt-block img, .info-section img{border-radius:var(--pm-r)}
#banner-6 .banner-txt h2, #banner-7 .banner-txt h2{letter-spacing:-0.01em}

/* ---------- 9. Formularios ---------- */
.form-control{
  font-family:var(--pm-font-b);
  min-height:50px;
  border:1.5px solid #d8e1ea;
  border-radius:var(--pm-r-sm);
  background:#fcfdfe;
  color:var(--pm-ink);
  padding:10px 16px;
  box-shadow:none;
  transition:border-color var(--pm-t), box-shadow var(--pm-t), background-color var(--pm-t);
}
.form-control:focus{
  border-color:var(--pm-brand);
  background:#fff;
  box-shadow:0 0 0 4px var(--pm-brand-ring);
}
textarea.form-control{min-height:140px}
label{font-weight:600;color:var(--pm-ink)}

/* ---------- 10. Footer (pulido fino, respeta footord2) ---------- */
#footer-1.bg-image h5.h5-xs{
  font-family:var(--pm-font-h);font-weight:600;letter-spacing:.06em;
}
#footer-1 .foot-links a, .footer a{transition:color var(--pm-t), opacity var(--pm-t)}
.footer-copyright{opacity:.85}

/* ---------- 11. Revelado al hacer scroll (JS añade .pm-in) ---------- */
@media (prefers-reduced-motion: no-preference){
  .pm-reveal{opacity:0;transform:translateY(18px);
    transition:opacity 560ms ease-out, transform 560ms cubic-bezier(.2,.7,.3,1)}
  .pm-reveal.pm-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- 12. Detalle responsive ---------- */
@media (max-width:767px){
  #hero-6 h2{font-size:1.75rem}
  .btn{padding:12px 22px}
  .sbox-5{margin-left:0;margin-right:0}
}