/* Importa las fuentes Montserrat y Poppins de Google Fonts para usar en la página */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@300;400;600&display=swap');

/* Resetea el modelo de caja, márgenes y padding para todos los elementos para tener un control más preciso del diseño */
* {
    box-sizing: border-box; /* Hace que el padding y border se incluyan en el ancho y alto total del elemento */
    margin: 0; /* Elimina los márgenes predeterminados */
    padding: 0; /* Elimina el padding predeterminado */
}

/* Establece la altura y comportamiento de scroll para html y body */
html, body {
    min-height: 100vh; /* Asegura que el contenido ocupe al menos toda la altura de la ventana */
    height: 100%; /* Establece la altura al 100% */
}

/* Estilos base para el cuerpo de la página */
body {
    font-family: Arial, sans-serif; /* Establece la fuente principal */
    background-color: #F9FAFB; /* Color de fondo claro */
    color: #1F2937; /* Color del texto principal */
    padding: 0.9375rem; /* Espacio interno alrededor del contenido (15px) */
    display: flex; /* Usa flexbox para organizar el contenido */
    flex-direction: column; /* Organiza los elementos en columna */
    overflow-x: hidden; /* Evita el scroll horizontal en todas las pantallas */
}

/* Contenedor principal con grid layout */
.container {
    display: grid; /* Usa grid para organizar el contenido en filas y columnas */
    grid-template-columns: 1fr; /* Por defecto, una sola columna en móvil */
    gap: 0.9375rem; /* Espacio entre elementos del grid (15px) */
    width: 100%; /* Ocupa todo el ancho disponible */
    height: auto; /* Altura automática según el contenido */
}

/* En pantallas medianas y grandes, cambia a dos columnas */
@media (min-width: 62rem) { /* 992px */
    .container {
        grid-template-columns: 25rem 1fr; /* Primera columna fija, segunda flexible */
        height: 100%; /* Ocupa toda la altura disponible */
    }
    
    /* En pantallas grandes, la página principal no tiene scroll */
    body.home-page {
        overflow: hidden; /* Evita el scroll en la página principal en escritorio */
    }
    
    /* Contenedor para la página principal con altura fija en escritorio */
    .home-page .container {
        height: calc(100vh - 1.875rem); /* Altura fija para la página principal (viewport - 30px) */
    }
}

/* Estilos para las secciones principales */
.profile,
.content-section, 
.content-section-information {
    background-color: #00549F; /* Color de fondo azul institucional */
    padding: 1.25rem; /* Espacio interno (20px) */
    border-radius: 0.625rem; /* Bordes redondeados (10px) */
    display: flex; /* Usa flexbox para organizar el contenido interno */
    flex-direction: column; /* Organiza los elementos en columna */
    height: auto; /* Altura automática según el contenido */
}

/* Estilos específicos para la sección de información con scroll */
.content-section-information {
    overflow-y: auto; /* Permite scroll vertical cuando el contenido excede el tamaño */
    max-height: calc(100vh - 1.875rem); /* Altura máxima calculada (viewport - 30px) */
}

/* En pantallas grandes, ajusta el contenido de la página principal */
@media (min-width: 62rem) { /* 992px */
    .home-page .profile,
    .home-page .content-section {
        overflow: hidden; /* Evita scroll interno en la página principal en escritorio */
    }
}

.profile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilos para la cabecera del perfil del Index*/
.profile-header {
    display: flex; /* Usa flexbox para organizar elementos */
    flex-direction: column; /* Organiza elementos en columna */
    align-items: center; /* Centra horizontalmente los elementos */
    text-align: center; /* Centra el texto */
    margin-bottom: 0.9375rem; /* Espacio inferior (15px) */
}

/* Organiza el div dentro del header de perfil */
.profile-header div {
    order: 1; /* Cambia el orden visual para que aparezca primero */
    margin-bottom: 1.25rem; /* Espacio inferior (20px) */
}

/* Estilos para la imagen de perfil */
.profile-header img {
    order: 2; /* Cambia el orden visual para que aparezca después del texto */
    width: 60%; /* Ancho relativo al contenedor - COMO EN EL CÓDIGO BASE */
    height: auto; /* Altura automática para mantener proporción */
    border-radius: 50%; /* Forma circular */
    margin: 0; /* Sin márgenes */
    border: 0.25rem solid rgba(255, 255, 255, 0.3); /* Borde semitransparente (4px) */
    box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.2); /* Sombra suave (5px y 15px) */
    max-width: 12.5rem; /* Tamaño máximo para la imagen - COMO EN EL CÓDIGO BASE (200px) */
}

