/* ======================================
   1) DECLARACIÓN DE FUENTES “HIND”
   ====================================== */

/* Hind-Light (peso 300) */
@font-face {
  font-family: 'Hind';
  src: url('../fonts/Hind-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Hind-Regular (peso 400) */
@font-face {
  font-family: 'Hind';
  src: url('../fonts/Hind-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Hind-SemiBold (peso 600) */
@font-face {
  font-family: 'Hind';
  src: url('../fonts/Hind-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Hind-Bold (peso 700) */
@font-face {
  font-family: 'Hind';
  src: url('fonts/Hind-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===================================
   ESTILOS GENERALES
   =================================== */

/* 
  Configura scrolling suave en toda la página:
  - Cuando el usuario haga clic en enlaces internos, el desplazamiento será animado.
*/
html {
  scroll-behavior: smooth;
}

/*
  Reset básico de márgenes y paddings:
  - Define la fuente por defecto de todo el sitio.
  - Quita márgenes y paddings predeterminados del navegador.
  - Evita el scroll horizontal no deseado.
*/
body {
  /*font-family: Arial, sans-serif;*/
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ===== HEADER FIJO ===== */
/*
  Fija el header en la parte superior de la pantalla:
  - position: fixed para que siempre permanezca visible.
  - top: 0 para alinearlo arriba.
  - z-index alto para que quede por encima de otros elementos.
  - Altura fija en 60px.
*/
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  height: 60px;
}

/* ===== ESTILOS DEL NAV: .menu ===== */
/*
  Contenedor principal del menú de navegación:
  - Flexbox para separar logo y enlaces.
  - Fondo oscuro (#333).
  - Padding interno (10px vertical, 20px horizontal).
*/
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 0px 20px; /* 10px arriba/abajo, 20px izquierda/derecha */
}

/*
  Estilo del logo (texto) dentro del menú:
  - Color blanco.
  - Fuente en negrita y tamaño 20px.
*/
.menu .logo {
  color: white;
}

.logo img {
  height: 80px; /* Ajusta la altura del logo */ 
  cursor: pointer;
}
/* Ajuste de tamaño del logo en pantallas pequeñas */
@media (max-width: 768px) {
  .logo img {
    height: 60px; /* o el tamaño que prefieras */
  }
}
/*
  Contenedor de enlaces en el menú:
  - Display:flex para distribuir los enlaces en línea.
  - Gap de 20px para separación entre cada enlace.
*/
.menu .menu-links {
  display: flex;
  gap: 20px;
}

/*
  Estilo de cada enlace en el menú:
  - Color blanco.
  - Sin subrayado.
  - Fuente en negrita.
*/
.menu .menu-links a {
  color: black;
  text-decoration: none;
    font-size: 15px;
     font-family: 'Hind';
     font-weight: 400;
}

/*
  Efecto hover para los enlaces del menú:
  - Subraya el texto al pasar el mouse.
*/
.menu .menu-links a:hover {
  text-decoration: underline;
}

/*
  Botón de hamburguesa para mobile:
  - Por defecto oculto en pantallas grandes.
  - Se mostrará solo cuando la pantalla sea pequeña (definido en media query).
  - Tamaño de fuente 24px, sin fondo ni borde, color blanco.
*/
.hamburger {
  display: none;
  font-size: 24px;
  background: none;
  border: none;
  color:black;
  cursor: pointer;
}

/* ===================================
   ESTILOS DE LAS SECCIONES (.vh .seccion)
   =================================== */

/*
  Clase .vh:
  - Hace que la sección tenga al menos el 100% de la altura de la ventana (100vh).
  - Agrega padding superior de 80px (60px del header + 20px extra).
  - Box-sizing: border-box para incluir padding en el cálculo de ancho/alto.
  - Usa Flexbox para centrar el contenido vertical y horizontalmente.
  - Agrega gap de 5px entre elementos hijos.
  - Fondo claro (#fafafa) y borde inferior suave.
*/
.vh {
  min-height: 100vh;
  padding: 20px 10px 10px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 2px solid #eee;
  gap: 5px;
  background: #fafafa;
  position: relative;
}

/* ===== SECCIÓN INICIO (fondo y overlay) ===== */
/*
  Estilos para el contenedor #inicio:
  - Aplica una imagen de fondo centrada y que cubre toda la sección.
  - Color de texto blanco con sombra para mejorar legibilidad.
  - Posicionamiento relativo para contener el overlay.
  - Ajusta padding-top para alinear bajo el header.
  - margin-top extra de 2em para separarlo de elementos anteriores.
*/
#inicio {
  background: url('../img/headerdesk.jpg') no-repeat center center;
  background-size: cover;
  color: #fff;
  text-shadow: 0 1px 8px #222;
  position: relative;
  z-index: 1;
  border-bottom: 2px solid #eee;
  padding-top: 325px; /* 60px header + 5px margen interno extra */
  margin-top: 2em;
  justify-content: flex-start;
}

/*
  Overlay semitransparente sobre #inicio:
  - Pseudo-elemento ::before que cubre todo el contenedor.
  - Capa oscura con alpha para oscurecer ligeramente la imagen de fondo.
*/
#inicio::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.2); /* Capa oscura con 20% de opacidad */
  z-index: 0; /* Asegura que quede detrás del contenido */
}

/*
  Asegura que los elementos hijos de #inicio queden arriba del overlay:
  - Cada hijo con position: relative y z-index: 1.
*/
#inicio > * {
  position: relative;
  z-index: 1;
}

/*
  Estilos genéricos para el título dentro de cualquier sección:
  - Margen inferior de 10px.
  - Color heredado (puede cambiar según contenedor padre).
*/
.seccion h1 {
  margin-bottom: 10px;
  color: #1B2950;
  font-family: 'Hind';
  font-weight: 400;
  font-size: 21px;
}
.seccion p {
  margin-bottom: 10px;
  color: #1B2950;
  font-family: 'Hind';
  font-weight: 400;
  font-size: 15px;
}



/* ===================================
   SECCIÓN MAPA (.seccion-mapa)
   =================================== */

/*
  Estilos para el contenedor del mapa:
  - Ocupa ancho completo (100%) sin márgenes.
  - Padding interno de 50px para separar contenido.
  - Fondo claro (#fafafa) y box-sizing:border-box.
*/
.seccion-mapa {
  width: 100%;
  max-width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  background: #fafafa;
  /*padding: 50px;*/
}

/*
  Contenedor de clase .mapa-iframe:
  - Hace que el iframe del mapa sea responsive.
  - Ancho 100%, altura mínima definida y sin borde.
*/
.seccion-mapa .mapa-iframe {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
}

.seccion-mapa iframe {
  width: 100%;
  max-width: 100%;
  min-height: 350px;
  display: block;
  border: none;
}

/*
  Título de la sección mapa:
  - Centrado horizontalmente.
  - Color de texto #333 para contraste con fondo claro.
*/
.seccion-mapa h1 {
  width: 100%;
  text-align: center;
  margin-top: 10px;
  color: #333;
}

/* ===================================
   ESTILOS RESPONSIVE (media queries)
   =================================== */

/* 
  Media query para pantallas de hasta 768px (mobile, tablets pequeñas):
  - Muestra botón hamburguesa.
  - Oculta enlaces del menú y los hace desplegables con la clase 'show'.
  - Ajusta padding de .vh para más espacio en mobile.
*/
@media (max-width: 768px) {
  /* Mostrar el botón hamburguesa */
  .hamburger {
    display: block;
  }

  /* Ocultar enlaces del menú */
  .menu .menu-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background: white;
    position: absolute;
    top: 50px;
    left: 0;
  }

  /* Mostrar el menú si tiene clase 'show' */
  .menu .menu-links.show {
    display: flex;
    gap: 0px;
  }

  /* Enlaces estilo mobile dentro del menú */
  .menu .menu-links a {
    padding: 10px 20px;
     font-family: 'Hind';
     font-weight:400;
  
  }

  /* Ajuste de padding de .vh en mobile */
  .vh {
    padding: 100px 10px 40px 10px;
  }
}

/*
  Media query para pantallas de hasta 768px:
  - Ajusta la altura mínima del iframe del mapa para no causar scroll horizontal.
*/
@media (max-width: 768px) {
  .seccion-mapa iframe {
    min-height: 220px;
  }
}

/* ===================================
   BOTÓN FLOTANTE DE WHATSAPP
   =================================== */

/*
  Contenedor del botón de WhatsApp:
  - Posición fija en esquina inferior derecha.
  - Alineación flex para tooltip y botón.
  - z-index alto para que no quede debajo de otros elementos.
*/
.whatsapp-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  z-index: 1000;
}

/*
  Tooltip de WhatsApp (mensaje emergente al pasar el mouse):
  - Fondo blanco con texto negro.
  - Borde redondeado y sombra suave.
  - Invisible inicialmente (opacity: 0, pointer-events: none).
  - Transición para animar aparición.
*/
.whatsapp-tooltip {
  background: #fff;
  color: #222;
  font-size: 1rem;
  border-radius: 16px;
  padding: 6px 16px;
  margin-right: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.13);
  border: 1px solid #eee;
  opacity: 0;
  pointer-events: none;
  position: relative;
  white-space: nowrap;
  transition: opacity 0.25s, transform 0.25s;
  transform: translateX(10px);
}

/*
  Triángulo del tooltip apuntando al botón de WhatsApp:
  - Usamos ::after para crear un pequeño triángulo blanco con sombra.
*/
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 8px 0 8px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 2px #ddd);
}

