/*
 * The Walls template CSS (public/walls/css/style.css) owns all base and
 * component styles. Tailwind is intentionally NOT loaded here: its utility
 * layer collides with Bootstrap 3 class names used by the template
 * (.container, .row, .hidden, .block, .fixed ...), which broke the navbar
 * width and the responsive grid.
 *
 * Only small additions specific to this port live below.
 */

/* Language switcher in the topbar */
.lang-switch {
  display: inline-block;
  margin-left: 15px;
}
.lang-switch a {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 4px;
  opacity: 0.6;
}
.lang-switch a:hover {
  color: #ffc31d;
  opacity: 1;
}
.lang-switch a.active {
  color: #ffc31d;
  opacity: 1;
}

/* Mobile: topbar is hidden by the template, so surface the switcher in the navbar */
.lang-switch-mobile {
  display: none;
}
@media (max-width: 767px) {
  .lang-switch-mobile {
    display: block;
    position: absolute;
    right: 60px;
    top: 26px;
    z-index: 10;
  }
  .lang-switch-mobile a {
    color: #222222;
    font-size: 12px;
    font-weight: 700;
    padding: 0 3px;
  }
  .lang-switch-mobile a.active {
    color: #ffc31d;
  }
}

/* Fallback pages (404 / error boundary) */
.fallback-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px;
  font-family: "Montserrat", sans-serif;
}

/*
 * Los textos en español son más largos que los originales en inglés y algunas
 * cajas quedan más altas, lo que rompe el flujo de las columnas flotantes de
 * Bootstrap 3. Se fuerza el salto de fila en cada grupo de columnas.
 */
@media (min-width: 992px) {
  .row > .col-md-4:nth-child(3n + 1) { clear: left; }
  .row > .col-md-3:nth-child(4n + 1) { clear: left; }
  .row > .col-md-6:nth-child(2n + 1) { clear: left; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .row > .col-sm-4:nth-child(3n + 1) { clear: left; }
  .row > .col-sm-6:nth-child(2n + 1) { clear: left; }
  .row > .col-sm-3:nth-child(4n + 1) { clear: left; }
}

/* Imagen del pie de pagina */
.footer .footer-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* Boton de folleto: permitir salto de linea en pantallas angostas */
.btn-sidebar {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3;
  padding-left: 15px;
  padding-right: 15px;
  text-align: left;
}

/* Evita el desbordamiento horizontal causado por los clones del carrusel */
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Foco visible por teclado (iconos sociales y enlaces en general) */
a:focus-visible,
button:focus-visible,
.topbar-sosmed a:focus-visible,
.footer-sosmed a:focus-visible,
.social-icon a:focus-visible {
  outline: 3px solid #f7941e !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
.topbar-sosmed a:focus-visible,
.footer-sosmed a:focus-visible,
.social-icon a:focus-visible {
  outline-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}

/* Contraste AA: el ámbar del tema (#ffc31d) no alcanza 4.5:1 sobre blanco */
.readmore,
.lang-switch-mobile a.active,
.director-position,
.team .position,
.our-team .position,
.director-info .position {
  color: #8a6300 !important;
}
.section-subheading {
  color: #6b6b6b !important;
}

/* Los títulos de tarjeta pasaron de h4 a h3 por orden semántico: se conserva su tamaño */
.box-icon-5 h3.title,
.feature-box-8 h3.title,
.services-item h3.title,
h3.title {
  font-size: 1.286em;
  line-height: normal;
}
.team-item .position,
.position {
  color: #8a6300;
}

/* El topbar cambia de fondo segun la pagina: el selector hereda su color */
.lang-switch a {
  color: inherit;
}
.lang-switch a.active,
.lang-switch a:hover {
  color: #8a6300;
}
.header-1 .lang-switch a.active,
.header-1 .lang-switch a:hover {
  color: #ffc31d;
}
.team-2 .body .position,
.team-item .position,
.position {
  color: #8a6300 !important;
}

/* Algunos títulos de tarjeta se promovieron a h2 por orden semántico */
h2.title {
  font-size: 1.286em;
  line-height: normal;
}

/* Contador de visitas en la barra superior */
.topbar-menu li.visit-counter > span {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  opacity: .9;
}
.topbar-menu li.visit-counter .fa { margin-right: 4px; }
@media (max-width: 767px) {
  .topbar-menu li.visit-counter { display: none; }
}