/* ====== Overrides RESPONSIVE (sin tocar colores ni estructura) ====== */

/* Evita scroll horizontal por menús o elementos grandes */
html, body {
  overflow-x: hidden;
}

/* Imágenes y videos no deben salirse del contenedor */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Logo del navbar: era 165px y en móvil destruye todo */
.logobaner {
  width: auto !important;
  height: auto !important;
  max-height: 72px;   /* desktop */
}

/* ====== MÓVIL / TABLET (<= 991px) ====== */
@media only screen and (max-width: 991px) {

  /* Ocultamos el menú horizontal largo (bootstrap nav) en móvil */
  .divnab {
    display: none !important;
  }

  /* El logo más compacto */
  .logobaner {
    max-height: 56px;
  }

  /* El menú lateral debe ocupar toda la pantalla */
  .menu_container {
    width: 100vw !important;
    right: -100vw !important;
  }
  .menu_container.active {
    right: 0 !important;
  }

  /* Los links enormes pueden causar scroll vertical raro, los ajustamos sin cambiar colores */
  .menu_item a {
    font-size: 22px !important;
  }

  /* El contenido del menú lateral: mejor posición en pantallas pequeñas */
  .menu {
    top: 110px !important;
    padding-left: 8% !important;
  }

  /* Dropdowns largos: que puedan scrollear sin romper */
  .dropdown-menu {
    max-height: 70vh;
    overflow-y: auto;
  }
}


/* ====== Pulido visual profesional (sin cambiar colores) ====== */

/* Tipografía y lectura */
body {
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* Contenedores: evitar que todo quede pegado a los bordes en móvil */
@media only screen and (max-width: 991px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Títulos: que no se vean gigantes o cortados en móvil */
@media only screen and (max-width: 991px) {
  h1 { font-size: 28px !important; line-height: 1.2; }
  h2 { font-size: 22px !important; line-height: 1.25; }
  h3 { font-size: 18px !important; line-height: 1.3; }
}

/* Imágenes en secciones: sin deformación rara */
img {
  object-fit: cover;
}

/* Botones y links: área táctil más cómoda en móvil (sin cambiar color) */
@media only screen and (max-width: 991px) {
  a, button {
    min-height: 40px;
  }
}

/* Espaciado general: que las secciones respiren (sin tocar colores) */
.section_title_container,
.section_title,
.super_container,
.home,
.intro,
.feature,
.testimonials,
.footer {
  scroll-margin-top: 90px;
}

@media only screen and (max-width: 991px) {
  .intro,
  .feature,
  .testimonials {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/* Evitar textos largos rompiendo layout */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* En pantallas grandes, limitar ancho para que no se vea estirado */
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px !important;
  }
}

/* ====== Header PRO (sin cambiar colores) ====== */

/* Navbar: un poco más compacto y ordenado */
.header .navbar,
.header nav {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Logo: que se vea consistente y centrado */
.logobaner {
  display: block;
  max-height: 72px;     /* PC */
}

/* Alineación general del header */
.header .navbar .navbar-brand,
.header .navbar .logo_container,
.header .logo_container {
  display: flex !important;
  align-items: center !important;
}

/* Links del menú (PC): más “clean” sin tocar color */
@media only screen and (min-width: 992px) {
  .divnab .navbar-nav .nav-link {
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  /* Dropdown: mejor separación, sin cambiar colores */
  .divnab .dropdown-menu .dropdown-item {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 14px !important;
  }
}

/* Botón hamburguesa: más agradable en móvil */
.hamburger_container {
  cursor: pointer;
  border-radius: 10px;
  padding: 10px 12px;
}

/* Evitar que el header se sienta gigante en móvil */
@media only screen and (max-width: 991px) {
  .header .navbar,
  .header nav {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .logobaner {
    max-height: 52px;
  }
}

/* Header fijo arriba (look institucional) */
.header {
  position: sticky;
  top: 0;
  z-index: 9999;
}


/* ====== Menú PC institucional (sin cambiar colores) ====== */
@media only screen and (min-width: 992px) {

  /* Contenedor del menú: alineación limpia */
  .divnab .navbar-nav {
    align-items: center !important;
  }

  /* Links principales: más formales y parejos */
  .divnab .navbar-nav .nav-link {
    font-size: 13.5px !important;
    font-weight: 500 !important;   /* ni muy grueso ni débil */
    letter-spacing: 0.3px;
    padding: 10px 14px !important;
    text-transform: uppercase;     /* look institucional */
  }

  /* Quitar efectos exagerados si existieran */
  .divnab .navbar-nav .nav-link:hover,
  .divnab .navbar-nav .nav-link:focus {
    text-decoration: none;
  }

  /* Dropdowns: sensación de orden */
  .divnab .dropdown-menu {
    border-radius: 6px;
    margin-top: 8px;
    min-width: 220px;
  }

  /* Items del dropdown: lectura clara */
  .divnab .dropdown-menu .dropdown-item {
    font-size: 13px !important;
    padding: 10px 16px !important;
    white-space: normal;
  }

  /* Separación visual sutil entre items (sin líneas duras) */
  .divnab .dropdown-menu .dropdown-item + .dropdown-item {
    margin-top: 2px;
  }

  /* Evitar que el menú se vea apretado en pantallas grandes */
  .divnab {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ====== Carrusel PRO (Bootstrap) ====== */

#carouselExampleIndicators {
  border-radius: 10px;
  overflow: hidden; /* clave para que el borde redondeado funcione */
}

/* Altura consistente por dispositivo */
@media (min-width: 992px) {
  #carouselExampleIndicators .carousel-item img {
    height: 480px;
    object-fit: cover;
  }
}

@media (max-width: 991px) {
  #carouselExampleIndicators .carousel-item img {
    height: 210px;
    object-fit: cover;
  }
}

/* Indicadores (puntitos) un poco más finos */
#carouselExampleIndicators .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Flechas un poco más visibles sin cambiar colores del sitio */
#carouselExampleIndicators .carousel-control-prev,
#carouselExampleIndicators .carousel-control-next {
  width: 8%;
}

#carouselExampleIndicators {
  margin-top: 10px;
}


/* ====== FIX carrusel en móvil: NO recortar / NO zoom / sin redondeo ====== */
@media (max-width: 991px) {

  /* En móvil quitamos el redondeo (en PC se queda igual) */
  #carouselExampleIndicators {
    border-radius: 0 !important;
  }

  /* Mostramos la imagen completa, sin zoom */
  #carouselExampleIndicators .carousel-item img {
    height: auto !important;
    max-height: 260px;
    width: 100%;
    object-fit: contain !important;
    background: #fff;
  }
}