/*
  Al pasar el cursor sobre .whatsapp-container o enfocar el botón:
  - Muestra el tooltip (opacity 1, pointer-events activo, sin desplazamiento).
*/
.whatsapp-container:hover .whatsapp-tooltip,
.whatsapp-float:focus + .whatsapp-tooltip,
.whatsapp-float:active + .whatsapp-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  font-size: 25px;
   font-family: 'Hind';
     font-weight:400;
}

/*
  Estilos del botón de WhatsApp:
  - Tamaño 56x56px, fondo verde (#25D366), texto blanco.
  - Círculo perfecto con border-radius: 50%.
  - Sombra suave para destacarlo.
  - Flexbox para centrar el ícono internamente.
  - Sin borde y con transición para hover.
*/
.whatsapp-float {
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: box-shadow 0.2s, background 0.2s;
  position: relative;
  overflow: hidden;
  border: none;
}

/*
  Imagen (ícono) dentro del botón de WhatsApp:
  - Ajuste de tamaño a 32x32px.
*/
.whatsapp-float img {
  width: 32px;
  height: 32px;
  display: block;
}

/*
  Efecto hover en el botón de WhatsApp:
  - Aumenta la sombra para dar sensación de “levantarse”.
  - Mantiene el mismo color de fondo.
*/
.whatsapp-float:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  background: #25D366;
}