/* Estilos para el título del perfil */
.profile-header h1 {
    font-family: 'Montserrat', sans-serif; /* Fuente personalizada */
    font-size: 2.2rem; /* Tamaño de fuente - COMO EN EL CÓDIGO BASE */
    font-weight: 700; /* Negrita */
    color: white; /* Color de texto blanco */
    margin-bottom: 0.3125rem; /* Espacio inferior (5px) */
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.3); /* Sombra de texto (2px y 4px) */
    letter-spacing: -0.03125rem; /* Espaciado entre letras (-0.5px) */
    text-align: center;
}

/* Estilos para el párrafo del perfil */
.profile-header p {
    font-family: 'Poppins', sans-serif; /* Fuente personalizada */
    font-size: 0.85rem !important; /* Tamaño de fuente fijo - COMO EN EL CÓDIGO BASE */
    margin: 0 auto; /* Centrado horizontal */
    line-height: 1.4; /* Altura de línea para mejor legibilidad */
    max-width: 90%; /* Ancho máximo para mejor legibilidad */
}

/* Estilos para la cabecera del perfil de Información*/
.profile-header-information {
    display: flex; /* Usa flexbox para organizar elementos */
    flex-direction: column; /* Organiza elementos en columna */
    align-items: center; /* Centra horizontalmente los elementos */
    text-align: center; /* Centra el texto */
    margin-bottom: 0.9375rem; /* Espacio inferior (15px) */
}

/* Organiza el div dentro del header de perfil */
.profile-header-information div {
    order: 1; /* Cambia el orden visual para que aparezca primero */
    margin-bottom: 1.25rem; /* Espacio inferior (20px) */
}

/* Estilos para la imagen de perfil */
.profile-header-information img {
    order: 2; /* Cambia el orden visual para que aparezca después del texto */
    width: 60%; /* Ancho relativo al contenedor - COMO EN EL CÓDIGO BASE */
    height: auto; /* Altura automática para mantener proporción */
    border-radius: 50%; /* Forma circular */
    margin: 3rem; /* Sin márgenes */
    border: 0.25rem solid rgba(255, 255, 255, 0.3); /* Borde semitransparente (4px) */
    box-shadow: 0 0.3125rem 0.9375rem rgba(7, 4, 4, 0.2); /* Sombra suave (5px y 15px) */
    max-width: 15.5rem; /* Tamaño máximo para la imagen - COMO EN EL CÓDIGO BASE (200px) */
}

/* Estilos para el título del perfil */
.profile-header-information h1 {
    font-family: 'Montserrat', sans-serif; /* Fuente personalizada */
    font-size: 2.7rem; /* Tamaño de fuente - COMO EN EL CÓDIGO BASE */
    font-weight: 700; /* Negrita */
    color: white; /* Color de texto blanco */
    margin-bottom: 0.3125rem; /* Espacio inferior (5px) */
    text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.3); /* Sombra de texto (2px y 4px) */
    letter-spacing: -0.03125rem; /* Espaciado entre letras (-0.5px) */
    text-align: center;
}

/* Estilos para el párrafo del perfil */
.profile-header-information p {
    font-family: 'Poppins', sans-serif; /* Fuente personalizada */
    font-size: 0.85rem !important; /* Tamaño de fuente fijo - COMO EN EL CÓDIGO BASE */
    margin: 0 auto; /* Centrado horizontal */
    line-height: 1.4; /* Altura de línea para mejor legibilidad */
    max-width: 90%; /* Ancho máximo para mejor legibilidad */
}

/* Contenedor de botones con flexbox */
.botones-informacion {
    display: flex; /* Usa flexbox para organizar los botones */
    justify-content: center; /* Centra los botones horizontalmente */
    align-items: center;
    gap: 0.625rem; /* Espacio entre botones (10px) */
    flex-wrap: wrap; /* Permite que los botones se envuelvan en pantallas pequeñas */
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    color: #fff;
    margin: 0.3125rem auto; /* Margen automático horizontal y 5px vertical */
    cursor: pointer; /* Cambia el cursor a mano al pasar por encima */
    transition: background 0.3s; /* Transición suave para efectos */
    text-align: center; /* Centra el texto */
    font-family: 'Poppins', sans-serif; /* Fuente personalizada */
    text-decoration: none; /* Elimina el subrayado de enlaces */
}

