/* --- CONTENEDOR PRINCIPAL NAVBAR --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background-color: #F4F4F4;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    position: relative; 
    z-index: 1000; 
  }
  
.nav-logo img {
  height: 60px; /* Ajusta según el tamaño del logo */
}

/* --- LISTA DE ENLACES PRINCIPAL --- */
.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  margin: 0;
  padding: 0;
}
  
.nav-links a {
  text-decoration: none;
  color: #0A2B5A; /* Azul corporativo */
  font-weight: 700;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #ED5922; /* Naranja corporativo */
}

/* --- DESPLEGABLE NIVEL 1 (Servicios) --- */
.dropdown {
  position: relative;
}
  
.dropdown-menu {
  display: none; /* Oculto por defecto */
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #F4F4F4;
  min-width: 220px;
  list-style: none;
  padding: 10px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border-top: 3px solid #ED5922; /* Detalle naranja */
}
  
/* Mostrar al pasar el mouse */
.dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  font-weight: 500;
  font-size: 1rem;
  display: block;
  padding: 10px 20px;
}
.btn-whatsapp {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 50px;
    right: 30px;

    background-color: #25d366;
    color: #FFF;

    border-radius: 50%;
    text-align: center;

    font-size: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0px 4px 10px rgba(0,0,0,0.3);

    z-index: 8;
    transition: transform 0.3s ease, background-color 0.3s ease;
   
}

.btn-whatsapp:hover {
    background-color: #20ba5a;
    transform: scale(1.1);
    color: white;
}

/* --- DESPLEGABLE NIVEL 2 (Sub-opciones) --- */
.sub-dropdown {
  position: relative;
}

.sub-dropdown-menu {
  display: none; /* Oculto por defecto */
  position: absolute;
  top: 0;
  left: 100%; /* Se despliega hacia la derecha */
  background-color: #F4F4F4;
  min-width: 260px;
  list-style: none;
  padding: 10px 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border-left: 3px solid #0A2B5A; /* Detalle azul */
}

/* Mostrar al pasar el mouse sobre la opción específica */
.sub-dropdown:hover > .sub-dropdown-menu {
  display: block;
}

.sub-dropdown-menu a {
  font-size: 0.95rem;
  color: #555;
}

/* --- MENÚ HAMBURGUESA Y RESPONSIVE (Celulares) --- */
.menu-hamburguesa {
  display: none; /* Oculto en PC */
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.menu-hamburguesa span {
  width: 30px;
  height: 3px;
  background-color: #0A2B5A;
  border-radius: 2px;
  transition: 0.3s;
}

.slider-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
    padding: 80px 0;
  }
  
.slider-track {
    display: flex;
    align-items: center;
    /* Transición suave para el movimiento */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
  }
  
.slide {
    flex-shrink: 0; /* EVITA que las fotos se aplasten al mover el slider */
    width: 300px;  
    margin: 0 10px;
    transition: all 0.5s ease;
    opacity: 0.3;
    transform: scale(0.8);
    display: flex;
    justify-content: center;
}

.slide img, .slide video {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Mantiene la proporción sin deformar */
    border-radius: 20px;
    display: block;
}
  /* Clase que JS pondrá a la foto del medio */
.slide.active {
    opacity: 1;
    transform: scale(1.15);
    z-index: 2;
  }
  
.btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }
  
.prev { left: 20px; }
.next { right: 20px; }

.logo_fondo {
  width: 260px;
  height: 140px;
}


/*  La Sección del Fondo (Imagen + Gradiente Oscuro) */
.Form {
    background-image: linear-gradient(
        rgba(14, 32, 57, 0.8), 
        rgba(14, 32, 57, 0.8)
      ), 
      url('./media/img/img-form.jpeg'); 
      
    background-size: cover; /* Hace que la imagen cubra todo el espacio sin deformarse */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; 
    
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* La "Tarjeta" blanca que contiene el formulario */
.Form > .div-formulario {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px; /* Bordes suaves */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); /* Sombra elegante */
    width: 100%;
    max-width: 500px; /* Evita que el formulario sea gigante en PC */
  }
  
.Form > .titulo-form h2 {
    color: #ffffff; /* Texto blanco para que contraste con el fondo oscuro */
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
  }

  /* 3. Estructura interna del formulario */
.Form form {
    display: flex;
    flex-direction: column; /* Apila etiquetas, inputs y botón */
  }
  
  /* Estilos de las Etiquetas (Labels) */