/*
  Ajustes para pantallas muy pequeñas (hasta 600px):
  - Reduce márgenes del contenedor y tamaño del botón e ícono.
  - Ajusta el tamaño del tooltip.
*/
@media (max-width: 600px) {
  .whatsapp-container {
    right: 12px;
    bottom: 12px;
  }
  .whatsapp-float {
    width: 76px;
    height:76px;
  }
  .whatsapp-float img {
    width: 74px;
    height: 74px;
  }
  .whatsapp-tooltip {
    font-size: 0.93rem;
    padding: 5px 12px;
    margin-right: 8px;
  }
}

/* ===================================
   FORMULARIO DE CONTACTO
   =================================== */

/*
  Estilos para los encabezados y párrafos dentro de #contacto:
  - Fuerza cada bloque a ocupar 100% del ancho.
  - Alineación izquierda de texto.
*/

#contacto {
  background-color: #E6ECF4; /* Fondo gris claro */
  padding: 15px;
}
#contacto h1 {
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 0;
    font-family: "Hind";
    font-weight: 600;
    color: #0B4493;
     text-align: center;

}
#contacto p {
  width: 100%;
  text-align: center;
}

/*
  Contenedor del formulario de contacto:
  - Ancho máximo 500px, centrado horizontalmente.
  - Flexbox en columna con gap de 15px entre campos.
*/
.formulario-contacto {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  font-family: "Hind";
  font-weight: 400;
  gap: 15px;
  margin: 0 auto;
}

