/* Overrides especificos del proyecto (cargados despues de style.css) */

/* CTA final "Llámanos" · fondo con foto + overlay */
.call-to.bg-green {
  background-image:
    linear-gradient(rgba(20, 34, 52, .80), rgba(20, 34, 52, .84)),
    url('/images/slider/slider2.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ===========================================================
   Equipo de la home · rejilla 3+3, fotos algo más pequeñas
   y tarjetas más llamativas (hover con elevación y zoom)
   =========================================================== */
.team .team-grid .team-wrap { max-width: 290px; margin: 0 auto 26px; }
.team .team-grid .team-img {
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(16, 42, 67, 0.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.team .team-grid .team-wrap:hover .team-img {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(16, 42, 67, 0.20);
}
.team .team-grid .team-img img { transition: transform .5s ease; }
.team .team-grid .team-wrap:hover .team-img img { transform: scale(1.06); }
.team .team-grid .team-name h4 { font-size: 17px; margin-bottom: 2px; }

/* ===========================================================
   PAGE-HERO de páginas internas: imagen de fondo + overlay
   =========================================================== */
.page-hero {
  position: relative;
  background-size: cover;
  /* anclado arriba y subido unos px (más negativo = sube más; positivo = baja) */
  background-position: center -20px;
  padding: 72px 0 58px !important;
  overflow: hidden;
}
.page-hero .page-hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 22, 40, .74) 0%, rgba(10, 22, 40, .48) 55%, rgba(10, 22, 40, .28) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .page-hero-eyebrow {
  color: #e6c79c !important; text-transform: uppercase; letter-spacing: 2px;
  font-size: 13px; margin: 0 0 10px;
}
.page-hero .page-hero-title {
  color: #fff !important; font-size: clamp(28px, 4vw, 46px); line-height: 1.15; margin: 0 0 12px;
}
.page-hero .page-hero-sub {
  color: rgba(255, 255, 255, .92) !important; max-width: 730px; font-size: 16px; margin: 0;
}
.page-hero .page-hero-crumbs {
  margin-top: 16px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  color: rgba(255, 255, 255, .85);
}
.page-hero .page-hero-crumbs a { color: #fff; text-decoration: none; }
.page-hero .page-hero-crumbs a:hover { color: #e6c79c; }
.page-hero .page-hero-crumbs span { opacity: .55; }
.page-hero .page-hero-crumbs em { font-style: normal; color: #e6c79c; }

/* Enlaces de acceso de las tarjetas de perfil: más separación del texto */
.aboutus .pcs-list .perfil-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 500;
}

/* ===========================================================
   Modal de acceso rápido (Área privada)
   =========================================================== */
.login-modal-back {
  position: fixed; inset: 0;
  background: rgba(10, 22, 40, .55);
  display: none; align-items: center; justify-content: center;
  z-index: 1200; padding: 16px;
}
.login-modal-back.open { display: flex; }
.login-modal {
  position: relative;
  background: #fff; width: 100%; max-width: 420px;
  border-radius: 16px; padding: 34px 30px 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}
.login-modal .login-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; font-size: 26px; line-height: 1;
  color: #8a94a0; cursor: pointer;
}
.login-modal .login-logo { text-align: center; margin-bottom: 14px; }
.login-modal .login-logo img { max-height: 56px; }
.login-modal h3 { text-align: center; font-size: 20px; margin: 0 0 6px; color: #1f2933; }
.login-modal .login-sub { text-align: center; color: #6b7a86; font-size: 14px; margin: 0 0 20px; }
.login-modal input[type="email"],
.login-modal input[type="password"] {
  width: 100%; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid #d6dee6; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.login-modal input[type="email"]:focus,
.login-modal input[type="password"]:focus {
  border-color: #445A6E; outline: none; box-shadow: 0 0 0 3px rgba(68, 90, 110, .12);
}
.login-modal .login-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #6b7a86; margin-bottom: 16px;
}
.login-modal .login-btn {
  width: 100%; padding: 12px; border: none; border-radius: 8px;
  background: #445A6E; color: #fff; font-weight: 600; cursor: pointer;
}
.login-modal .login-btn:hover { background: #33454F; }
.login-modal .login-foot { text-align: center; margin-top: 16px; font-size: 14px; color: #6b7a86; }
.login-modal .login-foot a { color: #445A6E; font-weight: 600; }
.login-modal .login-error {
  background: #fdecea; color: #b0322f; border: 1px solid #f5c6c3;
  border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 14px; text-align: center;
}

/* Bloque "Un portal, tres perfiles": foto REAL a sangre arriba,
   tarjeta redondeada y con menos padding (unificada con el borde). */
.aboutus .pcs-list:has(.perfil-foto) {
  padding: 0 0 28px !important;
  overflow: hidden;
  border-radius: 16px !important;
}
.aboutus .pcs-list .perfil-foto {
  height: 200px;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  margin: 0 0 20px;
  box-shadow: none;
}
.aboutus .pcs-list:has(.perfil-foto) h3,
.aboutus .pcs-list:has(.perfil-foto) p {
  padding-left: 24px;
  padding-right: 24px;
}
.aboutus .pcs-list:has(.perfil-foto) .perfil-link {
  margin-left: 24px;
  margin-right: 24px;
}

/* ===========================================================
   MEGA-MENÚ de Dermatología: foto de cada tratamiento + nombre
   =========================================================== */
.header_menu .navbar-nav li.submenu .dropdown-menu.mega-menu,
.mega-menu.mega-derma {
  width: 660px !important;
  max-width: 94vw;
  left: 0;
  padding: 16px !important;
}
.mega-menu .mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mega-menu .mega-item {
  display: block;
  text-decoration: none;
  border-radius: 5px;
  padding: 0;
  background: transparent !important;
}
.mega-menu .mega-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-light, #E6ECF1);
  position: relative;
  overflow: hidden;
  color: #fff;
  font-size: 26px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
  transition: transform .2s ease;
}
.mega-menu .mega-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,34,52,.15) 0%, rgba(20,34,52,.55) 100%);
}
.mega-menu .mega-thumb i { position: relative; z-index: 2; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.mega-menu .mega-name {
  display: block;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  color: #2c3e50 !important;
  padding: 9px 4px 2px;
  font-weight: 400;
}
.mega-menu .mega-item:hover .mega-thumb { transform: translateY(-3px); }
.mega-menu .mega-item:hover .mega-name { color: var(--brand, #C88B4A) !important; }
@media (max-width: 991px) {
  .mega-menu.mega-derma { width: 100% !important; }
  .mega-menu .mega-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===========================================================
   Tarjetas institucionales (asociaciones de pacientes / sociedades)
   =========================================================== */
.inst-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  height: 100%;
  background: #fff;
  border: 1px solid #e6ebf0;
  border-radius: 14px;
  padding: 26px 20px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.inst-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(16, 42, 67, 0.14);
  border-color: var(--brand, #C88B4A);
}
.inst-card .inst-logo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-light, #E6ECF1);
  color: var(--brand-blue, #445A6E);
  font-size: 26px;
  transition: background .2s ease, color .2s ease;
}
.inst-card:hover .inst-logo { background: var(--brand, #C88B4A); color: #fff; }
.inst-card .inst-nombre { font-size: 14px; font-weight: 600; color: #2c3440; line-height: 1.35; }
.inst-card .inst-link { font-size: 13px; font-weight: 600; color: var(--brand-blue, #445A6E); margin-top: auto; }

/* ===========================================================
   UNIDADES ESPECIALIZADAS · tarjeta con "huella" de marca
   La huella cambia de color al pasar el cursor y se revela
   el referente con el que pedir cita.
   =========================================================== */
.unidades-especializadas .unidad-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 32px 22px 26px;
  text-align: center;
  height: 100%;
  box-shadow: 0 2px 10px rgba(16, 42, 67, 0.10);
  border-top: 3px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor: default;
  outline: none;
}
.unidades-especializadas .unidad-card:hover,
.unidades-especializadas .unidad-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(16, 42, 67, 0.18);
  border-top-color: var(--brand, #C88B4A);
}
.unidades-especializadas .unidad-huella {
  font-size: 54px;
  line-height: 1;
  color: var(--brand-blue, #445A6E);
  margin-bottom: 14px;
  transition: color .25s ease, transform .25s ease;
}
.unidades-especializadas .unidad-foto,
.unidades-especializadas .unidad-badge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 14px;
  border: 3px solid var(--brand-light, #E6ECF1);
  box-shadow: 0 4px 14px rgba(16, 42, 67, 0.14);
  transition: border-color .25s ease, transform .25s ease;
}
/* Círculo de "Equipo médico": huella de fondo + logo COTO encima */
.unidades-especializadas .unidad-badge {
  position: relative;
  background: var(--brand-light, #E6ECF1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.unidades-especializadas .unidad-badge-huella {
  position: absolute;
  font-size: 62px;
  line-height: 1;
  color: var(--brand-blue, #445A6E);
  opacity: 0.16;
  transition: color .25s ease, opacity .25s ease;
}
.unidades-especializadas .unidad-badge-logo {
  position: relative;
  z-index: 2;
  max-width: 62%;
  max-height: 46%;
  object-fit: contain;
}
.unidades-especializadas .unidad-card:hover .unidad-badge,
.unidades-especializadas .unidad-card:focus-within .unidad-badge {
  border-color: var(--brand, #C88B4A);
  transform: scale(1.06);
}
.unidades-especializadas .unidad-card:hover .unidad-badge-huella,
.unidades-especializadas .unidad-card:focus-within .unidad-badge-huella {
  color: var(--brand, #C88B4A);
  opacity: 0.26;
}
.unidades-especializadas .unidad-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.unidades-especializadas .unidad-card:hover .unidad-foto,
.unidades-especializadas .unidad-card:focus-within .unidad-foto {
  border-color: var(--brand, #C88B4A);
  transform: scale(1.06);
}
.unidades-especializadas .unidad-card:hover .unidad-huella,
.unidades-especializadas .unidad-card:focus-within .unidad-huella {
  color: var(--brand, #C88B4A);
  transform: scale(1.1) rotate(-3deg);
}
.unidades-especializadas .unidad-nombre {
  font-size: 17px;
  margin: 0;
  color: #2c3440;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unidades-especializadas .unidad-reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.unidades-especializadas .unidad-card:hover .unidad-reveal,
.unidades-especializadas .unidad-card:focus-within .unidad-reveal {
  max-height: 200px;
  opacity: 1;
  margin-top: 12px;
}
.unidades-especializadas .unidad-ref {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #8a94a0;
  margin: 0 0 14px;
  line-height: 1.5;
}
.unidades-especializadas .unidad-ref strong {
  display: block;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brand-blue, #445A6E);
}
.unidades-especializadas .unidad-acciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.unidades-especializadas .unidad-btn {
  display: block;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background: var(--brand-blue, #445A6E);
  color: #fff;
  transition: filter .15s ease, background .15s ease, color .15s ease;
}
.unidades-especializadas .unidad-btn:hover { filter: brightness(1.08); }
.unidades-especializadas .unidad-btn-ghost {
  background: transparent;
  color: var(--brand-blue, #445A6E);
  border: 1px solid #d7dee6;
}
.unidades-especializadas .unidad-btn-ghost:hover {
  background: #f2f5f8;
  color: var(--brand-blue, #445A6E);
}
/* En pantallas táctiles (sin hover) el referente se muestra siempre */
@media (hover: none) {
  .unidades-especializadas .unidad-reveal {
    max-height: 200px;
    opacity: 1;
    margin-top: 12px;
  }
}

/* Submenús desplegables: todo en MAYÚSCULAS (queda más limpio) */
.header_menu .dropdown-menu li a,
.navbar-nav .dropdown-menu li a {
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Topbar: transparente (forma parte del degradado del header), texto blanco */
.main_header_area .topbar-wrap.bg-dblue,
.main_header_area .topbar-wrap {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.main_header_area .topbar-wrap ul li,
.main_header_area .topbar-wrap .t-address li,
.main_header_area .topbar-wrap .t-address li i,
.main_header_area .topbar-wrap .t-social li a,
.main_header_area .topbar-wrap a {
  color: #ffffff !important;
}
.main_header_area .topbar-wrap .t-address li::after {
  background: rgba(255, 255, 255, 0.35);
}

/* Tipo de letra mas pequeño en el telefono y email */
.main_header_area .topbar-wrap .t-address li,
.main_header_area .topbar-wrap .t-address li i {
  font-size: 12px;
}
.main_header_area .topbar-wrap .t-social li a {
  font-size: 12px;
}

/* Menu principal: items un poco mas separados */
.header_menu .navbar.navbar-default .nav.navbar-nav li {
  padding: 10px 18px;
}

/* ===========================================================
   CABECERA · degradado azul (#445A6E) en TODA la web
   Fondo: #445A6E arriba → azul translucido abajo
   Textos, iconos y logo en blanco para mayor contraste
   =========================================================== */

/* Fondo degradado del header. No llega del todo a transparente para que
   el texto blanco siga legible sobre las paginas internas de fondo claro. */
.main_header_area {
  background: linear-gradient(180deg, #445A6E 0%, #445A6E 32%, rgba(68, 90, 110, 0.86) 100%) !important;
}

/* El menu deja de tener fondo blanco y sombra: se ve el degradado */
.main_header_area .header_menu,
.main_header_area .header_menu .navbar.navbar-default,
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Enlaces del menu principal (primer nivel) en blanco */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a,
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a > i,
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.active > a {
  color: #ffffff !important;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a:hover {
  color: var(--brand-light, #F3E6D4) !important;
  border-bottom-color: var(--brand-light, #F3E6D4) !important;
}

/* Submenu desplegable: se mantiene con fondo blanco y texto oscuro legible */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu {
  background: #ffffff !important;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a {
  color: #2c3e50 !important;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a:hover {
  color: var(--brand, #C88B4A) !important;
}

/* Logo en blanco (el PNG es transparente) */
.main_header_area .navbar-brand img {
  filter: brightness(0) invert(1);
}

/* Boton "Pide tu Cita" en blanco con borde + enlace "Area privada" del header */
.main_header_area .header-btn .btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
}
.main_header_area .header-btn .btn:hover {
  background: #ffffff !important;
  color: #2c3e50 !important;
}
.main_header_area .header-btn > a {
  color: #ffffff !important;
}

/* Estado fijo al hacer scroll (desktop): barra azul solida, no blanca */
@media (min-width: 992px) {
  .main_header_area .header_menu.fixed-top {
    background: #445A6E !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important;
  }
}

/* Hamburguesa movil e iconos en blanco */
.main_header_area .slicknav_btn.slicknav_open:before,
.main_header_area .slicknav_btn.slicknav_collapsed:before,
.main_header_area .navbar-sticky-in .slicknav_btn.slicknav_open:before,
.main_header_area .navbar-sticky-in .slicknav_btn.slicknav_collapsed:before {
  color: #ffffff !important;
}
.main_header_area #slicknav-mobile .slicknav_btn,
.main_header_area .slicknav_icon-bar {
  background-color: #ffffff !important;
}
/* Panel del menu movil desplegado: fondo azul solido para que se lea */
.main_header_area .slicknav_nav {
  background: #445A6E !important;
  padding: 8px 16px;
  border-radius: 6px;
}
.main_header_area .slicknav_nav a {
  color: #ffffff !important;
}
.main_header_area .slicknav_nav a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--brand-light, #F3E6D4) !important;
}

/* HOME · sobre el slider oscuro el degradado SI puede fundir a transparente */
.header-transparent.main_header_area {
  background: linear-gradient(180deg, #445A6E 0%, rgba(68, 90, 110, 0.45) 55%, transparent 100%) !important;
}

/* Banner: ocultar fondo decorativo de nubes */
.banner .svg-image,
.banner .svg-image path {
  display: none !important;
}

/* Banner: sin fondo (gradiente azul claro original eliminado) */
.banner {
  background-image: none !important;
  background: transparent !important;
}

/* Chat widget: texto del boton "Pedir cita" en blanco */
.cita-widget-toggle,
.cita-widget-toggle .cita-widget-toggle-label,
.cita-widget-toggle .cita-widget-toggle-icon,
.cita-widget-toggle i {
  color: #ffffff !important;
}

/* Footer: zona media en blanco (top call-to y bottom copyright se quedan oscuros) */
.footer .footer-wrap {
  background: #ffffff !important;
  padding: 60px 0 !important;
}
.footer .footer-wrap .ft-lists h3,
.footer .footer-wrap .ft-lists p,
.footer .footer-wrap .ft-lists a,
.footer .footer-wrap .ft-lists ul li a,
.footer .footer-wrap .cl-white {
  color: #333333 !important;
}
.footer .footer-wrap .ft-lists ul li a:hover {
  color: #445A6E !important;
}
.footer .footer-wrap .ft-lists .form-control {
  border: 1px solid #dddddd;
}

/* Logo del footer mas pequeno */
.footer .footer-wrap .f-maincontent img {
  max-width: 140px;
  height: auto;
}

/* Seccion "Como funciona": separar del bloque superior */
.wprocess-1 {
  margin-top: 60px !important;
  padding-top: 80px !important;
}

/* ===========================================================
   Secciones oscuras de la home (#2c2820): textura topográfica
   La imagen crema se superpone al color oscuro al 30% de opacidad
   (overlay oscuro al 70%), conservando el texto blanco legible.
   =========================================================== */
.title-bg-h4,
.sc-bg-right,
.sc-bg-left,
.experience,
.appointment.sc-bg-right {
  background-color: #2c2820 !important;
  background-image:
    linear-gradient(rgba(44, 40, 32, 0.7), rgba(44, 40, 32, 0.7)),
    url('/images/fondo-secciones-inicio.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ===========================================================
   Iconos en AZUL de marca COTO (sin tocar textos ni botones)
   =========================================================== */
:root {
  --brand-blue: #445A6E;
}
.sv-icon,
.sv-icon i,
.pcs-list i,
.service-list i,
.w-process .pcs-list i,
i.cl-green,
.display-4.cl-green,
.display-6.cl-green,
.cl-green > i,
.appoint-info > i,
.call-contact > i,
.team-name a i,
.short-info i {
  color: var(--brand-blue) !important;
}

/* ===========================================================
   Bloque "Tu piel, tu tiempo": imagen (en vez de icono) en cada card
   =========================================================== */
.w-process .pcs-list .pcs-img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 16px;
}

/* Bloque "Para pacientes": badge de icono redondo + tarjeta con hover */
.w-process.wprocess-1 .pcs-list {
  border-radius: 16px !important;
  padding: 30px 24px;
  height: 100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.w-process.wprocess-1 a:hover .pcs-list {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(16, 42, 67, 0.14);
  border-color: var(--brand, #C88B4A) !important;
}
.w-process.wprocess-1 .pcs-badge {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--brand-blue, #445A6E);
  background: var(--brand-light, #E6ECF1);
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.w-process.wprocess-1 a:hover .pcs-badge {
  background: var(--brand, #C88B4A);
  color: #fff;
  transform: scale(1.08);
}
.w-process.wprocess-1 .pcs-list h3 { margin-bottom: 8px; }

/* Bloque "Para pacientes" con FOTO real a sangre arriba (redondeada) */
.w-process.wprocess-1 .pcs-list:has(.pcs-foto) {
  padding: 0 0 26px !important;
  overflow: hidden;
  border-radius: 16px;
}
.w-process.wprocess-1 .pcs-foto {
  height: 165px;
  background-size: cover;
  background-position: center;
  margin: 0 0 18px;
}
.w-process.wprocess-1 .pcs-list:has(.pcs-foto) h3,
.w-process.wprocess-1 .pcs-list:has(.pcs-foto) p {
  padding-left: 22px;
  padding-right: 22px;
  text-align: center;
}

/* ===========================================================
   Enlaces a la ficha del doctor dentro de las cards de servicios
   =========================================================== */
.medico-link {
  color: var(--brand, #C88B4A);
  font-weight: 500;
  transition: color 150ms linear;
}
.medico-link:hover {
  color: var(--brand-blue, #445A6E);
  text-decoration: underline;
}

/* ===========================================================
   Tarjeta de equipo con FOTO real del doctor (cuadrada, recorte cover)
   =========================================================== */
.team-img.team-photo {
  aspect-ratio: 1 / 1;
  background: var(--brand-light, #E6ECF1);
}
.team-img.team-photo > a,
.team-img.team-photo > a img,
.team-img.team-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================================================
   Tarjeta de equipo con LOGO (cuando no hay foto del doctor)
   =========================================================== */
.team-logo-card {
  background: var(--brand-light, #E6ECF1);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 30px;
}
.team-logo-card .team-logo-img {
  width: auto !important;
  height: auto !important;
  max-width: 78%;
  max-height: 70%;
  object-fit: contain;
}
/* Que el hover de redes sociales siga funcionando sobre la tarjeta */
.team-logo-card .social-links-a {
  position: absolute;
}

/* ===========================================================
   HERO HOME · slider gigante a pantalla completa
   con header transparente superpuesto
   =========================================================== */

.home-hero {
  position: relative;
}

/* --- Header transparente sobre el slider --- */
.header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: transparent !important;
}
/* Ocultar la barra superior blanca (telefono/email) en la home */
.header-transparent .topbar-wrap {
  display: none !important;
}
/* Menu transparente, sin sombra ni fondo */
.header-transparent .header_menu,
.header-transparent .navbar.navbar-default {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Enlaces del menu PRINCIPAL (primer nivel) en blanco · NO los del submenú */
.header-transparent .nav.navbar-nav > li > a,
.header-transparent .nav.navbar-nav > li > a > i {
  color: #ffffff !important;
}
.header-transparent .nav.navbar-nav > li > a:hover {
  color: var(--brand-light, #E6ECF1) !important;
}
/* Submenú desplegable: fondo blanco y texto oscuro legible
   (alta especificidad para ganar a las reglas del menú transparente) */
.header-transparent .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu {
  background: #ffffff !important;
}
.header-transparent .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a {
  color: #2c3e50 !important;
}
.header-transparent .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a:hover {
  color: var(--brand, #445A6E) !important;
}
/* Logo en blanco (el PNG es transparente) */
.header-transparent .navbar-brand img {
  filter: brightness(0) invert(1);
}
/* Boton "Mi cuenta / Area privada" en blanco con borde */
.header-transparent .header-btn .btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  color: #ffffff !important;
}
.header-transparent .header-btn .btn:hover {
  background: #ffffff !important;
  color: #222222 !important;
}
/* Icono hamburguesa movil en blanco */
.header-transparent #slicknav-mobile .slicknav_btn,
.header-transparent .slicknav_icon-bar {
  background-color: #ffffff !important;
}

/* --- Slider a pantalla completa --- */
.banner-hero {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  background: #0c1622 !important;
  overflow: hidden;
}
.banner-hero .banner-swiper,
.banner-hero .swiper-wrapper,
.banner-hero .hero-slide {
  height: 100vh;
  min-height: 620px;
}
.banner-hero .hero-slide {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Capa oscura para legibilidad del texto */
.banner-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 40, 70, 0.55) 0%,
    rgba(15, 30, 55, 0.45) 45%,
    rgba(10, 20, 40, 0.65) 100%
  );
  z-index: 1;
}
/* Slide "branded": la foto ya trae el logo COTO y el tinte azul.
   Sin texto encima y con capa muy suave (solo para legibilidad del menú arriba). */
.banner-hero .hero-branded .hero-content {
  display: none !important;
}
.banner-hero .hero-branded .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(10, 22, 40, 0.38) 0%,
    rgba(10, 22, 40, 0.10) 28%,
    rgba(10, 22, 40, 0.10) 100%
  );
}

/* Contenido centrado del slide */
.banner-hero .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  max-width: 960px;
  padding: 0 20px;
  text-shadow: 0 2px 18px rgba(10, 22, 40, 0.45);
}
/* Todos los textos del slider en blanco */
.banner-hero .hero-content,
.banner-hero .hero-content h1,
.banner-hero .hero-content h2,
.banner-hero .hero-content h3,
.banner-hero .hero-content h4,
.banner-hero .hero-content h5,
.banner-hero .hero-content p,
.banner-hero .hero-content span,
.banner-hero .hero-content a {
  color: #ffffff !important;
}
.banner-hero .hero-content h4 {
  font-weight: 500;
  letter-spacing: 1px;
  font-size: clamp(42px, 7.6vw, 84px);
  line-height: 1.05;
  margin-bottom: 20px;
  opacity: 1;
}
.banner-hero .hero-content h1 {
  font-weight: 300;
  font-size: 52px;
  line-height: 1.15;
  margin-bottom: 14px;
}
.banner-hero .hero-content p {
  font-weight: 300;
  font-size: 20px;
  margin-bottom: 28px;
  opacity: 0.92;
}

/* Boton pill outline blanco (estilo "+ INFO" / "Solicite cita") */
.banner-hero .hero-btn,
.hero-bottom .hero-btn {
  display: inline-block;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
  border-radius: 40px !important;
  padding: 12px 34px !important;
  font-weight: 300;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}
.banner-hero .hero-btn:hover,
.hero-bottom .hero-btn:hover {
  background: #ffffff !important;
  color: #1a2a45 !important;
  border-color: #ffffff !important;
}

/* Paginacion del slider */
.banner-hero .banner-pagination {
  position: absolute;
  bottom: 200px;
  left: 0;
  right: 0;
  z-index: 5;
  text-align: center;
}
.banner-hero .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  background: #ffffff;
  opacity: 0.5;
}
.banner-hero .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--brand-light, #E6ECF1);
}

/* --- Barra inferior: urgencias + solicite cita --- */
.hero-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 0 50px;
}
.hero-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.hero-urgencias {
  text-align: center;
  color: #ffffff !important;
  position: relative;
  padding-right: 60px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.hero-urgencias,
.hero-urgencias .hu-title,
.hero-urgencias .hu-hours,
.hero-urgencias .hu-phone {
  color: #ffffff !important;
}
.hero-urgencias .hu-title,
.hero-urgencias .hu-hours,
.hero-urgencias .hu-phone {
  display: block;
  font-weight: 300;
}
.hero-urgencias .hu-title {
  font-size: 16px;
  margin-bottom: 2px;
}
.hero-urgencias .hu-hours {
  font-size: 15px;
  margin-bottom: 4px;
}
.hero-urgencias .hu-phone {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .banner-hero .hero-content h1 {
    font-size: 38px;
  }
  .header-transparent {
    position: relative;
    background: #1a2a45 !important;
  }
  .header-transparent .topbar-wrap {
    display: block !important;
  }
  .banner-hero .banner-swiper,
  .banner-hero .swiper-wrapper,
  .banner-hero .hero-slide {
    height: auto;
    min-height: 80vh;
  }
}
@media (max-width: 767px) {
  .banner-hero .hero-content h1 {
    font-size: 30px;
  }
  .banner-hero .hero-content p {
    font-size: 17px;
  }
  .hero-bottom {
    padding-bottom: 30px;
  }
  .hero-bottom-inner {
    flex-direction: column;
    gap: 22px;
  }
  .hero-urgencias {
    padding-right: 0;
    border-right: 0;
  }
  .banner-hero .banner-pagination {
    bottom: 270px;
  }
}

/* ===========================================================
   Acceso "Área privada" (candado en círculo) + botón Pide tu Cita
   =========================================================== */
.area-privada {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #33454f;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s ease;
}
.area-privada .lock-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex: 0 0 auto;
}
.area-privada:hover {
  color: var(--brand, #445A6E);
}
/* En la home (header transparente) en blanco */
.header-transparent .area-privada {
  color: #ffffff;
}
.header-transparent .area-privada:hover {
  color: var(--brand-light, #E6ECF1);
}
/* Botón Pide tu Cita un poco más redondeado */
.btn-cita {
  border-radius: 40px !important;
}

/* ===========================================================
   Botón "Solicite cita" del hero · azul oscuro tipo logo
   =========================================================== */
.hero-bottom .hero-btn {
  background: var(--brand-dark, #33454F) !important;
  border-color: var(--brand-dark, #33454F) !important;
  color: #ffffff !important;
}
.hero-bottom .hero-btn:hover {
  background: #24323d !important;
  border-color: #24323d !important;
  color: #ffffff !important;
}

/* ===========================================================
   Iconos del header (muñeco = Área privada · calendario = cita)
   =========================================================== */
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #33454f;
  font-size: 18px;
  margin-left: 8px;
  transition: color .2s ease;
}
.header-icon:hover {
  color: var(--brand, #445A6E);
}
.header-transparent .header-icon {
  color: #ffffff;
}
.header-transparent .header-icon:hover {
  color: var(--brand-light, #E6ECF1);
}

/* Etiqueta "Solicitar cita telemática" sobre el botón del hero */
.hero-cita-label {
  color: #ffffff;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .3px;
  margin-bottom: 10px;
}

/* ===========================================================
   Submenús desplegables en MAYÚSCULAS (igual que el menú principal)
   =========================================================== */
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a {
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 13px;
}

/* ===========================================================
   Noticias del home: texto BLANCO (la sección tiene fondo oscuro)
   Solo en la home (.blog-main.title-bg-h4); el índice del blog
   conserva su texto oscuro sobre fondo claro.
   =========================================================== */
.blog-main.title-bg-h4 .article-list .artl-detail h3 a {
  color: #ffffff !important;
}
.blog-main.title-bg-h4 .article-list .artl-detail p {
  color: #eef1f4 !important;
}
.blog-main.title-bg-h4 .article-footer .cl-lgrey2,
.blog-main.title-bg-h4 .article-footer a.cl-lgrey2 {
  color: #cbd3da !important;
}

/* ===========================================================
   Ajuste fino del fondo de secciones oscuras (textura más visible)
   =========================================================== */
.title-bg-h4, .sc-bg-right, .sc-bg-left, .experience, .appointment.sc-bg-right {
    background-color: #f6efe4 !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.62)), url(/images/fondo-secciones-inicio.png) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ===========================================================
   Secciones con fondo CLARO (textura): texto oscuro para contraste
   (titulares en azul de marca, cuerpo en gris oscuro)
   =========================================================== */
.title-bg-h4 .cl-white,
.sc-bg-left .cl-white,
.sc-bg-right .cl-white,
.experience .cl-white,
.appointment.sc-bg-right .cl-white {
  color: #4a4238 !important;
}
.title-bg-h4 h1.cl-white, .title-bg-h4 h2.cl-white, .title-bg-h4 h3.cl-white, .title-bg-h4 h4.cl-white,
.sc-bg-left h1.cl-white, .sc-bg-left h2.cl-white, .sc-bg-left h3.cl-white, .sc-bg-left h4.cl-white,
.sc-bg-right h1.cl-white, .sc-bg-right h2.cl-white, .sc-bg-right h3.cl-white, .sc-bg-right h4.cl-white,
.experience h1.cl-white, .experience h2.cl-white, .experience h3.cl-white, .experience h4.cl-white,
.appointment.sc-bg-right h1.cl-white, .appointment.sc-bg-right h2.cl-white {
  color: #445A6E !important;
}
.experience .countfect.cl-white {
  color: #445A6E !important;
}
/* Cifras de la home: el "+" se escribe en el texto, no lo añade la plantilla */
.experience .exp-detail .exp-list-wrap .value-pin span.cifra-dato { color: #445A6E !important; }
.experience .exp-detail .exp-list-wrap .value-pin span.cifra-dato::after { content: none; }
.title-bg-h4 .cl-green, .title-bg-h4 .cl-lgreen,
.sc-bg-left .cl-green, .sc-bg-left .cl-lgreen,
.sc-bg-right .cl-green, .sc-bg-right .cl-lgreen,
.experience .cl-green, .experience .cl-lgreen,
.appointment.sc-bg-right .cl-green, .appointment.sc-bg-right .cl-lgreen {
  color: #445A6E !important;
}
/* Botones blancos sobre estas secciones: borde azul para que se distingan */
.sc-bg-left .btn-white-lb, .sc-bg-right .btn-white-lb {
  border-color: #445A6E !important;
  color: #2c2820 !important;
}

/* ============================================================
   FICHA DE DOCTOR · maquetación elaborada
   ============================================================ */
.doctor-ficha { padding: 10px 0 70px; }
.doctor-ficha .ficha-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(44, 40, 32, .10);
  position: sticky;
  top: 104px;
}
.doctor-ficha .ficha-photo { aspect-ratio: 1 / 1; background: var(--brand-light, #E6ECF1); }
.doctor-ficha .ficha-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doctor-ficha .ficha-photo img.is-logo { object-fit: contain; padding: 38px; }
.doctor-ficha .ficha-card-body { padding: 22px 22px 26px; text-align: center; }
.doctor-ficha .ficha-card-name { font-size: 22px; margin: 0 0 4px; color: #2c2820; }
.doctor-ficha .ficha-card-role { color: var(--brand-blue, #445A6E); font-weight: 600; font-size: 14px; margin-bottom: 16px; }
.doctor-ficha .ficha-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.doctor-ficha .ficha-chip { background: #f3f1ec; color: #5b5347; font-size: 12px; padding: 6px 12px; border-radius: 999px; }
.doctor-ficha .ficha-card .btn { width: 100%; }
.doctor-ficha .ficha-contact { margin-top: 14px; font-size: 13px; color: #8a8175; }
.doctor-ficha .ficha-contact a { color: var(--brand-blue, #445A6E); font-weight: 600; }
.doctor-ficha .ficha-lead { font-size: 18px; line-height: 1.75; color: #4a4238; }
.doctor-ficha .ficha-block { margin-top: 32px; }
.doctor-ficha .ficha-block > h3 {
  position: relative; padding-left: 16px; font-size: 20px; color: #2c2820; margin-bottom: 16px;
}
.doctor-ficha .ficha-block > h3::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 3px; background: var(--brand, #C88B4A);
}
.doctor-ficha .ficha-areas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.doctor-ficha .ficha-areas li { position: relative; padding-left: 28px; color: #4a4238; }
.doctor-ficha .ficha-areas li i { position: absolute; left: 0; top: 4px; color: var(--brand, #C88B4A); }
.doctor-ficha .ficha-note { background: #f7f5f1; border-left: 4px solid var(--brand-blue, #445A6E); border-radius: 10px; padding: 16px 18px; color: #6b6258; margin: 0; }
@media (max-width: 767px) {
  .doctor-ficha .ficha-areas { grid-template-columns: 1fr; }
  .doctor-ficha .ficha-card { position: static; }
}

/* ============================================================
   DETALLE DE ESPECIALIDAD · maquetación elaborada
   ============================================================ */
.sv-detail { padding: 10px 0 70px; }
.sv-detail .sv-badge {
  width: 72px; height: 72px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4d677d, #33454f); color: #fff; font-size: 30px; margin-bottom: 22px;
}
.sv-detail .sv-lead { font-size: 19px; line-height: 1.8; color: #4a4238; }
/* Ilustración divulgativa de la unidad (p. ej. el linfocito en inmunomediadas) */
.sv-detail .sv-ilustracion { display: flex; align-items: center; gap: 24px; margin: 40px 0 36px; padding: 22px 24px; background: #fff; border: 1px solid #efece6; border-radius: 14px; box-shadow: 0 6px 18px rgba(44, 40, 32, .05); }
.sv-detail .sv-ilustracion img { width: 96px; height: auto; flex-shrink: 0; border-radius: 10px; }
.sv-detail .sv-ilustracion figcaption { font-size: 14px; line-height: 1.7; color: #6b7a86; margin: 0; }
@media (max-width: 575px) {
  .sv-detail .sv-ilustracion { flex-direction: column; text-align: center; gap: 18px; margin: 32px 0 28px; }
  .sv-detail .sv-ilustracion img { width: 84px; }
}
.sv-detail .sv-incluye-title { position: relative; padding-left: 16px; font-size: 21px; color: #2c2820; margin: 32px 0 18px; }
.sv-detail .sv-incluye-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 3px; background: var(--brand, #C88B4A); }
.sv-detail .sv-incluye { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-detail .sv-incluye li { background: #fff; border: 1px solid #efece6; border-radius: 12px; padding: 14px 16px 14px 46px; position: relative; color: #4a4238; box-shadow: 0 6px 18px rgba(44, 40, 32, .05); }
.sv-detail .sv-incluye li i { position: absolute; left: 16px; top: 17px; color: var(--brand, #C88B4A); }
.sv-detail .sv-actions { margin-top: 28px; }
.sv-detail .sv-side-card { background: #fff; border: 1px solid #efece6; border-radius: 16px; padding: 22px; box-shadow: 0 8px 24px rgba(44, 40, 32, .05); }
.sv-detail .sv-side-card + .sv-side-card { margin-top: 18px; }
.sv-detail .sv-side-card h4 { font-size: 17px; margin-bottom: 14px; color: #2c2820; }
.sv-detail .sv-cta-card { background: linear-gradient(135deg, #4d677d, #33454f); color: #fff; border-radius: 16px; padding: 26px 24px; text-align: center; }
.sv-detail .sv-cta-card h4 { color: #fff; margin-bottom: 8px; }
.sv-detail .sv-cta-card p { color: rgba(255, 255, 255, .82); font-size: 14px; margin-bottom: 18px; }
.sv-detail .sv-cta-card .btn { background: #fff !important; color: #2c2820 !important; border-color: #fff !important; width: 100%; }
.sv-detail .sv-otras { list-style: none; padding: 0; margin: 0; }
.sv-detail .sv-otras li { margin-bottom: 12px; }
.sv-detail .sv-otras li:last-child { margin-bottom: 0; }
.sv-detail .sv-otras a { color: #33454f; display: flex; align-items: center; gap: 12px; font-weight: 500; }
.sv-detail .sv-otras a:hover { color: var(--brand-blue, #445A6E); }
.sv-detail .sv-otras a i { color: var(--brand, #C88B4A); width: 22px; text-align: center; }
@media (max-width: 767px) { .sv-detail .sv-incluye { grid-template-columns: 1fr; } }

/* Secciones de contenido extendido (GEO) */
.sv-detail .sv-section-title { position: relative; padding-left: 16px; font-size: 22px; color: #2c2820; margin: 40px 0 16px; }
.sv-detail .sv-section-title::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 5px; border-radius: 3px; background: var(--brand, #C88B4A); }
.sv-detail .sv-section-text { font-size: 17px; line-height: 1.8; color: #4a4238; margin-bottom: 16px; }
.sv-detail .sv-section-list { list-style: none; padding: 0; margin: 0; }
.sv-detail .sv-section-list li { position: relative; padding: 6px 0 6px 30px; color: #4a4238; line-height: 1.7; }
.sv-detail .sv-section-list li i { position: absolute; left: 0; top: 11px; color: var(--brand, #C88B4A); }

/* Rejilla de métodos diagnósticos */
.sv-detail .sv-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.sv-detail .sv-metodo { background: #fff; border: 1px solid #efece6; border-radius: 14px; padding: 18px 20px; box-shadow: 0 6px 18px rgba(44, 40, 32, .05); }
.sv-detail .sv-metodo h3 { font-size: 16px; color: var(--brand-blue, #445A6E); margin: 0 0 8px; }
.sv-detail .sv-metodo p { font-size: 14.5px; line-height: 1.65; color: #6b6258; margin: 0; }
@media (max-width: 767px) { .sv-detail .sv-metodos { grid-template-columns: 1fr; } }

/* FAQ (acordeón) */
.sv-faq-section { padding: 10px 0 70px; background: #f7f5f1; }
.sv-faq-heading { position: relative; padding-left: 16px; font-size: 24px; color: #2c2820; margin: 0 0 24px; }
.sv-faq-heading::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 5px; border-radius: 3px; background: var(--brand, #C88B4A); }
.sv-faq { max-width: 820px; }
.sv-faq-item { background: #fff; border: 1px solid #efece6; border-radius: 12px; padding: 0; margin-bottom: 14px; box-shadow: 0 6px 18px rgba(44, 40, 32, .05); }
.sv-faq-item summary { list-style: none; cursor: pointer; padding: 18px 48px 18px 20px; font-weight: 600; color: #2c2820; position: relative; font-size: 17px; }
.sv-faq-item summary::-webkit-details-marker { display: none; }
.sv-faq-item summary::after { content: "\f067"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 20px; top: 19px; color: var(--brand, #C88B4A); transition: transform .2s ease; }
.sv-faq-item[open] summary::after { content: "\f068"; }
.sv-faq-answer { padding: 0 20px 18px; }
.sv-faq-answer p { color: #4a4238; line-height: 1.75; margin: 0; }

/* ===========================================================
   FICHA / CV DEL DIRECTOR (Dr. Coto) · maquetación enriquecida
   =========================================================== */
.cv-section { padding-top: 34px; }
.cv-aside { position: sticky; top: 100px; }
.cv-profile-card { background:#fff; border:1px solid #ececec; border-radius:18px; overflow:hidden; box-shadow:0 12px 34px rgba(16,42,67,.10); }
.cv-profile-photo { aspect-ratio: 4/5; background: var(--brand-light,#E6ECF1); }
.cv-profile-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.cv-profile-body { padding:20px 22px 24px; }
.cv-profile-body h2 { font-size:21px; margin:0 0 6px; }
.cv-role { display:inline-block; background:var(--brand-blue,#445A6E); color:#fff; font-weight:600; font-size:12px; letter-spacing:.3px; padding:5px 13px; border-radius:30px; margin-bottom:16px; }
.cv-facts { list-style:none; margin:0 0 18px; padding:0; }
.cv-facts li { display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:#5a6b76; padding:9px 0; border-top:1px solid #f1f1f1; line-height:1.45; }
.cv-facts li i { color:var(--brand,#C88B4A); margin-top:2px; width:16px; text-align:center; flex-shrink:0; }
.cv-aside .btn { width:100%; text-align:center; }
.cv-pubmed { display:flex; align-items:center; justify-content:center; gap:7px; margin-top:11px; font-size:13px; color:var(--brand-blue,#445A6E); font-weight:600; text-decoration:none; }
.cv-pubmed:hover { color:var(--brand,#C88B4A); }

.cv-lead p { font-size:16px; color:#4a4238; line-height:1.8; margin-bottom:18px; }
.cv-lead p:last-child { margin-bottom:0; }

.cv-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0 4px; }
@media (max-width:640px){ .cv-metrics{ grid-template-columns:repeat(2,1fr);} }
.cv-metric { background:#fff; border:1px solid #ececec; border-radius:14px; padding:18px 12px; text-align:center; box-shadow:0 2px 10px rgba(16,42,67,.05); }
.cv-metric .n { font-size:27px; font-weight:800; color:var(--brand-blue,#445A6E); line-height:1; }
.cv-metric .n span { color:var(--brand,#C88B4A); }
.cv-metric .l { font-size:11.5px; color:#8a94a0; margin-top:7px; line-height:1.35; text-transform:uppercase; letter-spacing:.3px; }

.cv-block { background:#fff; border:1px solid #ececec; border-radius:16px; padding:24px 26px; margin-top:22px; box-shadow:0 2px 12px rgba(16,42,67,.05); }
.cv-block-head { display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.cv-block-head .ic { width:42px; height:42px; border-radius:12px; background:var(--brand-light,#E6ECF1); color:var(--brand-blue,#445A6E); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.cv-block-head h3 { margin:0; font-size:19px; }
.cv-block > p { color:#5a6b76; }

.cv-list { list-style:none; margin:0; padding:0; }
.cv-list li { position:relative; padding:9px 0 9px 27px; color:#5a6b76; font-size:14.5px; line-height:1.6; border-bottom:1px dashed #eef0f0; }
.cv-list li:last-child { border-bottom:none; }
.cv-list li::before { content:"\f058"; font-family:"Font Awesome 5 Free"; font-weight:900; position:absolute; left:0; top:10px; color:var(--brand,#C88B4A); font-size:13px; }
.cv-list.num { counter-reset:cvn; }
.cv-list.num li::before { content:counter(cvn); counter-increment:cvn; font-family:inherit; font-weight:700; font-size:11px; color:#fff; background:var(--brand-blue,#445A6E); width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; top:11px; }
.cv-list.num li { padding-left:30px; }
.cv-list b { color:#3a4550; font-weight:600; }
.cv-list .tag { display:inline-block; font-size:11.5px; color:var(--brand-blue,#445A6E); background:var(--brand-light,#E6ECF1); padding:1px 8px; border-radius:20px; margin-left:4px; }

.cv-timeline { position:relative; margin:0; padding:0; list-style:none; }
.cv-timeline li { position:relative; padding:0 0 20px 26px; }
.cv-timeline::before { content:""; position:absolute; left:5px; top:6px; bottom:14px; width:2px; background:#eae4db; }
.cv-timeline li:last-child { padding-bottom:0; }
.cv-timeline li::before { content:""; position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--brand,#C88B4A); }
.cv-tl-year { display:inline-block; font-size:11.5px; font-weight:700; color:var(--brand-blue,#445A6E); background:var(--brand-light,#E6ECF1); padding:2px 10px; border-radius:20px; margin-bottom:5px; }
.cv-tl-text { color:#4a4238; font-size:14.5px; line-height:1.55; }

.cv-chips { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.cv-chips li { background:#f5f2ee; border:1px solid #ece7df; color:#5a5248; font-size:13px; font-weight:500; padding:8px 14px; border-radius:30px; }

.cv-highlight { display:flex; gap:14px; align-items:flex-start; background:linear-gradient(135deg, rgba(200,139,74,.10), rgba(68,90,110,.08)); border:1px solid #e9ddcb; border-radius:14px; padding:16px 18px; margin-bottom:18px; }
.cv-highlight i { color:var(--brand,#C88B4A); font-size:22px; margin-top:2px; flex-shrink:0; }
.cv-highlight p { margin:0; color:#4a4238; font-size:14.5px; line-height:1.55; }
.cv-highlight a { color:var(--brand-blue,#445A6E); font-weight:700; }

/* ===========================================================
   CABECERA FIJA · se queda visible al bajar y se va encogiendo.

   No hay dos tamanos con un salto entre medias: js/custom-nav.js
   publica --nav-p (0 = menu grande, 1 = menu reducido) segun lo que
   has bajado, y aqui cada medida se interpola con ese valor. El menu
   encoge acompanando al scroll, asi que no hay ningun salto.

   El hueco que reserva en la pagina es siempre el del menu grande
   (--header-h, medido por JS), para que el contenido no se mueva.
   =========================================================== */
:root {
  --nav-p: 0;
  --nav-tiempo: 0.32s;
  --nav-curva: cubic-bezier(0.4, 0, 0.2, 1);
}

.main_header_area,
.header-transparent.main_header_area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* solo el fondo y la sombra llevan transicion: el tamano ya va con el scroll */
  transition: box-shadow var(--nav-tiempo) var(--nav-curva),
              background var(--nav-tiempo) var(--nav-curva);
}
/* En las paginas internas la cabecera NO va fija: es sticky, asi ocupa su
   propio alto y no hace falta reservarle hueco con padding en el body (eso
   dejaba una franja en blanco enorme encima del titulo). En la home si flota,
   superpuesta al slider. */
body.nav-hueco {
  padding-top: 0;
}
.main_header_area:not(.header-transparent) {
  position: sticky;
}
body.nav-compact .main_header_area {
  box-shadow: 0 2px 14px rgba(16, 42, 68, 0.14);
}

/* Barra del telefono/email: se pliega desde su altura real hasta cero */
.main_header_area .topbar-wrap {
  overflow: hidden;
  max-height: calc(var(--topbar-h, 46px) * (1 - var(--nav-p)));
  opacity: calc(1 - var(--nav-p) * 1.6);
}

/* Logo: de 48 a 34 px */
.main_header_area .navbar-default a.navbar-brand img {
  max-height: calc(48px - 14px * var(--nav-p));
}
@media (max-width: 767px) {
  /* en movil el logo parte de 40 px */
  .main_header_area .navbar-default a.navbar-brand img {
    max-height: calc(40px - 8px * var(--nav-p));
  }
}

/* Enlaces del menu: de 10 a 4 px de separacion arriba y abajo */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li {
  padding-top: calc(10px - 6px * var(--nav-p));
  padding-bottom: calc(10px - 6px * var(--nav-p));
}

/* Sin animacion para quien pide reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .main_header_area {
    transition: none !important;
  }
}

/* ===========================================================
   DESPLEGABLES del menu · aparecen con un fundido y un ligero
   deslizamiento hacia abajo, en vez de saltar de golpe.
   Solo en escritorio: en movil manda slicknav.
   =========================================================== */
@media (min-width: 992px) {
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.submenu > .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    /* al salir no hay espera: se va en cuanto el raton se marcha */
    transition: opacity 0.9s cubic-bezier(0.33, 0, 0.2, 1),
                transform 0.9s cubic-bezier(0.33, 0, 0.2, 1),
                visibility 0s linear 0.9s;
  }
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.submenu:hover > .dropdown-menu,
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.submenu.open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    /* al entrar espera 0.45 s: pasar el raton de largo ya no abre nada */
    transition: opacity 1.5s cubic-bezier(0.33, 0, 0.2, 1) 0.45s,
                transform 1.5s cubic-bezier(0.33, 0, 0.2, 1) 0.45s,
                visibility 0s linear 0.45s;
  }
  /* Las fichas del mega-menu entran escalonadas, de izquierda a derecha */
  .main_header_area .nav.navbar-nav > li.submenu > .dropdown-menu .mega-item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1.15s cubic-bezier(0.33, 0, 0.2, 1),
                transform 1.15s cubic-bezier(0.33, 0, 0.2, 1);
  }
  .main_header_area .nav.navbar-nav > li.submenu:hover > .dropdown-menu .mega-item,
  .main_header_area .nav.navbar-nav > li.submenu.open > .dropdown-menu .mega-item {
    opacity: 1;
    transform: translateY(0);
  }
  .main_header_area .nav.navbar-nav > li.submenu:hover > .dropdown-menu .mega-item:nth-child(1) { transition-delay: 0.80s; }
  .main_header_area .nav.navbar-nav > li.submenu:hover > .dropdown-menu .mega-item:nth-child(2) { transition-delay: 1.00s; }
  .main_header_area .nav.navbar-nav > li.submenu:hover > .dropdown-menu .mega-item:nth-child(3) { transition-delay: 1.20s; }
  .main_header_area .nav.navbar-nav > li.submenu:hover > .dropdown-menu .mega-item:nth-child(4) { transition-delay: 1.40s; }
  .main_header_area .nav.navbar-nav > li.submenu:hover > .dropdown-menu .mega-item:nth-child(5) { transition-delay: 1.60s; }
}

/* Quien tenga activado "reducir movimiento" no ve ni el deslizamiento ni el escalonado */
@media (prefers-reduced-motion: reduce) {
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.submenu > .dropdown-menu,
  .main_header_area .nav.navbar-nav > li.submenu > .dropdown-menu .mega-item {
    transform: none !important;
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}

/* ===========================================================
   MENU · linea dorada de 1 px bajo la opcion sobre la que esta
   el raton. Solo al pasar por encima y solo en el menu de arriba.
   =========================================================== */
:root {
  --brand-gold: #C8A25A;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a {
  position: relative;
  /* el borde inferior de la plantilla se quita: lo sustituye la linea */
  border-bottom: none !important;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a::after {
  content: "";
  display: block !important;
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 2px;
  width: 0;
  height: 1px;
  border-radius: 0;
  /* Bootstrap dibuja aqui su triangulito con bordes (.dropdown-toggle::after);
     la plantilla lo tapaba con display:none y al reutilizar este pseudo para
     la linea volvia a salir. Se anulan los bordes y no queda nada de el. */
  border: 0 !important;
  background: var(--brand-gold, #C8A25A);
  transform: translateX(-50%);
  transition: width 0.25s ease;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li:hover > a::after,
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a:hover::after {
  width: 100%;
}

/* La flechita que la plantilla dibuja bajo la opcion del menu (un triangulo
   en #eeeeee) sobra: fuera en cualquiera de sus formas. Sin cadena larga de
   clases, para que no se escape en ninguna cabecera. */
.main_header_area .dropdown-menu:before,
.main_header_area .dropdown-menu::before,
.header_menu .dropdown-menu:before,
.header_menu .dropdown-menu::before,
.header-transparent .dropdown-menu:before,
.header-transparent .dropdown-menu::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a::after {
    transition: none;
  }
}

/* ===========================================================
   UNIDADES · bloques con la foto a un lado y el texto al otro,
   alternando el lado en cada bloque para dar ritmo al recorrido.
   Al pasar el raton por la foto: acercamiento, oscurecido leve
   y la flecha de "Mas informacion" se desplaza.
   =========================================================== */
.sv-bloques {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin: 10px 0 24px;
}

.sv-bloque {
  display: flex;
  align-items: center;
  gap: 48px;
  scroll-margin-top: 140px;
  position: relative;
  cursor: pointer;
}
/* Toda la tarjeta es zona de click: el enlace de "Mas informacion" se estira
   por encima del bloque. Los textos quedan encima para poder seleccionarlos. */
.sv-bloque-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.sv-bloque-texto h3,
.sv-bloque-desc,
.sv-bloque-equipo {
  position: relative;
  z-index: 2;
}
/* Ojo: el bloque de equipo lleva enlaces a la ficha de cada medico, asi que
   no se desactiva el raton ahi; al quedar por encima siguen siendo pulsables. */
/* Los pares llevan la foto a la derecha (el DOM no cambia: solo el orden visual) */
.sv-bloque--invertido {
  flex-direction: row-reverse;
}

.sv-bloque-foto {
  flex: 0 0 48%;
  max-width: 48%;
}
.sv-bloque-foto a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 42, 68, 0.10);
}
.sv-bloque-foto img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Velo oscuro, casi invisible en reposo */
.sv-bloque-velo {
  position: absolute;
  inset: 0;
  background: #14233a;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.sv-bloque:hover .sv-bloque-foto img,
.sv-bloque:focus-within .sv-bloque-foto img {
  transform: scale(1.06);
}
.sv-bloque:hover .sv-bloque-velo,
.sv-bloque:focus-within .sv-bloque-velo {
  opacity: 0.22;
}
/* La foto se despega un poco: el conjunto se lee como una sola pieza */
.sv-bloque-foto a {
  transition: box-shadow 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-bloque:hover .sv-bloque-foto a {
  box-shadow: 0 18px 40px rgba(16, 42, 68, 0.18);
}
.sv-bloque-texto h3 a {
  transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-bloque:hover .sv-bloque-texto h3 a {
  color: var(--brand, #445A6E);
}

.sv-bloque-texto {
  flex: 1 1 auto;
  min-width: 0;
}
.sv-bloque-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-light, #E6ECF1);
  color: var(--brand, #445A6E);
  font-size: 19px;
  margin-bottom: 14px;
}
.sv-bloque-texto h3 {
  margin: 0 0 12px;
  font-size: 25px;
  line-height: 1.25;
}
.sv-bloque-texto h3 a {
  color: inherit;
  text-decoration: none;
}
.sv-bloque-texto h3 a:hover {
  color: var(--brand, #445A6E);
}
.sv-bloque-desc {
  color: #6b7280;
  margin-bottom: 14px;
  line-height: 1.65;
}
.sv-bloque-equipo {
  font-size: 13.5px;
  color: #6b7280;
  border-top: 1px solid #eee;
  padding-top: 12px;
  margin-bottom: 16px;
}
.sv-bloque-responsable {
  color: var(--brand, #445A6E);
  font-weight: 600;
}
.sv-bloque-equipo-nombres {
  display: block;
  margin-top: 2px;
}

.sv-bloque-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand, #445A6E);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.sv-bloque-flecha {
  display: inline-block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
/* La flecha se mueve tanto al pasar por la foto como por el propio enlace.
   La foto va antes que el texto en el HTML, asi que vale el selector ~. */
.sv-bloque:hover .sv-bloque-flecha,
.sv-bloque:focus-within .sv-bloque-flecha {
  transform: translateX(9px);
}
.sv-bloque-cta {
  transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.sv-bloque:hover .sv-bloque-cta {
  color: var(--brand-gold, #C8A25A);
}

/* Tablet: la foto un poco mas baja */
@media (max-width: 991px) {
  .sv-bloques { gap: 40px; }
  .sv-bloque { gap: 32px; }
  .sv-bloque-foto img { height: 260px; }
}

/* Movil: todo en una columna, foto siempre arriba */
@media (max-width: 767px) {
  .sv-bloque,
  .sv-bloque--invertido {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .sv-bloque-foto {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .sv-bloque-foto img { height: 220px; }
  .sv-bloque-texto h3 { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-bloque-foto img,
  .sv-bloque-velo,
  .sv-bloque-flecha {
    transition: none !important;
  }
  .sv-bloque-foto a:hover img { transform: none; }
}

/* ===========================================================
   APARICION AL BAJAR · js/animaciones.js marca con .rv lo que
   debe entrar, y con .rv-visible cuando ya asoma en pantalla.
   Desplazamiento corto y fundido: nada de rebotes ni giros.
   =========================================================== */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rv-retraso, 0ms),
              transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) var(--rv-retraso, 0ms);
  will-change: opacity, transform;
}
.rv.rv-visible {
  opacity: 1;
  transform: none;
}
/* Una vez colocado ya no hace falta reservar capa */
.rv.rv-visible {
  will-change: auto;
}

/* En los bloques de unidad, primero asoma la foto y el texto entra detras */
.sv-bloque.rv .sv-bloque-foto,
.sv-bloque.rv .sv-bloque-texto {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.15s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.sv-bloque.rv-visible .sv-bloque-foto,
.sv-bloque.rv-visible .sv-bloque-texto {
  opacity: 1;
  transform: none;
}
.sv-bloque.rv-visible .sv-bloque-texto {
  transition-delay: 0.18s;
}
/* El bloque en si no se mueve: lo hacen sus dos mitades */
.sv-bloque.rv {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv,
  .rv .sv-bloque-foto,
  .rv .sv-bloque-texto {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================================================
   "Un portal, tres perfiles" · las tres tarjetas se leen como
   pulsables: toda la tarjeta es zona de click (el enlace se
   estira por encima), el fondo cambia muy poco, aparece un
   detalle dorado, la tarjeta se levanta y la flecha avanza.
   El contenido no cambia.
   =========================================================== */
.aboutus .pcs-list:has(.perfil-foto) {
  position: relative;
  cursor: pointer;
  background: #ffffff;
  transition: transform 0.55s cubic-bezier(0.33, 0, 0.2, 1),
              box-shadow 0.55s cubic-bezier(0.33, 0, 0.2, 1),
              border-color 0.55s ease,
              background-color 0.55s ease;
}

/* Toda la tarjeta pulsable, sin tocar el HTML: el enlace se estira.
   Los textos quedan por encima para poder seleccionarlos. */
.aboutus .pcs-list:has(.perfil-foto) .perfil-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.aboutus .pcs-list:has(.perfil-foto) h3,
.aboutus .pcs-list:has(.perfil-foto) p {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Detalle dorado: una linea que crece bajo la foto al pasar el raton */
.aboutus .pcs-list .perfil-foto {
  position: relative;
}
.aboutus .pcs-list .perfil-foto::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--brand-gold, #C8A25A);
  transition: width 0.6s cubic-bezier(0.33, 0, 0.2, 1);
}

/* Estado al pasar el raton (y al llegar con el teclado) */
.aboutus .pcs-list:has(.perfil-foto):hover,
.aboutus .pcs-list:has(.perfil-foto):focus-within {
  transform: translateY(-5px);
  background-color: #FBF8F2;
  border-color: var(--brand-gold, #C8A25A) !important;
  /* el anillo dorado de 1 px matiza el borde sin engordarlo */
  box-shadow: 0 14px 30px rgba(16, 42, 68, 0.12),
              inset 0 0 0 1px rgba(200, 162, 90, 0.35);
}
.aboutus .pcs-list:has(.perfil-foto):hover .perfil-foto::after,
.aboutus .pcs-list:has(.perfil-foto):focus-within .perfil-foto::after {
  width: 100%;
}

/* La flecha avanza */
.aboutus .pcs-list .perfil-flecha {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(0.33, 0, 0.2, 1);
}
.aboutus .pcs-list:has(.perfil-foto):hover .perfil-flecha,
.aboutus .pcs-list:has(.perfil-foto):focus-within .perfil-flecha {
  transform: translateX(8px);
}
.aboutus .pcs-list:has(.perfil-foto):hover .perfil-link {
  color: var(--brand-gold, #C8A25A) !important;
}

/* La foto acompana con un acercamiento minimo */
.aboutus .pcs-list .perfil-foto {
  transition: transform 0.7s cubic-bezier(0.33, 0, 0.2, 1);
}
.aboutus .pcs-list:has(.perfil-foto):hover .perfil-foto,
.aboutus .pcs-list:has(.perfil-foto):focus-within .perfil-foto {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .aboutus .pcs-list:has(.perfil-foto),
  .aboutus .pcs-list .perfil-foto::after,
  .aboutus .pcs-list .perfil-flecha {
    transition: none !important;
  }
  .aboutus .pcs-list:has(.perfil-foto):hover {
    transform: none;
  }
}

/* ===========================================================
   BOTONES · un unico comportamiento en TODA la web.

   Al pasar el raton: cambio de color suave (cada boton conserva
   su color propio, solo cambia el tono), la flecha avanza y el
   boton se levanta un poco. Al pulsar, baja: responde al click.

   Los principales (.btn) llevan mas peso: mas cuerpo y sombra.
   Los secundarios (.btn-outline y los enlaces de texto) se quedan
   en texto con flecha, sin fondo, para que no compitan.
   =========================================================== */
:root {
  --btn-tiempo: 0.45s;
  --btn-curva: cubic-bezier(0.16, 1, 0.3, 1);
}

.btn,
.idx-cta,
.idx-slide .idx-cta,
.unidades-especializadas .unidad-btn,
.login-modal .login-btn,
.perfil-link,
.sv-bloque-cta,
.bl-link {
  transition: background-color var(--btn-tiempo) var(--btn-curva),
              border-color var(--btn-tiempo) var(--btn-curva),
              color var(--btn-tiempo) var(--btn-curva),
              box-shadow var(--btn-tiempo) var(--btn-curva),
              transform var(--btn-tiempo) var(--btn-curva) !important;
}

/* 1 y 3 · se levanta al pasar por encima y se hunde al pulsar */
.btn:hover,
.idx-cta:hover,
.unidades-especializadas .unidad-btn:hover,
.login-modal .login-btn:hover {
  transform: translateY(-3px);
}
.btn:active,
.idx-cta:active,
.unidades-especializadas .unidad-btn:active,
.login-modal .login-btn:active {
  transform: translateY(-1px);
  transition-duration: 0.08s;
}

/* 2 · la flecha. La plantilla ya pone una con .btn::after; aqui solo
   se le da vida para que avance al pasar el raton. */
.btn::after {
  display: inline-block;
  transition: transform var(--btn-tiempo) var(--btn-curva);
}
.btn:hover::after {
  transform: translateX(6px);
}

/* BOTONES PRINCIPALES · mas presencia (Pedir cita y companeros) */
.btn:not(.btn-outline):not(.btn-white):not(.btn-white-lb) {
  box-shadow: 0 6px 18px rgba(16, 42, 68, 0.16);
  font-weight: 500;
  letter-spacing: 0.2px;
}
.btn:not(.btn-outline):not(.btn-white):not(.btn-white-lb):hover {
  box-shadow: 0 14px 30px rgba(16, 42, 68, 0.24);
}

/* BOTONES SECUNDARIOS · sin sombra ni relleno, solo texto y borde fino */
.btn.btn-outline {
  box-shadow: none !important;
  font-weight: 400;
  border-width: 1px !important;
}
.btn.btn-outline:hover {
  box-shadow: 0 6px 16px rgba(16, 42, 68, 0.12) !important;
}

/* ENLACES SECUNDARIOS · texto con flecha, misma respuesta al raton.
   La flecha va en su propio <span> (.perfil-flecha / .sv-bloque-flecha);
   donde no lo tiene, se le anade una aqui. */
.perfil-link,
.sv-bloque-cta,
.bl-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.bl-link::after {
  content: "→";
  display: inline-block;
  transition: transform var(--btn-tiempo) var(--btn-curva);
}
.bl-link:hover::after {
  transform: translateX(6px);
}
.bl-link:hover {
  color: var(--brand-gold, #C8A25A);
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::after,
  .idx-cta,
  .unidades-especializadas .unidad-btn,
  .login-modal .login-btn,
  .perfil-link,
  .sv-bloque-cta,
  .bl-link,
  .bl-link::after {
    transition: none !important;
  }
  .btn:hover,
  .idx-cta:hover,
  .unidades-especializadas .unidad-btn:hover,
  .login-modal .login-btn:hover {
    transform: none;
  }
}

/* ===========================================================
   PAGINAS INTERNAS · la cabecera fija se veia transparente, asi
   que el hueco que reserva parecia un margen en blanco enorme
   encima del titulo. Aqui va siempre con fondo solido y algo
   mas compacta (la home sigue con su cabecera superpuesta).
   =========================================================== */
.main_header_area:not(.header-transparent) {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(16, 42, 68, .10);
}
.main_header_area:not(.header-transparent) .topbar-wrap {
  padding: 6px 0;
  background: var(--brand-blue, #0F2A44);
}
.main_header_area:not(.header-transparent) .topbar-wrap ul li,
.main_header_area:not(.header-transparent) .topbar-wrap ul li a,
.main_header_area:not(.header-transparent) .topbar-wrap ul li i {
  color: #ffffff;
}
/* El hero de la pagina arranca pegado a la cabecera */
body.nav-hueco .page-hero {
  margin-top: 0;
  padding-top: 52px !important;
}

/* Linea legal del footer: un punto mas pequena que el resto */
.footer-legal p,
.footer-legal p a { font-size: 12px; }

/* ===========================================================
   BOTONES (2) · lo que faltaba para que la regla valga en TODA
   la web: la flecha de los enlaces secundarios, los botones del
   slider y de las unidades, el foco con teclado y un poco mas
   de peso para el boton principal (Pedir cita).
   =========================================================== */

/* Flecha de los enlaces de texto: avanza tambien al pasar el raton
   por el propio enlace, no solo por la tarjeta que lo contiene */
.perfil-flecha,
.sv-bloque-flecha {
  display: inline-block;
  transition: transform var(--btn-tiempo, .45s) var(--btn-curva, ease);
}
.perfil-link:hover .perfil-flecha,
.perfil-link:focus-visible .perfil-flecha,
.sv-bloque-cta:hover .sv-bloque-flecha,
.sv-bloque-cta:focus-visible .sv-bloque-flecha {
  transform: translateX(8px);
}

/* El boton del slider no tenia flecha; se le pone la misma y se mueve igual
   que en el resto. Los enlaces de las unidades se quedan sin ella: son una
   lista apilada y una flecha en cada linea ensucia mas que ayuda. */
.idx-slide .idx-cta::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
  transition: transform var(--btn-tiempo, .45s) var(--btn-curva, ease);
}
.idx-slide .idx-cta:hover::after {
  transform: translateX(6px);
}
/* el "all .25s" del slider se queda corto al lado del resto */
.idx-slide .idx-cta {
  transition: background-color var(--btn-tiempo, .45s) var(--btn-curva, ease),
              color var(--btn-tiempo, .45s) var(--btn-curva, ease),
              border-color var(--btn-tiempo, .45s) var(--btn-curva, ease),
              transform var(--btn-tiempo, .45s) var(--btn-curva, ease) !important;
}

/* Quien navega con teclado ve el mismo boton que quien usa el raton */
.btn:focus-visible,
.idx-cta:focus-visible,
.unidades-especializadas .unidad-btn:focus-visible,
.login-modal .login-btn:focus-visible,
.perfil-link:focus-visible,
.bl-link:focus-visible {
  outline: 2px solid var(--brand-gold, #C8A25A);
  outline-offset: 3px;
}

/* BOTON PRINCIPAL · "Pedir cita" y los grandes de seccion mandan mas:
   mas cuerpo, mas sombra y un tono dorado al pasar el raton */
.btn-cita,
.btn.btn-lg,
.hero-bottom .hero-btn {
  padding: 18px 34px !important;
  font-weight: 500 !important;
  letter-spacing: .3px;
  box-shadow: 0 8px 22px rgba(16, 42, 68, .20);
}
.btn-cita:hover,
.btn.btn-lg:hover,
.hero-bottom .hero-btn:hover {
  box-shadow: 0 16px 34px rgba(16, 42, 68, .28);
}