.Form label {
    color: #0A2B5A; 
    font-weight: 600;
    margin-top: 15px; /* Separa cada campo del anterior */
    margin-bottom: 8px;
    font-size: 0.95rem;
  }
  
  /* Quitamos el margen superior solo al primer label para que quede parejo */
.Form label:first-of-type {
    margin-top: 0;
  }
  
  /* Estilos de los Inputs y Textarea */
.Form input,
.Form textarea {
    padding: 12px 15px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit; 
    transition: all 0.3s ease; /* Animación suave al hacer clic */
    background-color: #f9f9f9;
  }
  
  /* Hacemos que el área de consulta sea más alta */
.Form textarea {
    min-height: 120px;
    resize: vertical; /* Permite al usuario estirarlo solo hacia abajo */
  }
  
  /* Efecto cuando el usuario hace clic para escribir (Foco) */
.Form input:focus,
.Form textarea:focus {
    outline: none;
    border-color: #ED5922;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(237, 89, 34, 0.15); /* Resplandor naranja sutil */
  }
  
  /* El Botón de Enviar */
.Form button {
    margin-top: 30px;
    background-color: #ED5922; 
    color: white;
    border: none;
    padding: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease, transform 0.1s ease;
  }
  
  /* Efectos al pasar el mouse y al hacer clic en el botón */
.Form button:hover {
    background-color: #d14818; /* Un naranja más oscuro */
  }
  
.Form button:active {
    transform: scale(0.98); /* Da la sensación de que se hunde al presionarlo */
  }
  
  /* Mensaje de respuesta */
#mensaje-respuesta {
    text-align: center;
    color: #0A2B5A;
  }

/* Contenedor principal de la sección */
/* 1. Al contenedor le agregamos flex-wrap */
.cobertura-nacional {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #F4F4F4;
    border-radius: 12px;
    flex-wrap: wrap; /* Le permite a los hijos bajar a la siguiente línea */
  }
  
  /* 2. A las columnas les damos un límite de encogimiento */
  .imagen-cobertura, 
  .texto-cobertura {
    flex: 1;
    min-width: 300px; /* Le dice a Flexbox: "Si mido menos de 300px, no me aprietes más, envíame abajo" */
  }
  
  .imagen-cobertura img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  }

  /* Una pequeña etiqueta naranja arriba del título para darle un toque premium */
.etiqueta-naranja {
    display: inline-block;
    background-color: #ED5922; 
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
  }
  
.texto-cobertura h2 {
    font-size: 2.2rem;
    color: #0A2B5A; 
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 1.2;
  }
  
.texto-cobertura p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
  }

/* Estilos generales del contenedor del Footer */


  /* Contenedor central para agrupar y alinear los elementos */
  .footer-contenido {
    display: flex;
    flex-direction: column; /* Apila logo, separadores y textos uno debajo del otro */
    align-items: center; /* Centra todo perfectamente al medio */
    max-width: 800px;
    margin: 0 auto;
  }
  
  /* Estilo para el Logo */
  .footer-logo {
    width: 280px; 
    max-width: 100%; /* Para que no se rompa en celulares muy chicos */
    height: auto;
    margin-bottom: 10px;
  }
  
  /* Las pequeñas líneas naranjas separadoras */
  .footer-separador {
    width: 50px; /* Ancho de la línea */
    height: 2px; /* Grosor de la línea */
    background-color: #ED5922; 
    margin: 20px 0; /* Espacio arriba y abajo de cada línea */
  }
  
  /* Contenedor para juntar el ícono con su texto */
  .footer-item {
    display: flex;
    align-items: center; /* Alinea verticalmente el ícono con el texto */
    gap: 15px; /* Separación entre el ícono y el texto */
  }
  
  /* Estilos de los íconos SVG */
  .footer-icono {
    width: 26px; /* Tamaño del ícono */
    height: 26px;
    stroke: #ED5922; 
  }
  
  /* Estilos del texto (Dirección y Email) */
  .footer-item p {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 300; /* Letra un poco más fina para que se vea elegante */
    letter-spacing: 0.5px;
  }

  /* Contenedor del logo en texto */