/*
  Estilo para inputs y textarea del formulario:
  - Ancho 100%, padding interno 12px.
  - Borde gris claro y borde redondeado de 8px.
  - Usa misma fuente que el resto de la página.
  - Box-sizing: border-box para incluir padding en ancho.
*/
.formulario-contacto input,
.formulario-contacto textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}

/*
  Ajuste para textarea:
  - Hace verticalmente redimensionable.
  - Altura mínima de 120px para dejar espacio.
*/
.formulario-contacto textarea {
  resize: vertical;
  min-height: 120px;
}

/*
  Botón de envío del formulario:
  - Padding 12px.
  - Fondo verde (#00b14f) y texto blanco en negrita.
  - Borde redondeado de 8px y transición suave en hover.
*/
.formulario-contacto button {
  padding: 12px;
  background-color: #0B4493;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

/*
  Efecto hover en botón de envío:
  - Fondo verde más oscuro (#008c3a).
*/
.formulario-contacto button:hover {
  background-color: #0955c0;
}

/* ===================================
   TARJETAS CONTACTO
   =================================== */

/*
  Contenedor de tarjetas de contacto:
  - Flexbox para centrar y distribuir múltiples tarjetas.
  - Gap de 20px entre cada tarjeta.
  - Uso de flex-wrap para que bajen en varias filas en pantallas medianas.
*/
.tarjetas-contacto {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 5px 0;
}

/*
  Estilo de cada tarjeta:
  - Fondo gris claro (#E3E3E3), sombra suave y bordes redondeados.
  - Padding interno de 20px y texto centrado.
  - Máximo ancho de 280px y flex: 1 1 250px para adaptarse.
*/
.tarjeta {
  background: #E3E3E3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  max-width: 280px;
  flex: 1 1 250px;
}

/*
  Imagen dentro de la tarjeta:
  - Tamaño 40x40px y margen inferior de 10px.
*/
.tarjeta img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

/*
  Título de la tarjeta:
  - Margen inferior de 10px y color #333.
*/
.tarjeta h3 {
  margin-bottom: 10px;
  color: #333;
}

/*
  Párrafo de la tarjeta:
  - Sin margen.
  - Fuente ligeramente más pequeña (0.95rem) y color #444.
*/
.tarjeta p {
  margin: 0;
  font-size: 0.95rem;
  color: #444;
}

/*
  Media query para pantallas de hasta 768px:
  - Ajusta el contenedor .tarjetas-contacto para que las tarjetas se apilen en columna.
  - Añade padding lateral de 10px.
  - Cada tarjeta ocupa hasta 90% del ancho del contenedor.
*/
@media (max-width: 768px) {
  .tarjetas-contacto {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 10px;
  }

  .tarjeta {
    max-width: 90%;
  }
}

/* ===================================
   ADAPTACIONES MÓVILES ADICIONALES
   =================================== */

/*
  Media query para pantallas de hasta 640px:
  - Ajusta #inicio para que su altura mínima sea 80vh en móviles.
  - Padding superior e inferior específicos.
  - Cambia la imagen de fondo de #inicio a 'mobile-devices.png' para mobile.
  - Añade separación extra arriba (margin-top: 3em).
*/
@media (max-width: 768px) {
  #inicio {
    /*min-height: 80vh;*/
    padding-top: 60px;
    padding-bottom: 20px;
    background: url('../img/headermobile.png') no-repeat center center;
    background-size: cover;
    margin-top: 3em;
  }
}

/*
  Media query para pantallas de hasta 768px:
  - Ajusta padding de .vh a 90px top, 5px lateral, y 20px bottom.
*/
@media (max-width: 768px) {
  .vh {
    padding: 20px 5px 20px 5px;
  }
}

/* ===================================
   LOADER INICIAL
   =================================== */

/*
  Contenedor del loader que tapa toda la página:
  - position: fixed cubriendo toda la ventana.
  - Fondo blanco y z-index alto para superponerse.
  - Flexbox para centrar spinner.
*/
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*
  Spinner animado:
  - Círculo de 60x60px con borde gris y borde superior verde.
  - Border-radius: 50% para hacerlo circular.
  - Animación keyframes 'spin' para rotar indefinidamente.
*/
.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #ccc;
  border-top-color: #00b14f;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/*
  Keyframes para animar el spinner:
  - De 0 a 360 grados rota infinitamente.