.botones-informacion .button {
    padding: 0.7rem;
}

/* Botón para abrir el modal */
.open-modal-btn {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    background-color: transparent; /* Fondo transparente */
    color: #fff;
    border: 1px solid #fff;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s;
}

.open-modal-btn:hover {
    background-color: #006ece;
}

/* Fondo del modal */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

/* Contenedor del modal */
.modal {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    position: relative;
    animation: fadeIn 0.4s ease-out;
}

/* .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
  }

  .modal {
    background: #fff;
    border-radius: 12px;
    padding: 30px 40px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    font-family: 'Segoe UI', sans-serif;
  } */

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

  .modal h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #0b5394;
    border-bottom: 2px solid #0b5394;
    padding-bottom: 8px;
  }

  .modal p {
    font-size: 16px;
    line-height: 1.6;
    margin: 8px 0;
    color: #333;
  }

  .modal p strong {
    color: #0b5394;
  }

  .close-btn {
    position: absolute;
    top: 12px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s ease;
  }

  .close-btn:hover {
    color: #000;
  }

/* Estilos para la biografía */
.bio {
    color: #E5E7EB; /* Color de texto gris claro */
    margin-bottom: 0.625rem; /* Espacio inferior (10px) */
    text-align: center; /* Centra el texto */
    font-family: 'Poppins', sans-serif; /* Fuente personalizada */
    line-height: 1.5; /* Altura de línea para mejor legibilidad */
    padding: 0 0.625rem; /* Padding horizontal (10px) */
    font-size: 0.9rem; /* Tamaño de fuente - COMO EN EL CÓDIGO BASE */
}

/* Estilos para los botones */
.button {
    background: transparent; /* Fondo transparente */
    border: 0.0625rem solid #ccc; /* Borde fino (1px) */
    padding: 0.3125rem 0.625rem; /* Padding interno (5px y 10px) */
    border-radius: 1.875rem; /* Bordes muy redondeados (30px) */
    color: #fff; /* Texto blanco */
    cursor: pointer; /* Cambia el cursor a mano al pasar por encima */
    transition: 0.3s; /* Transición suave para efectos */
    display: block; /* Muestra como bloque */
    margin: 0.3125rem auto; /* Margen automático horizontal y 5px vertical */
    text-align: center; /* Centra el texto */
    width: fit-content; /* Ancho ajustado al contenido */
    font-family: 'Poppins', sans-serif; /* Fuente personalizada */
    text-decoration: none; /* Elimina el subrayado de enlaces */
    font-size: 0.85rem; /* Tamaño de fuente - COMO EN EL CÓDIGO BASE */
}

/* Contenedor de botones con flexbox */
.botones {
    display: flex; /* Usa flexbox para organizar los botones */
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 0.625rem; /* Espacio entre botones (10px) */
    flex-wrap: wrap; /* Permite que los botones se envuelvan en pantallas pequeñas */
}

/* Efecto hover para botones */
.button:hover {
    background: #006ece; /* Cambia el fondo al pasar el cursor */
}

.counter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    color: #fff;
    font-size: 1.300rem;
    font-family: 'Poppins', sans-serif; /* Fuente personalizada */
}

.content-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilos para los encabezados de sección */
.content-section h2, 
.content-section-information h2 {
    font-family: monospace; /* Fuente de tipo máquina de escribir */
    font-size: 1.5rem; /* Tamaño de fuente (24px) */
    margin-bottom: 0.9375rem; /* Espacio inferior (15px) */
    color: #FFFFFF; /* Texto blanco */
}

/* Contenedor de tarjetas de información con grid */
.informations {
    display: grid; /* Usa grid para organizar las tarjetas */
    gap: 0.9375rem; /* Espacio entre tarjetas (15px) */
    margin-bottom: 1.875rem; /* Espacio inferior (30px) */
    grid-template-columns: 1fr; /* Por defecto una columna en móvil */
}