.footer-logo-texto {
    display: flex;
    flex-direction: column; /* Apila una palabra sobre la otra */
    align-items: center;
    margin-bottom: 10px;
    font-family: 'Arial', sans-serif; 
  }
  
  /* Estilo para la palabra ELEVATOR
  .logo-principal {
    font-size: 2.8rem;
    font-weight: 900; Letra bien gruesa
    color: #ffffff;
    letter-spacing: 2px; Un poco de espacio entre letras
    line-height: 1; Evita espacios vacíos innecesarios arriba o abajo
  }
  
  Estilo para la palabra A.S.C.E.N.S.O.R.E.S.
  .logo-secundario {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ED5922; Tu naranja corporativo
    letter-spacing: 4px; Letras bien separadas imitando el logo
    margin-top: 5px;
  } */

.logo_fondo_footer {
  height: 120px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #F4F4F4;
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: black;
}

p {
    font-size: 1.2rem;
}

/* .navbar{
    background-color: #f8f8f8;
    margin: 0px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
} */

.contenedor {
    height: 100%;
}

#img {
    padding-left: 2rem;
    width: 240px;
    height: 100%;
}

.contenedor2 {
    margin-left: 60px;
    margin-right: 60px;
    width: 100%;
}

ul { 
    display: flex;
    justify-content: center;
}

ul li {
    display: flex;
}


li {
    list-style: none;
    margin-right: 80px;
    margin-left: 80px;
    font-size: 1.2rem;
    font-weight: bold;
}

h2 {
    font-size: 2.5rem;
    color: #1a252f;
    margin-bottom: 5px;
}

/* Estilos para el contenedor Hero */
.hero {
    height: 100vh; /* Ocupa el 90% de la altura de la pantalla */
    background-color: #1a252f; /* Color oscuro de fondo */
    color: #ffffff; /* Texto en blanco para que resalte */
    background: linear-gradient(rgba(0,0,0,0.77), rgba(0,0,0,0.77)), url('./media/img/img-hero.jpeg') center/cover;
    /* Flexbox para centrar y apilar */
    display: flex;
    flex-direction: column; /* Asegura que los elementos se apilen uno debajo del otro */
    justify-content: center; /* Los centra verticalmente */
    align-items: center; /* Los centra horizontalmente */
    padding: 0 20px; /* Un poco de margen a los lados para pantallas pequeñas */
}

.title-hero {
    font-size: 2.5rem;
}

.title-hero span {
    font-size: 3rem;
}

.hero-content p {
    font-size: 1.6rem;
}

/* Contenedor principal de la sección */
.sobre-nosotros {
    display: flex;
    align-items: center; /* Centra el contenido verticalmente si un lado es más alto que el otro */
    justify-content: center;
    text-align: center;
    padding: 80px 20px; /* Espaciado arriba/abajo y a los lados */
    max-width: 900px; /* Evita que se estire demasiado en pantallas gigantes */
    margin: 0 auto; /* Centra toda la sección en el medio de la página */
}

.texto-nosotros h3 {
    font-size: 1.5rem;
    color: #e67e22; /* Un color de acento*/
    margin-top: 0;
    margin-bottom: 20px;
}

.texto-nosotros p {
    font-size: 1.1rem;
    line-height: 1.6; /* Mejora la legibilidad del párrafo separando las líneas */
    color: #555;
}

.titulo-galeria {
    display: flex;
    justify-content: center;
}



.somos-info {
    flex: 1; /* Le dice que ocupe una parte del espacio disponible */
}

.galeria {
    background-color: #0A2B5A;
}

.galeria h2 {
    margin-top: 50px;
    color: white;
}

/* Contenedor principal */
.somos-especialistas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 80px 10%; /* Ajusta el 10% según el margen de tu web */
  max-width: 1200px;
  margin: 0 auto;
}

/* Columna de texto */
.texto-especialistas {
  flex: 1;
}

.texto-especialistas h2 {
  font-size: 2.5rem;
  color: #0A2B5A; 
  margin-bottom: 20px;
}

.texto-especialistas p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.texto-especialistas span {
  font-weight: bold ;
  color: #e67e22;
}

/* Columna de imagen */
.imagen-especialistas {
  flex: 1;
  text-align: right;
}