*/
@keyframes spin {
  to { transform: rotate(360deg); }
}

/*
  Media query para pantallas de hasta 767px:
  - Ajusta tarjetas en .tarjetas-contacto para que su contenido se estire.
  - Cada .tarjeta ocupa 100% de ancho disponible.
*/
@media (max-width: 768px) {
  .tarjetas-contacto {
    align-items: stretch;
  }

  .tarjeta {
    max-width: 100%;
    flex: 1 1 100%;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ======================
   SECCIÓN: SERVICIOS (ajuste para dos filas de 4 columnas)
   ====================== */
#servicios {
  background: #eef6f7;
  padding: 10px 0px 50px 0px;
}
#servicios h1 {
  margin-bottom: 10px;
  color: #1B2950;
  text-align: center;
    font-family: 'Hind';
  font-weight: 400;
  font-size: 31px;
}
#servicios p {
  margin-bottom: 10px;
  color: #1B2950;
  font-family: 'Hind';
  font-weight: 400;
  font-size: 18px;
  text-align: center;
}

/* Nuevo contenedor de grid: 4 columnas fijas en desktop */
#servicios .servicios-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* Centrado horizontal */
  padding: 0 20px; /* Espacio lateral */
  box-sizing: border-box; /* Incluye padding en el ancho total */
}

/* Cada tarjeta .servicio-item dentro de #servicios: 
   (no hace falta cambiar, permanece igual) */
#servicios .servicio-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /*transition: transform 0.3s, box-shadow 0.3s;*/
  color: #333;
  text-shadow: none;
}
#servicios .servicio-item img {
  width: 100%;
  /* max-width: 300px;*/
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
#servicios .servicio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#servicios .servicio-item h3 {
  font-size: 18px;
  margin-bottom: 5px;
  font-family: "Raleway", sans-serif;
}
#servicios .servicio-item p {
  font-size: 1rem;
  text-align: center;
  margin-right: 5px;
  margin-left: 5px;
  font-family: "Raleway", sans-serif;
  color: #3F4E54;
  padding: 0px 20px 0px 20px;  /* Espacio interno: padding arriba 0, derecha 20px, abajo 0, izquierda 20px */
}
/* ================================
   ADAPTACIÓN MOBILE PARA #SERVICIOS
   ================================ */
@media (max-width: 768px) {
  /* Mostrar 1 columna en pantallas móviles */
  #servicios .servicios-list {
    grid-template-columns: 1fr;
  }
  #servicios h1 {
    font-size: 2rem;
    text-align: center;
  }
  #servicios p {
    font-size: 1rem;
    margin-bottom: 30px;
  }
  /* Reducir padding de cada tarjeta en mobile */
  #servicios .servicio-item {
    padding: 16px;
  }
}
/* Media query para pantallas de 992px a 1199px (tablets grandes y laptops) */
@media (min-width: 1200px) {
  #servicios .servicios-list {
    max-width: 1400px;
    gap: 40px;
  }
  .info-container {
    gap: 4rem;
  }
}

/* ===== ESTILOS PARA EL MODAL ===== */

/* Contenedor que cubre toda la pantalla con fondo semitransparente */
.modal-overlay {
  display: none;              /* oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* semi‐negro */
  justify-content: center;    /* centra horizontalmente el contenido */
  align-items: center;        /* centra verticalmente */
  z-index: 1000;              /* por encima de todo */
}

/* Caja blanca interna, sin bordes de ventana ni título */
.modal-contenido {
  background: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  text-align: center;
  max-width: 360px;
  width: 80%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/* Estilos para el botón de cerrar */
.modal-contenido h1 {
  margin: 0;
  font-size: 1.4rem;
  color: #0B4493;
}  
.modal-contenido p {
  margin-top: 10px;
  font-size: 1rem;
  color: #333;
}

/* ===================================
   ESTILOS PARA LA SECCIÓN DE ICONOS
   =================================== */
#icono p {
     font-size: 1rem;
    margin-bottom: 30px;
}

.iconos {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 70px 0px 60px 0px;  
  background: #f5f5f5
}

