/* ==========================================================================
   Latino Americano Dental — capa de marca
   Se carga DESPUÉS de style.css y solo redefine lo necesario.
   Colores muestreados directamente del logo del consultorio.
   ========================================================================== */

* {
  /* Azul marino del texto "Dental" del logo */
  --primary-color: #1453B1;
  --primary-color-rgb: 20, 83, 177;
  /* Azul cian del isotipo (diente + corazón) */
  --secondary-color: #2095C6;
  --secondary-color-rgb: 32, 149, 198;
}

:root {
  --lad-navy: #0B2E5C;
  --lad-navy-soft: #123f77;
  --lad-sky: #63A4D2;
  --lad-mist: #EDF3FA;
  --lad-ink: #16233a;
}

/* Las secciones oscuras de la plantilla son gris neutro; se pasan al azul de marca
   para que el sitio entero lea como el logo. */
.bg-dark,
footer.section-dark,
#subheader.dark {
  background-color: var(--lad-navy) !important;
}
footer.section-dark .subfooter {
  background-color: rgba(0, 0, 0, .18);
}

/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: .75rem 1.25rem;
  background: #fff;
  color: var(--primary-color);
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* La plantilla no marca el foco de teclado en ningún sitio. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--secondary-color);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Header: selector de idioma
   -------------------------------------------------------------------------- */