.imagen-especialistas img {
  width: 100%;
  max-width: 500px; /* Para que no se agrande demasiado en pantallas enormes */
  height: 500px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.titulo-servicios {
  background-color: #ED5922; 
    color: #ffffff;            /* Letra blanca */
    padding: 15px 30px;        /* Espacio interno: arriba/abajo e izquierda/derecha */
    border-radius: 8px;        /* Bordes suavemente redondeados */
    display: inline-block;     /* La caja se ajusta al largo del texto */
    font-size: 2.2rem;         /* Tamaño de la letra */
    text-transform: uppercase; /* Opcional: queda muy bien en mayúsculas para destacar */
    letter-spacing: 1px;       /* Espaciado entre letras para mayor legibilidad */
    box-shadow: 0 4px 15px rgba(237, 89, 34, 0.3); /* Sombra naranja suave para dar profundidad */
    margin-bottom: 25px;
}

.especialidad-titulo {
    padding-top: 5rem;
    text-align: center;

}

/* Contenedor principal */
.especialidades {
    display: flex;
    justify-content: space-between; /* Distribuye el espacio entre las tarjetas */
    gap: 30px; /* Espacio mínimo entre las tarjetas */
    padding: 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; /* Permite que las tarjetas bajen de línea si no caben */
}

/* Cada tarjeta individual */
.tarjeta-especialidad {
    flex: 1; /* Hacemos que todas ocupen el mismo ancho */
    min-width: 220px; /* Evita que se hagan demasiado finitas antes de saltar a la línea de abajo */
    text-align: center; /* Centra el ícono, título y texto */
}

/* Estilos para los íconos */
.tarjeta-especialidad .icono {
    width: 50px; /* Ajusta el tamaño de tus íconos */
    height: auto;
    margin-bottom: 15px;
}

/* Estilos para los Títulos */
.tarjeta-especialidad h3 {
    font-size: 1.2rem;
    color: #e97917; 
    margin-bottom: 10px;
}

/* Estilos para los Párrafos */
.tarjeta-especialidad p {
    font-size: 0.95rem;
    color: #5b5959; 
    line-height: 1.5;
}

/* Contenedor para centrar la alerta en la pantalla */
.seccion-advertencia {
    padding: 60px 20px;
    display: flex;
    justify-content: center; /* Centra la caja horizontalmente */
}

/* La caja de advertencia */
.caja-alerta {
    display: flex;
    align-items: center; /* Centra el icono y el texto verticalmente */
    gap: 25px; /* Espacio entre el icono y el texto */
    background-color: #fff6f3; /* Un naranja muuuuy clarito de fondo */
    border-left: 8px solid #de1010; /* El borde grueso con el naranja de tu logo */
    padding: 30px 40px;
    margin-bottom: 100px;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    max-width: 800px; /* Para que no sea infinita a los lados */
    box-shadow: 0 10px 20px rgba(237, 89, 34, 0.1); /* Una sombra con un leve tinte naranja */
}

/* El ícono de advertencia */
.icono-alerta {
    font-size: 3.5rem; /* Tamaño grande para que llame la atención */
    line-height: 1;
}

/* Estilos del Título */
.texto-alerta h2 {
    color: #de1010; /* Título en el color naranja de tu marca */
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.footer-sitio {
    background-color: #0A2B5A;
    border-top: 6px solid #ED5922;
    border-bottom: 6px solid #ED5922;
    padding: 50px 20px;
    color: #ffffff;

    position: relative; /* IMPORTANTE */
}

.volver-arriba {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.volver-arriba a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: color 0.3s ease;
}

.volver-arriba p {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: orange;
}

.volver-arriba i {
    background-color: orangered;
    color: white;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    margin-bottom: 5px;
    font-size: 20px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.volver-arriba i:hover {
    transform: scale(1.1);
    background-color: #d14818;
}
.copy {
    padding: 20px 0; /* Espaciado para que no quede pegado a lo de arriba */
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Una línea sutil divisoria opcional */
    margin-top: 30px;
}

.copy p {
    color: #ffffff; /* Color blanco para las letras y el símbolo © */
    font-size: 18px; /* Un tamaño un poco más pequeño que el resto */
    font-family: Arial, sans-serif; /* O la fuente que estés usando en el sitio */
    opacity: 0.8; /* Le da un toque más profesional al no ser un blanco tan brillante */
    letter-spacing: 0.5px;
}

  .reveal {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {

  .menu-hamburguesa {
    display: flex;
  }

  .navbar{
    display: flex;
    justify-content: space-between;
  }

  /* CONTENEDOR MENU */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #F4F4F4;
    padding: 20px 0;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    z-index: 999;
  }

  /* MENU ABIERTO */
  .nav-links.activo {
    display: flex;
  }

  /* ITEMS */
  .nav-links li {
    width: 100%;
    margin: 0;
    display: block;
    border-bottom: 1px solid #eee;
  }

  .nav-links a {
    display: block;
    padding: 15px 20px;
    width: 100%;
  }

  /* SUBMENUS */

  .dropdown-menu,
  .sub-dropdown-menu {

    display: none;
    position: relative;
    top: 0;
    left: 0;

    width: 100%;

    box-shadow: none;
    border: none;

    padding-left: 20px;

    background-color: #F4F4F4;
  }

  .sub-dropdown-menu {
    border-left: 2px solid #ddd;
    margin-left: 20px;
  }

  /* ABRIR CON JS */

.dropdown.active > .dropdown-menu {
  display: block;
}

.sub-dropdown.active > .sub-dropdown-menu {
  display: block;
}

  /* IMPORTANTE:
     DESACTIVAMOS EL HOVER EN MOBILE
  */
.dropdown:hover > .dropdown-menu {
  display: none;
}

.sub-dropdown:hover > .sub-dropdown-menu {
  display: none;
}

.dropdown.active > .dropdown-menu {
  display: block;
}

.sub-dropdown.active > .sub-dropdown-menu {
  display: block;
}

  /* GALERIA */

  .slide {
    min-width: 60%;
  }

  .titulo-galeria{
    display: flex;
    justify-content: center;
    text-align: center;
  }

  /* COBERTURA */

  .cobertura-nacional {
    flex-direction: column-reverse;
    text-align: center;
    padding: 50px 20px;
    gap: 40px;
  }

  .texto-cobertura {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* TARJETAS */

  .tarjeta-especialidad {
    flex: 1 1 40%;
  }

  /* FLECHAS */

  .nav-links a::after {
    content: '';
  }


}
/* Media Query para pantallas pequeñas (celulares y tablets) */
@media (max-width: 768px) {
    .sobre-nosotros {
        flex-direction: column; /* Cambia la fila a columna */
        text-align: center; /* Centra el texto para que se vea mejor en móviles */
        gap: 30px; /* Reduce un poco el espacio entre imagen y texto */
    }

    .titulo-servicios {
        font-size: 1.6rem;    /* Achicamos un poco la letra en el celu */
        padding: 12px 20px;
        display: block;        /* En celu suele quedar mejor que ocupe todo el ancho */
    }

    .slide {
        min-width: 80%; /* En móviles la foto central ocupa más espacio */
    }
    
    .btn {
        width: 40px;
        height: 40px;
        padding: 10px;
    }

    .somos-especialistas {
      flex-direction: column; /* Esto manda la imagen abajo del texto */
      text-align: center;
      padding: 50px 20px;
    }

    .imagen-especialistas {
      text-align: center;
    }

    .imagen-especialistas img {
      max-width: 100%; /* La imagen ocupa todo el ancho en el celu */
      
    }

}

/* Para Celulares (pantallas pequeñas) */
@media (max-width: 600px) {
  .tarjeta-especialidad {
    flex: 1 1 100%; /* Obliga a que cada tarjeta ocupe todo el ancho (1 columna) */
}
  .slide {
    margin: 0 10px;
    transition: all 0.5s ease;
    opacity: 0.3;
    transform: scale(0.8);
}

  .btn-whatsapp {
    width: 50px;
    height: 50px;
    bottom: 35px;
    right: 45px;
    font-size: 30px;
  }
  .caja-alerta {
  flex-direction: column; /* Apila el icono arriba y texto abajo */
  text-align: center; /* Centra los textos */
  border-left: none; /* Quitamos el borde izquierdo */
  border-top: 8px solid #de1010; /* Pasamos el borde arriba */
  padding: 30px 20px;
}
  .copy-icon{
    color: #ED5922;
    font-size: 20px;
}
  .footer-item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .footer-item p,
  .footer-item a {
    font-size: 0.95rem;
    word-break: break-word;
  }

  
}

/* Aumentamos el tamaño de la pantalla donde se activa el celular a 900px */
@media (max-width: 900px) {

    .tarjeta-especialidad {
      flex: 1 1 40%; /* Obliga a que ocupen casi la mitad, haciendo una grilla de 2x2 */
    }

    .slide {
      min-width: 60%; /* En móviles la foto central ocupa más espacio */
    }

    .titulo-galeria{
      display: flex;
      justify-content: center;
      text-align: center;
    }

    .cobertura-nacional {
      flex-direction: column-reverse; /* Esto pone el texto ARRIBA y la imagen ABAJO */
      text-align: center;
      padding: 50px 20px;
      gap: 40px;
    }
        
    .texto-cobertura {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .navbar{
      display: flex;
      justify-content: space-between;
    }

    /* Ajuste de los iconos de flecha */
    .nav-links a::after {
      content: '';
    }
}