.icono {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
  width: 100px;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  max-width: 280px;
  flex: 1 1 250px;

}

.icono:hover {
  transform: scale(1.1);
}

.icono svg {
  width: 32px;
  height: 32px;
  fill: blue;
  margin-bottom: 10px;
}
/* Tamaño reducido para pantallas móviles */
@media (max-width: 768px) {
  .icono svg {
 width: 32px;
  height: 32px;
  }
}

.icono span {
  color: #555;
  font-size: 14px;
}
 
@media (max-width: 768px) {
    .icono {
        max-width: 100%;
        flex: 1 1 100%;
        min-height: 250px;
        display: flex;
        gap: 5px;
        flex-direction: column;
        justify-content: center;
        margin: 1em ;
    }
    .icono p {
     font-size: 1rem;
     margin: 5px
}
}

footer {
  text-align: center;
}
/* ===================================
   SECCIÓN DE INFORMACIÓN DE CONTACTO
   =================================== */
.info-section {
  background-color: #f5f5f5; /* gris claro */
  padding: 40px 0;
}

.info-container {
  width: 60%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 2rem;
}

.info-column {
  flex: 1;
}

.info-title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: #222;
   font-family: 'Hind';
     font-weight:600;
}

.info-address,
.info-contact {
  margin: 0.5rem 0;
  line-height: 1.6;
  color: #555;
  font-family: 'Hind';
  font-weight: 400;
}

.info-contact a {
  color: #0073e6;
  text-decoration: none;
}

.info-subtitle {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  color: #222;
    font-family: 'Hind';
      font-weight:600;
}

.info-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-links li {
  margin-bottom: 0.5rem;
}

.info-links a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  font-family: 'Hind';
  font-weight: 400;
}

.icon-arrow {
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* tu CSS */
.icond {
  width: 16px;
  height: 16px;
  stroke: #2a4f94;
  fill: none;
  flex-shrink: 0;
}
/* 🔻 MOBILE - columnas en vertical para sección de información */
@media (max-width: 768px) {
  .info-container {
    flex-direction: column;
    gap: 1.5rem;
  }
  .info-column {
    min-width: 100%;
  }
  .info-column--right {
    margin-top: 20px;
  }
}

/* === Disposición en dos columnas para #portafolio === */
#portafolio .texto-consultora {
  display: flex;
  flex-direction: column;
  padding-right: 40px;
}
#portafolio .texto-consultora h1 {
     color: #1B2950;
       font-weight: 400;
       font-size: 30px;
      font-family: "Poppins", sans-serif;
}
#portafolio .texto-consultora p {
  color: #1B2950;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    font-family: 'Hind';
    text-align: left;
}

#portafolio .portafolio-content {
  display: flex;
  gap: 20px;           /* separación entre columnas */
}
#portafolio .portafolio-column {
  flex: 1;             /* ambas columnas ocupan 50% */
}

/* Tamaño personalizado */
#portafolio .portafolio-img {
  width: 100%;         /* ocupa siempre todo el ancho */
  max-width: 300px;    /* pero no más de 400px */
  height: auto;        /* ajusta la altura proporcionalmente */
  object-fit: cover;   /* recorte si es necesario */
   border-radius: 12px;
   margin-left: 150px;
  margin-top: 20px;
}

/* Opción: si quieres que la columna vacía sencillamente sea invisible,
/* === Responsive: apilar columnas de portafolio en móvil === */

@media (max-width: 768px) {
  #portafolio .portafolio-content {
    flex-direction: column;
    align-items: center;
    padding: 0 1rem;
  }

    #portafolio .portafolio-column {
    flex: none;          /* anula flex:1 */
    width: 100%;         /* ocupa todo el contenedor */
    max-width: 100%;
    margin-bottom: 20px; /* opcional: separación extra */
  }

  #portafolio .portafolio-img {
    max-width: 90%;
    margin: 0 auto;
    margin-left: 22px;
    margin-top: 20px;

  }

  #portafolio .texto-consultora {
    padding: 1rem 0;
    text-align: center;
  }

  #portafolio .texto-consultora h1 {
     color: #1B2950;
       font-weight: 400;
       font-size: 30px;
      font-family: "Poppins", sans-serif;
  }

  #portafolio .texto-consultora p {
    color: #1B2950;
    font-weight: 400;
     font-size: 20px;
    line-height: 1.5;
    font-family: 'Hind';
    text-align: left;
   
  }
}