.lang-switch {
  display: inline-block;
  margin-right: 1rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, .45);
  color: #fff;
  transition: background .2s, color .2s, border-color .2s;
}
.lang-switch:hover {
  background: #fff;
  color: var(--primary-color);
  border-color: #fff;
}
/* Sobre fondo claro (páginas internas y header encogido) el borde blanco no se ve */
header.header-light .lang-switch,
header.smaller .lang-switch {
  border-color: rgba(20, 83, 177, .35);
  color: var(--primary-color);
}
header.header-light .lang-switch:hover,
header.smaller .lang-switch:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.lang-switch-footer {
  color: rgba(255, 255, 255, .75);
  font-weight: 600;
  text-decoration: none;
}
.lang-switch-footer:hover {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Hero a dos columnas
   La plantilla ponía el titular encima de una foto a sangre. Con las fotos
   reales del consultorio el texto quedaba ilegible, así que el texto va sobre
   fondo sólido y la foto al lado.
   -------------------------------------------------------------------------- */

.hero-split {
  background:
    radial-gradient(1200px 600px at 15% 0%, var(--lad-navy-soft) 0%, transparent 60%),
    linear-gradient(135deg, var(--lad-navy) 0%, #061c3a 100%);
  background-color: var(--lad-navy);
  padding: 190px 0 110px;
  position: relative;
  overflow: hidden;
}
/* Trama de puntos de marca, muy sutil, para que el azul no quede plano */
.hero-split::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 320px;
  height: 320px;
  background: url(../img/ui/dotted.webp) repeat;
  opacity: .18;
  pointer-events: none;
}

.hero-split h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  margin-bottom: 1.1rem;
  color: #fff;
}
.hero-split .subtitle {
  color: var(--lad-sky);
  margin-bottom: .9rem;
}
.hero-split .lead-hero {
  font-size: 1.12rem;
  max-width: 46ch;
  margin-bottom: 1.9rem;
  color: rgba(255, 255, 255, .88);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero-note {
  margin: 1.6rem 0 0;
  font-size: .95rem;
  color: rgba(255, 255, 255, .7);
}
.hero-note i {
  color: var(--lad-sky);
  margin-right: .35rem;
}

.hero-photo {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Bloque de beneficios de Unión — el diferenciador de la clínica
   -------------------------------------------------------------------------- */

.union-banner {
  background:
    linear-gradient(135deg, rgba(32, 149, 198, .10) 0%, rgba(20, 83, 177, .10) 100%),
    #fff;
  border-top: 1px solid rgba(20, 83, 177, .12);
  border-bottom: 1px solid rgba(20, 83, 177, .12);
}

.step-num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}

.small-note {
  font-size: .9rem;
  color: #5b6577;
  border-left: 3px solid var(--secondary-color);
  padding-left: 1rem;
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contact-card {
  background: var(--lad-mist);
  border-radius: 12px;
  padding: 40px;
}
.contact-line {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--lad-ink);
  text-decoration: none;
}
.contact-line:hover {
  color: var(--primary-color);
}
.contact-line i {
  font-size: 1.35rem;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
}
.hours-table th,
.hours-table td {
  padding: .5rem 0;
  border-bottom: 1px solid rgba(20, 83, 177, .12);
  font-weight: 500;
  text-align: left;
}
.hours-table th {
  font-weight: 600;
}
.hours-table td {
  text-align: right;
}
.hours-table td.is-closed {
  /* #8b94a4 daba 2.74:1 sobre el fondo bruma. Este tono da 5.26:1. */
  color: #5b6577;
}

.map-wrap iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Barra de llamada fija en móvil
   La mayoría de las búsquedas locales de dentista se hacen desde el teléfono
   y terminan en una llamada, así que la acción vive siempre a la vista.
   -------------------------------------------------------------------------- */

.mobile-call-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--lad-navy);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .25);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-call-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .95rem .25rem;
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-call-bar a + a {
    border-left: 1px solid rgba(255, 255, 255, .18);
  }
  .mobile-call-bar .mcb-call {
    background: var(--primary-color);
  }
  .mobile-call-bar .mcb-wa {
    background: #1f9d55;
  }

  /* Que la barra no tape el final del footer ni el botón de volver arriba */
  footer.section-dark .subfooter {
    padding-bottom: 4.5rem;
  }
  #back-to-top {
    bottom: 5rem;
  }

  .hero-split {
    padding: 100px 0 60px;
  }
  .hero-actions .btn-main {
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   Ajustes finos
   -------------------------------------------------------------------------- */

/* Las tarjetas de servicio deben quedar a la misma altura en cada fila */
.hover.h-100 > .bg-white {
  display: flex;
  flex-direction: column;
}
.hover.h-100 > .bg-white .relative {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hover.h-100 > .bg-white .btn-plus {
  margin-top: auto;
}

/* Direcciones: <address> viene en cursiva por defecto */
address {
  font-style: normal;
  margin-bottom: 0;
}

/* El subheader interno lleva ahora un párrafo de entrada */
#subheader .lead {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1.08rem;
}

/* Quien prefiere menos movimiento no debería sufrir las animaciones wow */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .wow {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Header encogido
   Defecto de la plantilla: al hacer scroll, designesia.js clona el header y le
   pone .smaller, pero la regla de fondo blanco de style.css no llega a aplicarse
   (el bloque `header.smaller` trae un `border: none;*/` que rompe el parseo).
   Resultado: logo y menú oscuros flotando sobre el contenido, ilegibles.
   Se corrige aquí, que es la última hoja que carga.
   -------------------------------------------------------------------------- */

body header.smaller {
  background: #fff;
  box-shadow: 0 2px 20px rgba(11, 46, 92, .10);
}
body header.smaller #mainmenu > li > a,
body header.smaller #mainmenu li a {
  color: var(--lad-ink);
}
body header.smaller #mainmenu > li > a.active,
body header.smaller #mainmenu > li > a:hover {
  color: var(--primary-color);
}
body header.smaller .logo-main {
  display: none;
}
body header.smaller .logo-scroll {
  display: block;
}

/* Páginas internas: el header ya nace sobre fondo claro */
body header.header-light:not(.smaller) {
  background: #fff;
  border-bottom: 1px solid rgba(20, 83, 177, .10);
}
body header.header-light #mainmenu > li > a {
  color: var(--lad-ink);
}
body header.header-light #mainmenu > li > a.active {
  color: var(--primary-color);
}

/* El eyebrow del hero necesita ganar a .subtitle de la plantilla */
#section-intro.hero-split .subtitle {
  color: var(--lad-sky);
}

/* La foto del equipo es vertical; sin tope el hero se dispara de alto */
@media (min-width: 992px) {
  .hero-photo img {
    max-height: 460px;
    object-fit: cover;
    object-position: center 22%;
  }
}

/* --------------------------------------------------------------------------
   Encuadre de las fotos del consultorio
   Las fotos reales son verticales (iPhone 3:4). La plantilla las pintaba a
   ancho completo, así que una sección con dos fotos se iba a más de 2.000 px
   de alto. Se encuadran con relación de aspecto fija y recorte centrado.
   -------------------------------------------------------------------------- */

section .rounded-1.overflow-hidden > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
}

/* La foto del equipo se ve mejor un poco más panorámica y anclada arriba,
   que es donde están las caras. */