/* En pantallas grandes, muestra 3 tarjetas por fila para la página principal - COMO EN EL CÓDIGO BASE */
@media (min-width: 62rem) { /* 992px */
    .content-section .informations {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual tamaño */
    }
}

/* En pantallas grandes, muestra 4 tarjetas por fila para la página de información - COMO EN EL CÓDIGO BASE */
@media (min-width: 62rem) { /* 992px */
    .content-section-information .informations {
        grid-template-columns: repeat(4, 1fr); /* Cuatro columnas de igual tamaño */
    }
}

/* Estilos para las tarjetas de información */
.information {
    background: #e5f0facb; /* Fondo azul claro semitransparente */
    border-radius: 0.625rem; /* Bordes redondeados (10px) */
    height: auto; /* Altura automática según el contenido */
    padding: 1.25rem; /* Padding interno (20px) */
    color: #1F2937; /* Color de texto oscuro */
    display: flex; /* Usa flexbox para organizar el contenido */
    flex-direction: column; /* Organiza elementos en columna */
    font-family: Arial, sans-serif; /* Fuente principal */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Sombra suave (4px y 8px) */
    overflow: hidden; /* Oculta el contenido que exceda los límites */
    min-height: 12.5rem; /* Altura mínima para uniformidad (200px) */
}

/* Estilos para los títulos de las tarjetas */
.information h1 {
    font-size: 1.2em; /* Tamaño de fuente relativo */
    margin-bottom: 0.9375rem; /* Espacio inferior (15px) */
    color: #00549F; /* Color azul institucional */
    font-family: 'Montserrat', sans-serif; /* Fuente personalizada */
    font-weight: 600; /* Semibold */
    text-align: center; /* Centra el texto */
}

/* Estilos para los párrafos de las tarjetas */
.information p {
    font-size: 0.9em; /* Tamaño de fuente relativo */
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
    margin: 0; /* Sin márgenes */
    overflow-y: hidden; /* Oculta el desbordamiento vertical */
    padding-right: 0.3125rem; /* Padding derecho (5px) */
    text-align: left; /* Alinea el texto a la izquierda */
    font-family: 'Poppins', sans-serif; /* Fuente personalizada */
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible */
}

/* Estiliza la barra de desplazamiento */
.information p::-webkit-scrollbar {
    width: 0.375rem; /* Ancho de la barra (6px) */
}

/* Estiliza el fondo de la barra de desplazamiento */
.information p::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); /* Fondo gris muy claro */
    border-radius: 0.625rem; /* Bordes redondeados (10px) */
}

/* Estiliza el "pulgar" de la barra de desplazamiento */
.information p::-webkit-scrollbar-thumb {
    background: rgba(0, 84, 159, 0.3); /* Color azul semitransparente */
    border-radius: 0.625rem; /* Bordes redondeados (10px) */
}

/* Estiliza el "pulgar" de la barra de desplazamiento al pasar el mouse */
.information p::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 84, 159, 0.5); /* Aumenta la opacidad al pasar el cursor */
}

/* Estilos para cajas azules */
.blue-box {
    background-color: #00549F; /* Fondo azul institucional */
    border-radius: 0.625rem; /* Bordes redondeados (10px) */
    padding: 1.25rem; /* Padding interno (20px) */
    color: white; /* Texto blanco */
}

/* Contenedor de sección doble con grid */
.double-section {
    display: grid; /* Usa grid para organizar elementos */
    gap: 1.25rem; /* Espacio entre elementos (20px) */
}


/* Contenedor de estrellas de clientes con flexbox */
.clients-stars {
    display: flex; /* Usa flexbox para organizar elementos */
    gap: 0.25rem; /* Espacio entre elementos (4px) */
    margin-bottom: 0.625rem; /* Espacio inferior (10px) */
}

/* Estiliza las estrellas */
.clients-stars svg {
    fill: gold; /* Color dorado */
}

/* Contenedor de caras de clientes con flexbox */
.clients-faces {
    display: flex; /* Usa flexbox para organizar elementos */
    gap: -0.625rem; /* Espacio negativo para superposición (-10px) */
    margin-top: 0.9375rem; /* Espacio superior (15px) */
}