/* ====== Noticias / Actualizaciones: FIX imagen en móvil ====== */
@media (max-width: 991px) {
  /* La clase .actualizacion tiene estilos raros (padding/background) en main_styles.css.
     Aquí la devolvemos a "imagen normal" SOLO en móvil */
  img.actualizacion {
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    display: block;
    border-radius: 0 !important; /* sin esquinas raras en móvil */
  }
}

/* ====== Facebook embed responsive ====== */
.fb-page,
.fb-page span,
.fb-page iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* ====== Noticias: estilo tarjeta limpio ====== */
.events.page_section .services_row > [class*="col-"] {
  margin-top: 14px;
}

.events.page_section .services_row > [class*="col-"] > * {
  border-radius: 10px;
  overflow: hidden;
}

/* Si querés que se sienta "card" sin tocar colores */
.events.page_section .services_row > [class*="col-"] > div,
.events.page_section .services_row > [class*="col-"] > a,
.events.page_section .services_row > [class*="col-"] > img,
.events.page_section .services_row > [class*="col-"] > .fb-page {
  display: block;
}


/* Sombra suave (opcional) */
.events.page_section .services_row > [class*="col-"] {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 10px;
}


/* ====== ACTUALIZACIONES estilo institucional ====== */

.actualizaciones_banner{
  background: #0b3a6f; /* azul institucional (similar al de tu sitio) */
  padding: 26px 18px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 22px;
}