section .rounded-1.overflow-hidden > img[src*="equipo"] {
  aspect-ratio: 16 / 10;
  object-position: center 18%;
}

/* El collage lateral de "por qué elegirnos" son piezas pequeñas: cuadradas
   quedan mejor equilibradas. */
.w-80.rounded-1.overflow-hidden > img,
.w-100.rounded-1.overflow-hidden.d-inline-block > img {
  aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------
   Red de seguridad sin JavaScript
   style.css declara `.wow { visibility: hidden }` y deja que la librería de
   animaciones lo revele al hacer scroll. Si el JS no carga, casi toda la
   página queda invisible. Con la marca `js` del <head>, sin JavaScript se ve
   todo — sin animación, pero completo.
   -------------------------------------------------------------------------- */

html:not(.js) .wow {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
html:not(.js) #de-loader {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Tamaño del logo
   La plantilla no acota la imagen del logo: confía en que el archivo venga ya
   a la medida exacta. El logo real de la clínica es de 299×120, así que sin
   esto se desborda del header (sobre todo en móvil).
   -------------------------------------------------------------------------- */

header #logo img {
  height: 52px;
  width: auto;
  max-width: 100%;
}
header.smaller #logo img {
  height: 44px;
}
footer .logo-footer {
  height: 58px;
  width: auto;
}

@media (max-width: 991px) {
  header #logo img,
  header.smaller #logo img {
    height: 42px;
  }
}

/* --------------------------------------------------------------------------
   Secciones añadidas para el contenido real de la clínica
   -------------------------------------------------------------------------- */

/* Distintivo "Abrimos sábados" en la franja de contacto: es un argumento real
   para familias trabajadoras y merece destacarse, no perderse en el horario. */
.badge-open {
  display: inline-block;
  vertical-align: middle;
  margin-left: .5rem;
  padding: .18rem .6rem;
  border-radius: 999px;
  /* No usa --secondary-color: el cian de marca sobre blanco da 3.40:1 y el
     criterio 1.4.3 pide 4.5:1 para texto pequeño. Este tono da 5.60:1 y
     mantiene la familia de color. */
  background: #16708F;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Banda "atención para toda la familia" */
.family-band {
  background: var(--lad-mist);
}
.family-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
}
.family-tags li {
  padding: .45rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(20, 83, 177, .18);
  color: var(--primary-color);
  font-weight: 700;
  font-size: .95rem;
}

/* Las siete razones para elegir la clínica */
.why-card {
  background: #fff;
  border: 1px solid rgba(20, 83, 177, .12);
  border-radius: 12px;
  padding: 28px 24px;
  transition: box-shadow .25s, transform .25s;
}
.why-card:hover {
  box-shadow: 0 14px 34px rgba(11, 46, 92, .10);
  transform: translateY(-3px);
}
.why-card i {
  display: block;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: .9rem;
  color: var(--secondary-color);
}
.why-card h3 {
  margin-bottom: .5rem;
}
.why-card p {
  font-size: .95rem;
}

/* Consejos para tu sonrisa */
.tip-card {
  border-left: 3px solid var(--secondary-color);
  padding-left: 1.75rem;
}
.tip-num {
  display: inline-block;
  font-family: var(--heading-font, inherit);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--secondary-color);
}
.tip-card p:last-child {
  margin-bottom: 0;
}

/* Con doce servicios las tarjetas son más pequeñas: el texto necesita respirar */
.hover.h-100 > .bg-white h3 {
  line-height: 1.3;
}

/* La barra fija de móvil reparte el ancho en tres: el texto no debe partirse */
@media (max-width: 767px) {
  .mobile-call-bar a {
    white-space: nowrap;
  }
}

/* Crédito del estudio en el subfooter: presente pero discreto, sin competir
   con el aviso de copyright de la clínica. */
.subfooter .credit {
  margin-left: .55rem;
  padding-left: .55rem;
  border-left: 1px solid rgba(255, 255, 255, .22);
  opacity: .8;
}
.subfooter .credit a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.subfooter .credit a:hover {
  border-bottom-color: #fff;
}