/* Estiliza las imágenes de caras de clientes */
.clients-faces img {
    border: 0.125rem solid #1F2937; /* Borde oscuro (2px) */
    border-radius: 50%; /* Forma circular */
    width: 2.5rem; /* Ancho fijo (40px) */
    height: 2.5rem; /* Altura fija (40px) */
}

/* Estilos para el pie de página */
footer {
    text-align: center; /* Centra el texto */
    margin-top: 1.25rem; /* Espacio superior (20px) */
}

/* Estilos para textos y enlaces del pie de página */
footer p,
footer a {
    font-size: 0.75rem; /* Tamaño de fuente pequeño (12px) */
    color: #E5E7EB; /* Color gris claro */
    text-decoration: none; /* Sin subrayado */
}

/* Quita la decoración de texto para todos los enlaces */
a {
    text-decoration: none; /* Sin subrayado */
}

/* Contenedor de enlaces con flexbox */
.enlace {
    display: flex; /* Usa flexbox para organizar elementos */
    flex-direction: column; /* Organiza elementos en columna */
    align-items: center; /* Centra horizontalmente */
    margin-top: 1.25rem; /* Espacio superior (20px) */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal h2 {
    margin-top: 0;
    color: #00549F;
}

.modal p {
    font-size: 1rem;
    margin: 0.5rem 0;
}

/* Botón de cerrar */
.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #00549F;
}

/* Estilos para el modo oscuro */
.dark-mode {
    background-color: #0B1F2A; /* Fondo oscuro elegante */
    color: #E5E7EB; /* Texto claro */
}

/* Estilos para secciones en modo oscuro */
.dark-mode .profile,
.dark-mode .content-section,
.dark-mode .content-section-information {
    background-color: #003B70; /* Azul oscuro institucional */
}

/* Estilos para el título del perfil en modo oscuro */
.dark-mode .profile-header h1 {
    color: #E5F0FA; /* Texto claro */
}

/* Estilos para la biografía en modo oscuro */
.dark-mode .bio {
    color: #9CA3AF; /* Gris claro para subtítulos */
}

/* Estilos para botones en modo oscuro */
.dark-mode .button {
    border: 0.0625rem solid #9CA3AF; /* Borde gris claro (1px) */
    color: #E5F0FA; /* Texto claro */
}

/* Efecto hover para botones en modo oscuro */
.dark-mode .button:hover {
    background: #00549F; /* Fondo azul al pasar el cursor */
}

/* Estilos para modal en modo oscuro */
.dark-mode .modal {
    background-color: #003B70;
}

.dark-mode .modal h2 {
    color: #60A5FA;
}

.dark-mode .modal strong {
    color: #fff;
}

.dark-mode .modal p {
    color: #FAFAFA;
}


.modal {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    position: relative;
    animation: fadeIn 0.4s ease-out;
}
/* Estilos para encabezados de sección en modo oscuro */
.dark-mode .content-section h2,
.dark-mode .content-section-information h2 {
    color: #FFFFFF; /* Texto blanco */
}

/* Estilos para tarjetas de información en modo oscuro */
.dark-mode .information {
    background: #1E3A54; /* Azul profundo */
    color: #E5E7EB; /* Texto claro */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3); /* Sombra más oscura (4px y 8px) */
}

/* Estilos para títulos de tarjetas en modo oscuro */
.dark-mode .information h1 {
    color: #60A5FA; /* Azul acento */
}

/* Estiliza el "pulgar" de la barra de desplazamiento en modo oscuro */
.dark-mode .information p::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3); /* Azul claro semitransparente */
}

/* Estiliza el "pulgar" de la barra de desplazamiento al pasar el mouse en modo oscuro */
.dark-mode .information p::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5); /* Aumenta la opacidad */
}

/* Estilos para cajas azules en modo oscuro */
.dark-mode .blue-box {
    background-color: #003B70; /* Azul oscuro */
    color: white; /* Texto blanco */
}

/* Estilos para bordes de imágenes de caras de clientes en modo oscuro */
.dark-mode .clients-faces img {
    border: 0.125rem solid #E5E7EB; /* Borde claro (2px) */
}

/* Estilos para textos y enlaces del pie de página en modo oscuro */
.dark-mode footer p,
.dark-mode footer a {
    color: #9CA3AF; /* Gris medio */
}