/* Variables CSS para colores y tamaños */
:root {
    --color-primary: #072B79;
    --color-secondary: #9CD400;
    --color-tertiary: #00BCDB;
    --color-background: #EAECF06B;
    --color-cta: #e67e22;
    --color-cta-hover: #D7F0F5;
    --color-text: #072B79;
    --color-text-hover: #A9D335;
    --max-width: 1000px;
    --border-radius: 2rem;
    --gap: 4.8rem;
  }
  
  html {
    scroll-behavior: smooth;
  }

  .main-nav-link {
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    display: inline-block;
  }
  
  .main-nav-link:hover,
  .main-nav-link:active {
    color: #072B79;
    background-color: #D7F0F5;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
  }
  .main-nav-link.activo {
    color: #072B79;
    background-color: #D7F0F5;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
  }
  
  /* Estilos generales */
  body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
  
    /* Fondo de contacto */
    .fondo-contacto {
      background-image: url('../img/fondo-contacto.png');
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      min-height: 60vh;
      position: relative; 
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1; 
    }

    .fondo-contacto::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        to right,
        rgba(7, 43, 121, 0.47) 20%,
        rgba(7, 43, 121, 0.47) 100%
      );
      z-index: 1; 
    }

    .fondo-nosotros {
      background-image: url('../img/hospital-nosotros.svg');
      background-size:cover;
      background-position: center top;
      background-repeat: no-repeat;
      height: 100vh;
      position: relative; 
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1; 
      padding: 50px;
    }

    .fondo-nosotros::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(7, 43, 121, 1) 100% 
      );
      z-index: 1; 
    }

    .fondo-mantenimiento{
      background-image: url('../img/mantenimiento-placa.svg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh; /* Para ocupar toda la altura de la pantalla */
      position: relative; 
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 1; 
    }

    .fondo-mantenimiento::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        to bottom,
        rgba(7, 43, 121, 0.40) 20%,
        rgba(7, 43, 121, 1) 100%
      );
      z-index: 1; 
    }

    .contenido-mantenimiento {
      margin-top: auto; /* Empuja el contenido hacia el fondo */
      text-align: center;
      padding: 5rem;
      color: #fff;
    }

    .quienes-somos {
      text-align: center;
      padding: 50px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      color: #fff;
    }
    
    .quienes-somos img {
      margin-top: 30px;
      max-width: 380px;
      width: 100%;
      height: auto;
      margin-bottom: 30px;
    }
    
    .quienes-somos h1, .contenido-mantenimiento h1 {
      font-size: 3.2rem;
      color: #9CD400;
      margin-bottom: 20px;
      font-weight: bolder;
    }
    
    .quienes-somos p, .contenido-mantenimiento p {
      font-size: 2rem;
      line-height: 1.6;
      max-width: 100%;
      font-weight: 300;
    }
    
    .quienes-somos strong {
      font-weight: bold;
    }
    

    /* Header */
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 9.6rem;
      width: 100%;
      position: relative; 
      top: 0;
      left: 0;
      z-index: 2; 
      margin-bottom: 5rem;
    }

    .header-contacto {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 9.6rem;
      width: 100%;
      position: absolute; 
      top: 0;
      left: 0;
      z-index: 2; 
      margin-bottom: 5rem;
    }

    .header-mantenimiento {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 9.6rem;
      width: 100%;
      position: absolute; 
      top: 0;
      left: 0;
      z-index: 2; 
      margin-bottom: 5rem;
    }

    .header-nosotros {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 9.6rem;
      width: 100%;
      position: absolute; 
      top: 0;
      left: 0;
      margin-bottom: 5rem;
      z-index: 2; 
    }

    .header-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: var(--max-width);
      padding: 0 2rem;
      background-color: var(--color-background);
      border-radius: var(--border-radius);
      margin-top: 3rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.201); 

    }

      .contacto {
        margin-top: 2rem;
        z-index: 1; 
        text-align: center; 
      }
      
      .contacto h1 {
        font-size: 2.5rem;
        color: #fff; 
        z-index: 2;
      }
      
      
      .logo {
        height: 7.5rem;
        max-width: 100%;
      }

      .logo-container {
        position: absolute; 
        bottom: 10px; 
        right: 10px;   
    }
      
      /* Navegación principal */
      .main-nav-list {
        list-style: none;
        display: flex;
        align-items: center;
        gap: var(--gap);
        margin: 0;
        padding: 0;
      }
      
      .main-nav-link:link,
      .main-nav-link:visited {
        display: inline-block;
        text-decoration: none;
        color: var(--color-text);
        font-weight: 600;
        font-size: 1.4rem;
        transition: all 0.3s;
        line-height: 2rem;
      }
      
      .main-nav-link.nav-cta:link,
      .main-nav-link.nav-cta:visited {
        padding: 1.2rem 2.4rem;
        border-radius: 9px;
        color: #fff;
        background-color: var(--color-cta);
      }
      
      .main-nav-link.nav-cta:hover,
      .main-nav-link.nav-cta:active {
        background-color: var(--color-cta-hover);
      }
      
    /* Slider */
    #gallery {
      width: 100%;
      height: auto;
    }

    .gallery-container {
      margin-top: 5rem;
      display: flex;
      transition: transform 0.5s ease-in-out;
      height: 600px; 
      overflow: visible; /* Permite que las imágenes se salgan */
      position: relative; /* Necesario para el efecto visual */
    }
    

    .gallery-item {
      flex: 0 0 100%;             /* Cada item ocupa el 33.33% del contenedor */
      box-sizing: border-box;
      text-align: center;
    }

    .gallery-img{
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .gallery-img img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }

    /* Navegación del Slider */
    .gallery-navigation {
      display: flex;
      justify-content: space-between;
      position: relative; 
      top: 100%;
      width: 100%; 
      padding: 0 2rem;
      z-index: 10;
    }

    .nav-button {
      background-color: var(--color-primary);
      color: white;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 5px;
      transition: background-color 0.3s;
      font-size: 1.5rem; 
    }

    .nav-button:hover {
      background-color: var(--color-secondary);
    }

    /* Fondos para los slides */
    .fondo1 {
      background-color: var(--color-primary);
      border-radius: 10px;
    }

    .fondo2 {
      background-color: var(--color-secondary);
    }

    .fondo3 {
      background-color: var(--color-tertiary);
      height: 500px;
      align-items:inherit;
    }

    /* Estilos para el contenedor del título */
    .contenedor-titulo {
      display: flex;
      flex-direction: column; /* Para que el título y el párrafo se apilen */
      align-items: center;
      justify-content: center;
      margin-top: 2rem;
    }
    .contenedor-titulo p {
      margin-top: 1rem;
      font-size: 2.2rem;
      color: #fff; /* Gris claro para mejor contraste con fondo oscuro */
      font-weight: 500;
      letter-spacing: 1px;
      text-align: center;
    }
    

    /* Estilos para el título */
    .titulo-principal {
      margin: 0;
      text-align: center;
      font-size: 5.3rem;
      line-height: 1.05;
      color: white;
      text-transform: uppercase; 
    }


    /* Respuestas a diferentes tamaños de pantalla */
    @media (max-width: 768px) {

      .titulo-principal {
        font-size: 3.5rem; /* Reducir tamaño del título en pantallas pequeñas */
      }
      
      .gallery-container {
        height: 300px; /* Ajustar la altura en pantallas más pequeñas */
      }
      
      .gallery-item {
        flex: 0 0 100%; /* Asegura que cada imagen ocupe el 100% del contenedor */
      }
      
      .nav-button {
        padding: 8px 16px; /* Hacer los botones más pequeños */
      }
      
      .gallery-navigation {
        top: 70%; /* Ajustar la posición de los botones */
      }
    }

    @media (max-width: 480px) {
      .titulo-principal {
        font-size: 2.5rem; 
      }

      .gallery-container {
        height: 250px;
      }

      .gallery-img {
        object-fit: cover; 
      }
    }


    .section-cta {
      padding: 4.8rem 0 12.8rem;
    }

    .formulario {
      margin-top: -18rem;
      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      background-color: #fff;
      display: flex; 
      flex-direction: column;  
      padding: 2.8rem;
      max-width: 1200px; 
      width: 100%; 
      height: auto;  
      align-items: center;
      justify-content: center;
      z-index: 1;
      position: relative;
    }

    .cta {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 3.2rem;
      height: 100%;
    }

    .cta-text-box,
    .cta-form-container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      z-index: 1;
    }

    .cta-text-box {
      background-color: #FBFBFB;
      padding: 5rem;
      text-align:center;
    }

    .cta-text-box h3 {
      font-size: 2rem;
      margin-bottom: 1.6rem;
    }

    .cta-text-box p,
    .cta-text-box ul {
      font-size: 1.6rem;
      line-height: 1.8;
    }

    .cta-text-box ul {
      padding-left: 20px;
    }

    .cta-text-box a {
      color: #1a73e8;
      text-decoration: none;
    }

    .cta-text-box a:hover {
      text-decoration: underline;
    }

    .cta-form-container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
    }

    .cta-form {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 2.4rem;
      width: 100%;
    }


    .cta-form .form-group {
      margin-bottom: 2rem;
    }

    .cta-info-item {
      display: flex;
      flex-direction: column;
      gap: 1.2rem; 
      margin-bottom: 1rem;
    }

    .cta-info-item-inner {
      display: flex;
      align-items: center; 
      gap: 1rem;
    }

    .cta-info-item h4 {
      font-size: 1.7rem;
      font-weight: 600;
      margin: 0; 
      color: #072A76;
    }

    .cta-info-item h5 {
      font-size: 1.4rem;
      font-weight: 600;
      color: #072A76;
      margin-bottom: 2rem;
    }

    .cta-info-item p {
      font-size: 1.6rem;
      color: black;
      margin-top: 0.5rem;
      text-align:center;
    }

    .cta-info-item .cta-icon {
      width: 2.4rem; 
      height: auto;
    }

    .input-group {
      display: flex;
      justify-content: space-between;
      gap: 2rem;
    }

    .input-container {
      flex: 1;
    }

    .cta-form input,
    .cta-form select {
      width: 100%;
      padding: 1.2rem;
      font-size: 1.6rem;
      font-family: inherit;
      color: inherit;
      border: none;
      background-color: #F9F9F9;
      border-radius: 9px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .cta-form textarea {
      width: 100%;
      padding: 1.2rem;
      font-size: 1.6rem;
      font-family: inherit;
      color: inherit;
      border: none;
      background-color: #F9F9F9;
      border-radius: 9px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      resize: none; 
    }

    .cta-form input::placeholder {
      color: #aaa;
    }

    .cta *:focus {
      outline: none;
      box-shadow: 0 0 0 0.2rem rgba(7, 43, 121, 0.5);
    }

    .cta .heading-secondary {
      color: inherit;
      margin-bottom: 3.2rem;
    }

    .cta-text {
      font-size: 1.8rem;
      line-height: 1.8;
      margin-bottom: 4.8rem;
    }


    .form-title {
      color: #072A76;
      text-align: center;
      margin-bottom: 4rem;
      font-size: 2rem;
    }

    hr {
      border: 0;
      height: 1px;
      background-color: #072A76;
      margin-top: 2rem;
      margin-bottom: 2rem;
    }

    .social-links {
      list-style-type: none;
      padding-left: 0;
      display: flex;
      gap: 1.6rem;
    }

    .social-links li a {
      font-size: 1.6rem;
      text-decoration: none;
      color: #072A76;
      font-weight: 500;
    }

    .social-links li a:hover {
      text-decoration: underline;
    }

    .categorias {
      display: grid;              
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;                       
      justify-items: stretch;       
      align-items: center;      
      width: 100%;                  
      justify-content: center;  
    }

    .categorias-productos {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adaptar a diferentes tamaños de pantalla */
      gap: 20px;
      justify-items: stretch;
      align-items: stretch;
      width: 100%;
      height: auto; /* Cambiar de 100vh a auto para adaptarse al contenido */
      justify-content: center;
    }

    .categoria {
      display: flex;                      
      flex-direction: column;             
      justify-content: center;           
      align-items: center;               
      padding: 25px;
      text-align: center;                 
      border-radius: 1.25rem;
      height: 220px;                       
      width: 100%;     
      transition: transform 0.3s ease, box-shadow 0.3s ease;

    }

    .categoria:hover {
      transform: scale(1.05);
      box-shadow: 0 0 10px #00f3ff, 0 0 20px #00f3ff;
    }

    .categoria a {
    text-decoration: none; 
    transition: transform 0.4s ease; /* Transición suave */
    }



    .titulo-categoria{
      font-size:  2.7rem;
      font-weight: 800;
      color: #FFFF;
      line-height: 1.5;
    }
    .titulo-categoria-2{
      color: #072B79;
      font-size:  2.7rem;
      font-weight: 800;
      line-height: 1.5;

    }

    .fondo-categoria-1{
      background-color: #00BCDB;
    }

    .fondo-categoria-2{
      background-color:#9DD9E3 ;
    }

    .equipo-medico {
      background-image: url('../img/icons/equipo-medico.svg');
      background-size:60%;       /* La imagen cubre toda el área */
      background-position: center left;  /* Centra la imagen */
      background-repeat: no-repeat; /* Evita que la imagen se repita */
    }

    .material-curacion {
      background-image: url('../img/icons/material-curacion.svg');
      background-size:60%; 
      background-position: center left;  /* Centra la imagen */
      background-repeat: no-repeat; /* Evita que la imagen se repita */
    }
    .mobiliario-medico{
      background-image: url('../img/icons/mobiliario-medico.svg');
      background-size:60%; 
      background-position: center left;  
      background-repeat: no-repeat; 
    }
    .instrumental-ropa{
      background-image: url('../img/icons/instrumental-ropa.svg');
      background-size: 60%;
      background-position: center left;
      background-repeat: no-repeat;
    }
    .material-dental{
      background-image: url('../img/icons/material-dental.svg');
      background-size: 60%;
      background-position: center left;
      background-repeat: no-repeat;
    }

    .material-laboratorio{
      background-image: url('../img/icons/material-laboratorio.svg');
      background-size: 40%;
      background-position: center left;
      background-repeat: no-repeat;
    }
    .medicamento{
      background-image: url('../img/icons/medicamento.svg');
      background-size: 50%;
      background-position: center left;
      background-repeat: no-repeat;
    }

    .equipo-fisioterapia{
      background-image: url('../img/icons/equipo-fisioterapia.svg');
      background-size: 42%;
      background-position: center left;
      background-repeat: no-repeat;
    }

    .mantenimiento{
      background-image: url('../img/icons/mantenimiento.svg');
      background-size: 42%;
      background-position: center left;
      background-repeat: no-repeat;
    }

    .seccion-productos{
      padding: 4.8rem 0 3.2rem 0;
    }

    .titulo-seccion {
      text-align: start;          
      color: #FFFF;   
      font-size:2rem;                
      background-color: #9CD400;     
      border-radius: 20px;            
      display: inline-block;          
      padding: 20px;                
      margin: 0;                      
    }
    
    .titulo-seccion-mantenimiento {
      text-align: start;          
      color: #FFFF;   
      font-size:2rem;                
      background-color: #072B79;     
      border-radius: 20px;            
      display: inline-block;          
      padding: 20px;                
      margin: 0;                      
    }
    .separacion{
      margin-top: 10rem;
      margin-bottom: 5rem;
    }
   
    .productos {
      max-width: 1200px;
      margin: 0 auto;
    }

    .imagen-producto {
      max-width: 100%;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
      margin-bottom: 15px;
    }

    .categoria-producto h4{
      color:#072A76;
      font-size: 1.4rem;
      margin-bottom: 2rem;
    }

    .categoria-producto p{
      color:#4D4D4E;
      font-size: 1.4rem;
      margin-bottom: 2rem;
    }

    .categoria-producto {
      display: flex;                      
      flex-direction: column;             
      justify-content: center;           
      align-items: center;               
      padding: 25px;
      text-align: center;                 
      border-radius: 1.25rem;
      height: auto;                       
      width: 100%;    
      background-color: #F9F9F9;                   
    }

  /* Estilos para el enlace con clase .btn-producto */
  .btn-producto {
    display: inline-block;  /* Para que se comporte como un bloque en línea */
    text-align: center;     /* Alinea el texto dentro del enlace */
    background-color: #00BCDB;
    border-radius: 37px;
    width: 140px;
    height: 36px;
    color: #FFFF;
    font-size: 1.4rem;
    text-decoration: none;  /* Elimina el subrayado predeterminado de los enlaces */
    line-height: 36px;      /* Alinea el texto verticalmente */
    border: none;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  }

  .btn-producto:hover {
    color: #fff;
    background-color: #072B79;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
    cursor: pointer;
  }

    /* Estilo global de la sección */
    .mision {
      margin-top: 5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      position: relative; /* Necesario para el posicionamiento absoluto dentro de la columna */
    }

    /* Imagen en la parte superior */
    .imagen {
      width: 80%; /* La imagen ocupará todo el ancho del contenedor */
      object-fit: contain; /* Asegura que la imagen se recorte adecuadamente para llenar el área */
      border-radius: 40px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
      border-radius: 20px;
    }

    /* Título de la misión */
    .titulo {
      font-size: 2em;
      margin: 20px 0;
      text-align: center;
    }

    /* Contenedor para las dos columnas */
    .contenedor-mision {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 1200px;
      position: relative;
      align-items: stretch; /* Asegura que ambas columnas tengan la misma altura */

    }
    .columna {
      width: 50%; 
      position: relative;
    }

    /* Columna 1 con fondo y sombra */
    .columna-1 {
      position: relative;
      width: 400px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
      background-color: #FBFBFB; 
      margin-top: -30px; 
      border-radius: 10px; 
      z-index: 2;
      display: flex;
      flex-direction: column; 
      align-items: center; 
      justify-content: center; 
      padding: 20px; 
      margin-left: 4rem;
    }

    /* Título dentro de la columna 1 */
    .titulo-columna {
      text-align: center;
      font-weight: bold;
      border-radius: 5px;
      font-size: 2.5rem;
      z-index: 3;
      color: #072B79;
      letter-spacing: 1.2px;
    }

    /* Estilo para la columna 2 */
    .columna-2 {
      padding-left: 20px;
      margin-top: 2rem;
    }
    .columna p{
      color:#4D4D4E;
      font-size: 1.7rem;
      font-weight: bold;
      line-height: 1.2;
    }

    /* Estilo general de la sección */
    .section-valores {
      margin-top: 5rem;
      padding: 50px 0;
      display: flex;
      justify-content: center; /* Centra la sección horizontalmente */
      align-items: center; 
    }

    .container {
      width: 100%; 
      max-width: 1200px; 
      z-index: 1;
    }

    .titulo-valores {
      display: flex; /* Activa el modelo de Flexbox */
      justify-content: center; /* Centra horizontalmente */
      align-items: center; /* Centra verticalmente */
      background-color: #00BCDB; /* Fondo azul para el contenedor */
      padding: 20px 30px; /* Espaciado interno */
      width: auto; /* Asegura que el contenedor ocupe todo el ancho disponible */
      margin-bottom: 5rem;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
      border-radius: 25px;

    }

    .titulo-valores h2 {
      font-size: 2.7rem;
      color: #FFF;
      margin: 0; /* Elimina el margen por defecto del h2 */
      font-weight: bold;
    }
    .valores h3 {
      font-size: 2rem;
      color: #FFF;
      margin: 0; /* Elimina el margen por defecto del h2 */
      font-weight: bold;
    }

    /* Estilos para las tarjetas de valores */
    .cards-valores {
      display: grid; 
      grid-template-columns: repeat(3, 1fr); 
      gap: 45px; 
      justify-items: center; 
    }

    .valor {
      background-color: #9CD400;
      padding: 20px;
      font-size: 1.5rem;
      font-weight: 600;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      width: 100%; 
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease; 
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); 
    }

    .valor:hover {
      transform: translateY(-10px); 
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
    }


    /* Estilos para los ejecutivos (Flexbox) */


    .section-ejecutivos{
      margin-bottom: 5rem;
    }

    .ejecutivos {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-bottom: 50px;
    }

    .soporte {
      display: flex;
      justify-content: center;
      align-items: center; 
      margin-bottom: 50px;
      width: auto; 
    }
    .tecnico {
      display: flex;
      flex-direction: row;
      align-items: center; 
      padding: 10px;
      text-align: center;
      border-radius: 20px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); 
      width: 50%; 
    }

    .ejecutivo {
      display: flex;
      flex-direction: row; 
      align-items: center;
      padding: 10px;
      text-align: center;
      border-radius: 20px;
      width: 100%;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); 
    }

    .tecnico .info{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      flex: 1;
    }

    .ejecutivo img, .tecnico img {
      width: 170px; 
      height: 166px; 
      object-fit: contain; 
      border-radius: 20px; 
      flex-shrink: 0; 
    }
    .ejecutivo .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center; 
      flex: 1;
      width: 100%; 
      position: relative;
    }

    .ejecutivo h4, .tecnico h4{
      font-size: 2.2rem;
      text-align: center; 
      margin-bottom: 5rem;
      color: #072B79;
    }

    .ejecutivo a, .tecnico a{
      text-decoration: none;
      color: white;
      background-color: #00BCDB;
      padding: 10px 30px;
      border-radius: 20px;
      position: relative; /* Lo posicionamos de manera absoluta */
      margin-bottom: -5rem;
      font-size: 1.4rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); 
    }

    .ejecutivo a:hover,.tecnico a:hover {
      background-color: #0056b3;
    }

    .section-mantenimiento{
        padding: 4.8rem 0 12.8rem;
      }

    .titulo-mantenimiento{
      text-align: center;
      font-size: 3.2rem;
    }

    hr{
      color: #072A76;
      size: 50%;
    }


    .categoria-servicios {
      display: flex;
      justify-content: center; /* Centra las columnas */
      flex-wrap: wrap; /* Esta línea es clave para el responsive */

      padding: 2rem;
    }
    
    .columna-servicios {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin: 1rem;
      min-width: 280px; /* Agrega un ancho mínimo para forzar el wrap si no cabe */
    }
    
    .item-servicios {
      background-color: #00BCDB;
      padding: 2rem;
      text-align: center;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      font-size: 2rem;
      color: #FFF;
      border-radius: 30px;
    }

    .elegirnos p{
      margin-top: 2.5rem;
      text-align: justify;
      font-size: 2rem;
      line-height: 1.5;
      color: #072B79;
      font-weight: 500;
      margin-bottom: 5rem;
      margin-left: 1.5rem;
    }
      .elegirnos strong{
        font-weight: 800;
        }
        .cta-container {
          text-align: center; /* Centra el botón */
          margin-top: 30px; /* Espacio entre el contenido y el botón */
        }
      .cta-btn {
        background-color: #072B79; /* Verde atractivo para CTA */
        color: white;
        padding: 15px 30px;
        text-decoration: none;
        font-size: 1.5rem;
        font-weight: bold;
        border-radius: 5px;
        display: inline-block;
        transition: background-color 0.3s ease, transform 0.2s ease;
      }
      /* Hover effect for button */
.cta-btn:hover {
  transform: translateY(-5px); /* Efecto de levantamiento al pasar el mouse */
}

.cta-btn:active {
  transform: translateY(0); /* Vuelve a su posición original cuando se presiona */
}