@media (max-width: 575px) {
  /* En pantallas estrechas el crédito baja a su propia línea en vez de apretarse */
  .subfooter .credit {
    display: block;
    margin: .5rem 0 0;
    padding: 0;
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Franja de contacto
   Dos defectos de la plantilla:
   1. El separador vertical (`grid-divider`) se dibuja con position:absolute pero
      sin `left`, así que caía en la posición estática — encima del icono— en vez
      de en el borde de la columna. Las columnas tampoco eran `position:relative`,
      de modo que se posicionaba respecto al contenedor.
   2. Sin margen interior, el texto largo del horario invadía la columna vecina.
   -------------------------------------------------------------------------- */

.contact-strip .grid-divider > [class*="col-"] {
  position: relative;
}
.contact-strip .grid-divider > [class*="col-"]:nth-child(n + 2)::after {
  left: 0;
  top: .25rem;
  bottom: .25rem;
}

.contact-strip .strip-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  /* Aire a ambos lados para que nada toque el separador */
  padding: 0 1.25rem;
}
.contact-strip .strip-cell > i {
  flex: 0 0 auto;
  line-height: 1;
}
.contact-strip .strip-text {
  min-width: 0;
}
.contact-strip .strip-text h4 {
  font-size: 1.05rem;
  line-height: 1.3;
}
.contact-strip .strip-text span:not(.badge-open) {
  display: block;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.contact-strip .strip-text a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}
.contact-strip .strip-text a:hover span {
  color: #fff;
}
/* El distintivo tiene su propio tamaño y su blanco pleno: con el blanco al 82 %
   de las líneas se quedaba en 2.78:1 en vez de los 5.60:1 previstos. */
.contact-strip .strip-text .badge-open {
  display: inline-block;
  font-size: .7rem;
  line-height: 1.4;
  color: #fff;
}

/* El distintivo del sábado no debe empujar el titular a otra línea si no cabe */
.contact-strip .strip-text h4 .badge-open {
  margin-left: .4rem;
}

@media (max-width: 991px) {
  /* Apilado: los separadores verticales ya no tienen sentido */
  .contact-strip .grid-divider > [class*="col-"]:nth-child(n + 2)::after {
    display: none;
  }
  .contact-strip .strip-cell {
    justify-content: flex-start;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Mapa bajo consentimiento
   Mientras no se pulsa el botón no hay ninguna petición a Google. El marcador
   de posición ya da lo que necesita quien busca la dirección, así que no es
   una degradación de la experiencia.
   -------------------------------------------------------------------------- */

.map-wrap {
  background: var(--lad-mist);
}
.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 420px;
  padding: 2rem;
  text-align: center;
  background: var(--lad-mist);
}
.map-placeholder > i {
  font-size: 2.6rem;
  color: var(--primary-color);
}
.map-placeholder .map-address {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--lad-ink);
}
.map-placeholder .map-note {
  margin: .35rem 0 0;
  max-width: 42ch;
  font-size: .82rem;
  color: #5b6577;
}

/* --------------------------------------------------------------------------
   Páginas legales
   Son textos para leer de corrido, no para escanear: columna estrecha, buen
   interlineado y jerarquía tranquila.
   -------------------------------------------------------------------------- */

.legal-updated {
  font-size: .88rem;
  color: #6b7486;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(20, 83, 177, .12);
}
.legal-block {
  margin-bottom: 2.25rem;
}
.legal-block h2 {
  margin-bottom: .85rem;
  color: var(--lad-ink);
}
.legal-block p {
  line-height: 1.75;
  max-width: 68ch;
}
.legal-block p:last-child {
  margin-bottom: 0;
}

/* Enlaces legales del subpié */
.subfooter .legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}
.subfooter .legal-links a {
  color: rgba(255, 255, 255, .75);
  font-weight: 600;
  text-decoration: none;
}
.subfooter .legal-links a:hover {
  color: #fff;
}

/* Aviso médico al pie de los contenidos educativos */
.medical-note {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--secondary-color);
  background: var(--lad-mist);
  border-radius: 0 8px 8px 0;
  font-size: .92rem;
  color: #4a5468;
}
.medical-note p {
  margin: 0;
}
.medical-note a {
  color: var(--primary-color);
  font-weight: 600;
}

@media (max-width: 575px) {
  .subfooter .legal-links {
    gap: .9rem;
    margin-top: .75rem;
  }
}


