/* ===========================
   ZENIT – style.css (optimizado final)
   =========================== */

/* ---------- Vars y resets ---------- */
:root{
  --zenit-primary:#0E7190;
  --zenit-secondary:#787878;

  /* viewport real sin barra de scroll (para full-bleed sin scroll X) */
  --vw: calc(100vw - (100vw - 100%));
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html,body{ overflow-x:hidden }
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  padding-top:88px; /* compensa nav fijo */
}
@media (max-width:991.98px){ body{ padding-top:72px } }
img{ display:block } /* evita 1px extra que provoque scroll X */

/* ---------- Header / Navbar ---------- */
.logo{ height:48px; width:auto }

/* Menú fijo arriba */
#mainNav.fixed-top{
  position:fixed; top:0; left:0; right:0; z-index:1100;
}

.navbar .nav-link{
  padding:1rem 1.1rem;
  color:#186f83;
  font-size:1rem;
  letter-spacing:.02em;
}
.navbar .nav-link.active,
.navbar .nav-link:hover{ color:#0c424e }

/* Dropdown: pequeño ajuste visual */
.navbar .dropdown-menu{ margin-top:.25rem }

/* Redes en header */
.social{ width:44px; height:44px; font-size:1.35rem; color:#0E7190 }
.social:hover{ color:#6c757d }
@media (min-width:992px){
  .social{ width:48px; height:48px; font-size:1.5rem }
}

/* ---------- Utilitarios / Secciones ---------- */
.section{ padding:72px 0 }
.section.band{ background:var(--zenit-primary); padding:64px 0 }
.section-title{ letter-spacing:.04em; margin-bottom:1.25rem }
.text-zenit{ color:var(--zenit-primary)!important }
.text-zenit-contacto{ color:var(--zenit-primary)!important; font-size:4rem; font-weight:800 }

/* Offset adicional de scroll en anclas principales */
#servicios,#alianzas,#alianzas-medicas,#blog,#testimonios,#contacto{
  scroll-margin-top:70px;
  padding-top:30px;
}

/* ---------- Botones ---------- */
.btn-zenit{ background:#0E7190; color:#fff; border:0 }
.btn-zenit:hover{ background:#6c757d; color:#fff }
.btn-outline-zenit{ border-color:#0E7190; color:#0E7190 }
.btn-outline-zenit:hover{ background:#0E7190; color:#fff }
.btn-pill{ border-radius:999px; padding:.8rem 1.5rem }
.btn-txt{ font-size:20px; color:#0E7190 }

/* ---------- FAB ---------- */
.fab{ position:fixed; right:16px; z-index:1040; display:flex; flex-direction:column; gap:10px }
.fab.bottom{ bottom:18px }
.fab .btn{ width:52px; height:52px; border-radius:50%; box-shadow:0 10px 20px rgba(0,0,0,.18) }

/* ---------------------------
   HERO (index)
---------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  min-height:360px;              /* asegura altura mínima */
}

.hero-media{
  position:relative;
  width:100%;
  height:100%;
}

/* Imagen y video ocupan todo el área */
.hero-img,
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* El video va encima de la imagen de respaldo */
.hero-video{
  position:absolute;
  inset:0;
}

/* Capa oscura encima del video */
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.45));
  pointer-events:none;
}

/* Textos centrados verticalmente */
.hero-copy{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
}

.hero-title{
  font-weight:800;
  color:#fff;
  font-size:clamp(3rem,7vw,5.2rem);
  line-height:.95;
  margin:0;
}
.hero-subtitle{
  font-weight:600;
  color:#fff;
  opacity:.9;
  font-size:clamp(1.3rem,2.5vw,2rem);
  margin:.1rem 0 .6rem;
}
.hero-lead{
  color:#fff;
  opacity:.95;
  max-width:60ch;
  margin-bottom:1rem;
}


/* ---------- SERVICIOS (bandas + cards con overlay) ---------- */
/* Título general de la sección */
#servicios{ padding-top:72px; padding-bottom:72px }
#servicios .section-title{
  font-size:clamp(2rem,4.8vw,4rem);
  letter-spacing:.04em;
  margin-bottom:2rem;
  font-weight:800;
}
#servicios .section-title .fw-light{ font-weight:300!important; color:#4b6a74 }
#servicios .section-title .text-zenit{ color:#0E7190!important; font-weight:800 }

/* Banda de título por subsección */
.svc-strip{
  background: var(--zenit-primary);
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  border-radius:12px;
  padding:.9rem 1rem;
  margin:12px 0 16px;
  text-align:center;
  font-size:clamp(1.1rem, 1.2vw + 1rem, 1.6rem);
}

/* Tarjeta / slide */
.svc-card{
  position:relative;
  border-radius:1.4rem;
  overflow:hidden;
  background:transparent;          /* sin fondo gris */
}
.svc-media{
  position:relative;
  border-radius:1.4rem;
  overflow:hidden;
}
.svc-card .srv-img{
  aspect-ratio:3/2;
  object-fit:cover;
  width:100%;
  height:auto;
  background:transparent;
}

/* Título bajo la imagen, fuera del overlay */
.svc-title-under{
  text-align:center;
  font-weight:800;
  color:#0E7190;
  padding:.65rem 0 .25rem;
}

/* Overlay centrado */
.svc-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:.7rem;
  padding:1rem;
  background:rgba(0,32,45,.62);
  color:#fff; text-align:center;
  opacity:0; transition:opacity .2s ease-in-out;
}
.svc-media:hover .svc-overlay{ opacity:1 }

.svc-ov-title{
  font-weight:800;
  font-size:clamp(1rem, .8vw + .9rem, 1.25rem);
  letter-spacing:.02em;
  margin:0;
}
.svc-ov-list{
  margin:0; padding-left:0; list-style:none;
  font-size:.96rem; line-height:1.25;
}
.svc-ov-list li+li{ margin-top:.15rem }
.svc-ov-list.small{ font-size:.88rem }

/* Botón WhatsApp minimal (sin fondo ni borde), centrado */
.svc-wa{
  background:transparent !important;
  border:0 !important;
  color:#fff !important;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.25rem .4rem;
  text-decoration:none;
  margin:0 auto;
}
.svc-wa:hover{ opacity:.9 }

/* Fisioterapia: 3 por fila en escritorio (si usas grid de Bootstrap) */
@media (min-width:992px){
  #servicios .row.g-4.justify-content-center > [class*="col-"].col-lg-4{ display:flex }
  #servicios .row.g-4.justify-content-center > [class*="col-"].col-lg-4 .svc-card{ width:100% }
}

/* ---------- Footer ---------- */
.bg-zenit{ background:#0E7190 !important }
.footer{ color:#fff }
.footer a{ color:#fff; opacity:.9; text-decoration:none }
.footer a:hover{ opacity:1; text-decoration:underline }
.footer .ft-title{ font-weight:700; letter-spacing:.02em; margin-bottom:.6rem }
.footer .ft-list{ list-style:none; margin:0; padding:0 }
.footer .ft-list li{ margin:.25rem 0 }
.logo-footer{ height:44px; width:auto }

/* ---------- ALIANZAS (título + slider logos) ---------- */
#alianzas .section-title{
  font-size:clamp(2rem,4.8vw,4rem);
  letter-spacing:.04em; margin-bottom:2rem; color:#fff; font-weight:800;
}
#alianzas .section-title .fw-light{ font-weight:700!important; color:#fff }
.parrafo_blanco{ font-weight:300!important; color:#fff }

/* Slider infinito full-bleed */
.ally-slider{
  position:relative; left:50%;
  margin-left:calc(-0.5 * var(--vw));
  width:var(--vw);
  background:#fff; overflow:hidden; padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.ally-track{
  display:flex; align-items:center; gap:48px; width:max-content; padding:0 24px;
  animation:ally-scroll 30s linear infinite;
}
.ally-slider:hover .ally-track{ animation-play-state:paused }
@keyframes ally-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

#alianzas .ally-slider img.ally{ height:150px; width:auto; object-fit:contain; display:block; flex:0 0 auto }
@media (max-width:992px){
  .ally-track{ gap:36px }
  #alianzas .ally-slider img.ally{ height:110px }
}
@media (max-width:576px){
  .ally-track{ gap:28px }
  #alianzas .ally-slider img.ally{ height:88px }
}

/* Respeta reducir movimiento */
@media (prefers-reduced-motion:reduce){ .ally-track{ animation:none } }

/* ---------- ALIANZAS MÉDICAS ---------- */
#alianzas-medicas.am-band{ background:#393939; padding:64px 0 72px }
#alianzas-medicas .am-title{
  font-size:clamp(2rem,4.8vw,4rem); letter-spacing:.04em; margin-bottom:1rem; color:#fff; font-weight:800;
}
#alianzas-medicas .am-title .fw-light{ font-weight:300!important; color:#e7e7e7 }
#alianzas-medicas .am-lead{
  color:#fff; opacity:.92; max-width:80ch; margin:0 auto 24px;
  font-size:clamp(1rem,1.2vw + .4rem,1.25rem);
}
#alianzas-medicas .am-carousel{ margin-top:.5rem }
#alianzas-medicas .am-img{
  display:block; width:100%; height:230px; object-fit:cover; border-radius:24px;
}
@media (min-width:1200px){ #alianzas-medicas .am-img{ height:260px } }
#alianzas-medicas .carousel-control-prev-icon,
#alianzas-medicas .carousel-control-next-icon{ filter:invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35)) }
#alianzas-medicas .carousel-control-prev,
#alianzas-medicas .carousel-control-next{ width:6% }

/* ---------- BLOG (home) ---------- */
#blog .section-title{
  font-size:clamp(2rem,4.8vw,3.5rem);
  letter-spacing:.04em; margin-bottom:1.5rem; font-weight:600!important;
}
#blog .section-title .fw-light{ font-weight:300!important; color:#4b6a74 }

.blog-band{
  position:relative; left:50%; margin-left:calc(-0.5 * var(--vw)); width:var(--vw);
  background:#0E7190; padding:26px 0 36px;
}
.blog-card{ color:#fff; text-align:left }
.blog-media{ position:relative; border-radius:24px; overflow:hidden }
.blog-media img{ width:100%; height:260px; object-fit:cover; filter:saturate(1) }
@media (min-width:1200px){ .blog-media img{ height:300px } }
.blog-title{
  position:absolute; left:50%; top:85%; transform:translate(-50%,-50%);
  margin:0; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.45);
  font-size:clamp(1rem,1.1vw + .8rem,1.6rem); line-height:1.05; font-weight:700; width:90%; text-align:center;
}
.blog-excerpt{ color:#e8f2f5; margin:.7rem 0 .6rem; font-size:.95rem; line-height:1.35; text-align:justify; text-justify:inter-word }
.blog-btn{
  background:#fff; color:#0E7190; border:0; padding:.45rem 1.05rem; font-weight:600; border-radius:.4rem; display:block; margin:.5rem auto 0; width:max-content;
}
.blog-btn:hover{ background:#e9ecef; color:#0E7190 }
.blog-band .carousel-control-prev-icon,
.blog-band .carousel-control-next-icon{ filter:invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35)) }
.blog-band .carousel-control-prev,
.blog-band .carousel-control-next{ width:5% }

/* ---------- TESTIMONIOS ---------- */
#testimonios .testi-head{ position:relative; padding:28px 0; margin-bottom:50px; z-index:1 }
#testimonios .testi-head::before{
  content:""; position:absolute; inset:0; left:50%;
  margin-left:calc(-0.5 * var(--vw)); width:var(--vw);
  background:url("../img/fondo_testimonios.png") center/auto repeat-x; opacity:.9; z-index:-1;
}
#testimonios .section-title{
  font-size:clamp(2rem,4.8vw,3rem); letter-spacing:.04em; color:#787878; position:relative; z-index:1; font-weight:600;
}
.testi-card{
  background:#f3f4f6; border-radius:22px; padding:22px 18px; text-align:center; height:100%;
  box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
.testi-card .stars{ color:#0E7190; font-size:1.05rem; letter-spacing:1px; margin-bottom:8px }
.testi-card .name{ font-size:1.05rem; font-weight:800; color:#2f4a52; margin:0 0 6px }
.testi-card .quote{ color:#5d6c73; font-style:italic; font-size:.95rem; line-height:1.35; margin:0 0 12px }
.testi-card .date{ color:#98a4aa; font-size:.83rem }
#testimonios .carousel-control-prev-icon,
#testimonios .carousel-control-next-icon{ filter:invert(.35) drop-shadow(0 2px 6px rgba(0,0,0,.25)) }
#testimonios .carousel-control-prev,
#testimonios .carousel-control-next{ width:5% }

/* ---------- GALERÍA (debajo de testimonios) ---------- */
.gallery-card{
  border-radius:24px; overflow:hidden;
  box-shadow:0 6px 22px rgba(0,0,0,.08);
  background:#fff;
}
.gallery-img{ width:100%; height:260px; object-fit:cover }
@media (min-width:1200px){ .gallery-img{ height:300px } }

#galeriaCarousel .carousel-control-prev-icon,
#galeriaCarousel .carousel-control-next-icon{
  filter:invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Miniaturas en una sola línea con scroll horizontal */
.gallery-thumbs{
  display:flex; flex-wrap:nowrap; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  padding:6px 2px 8px;
  scroll-snap-type:x mandatory;
}
/* Si usas .row/.col dentro, neutraliza anchos % de Bootstrap */
.gallery-thumbs.row{ margin:0; --bs-gutter-x:0; --bs-gutter-y:0 }
.gallery-thumbs > [class*="col-"]{ flex:0 0 auto; width:auto; padding:0 !important }

.gallery-thumbs .thumb{
  flex:0 0 auto; width:auto;
  border:0; background:transparent;
  border-radius:12px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, outline-color .18s;
  outline:2px solid transparent;
  scroll-snap-align:start;
}
.gallery-thumbs .thumb:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.gallery-thumbs img{
  width:117px; object-fit:cover; border-radius:12px;
}
@media (max-width:575.98px){
  .gallery-thumbs img{ width:110px; height:90px }
}
/* scrollbar opcional (ocultar del todo: height:0) */
.gallery-thumbs::-webkit-scrollbar{ height:6px }
.gallery-thumbs::-webkit-scrollbar-thumb{ background:#bfc7c9; border-radius:4px }

/* Modal galería */
#galleryModal .modal-content{ border:0 }
#galleryModal .modal-body{ background:#000 }
#gm-img{ max-height:78vh; object-fit:contain; margin-inline:auto }
#galleryModal .gm-prev,
#galleryModal .gm-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  border:0; background:rgba(255,255,255,.15); color:#fff;
  display:grid; place-items:center; font-size:1.6rem;
}
#galleryModal .gm-prev{ left:12px }
#galleryModal .gm-next{ right:12px }
#galleryModal .gm-prev:hover,
#galleryModal .gm-next:hover{ background:rgba(255,255,255,.25) }

/* ---------- INICIATIVAS MÉDICAS ---------- */
#iniciativas{ padding-top:72px; padding-bottom:0 }
#iniciativas .init-head{ position:relative; padding:28px 0; margin-bottom:42px }
#iniciativas .init-head::before{
  content:""; position:absolute; inset:0; left:50%;
  width:var(--vw); margin-left:calc(-0.5 * var(--vw));
  background:url("../img/fondo_testimonios.jpg") center/auto 110% repeat-x;
  opacity:.9; z-index:-1;
}
#iniciativas .section-title{
  font-size:clamp(2rem,4.8vw,3rem); letter-spacing:.04em; color:#787878; font-weight:600;
}
.init-card{ margin-left:0; margin-right:0 }
.init-logoBox{
  background:#eef1f3; border-radius:28px; padding:26px 28px; min-height:220px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
.init-logoBox img{ max-width:100%; height:auto; max-height:150px; display:block }
.init-title{
  color:#0E7190; font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.8rem,3.2vw,2.4rem); margin:0 0 .35rem;
}
.init-text{
  color:#4b6a74; line-height:1.5; text-align:justify; margin-bottom:.5rem;
  font-size:clamp(1rem,1.1vw + .2rem,1.1rem);
}
@media (min-width:992px){
  .init-card{ margin-bottom:12px }
  .init-logoBox{ min-height:240px; padding:30px }
}

/* Línea separadora (verde del logo) antes del Blog */
#iniciativas::after{
  content:""; display:block; width:100%; height:1px; background-color:#0E7190;
  border-radius:1px; margin-top:60px; margin-bottom:0;
}

/* ---------- BLOG INTERNO ---------- */
.article-hero{
  position:relative; width:100%; max-height:400px; overflow:hidden; border-radius:12px; margin-bottom:2rem;
}
.article-img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.8) }
.article-overlay{
  position:absolute; bottom:0; left:0; width:100%; padding:1.5rem 2rem;
  background:linear-gradient(180deg,transparent 0%, rgba(0,0,0,0.65) 100%);
}
.article-overlay h1{
  color:#fff; font-weight:800; font-size:clamp(1.8rem, 4vw, 3rem); margin:0;
}

/* Zona de compartir */
.share{ display:flex; align-items:center; gap:10px; font-size:.95rem }
.share-btn{ color:#0E7190; font-size:1.2rem; text-decoration:none }
.share-btn:hover{ color:#6c757d }

/* Artículos relacionados (tarjetas) */
.related-blog .section-title{ color:#0E7190; font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem) }
.related-blog .blog-card{
  background:#f6f8f9; border-radius:20px; padding-bottom:1.2rem; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.related-blog .blog-media{ position:relative; border-radius:20px 20px 0 0; overflow:hidden }
.related-blog .blog-media img{ width:100%; height:220px; object-fit:cover }
.related-blog .blog-title{
  position:absolute; bottom:16px; left:16px; color:#fff; font-size:1.3rem; font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.related-blog .blog-excerpt{
  color:#4b6a74; font-size:.95rem; margin:.8rem 1.2rem; line-height:1.4; text-align:justify;
}
.related-blog .blog-btn{
  background:#0E7190; color:#fff; border:none; padding:.5rem 1.2rem; border-radius:8px; font-weight:600; text-decoration:none;
}
.related-blog .blog-btn:hover{ background:#6c757d }

/* ---------- Detalles suaves ---------- */
hr.soft{ border:0; height:1px; background:linear-gradient(90deg,transparent,#e5eaed,transparent) }
.caption-muted{ color:#98a4aa; font-size:.9rem }

.mb-1-contacto{ color:#787878; font-size:18px }
.fw-light{ font-weight:600!important; font-size:3rem }
.fw-light-contacto{ font-weight:100!important; font-size:4rem; color:#4b6a74 }

/* Ocultar scroll horizontal pero permitir desplazamiento */
.gallery-thumbs {
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* IE/Edge antiguo */
}

.gallery-thumbs::-webkit-scrollbar {
  display: none; /* Chrome, Safari, etc */
}
/* ===================== */
/* Flechas del Carousel  */
/* ===================== */

.carousel-control-prev,
.carousel-control-next {
  width: 60px;                 /* Área clicable más grande */
  height: 60px;
  top: 50%;                    /* Centrado vertical */
  transform: translateY(-50%);
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Fondo circular semitransparente */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.48); /* tono oscuro suave */
  border-radius: 50%;
  backdrop-filter: blur(3px);
  width: 42px;
  height: 42px;
  background-size: 22px 22px;
  filter: invert(1);  /* las mantiene blancas */
  transition: background-color .25s ease, transform .25s ease;
}

/* Hover: más brillo */
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: rgba(0, 0, 0, 0.65);
  transform: scale(1.1);
}

/* Opcional: en móvil, hacerlas un poco más pequeñas */
@media (max-width: 576px) {
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 36px;
    height: 36px;
    background-size: 18px 18px;
  }
}
/* ===== BLOG – nuevo layout ===== */
.blog-frame{
  background: var(--zenit-primary);
  border-radius: 28px;
  padding: 18px;
}

/* Grid 2 columnas: grande + columna con 2 medianas */
.blog-grid{
  display: grid;
  grid-template-columns: 2fr 1.25fr;
  gap: 18px;
}

/* Columna derecha apilada */
.bcard-col{
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
}

/* Tarjetas base */
.bcard{
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate; /* para que el overlay no “sangre” */
  box-shadow: 0 6px 26px rgba(0,0,0,.12);
}
.bcard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1); 
  transition: transform .35s ease, filter .35s ease;
}

/* Alturas aproximadas como el mock */
.bcard-lg{ min-height: 430px; }
.bcard-md{ min-height: 205px; }

/* Overlay inferior con degradado + textos en blanco */
.bcard-ov{
  position: absolute;
  inset: auto 0 0 0;               /* pegado abajo */
  padding: 20px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.75) 100%);
  color: #fff;
}
.bcard-title{
  margin: 0 0 .25rem 0;
  color: #fff;
  text-shadow: 0 3px 16px rgba(0,0,0,.45);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 2rem);
  line-height: 1.05;
}
.bcard-read{
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-weight: 600;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}
.bcard-read i{ font-size: 1.4em; }

/* Hover: zoom suave de imagen */
.bcard:hover img{
  transform: scale(1.05);
  filter: saturate(1.05) brightness(1.02);
}

/* Responsive: en móvil apilar todo en 1 columna */
@media (max-width: 991.98px){
  .blog-grid{
    grid-template-columns: 1fr;
  }
  .bcard-col{
    grid-template-rows: none;
    grid-auto-rows: 220px;
  }
  .bcard-lg{ min-height: 320px; }
}
/* ===== Bolsa de trabajo ===== */
.bolsa .section-title{
  font-size: clamp(2rem, 4.2vw, 3.4rem);
}
.bolsa-lead{
  font-size: clamp(1rem, 1.1vw + .35rem, 1.2rem);
  color:#4b6a74;
  margin-bottom:.6rem;
}
.bolsa-bullets{
  list-style:none; padding:0; margin:.5rem 0 0;
}
.bolsa-bullets li{
  display:flex; align-items:center; gap:.5rem;
  color:#2f4a52; margin:.35rem 0; font-weight:600;
}
.bolsa-bullets i{ color:var(--zenit-primary); }

.bolsa-cta{
  background:#f3f6f7; border-radius:18px; padding:18px 20px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

/* Vacantes */
.job-card{
  background:#fff; border-radius:18px; padding:16px; height:100%;
  box-shadow:0 6px 22px rgba(0,0,0,.06);
  display:flex; flex-direction:column; gap:.75rem;
}
.job-head h4{ margin:0; color:#0E7190; font-weight:800; }
.job-type{ color:#98a4aa; font-size:.92rem; }
.job-tags{ list-style:none; padding:0; margin:0 0 .5rem 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.job-tags li{
  background:#eef3f4; color:#2f4a52; padding:.25rem .5rem; border-radius:.5rem; font-size:.9rem;
}

/* Formulario */
.bolsa-form{
  background:#fff; border-radius:18px; padding:18px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
}
.bolsa-form .form-label{ font-weight:700; color:#2f4a52; }
.bolsa-form .form-control, .bolsa-form .form-select{ border-radius:.65rem; }
.bolsa-form .form-note{ color:#98a4aa; font-size:.9rem; margin-top:.35rem; }

.dropzone{
  position:relative; border:2px dashed #cdd6d9; border-radius:14px;
  background:#f8fbfc; padding:24px; text-align:center;
}
.dropzone input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.dropzone .dz-copy i{ font-size:2rem; color:var(--zenit-primary); display:block; margin-bottom:.35rem; }
.dropzone .dz-copy span{ text-decoration:underline; }

/* Lista de archivos */
.file-list{ list-style:none; padding-left:0; margin:.5rem 0 0 0; }
.file-list li{
  display:flex; align-items:center; gap:.5rem;
  background:#f3f6f7; padding:.4rem .6rem; border-radius:.5rem;
  color:#2f4a52; font-size:.95rem; margin:.3rem 0;
}
.file-list li .size{ color:#98a4aa; font-size:.88rem; margin-left:auto; }

/* Banda de subtítulo ya existente */
.svc-strip{ margin-top:6px; }
/* HERO con video */
.hero{position:relative;overflow:hidden}
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; /* llena sin deformar */
}
.hero-img{width:100%; height:auto; display:block} /* fallback img ya existente */
/* ===========================
   PÁGINAS DE SERVICIOS
   (especialidad / dermatología / rehabilitación)
   =========================== */

.hero-banner{
  position:relative;
  display:grid;
  place-items:center;
  color:#fff;
  min-height:240px;
}
.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.hero-banner>.inner{
  position:relative;
  z-index:1;
  padding:64px 0;
  text-align:center;
}
.hero-banner h1.hdr-title{
  font-weight:800;
  font-size:clamp(2rem,4.8vw,3.4rem);
  margin:0;
}
.hero--top{
  background:url("../img/servicios/top.png") center/cover no-repeat;
}

/* Bloques de contenido */
.block{
  padding-block:64px;
}
@media (min-width:992px){
  .block{padding-block:72px;}
}

/* Imagen de servicio */
.svc-img{
  width:100%;
  max-width:100%;
  display:block;
  border-radius:24px;
  object-fit:cover;
  aspect-ratio:3/2;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}

/* Contenido de cada servicio */
.svc{
  margin-bottom:0;
}
.svc-title{
  color:#0E7190;
  font-weight:800;
  font-size:clamp(1.6rem,2.6vw,2.4rem);
  line-height:1.05;
  margin:0 0 .25rem;
}
.svc-lead{
  color:#4b6a74;
  font-weight:600;
  font-size:clamp(1rem,1.2vw + .5rem,1.25rem);
  line-height:1.25;
  margin:0 0 .6rem;
}
.svc-list{
  list-style:none;
  margin:.4rem 0 1.2rem;
  padding:0;
}
.svc-list li{
  position:relative;
  padding-left:1.4rem;
  margin:.35rem 0;
  color:#2f4a52;
  font-size:clamp(1rem,1.1vw + .2rem,1.15rem);
}
.svc-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55rem;
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:#0E7190;
}

/* Botón "Agendar" */
.btn-agendar{
  background:#0E7190;
  color:#fff;
  border:0;
  border-radius:.8rem;
  font-weight:700;
  padding:.9rem 1.6rem;
  font-size:clamp(1rem,1.1vw + .3rem,1.15rem);
  box-shadow:0 6px 16px rgba(14,113,144,.18);
  text-decoration:none;
}
.btn-agendar:hover{
  background:#6c757d;
  color:#fff;
}

/* Detalles suaves */
hr.soft{
  border:0;
  height:1px;
  background:linear-gradient(90deg,transparent,#e5eaed,transparent);
}
/* ---------- INICIATIVAS: tarjetas/logo ---------- */
.init-logoBox {
  background: #f5f5f7;
  border-radius: 2rem;
  padding: 2rem 2.5rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.init-logo-img {
  max-width: 100%;
  height: auto;
}

/* logo de Osteoporosis un poco más pequeño */
.init-logoBox--osteoporosis .init-logo-img {
  max-width: 80%;
}

/* hover / foco: movimiento y sombra */
.init-logoBox:hover,
.init-logoBox:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.12);
  outline: none;
}

/* overlay "Ver información" */
.init-overlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 113, 144, 0.85); /* teal oscuro */
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.init-logoBox:hover .init-overlay,
.init-logoBox:focus-visible .init-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Modales más profesionales ---------- */

/* fondo más oscuro */
.modal-backdrop.show {
  opacity: 0.85;
}

/* tarjeta elevada personalizada */
.modal-elevated .modal-content {
  border-radius: 1.5rem;
  border: 0;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
}

/* header con logo centrado y botón de cierre flotando */
.modal-elevated .modal-header {
  border: 0;
  padding: 1.5rem 1.75rem 0.75rem;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.modal-logo {
  max-height: 110px;
  margin-bottom: 0.75rem;
}

.modal-elevated .modal-title {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0E7190;
  font-size: 1.05rem;
}

.modal-elevated .btn-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
}

.modal-elevated .modal-body {
  padding: 1rem 1.75rem 1.75rem;
  font-size: 0.95rem;
  line-height: 1.7;
}
/* Sección testimonios */
.section-testimonios {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Tarjeta principal del video */
.testi-video-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  padding: 2.5rem 2rem;
}

@media (min-width: 992px) {
  .testi-video-card {
    padding: 3rem 3rem;
  }
}

/* Marco del video: alto cómodo y sin cortar el rostro */
.testi-video-frame {
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.testi-video {
  display: block;
  width: 100%;
  height: auto;          /* mantiene proporción original */
  object-fit: contain;   /* no recorta la cara */
}

/* Textos del video */
.testi-video-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0E7190;
  margin-bottom: 0.5rem;
}

.testi-video-lead {
  font-size: 0.98rem;
  margin-bottom: 0.75rem;
  color: #444;
}

.testi-video-quote {
  font-size: 0.95rem;
  font-style: italic;
  color: #555;
}

/* Tarjetas de testimonios escritos (puedes mantener lo que ya tenías y complementar) */
.testi-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.testi-card .stars {
  color: #f3b000;
  margin-bottom: 0.75rem;
}

.testi-card .quote {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 1rem;
}

.testi-card .name {
  font-size: 1rem;
  font-weight: 600;
  color: #0E7190;
  margin-bottom: 0.25rem;
}

.testi-card .date {
  font-size: 0.8rem;
  color: #888;
}
.bolsa-contact {
  font-size: 0.95rem;
}

.bolsa-contact .link-contact {
  color: #0E7190;
  font-weight: 600;
  text-decoration: none;
}

.bolsa-contact .link-contact:hover {
  text-decoration: underline;
}