.actualizaciones_banner h2{
  color: #fff;
  font-size: 28px;
  letter-spacing: 1px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.actualizaciones_linea{
  width: 65%;
  height: 3px;
  background: #b10e1e; /* línea roja */
  margin: 14px auto 0 auto;
  border-radius: 2px;
}

.actualizacion_card{
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
  height: 100%;
}

.actualizacion_img img{
  width: 100%;
  height: 210px;       /* PC */
  object-fit: cover;
  display: block;
}

.actualizacion_body{
  padding: 16px 18px 18px 18px;
}

.actualizacion_title{
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  color: #0b3a6f; /* título azul */
}

.actualizacion_date{
  margin: 0 0 14px 0;
  font-size: 14px;
  color: #333;
}

.actualizacion_btn{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: #0b3a6f;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600;
}

/* ====== MÓVIL: altura cómoda sin recortar demasiado ====== */
@media (max-width: 991px){
  .actualizaciones_banner{
    border-radius: 0;
    margin-left: -16px;
    margin-right: -16px;
  }

  .actualizacion_img img{
    height: 170px;
    object-fit: cover;
  }

  .actualizaciones_banner h2{
    font-size: 24px;
  }
}


/* ====== Footer institucional: orden + móvil ====== */

/* Espaciado general del footer */
.footer {
  padding-top: 40px;
  padding-bottom: 30px;
}

/* Links del footer: mejor área táctil */
.footer a {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
}

/* Títulos del footer más claros (sin cambiar color) */
.footer h3,
.footer h4,
.footer .footer_title {
  margin-bottom: 12px;
  letter-spacing: 0.3px;
  font-weight: 700;
}

/* En móvil: apilar bloques y dar aire */
@media (max-width: 991px) {
  .footer {
    padding-top: 28px;
    padding-bottom: 22px;
  }

  .footer .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Si tu footer usa columnas bootstrap */
  .footer [class*="col-"] {
    margin-bottom: 18px;
  }
}

/* Evitar que elementos largos (correos, URLs) rompan el ancho */
.footer, .footer * {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ====== Consistencia pro (global) ====== */

/* Espaciado vertical uniforme para secciones principales */
.page_section {
  padding-top: 55px;
  padding-bottom: 55px;
}
@media (max-width: 991px) {
  .page_section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* Botones: consistencia sin cambiar color */
.button a,
.actualizacion_btn,
.importante_btn {
  border-radius: 10px;
}

/* Imágenes en "Una vista general": que no se deformen */
.services .icon_container img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}
@media (max-width: 991px) {
  .services .icon_container img {
    height: 160px;
  }
}

/* ====== Sección: Una vista general (cards pro) ====== */

/* Que las columnas tengan altura pareja */
.services .services_row {
  align-items: stretch;
}

/* Cada item como tarjeta */
.services .service_item {
  background: #fff;
  border-radius: 12px;
  padding: 16px 16px 18px 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  height: 100%;
}

/* Imagen uniforme dentro de la tarjeta */
.services .service_item .icon_container img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Título alineado y consistente */
.services .service_item h3 {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* En móvil, menos altura de imagen y más aire */
@media (max-width: 991px) {
  .services .service_item {
    padding: 14px 14px 16px 14px;
  }
  .services .service_item .icon_container img {
    height: 160px;
  }
  .services .service_item h3 {
    font-size: 17px;
  }
}

/* Hover sutil solo en PC (no afecta móvil) */
@media (min-width: 992px) {
  .services .service_item {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }
  .services .service_item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.14);
  }
}

/* ====== Separación entre tarjetas "Una vista general" ====== */

/* Separación vertical y horizontal general */
.services .services_row > [class*="col-"] {
  margin-bottom: 22px;   /* espacio entre filas (móvil) */
}

/* En PC, además un poco de aire lateral */
@media (min-width: 992px) {
  .services .services_row {
    margin-left: -14px;
    margin-right: -14px;
  }
  .services .services_row > [class*="col-"] {
    padding-left: 14px;
    padding-right: 14px;
    margin-bottom: 28px;
  }
}

/* ====== Separación sin bajar columnas ====== */
.services .services_row {
  row-gap: 28px; /* separación vertical */
}

/* Separación horizontal usando padding (no ocupa ancho extra) */
@media (min-width: 992px) {
  .services .services_row {
    margin-left: -14px;
    margin-right: -14px;
  }
  .services .services_row > [class*="col-"] {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ====== FIX definitivo: separación horizontal en PC sin bajar columnas ====== */
/* Solo afecta a "Una vista general" (service_item centrados) */
@media (min-width: 992px) {

  .services.page_section .services_row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 28px; /* separación real horizontal y vertical */
  }

  /* 3 columnas con espacio: 33.33% menos el gap */
  .services.page_section .services_row > .service_item.text-center {
    flex: 0 0 calc(33.333% - 18.7px) !important;
    max-width: calc(33.333% - 18.7px) !important;
  }
}

/* ====== Nuestras instalaciones: mismo layout pro ====== */
@media (min-width: 992px) {

  /* Contenedor como grid flexible con gap real */
  .services.page_section .services_row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 28px;
  }

  /* Tarjetas de instalaciones: 3 columnas con espacio */
  .services.page_section .services_row > .service_item.text-left {
    flex: 0 0 calc(33.333% - 18.7px) !important;
    max-width: calc(33.333% - 18.7px) !important;
    background: #fff;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
    height: 100%;
  }
}

/* Imagen uniforme */
.services .service_item.text-left .icon_container img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Títulos claros */
.services .service_item.text-left h3 {
  margin-top: 14px;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
}

/* Texto más legible */
.services .service_item.text-left p {
  font-size: 14.5px;
  line-height: 1.55;
}

/* MÓVIL */
@media (max-width: 991px) {
  .services .service_item.text-left {
    padding: 16px;
  }

  .services .service_item.text-left .icon_container img {
    height: 160px;
  }
}

/* ====== Nuestras instalaciones: imagen full width y centrada ====== */
.services .service_item.text-left .icon_container{
  width: 100% !important;
  align-self: stretch !important;
}

.services .service_item.text-left .icon_container img{
  width: 100% !important;
  margin: 0 auto !important;
}

/* ====== Nuestras instalaciones: tarjetas con altura visual uniforme ====== */
@media (min-width: 992px) {

  /* Que el contenido se distribuya */
  .services .service_item.text-left{
    display: flex;
    flex-direction: column;
  }

  /* El párrafo se limita a 5 líneas para que todas queden parecidas */
  .services .service_item.text-left p{
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ====== Nuestras instalaciones: alturas EXACTAMENTE iguales ====== */
@media (min-width: 992px) {

  /* La tarjeta completa como flex */
  .services .service_item.text-left{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Imagen: altura fija */
  .services .service_item.text-left .icon_container img{
    height: 190px;
  }

  /* Título: altura controlada */
  .services .service_item.text-left h3{
    min-height: 48px;   /* fuerza mismo espacio aunque tenga 1 o 2 líneas */
  }

  /* Texto: altura fija real */
  .services .service_item.text-left p{
    flex-grow: 1;       /* ocupa el espacio restante */
    max-height: 120px;  /* todas iguales */
    overflow: hidden;
  }
}

/* ====== Nuestras instalaciones: igualar altura sin recortar texto (solo PC) ====== */
@media (min-width: 992px) {

  /* Asegura que el row estire igual */
  .services.page_section .services_row{
    align-items: stretch !important;
  }

  /* Tarjetas: todas con el mismo alto mínimo */
  .services.page_section .services_row > .service_item.text-left{
    min-height: 540px !important;   /* ajustable */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Mantener imagen fija */
  .services .service_item.text-left .icon_container img{
    height: 190px !important;
    object-fit: cover !important;
  }

  /* Empuja el contenido para que se distribuya parejo */
  .services .service_item.text-left p{
    margin-top: auto;   /* ayuda a que el bloque de texto “se acomode” */
  }
}

/* ====== Misión / Visión: más legible y profesional ====== */

/* Caja del texto: ancho cómodo para leer */
.testimonials_item {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* Título MISIÓN / VISIÓN */
.testimonials_item .quote {
  font-weight: 800;
  letter-spacing: 1px;
}

/* Texto: mejor lectura */
.testimonials_text {
  font-size: 15px;
  line-height: 1.65;
}

/* Móvil: que no se vea apretado */
@media (max-width: 991px) {
  .testimonials_item {
    border-radius: 0;
    padding: 18px 14px;
  }
  .testimonials_text {
    font-size: 14.5px;
  }
}

/* ====== Misión / Visión: texto limpio sobre imagen ====== */

/* Contenedor general */
.testimonials {
  position: relative;
}

/* Oscurecer MUY sutilmente la imagen para mejorar lectura */
.testimonials_background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* ajuste fino */
}

/* El contenido siempre arriba del overlay */
.testimonials .container {
  position: relative;
  z-index: 2;
}

/* Texto centrado y ancho de lectura cómodo */
.testimonials_item {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px 0;
}

/* Título MISIÓN / VISIÓN */
.testimonials_item .quote {
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

/* Texto */
.testimonials_text {
  color: #f1f1f1;
  font-size: 16px;
  line-height: 1.7;
}

/* Móvil */
@media (max-width: 991px) {
  .testimonials_item {
    padding: 0 12px;
  }

  .testimonials_item .quote {
    font-size: 22px;
  }

  .testimonials_text {
    font-size: 14.5px;
  }
}

/* ====== Quitar CARD en Misión/Visión y dejar ver la imagen ====== */
.testimonials_item,
.testimonials_item.text-center,
.testimonials .testimonials_item {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}