/* --------------------------------------------------------------------------
   Reflow a 320 px (WCAG 1.4.10 AA)
   A esa anchura aparecían 20 px de scroll horizontal: la barra de llamada no
   dejaba encoger su texto, y los medianiles `gx-5` de Bootstrap en el pie
   generan márgenes negativos que se salen del contenedor.
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  .mobile-call-bar a {
    /* Deja de forzar una sola línea: a 320 px no cabe y desborda */
    white-space: normal;
    gap: .3rem;
    padding-left: .15rem;
    padding-right: .15rem;
    font-size: .8rem;
  }
  footer.section-dark .row.gx-5 {
    --bs-gutter-x: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Tamaño de los objetivos táctiles (WCAG 2.2, criterio 2.5.8 AA: 24×24 px)
   Los enlaces del pie medían 20 px de alto, difíciles de acertar con el dedo.
   -------------------------------------------------------------------------- */

footer.section-dark .widget ul li a,
footer.section-dark .widget > a,
footer.section-dark .social-icons a,
.subfooter .legal-links a,
.subfooter .credit a,
.subfooter .lang-switch-footer {
  display: inline-block;
  min-height: 24px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Acordeón accesible
   Los títulos pasaron de <div> a <button> dentro de un <h3>: hay que quitarles
   la apariencia por defecto de botón sin perder el diseño de la plantilla.
   -------------------------------------------------------------------------- */

.accordion-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
button.accordion-section-title {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Rótulos de la franja de contacto: eran <h4>, ahora son <p> y conservan el estilo */
.contact-strip .strip-label {
  font-family: var(--heading-font, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}



/* El botón del menú móvil pasó de <span> a <button> */
button#menu-btn {
  background: none;
  border: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Correcciones de contraste detectadas en la auditoría (1.4.3 AA)
   -------------------------------------------------------------------------- */

/* Los títulos de las columnas del pie pasaron de <h5> a <h2> para arreglar el
   salto de jerarquía, y con ello perdieron el color blanco que la plantilla
   aplica solo a `footer h5`: quedaban en azul oscuro sobre el navy del pie,
   a 1.13:1. Invisibles. */
footer.section-dark .widget h2,
footer.section-dark .widget h5 {
  color: #fff;
}

/* El ítem activo del menú se pintaba con el azul primario, que sobre el navy
   del hero da 1.86:1. En la cabecera transparente pasa al azul cielo (4.98:1);
   sobre fondo claro se mantiene el azul de marca, que ahí sí contrasta. */
/* style.css fija el ítem activo con `!important`, así que hay que igualarlo. */
body header.transparent:not(.header-light):not(.smaller) #mainmenu > li > a.active {
  color: var(--lad-sky) !important;
}

/* --------------------------------------------------------------------------
   Animaciones de entrada: se desactiva el ocultado previo (2.1.1 / 2.4.3 AA)
   --------------------------------------------------------------------------
   La plantilla marca como `.wow { visibility: hidden }` todo lo que anima al
   entrar en pantalla, y confía en JavaScript para revelarlo al hacer scroll.
   Medido en la portada: 30 de 74 elementos interactivos —el 41 %— quedaban
   fuera del orden de tabulación al cargar la página, incluido el acordeón
   entero de preguntas frecuentes. Un elemento con `visibility: hidden` no
   recibe foco, así que quien navega con teclado saltaba directamente al pie.

   Se desactiva el ocultado. Se pierde el fundido de entrada; a cambio, todo el
   contenido es alcanzable siempre, con o sin JavaScript, y no depende de que
   alguien haga scroll con el ratón primero.
   -------------------------------------------------------------------------- */

.wow,
.wow.animated {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Submenú de Servicios accesible con teclado (2.1.1 A)
   --------------------------------------------------------------------------
   La plantilla solo lo despliega con `:hover`, así que sus 9 enlaces eran
   inalcanzables navegando con teclado: el foco pasaba de "Servicios" a
   "Beneficios de Unión" sin poder entrar. Con `:focus-within` se abre igual
   al tabular dentro de él.
   -------------------------------------------------------------------------- */

#mainmenu li:focus-within > ul,
#mainmenu li > a:focus + ul,
#mainmenu li.kb-open > ul {
  visibility: visible !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Blog: índice de artículos
   -------------------------------------------------------------------------- */

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(20, 83, 177, .12);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
}
.post-card:hover {
  box-shadow: 0 16px 40px rgba(11, 46, 92, .12);
  transform: translateY(-3px);
}
.post-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 30%;
}
.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 24px 24px;
}
.post-card-body h2 {
  margin-bottom: .6rem;
  line-height: 1.35;
}
.post-card-body h2 a {
  color: var(--lad-ink);
  text-decoration: none;
}
.post-card:hover h2 a {
  color: var(--primary-color);
}
.post-excerpt {
  font-size: .95rem;
  flex: 1;
}
.post-card .btn-plus {
  margin-top: auto;
}

/* Un solo enlace por tarjeta —el titular— pero que se pueda pulsar entera.
   Evita el patrón de dos enlaces al mismo sitio, que un lector de pantalla
   anuncia por duplicado. */
a.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.post-meta,
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  font-size: .82rem;
  color: #5b6577;
}
.post-cat {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--lad-mist);
  color: var(--primary-color);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Blog: página de artículo
   -------------------------------------------------------------------------- */