/* ===================================
   ANIMACIONES DE ENTRADA
   =================================== */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  /* Aumentamos la duración de 0.8s a 1.5s */
  transition:
    opacity 1.5s cubic-bezier(.17,.55,.55,1),
    transform 1.5s cubic-bezier(.17,.55,.55,1);
}
.fade-up.active {
  opacity: 1;
  transform: translateY(0);
}
/* Fade-Left (aparece viniendo desde la izquierda) */
.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 1.2s ease-out,
    transform 1.2s ease-out;
}
.fade-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* ===================================
   SECCIÓN DE CONTACTO
   =================================== */
  .icon {
      flex-shrink: 0;
      font-size: 32px;
      color: #0B4493;
      border-radius: 50%;
      padding: 8px;
      border: 2px dotted;
}
/* ——————————————————————————————
   Texto en #inicio: abajo a la derecha
   —————————————————————————————— */
#inicio {
  /* aseguramos que el contenedor sea relativo */
  position: relative; /* ya lo tenías, pero vale reafirmarlo */
  padding: 0;         /* elimina el padding-top que empujaba el texto */
}

#inicio .inicio-text {
  position: absolute;
  right: 80px;       /* separa 20px del borde derecho */
  bottom: 30px;      /* separa 30px del borde inferior */
  text-align: right; /* alinea h1 y p a la derecha */
  z-index: 2;        /* por encima del overlay */
  transform: translateX(-50px); /* desplaza 10px hacia la izquierda */
}

#inicio .inicio-text h1 {
  margin: 0;
  font-size: 2.5rem; /* ajusta a tu gusto */
  line-height: 3.2;
  font-family: "Hind";
  font-weight: 400;
    margin-bottom: -3rem; /* prueba con 0.5rem, 1rem, 1.5rem… */
}

#inicio .inicio-text p {
  margin: 0.5rem 80 0;
  font-size: 1.25rem; /* ajusta según prefieras */
 font-family: "Hind";
font-weight: 300;
margin-top: 0.75rem; /* prueba con 0.25rem, 0.5rem, 0.75rem… */
}

/* ——————————————————————————————
   Ajustes para mobile en #inicio
   —————————————————————————————— */
@media (max-width: 767px) {
  /* Centrar .inicio-text en el medio de la pantalla */
  #inicio .inicio-text {
    /* Desactivamos bottom/right */
    bottom: auto;
    right: auto;
    /* Lo colocamos en el centro exacto */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Ancho limitado para no romper el diseño */
    width: 90%;
    /* Texto centrado */
    text-align: center;
  }

  /* Ajustes de tamaño para que no se vea gigante en móvil */
  #inicio .inicio-text h1 {
    font-size: 4rem;
    line-height: 1.2;
    margin-bottom: auto;
  }
  #inicio .inicio-text p {
    font-size: 2rem;
    line-height: 1.2;
    margin-top: auto
  }
}



/* =================================================
   Estilos para gracias.html - Desktop y Mobile
   ================================================= */

/* Estilos por defecto (Desktop) */
.gracias-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 2rem;
  font-family: sans-serif;
  text-align: center;
  box-sizing: border-box;
  background-color: #f5f5f5; /* ejemplo de fondo desktop */
}

.gracias-page > div {
  max-width: 600px;
  width: 100%;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.gracias-page h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.gracias-page p {
  font-size: 1.25rem;
  margin-top: 0;
}

/* =================================================
   Ajustes responsivos (Mobile)
   ================================================= */
@media (max-width: 767px) {
  .gracias-page {
    flex-direction: column;
    height: auto;
    padding: 1rem;
    background-color: #ffffff; /* fondo ligado a mobile */
  }

  .gracias-page > div {
    padding:  1.5rem;
    border-radius: 4px;
    box-shadow: none; /* menos sombra en mobile */
  }

  .gracias-page h1 {
    font-size: 1.75;
    margin-bottom: 0.75rem;
  }

  .gracias-page p {
    font-size: 1rem;
  }
}
/* =================================== */