.article-meta {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(20, 83, 177, .12);
}
.article-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--lad-ink);
  margin: 1.5rem 0 2rem;
}
.article-figure {
  margin: 0 0 2.5rem;
  border-radius: 12px;
  overflow: hidden;
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
}
.article-block {
  /* La plantilla da 90 px de relleno vertical a todo <section>. Estos bloques
     son secciones del artículo, no del documento, así que se anula. */
  padding: 0;
  margin-bottom: 2.25rem;
}
.article-block h2 {
  margin-bottom: .85rem;
}
.article-block p {
  line-height: 1.78;
}
.article-block ul {
  margin-top: 1rem;
}

.key-points {
  margin: 2.5rem 0;
  padding: 28px 30px;
  background: var(--lad-mist);
  border-radius: 12px;
}
.key-points h2 {
  margin-bottom: 1rem;
}

.call-box {
  margin: 2.5rem 0;
  padding: 30px;
  border-radius: 12px;
  background: var(--lad-navy);
  color: #fff;
}
.call-box h2 {
  color: #fff;
  margin-bottom: 1rem;
}
.call-box ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.call-box li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  color: rgba(255, 255, 255, .88);
}
.call-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lad-sky);
}
.call-box .btn-main {
  margin-right: .5rem;
  margin-top: .3rem;
}

.service-link {
  font-size: .95rem;
  color: #5b6577;
}
.service-link a {
  font-weight: 700;
}

.related-card {
  display: block;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid rgba(20, 83, 177, .14);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.related-card:hover {
  border-color: var(--primary-color);
  box-shadow: 0 10px 26px rgba(11, 46, 92, .08);
}
.related-title {
  display: block;
  margin-top: .6rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--lad-ink);
}
.related-card:hover .related-title {
  color: var(--primary-color);
}

@media (max-width: 767px) {
  .call-box .btn-main {
    width: 100%;
    text-align: center;
    margin-right: 0;
    margin-bottom: .5rem;
  }
}

/* El botón secundario de la plantilla está pensado para fondos claros: dentro
   de la caja oscura del artículo quedaba en gris casi ilegible. */
.call-box .btn-main.btn-line {
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}
.call-box .btn-main.btn-line span {
  color: #fff;
}
.call-box .btn-main.btn-line:hover {
  background: #fff;
  border-color: #fff;
}
.call-box .btn-main.btn-line:hover span {
  color: var(--lad-navy);
}

/* --------------------------------------------------------------------------
   Pie: cuatro columnas
   Los doce servicios en dos columnas descuadraban la rejilla y dejaban el
   título "El consultorio" colgando a media altura. Ahora cada bloque tiene su
   propia columna y en Servicios van los seis más buscados más el enlace al
   listado completo.
   -------------------------------------------------------------------------- */

footer.section-dark .widget h2 a {
  color: inherit;
  text-decoration: none;
}
footer.section-dark .widget h2 a:hover {
  color: var(--lad-sky);
}

/* "Ver todos los servicios" cierra la lista: se separa un poco y se marca */
footer.section-dark .widget .widget-all {
  display: inline-block;
  margin-top: .35rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-weight: 700;
  color: var(--lad-sky);
}
footer.section-dark .widget .widget-all:hover {
  color: #fff;
}

@media (max-width: 991px) {
  /* Apiladas, las columnas necesitan aire entre sí */
  footer.section-dark .widget {
    margin-bottom: 2rem;
  }
}