/* Definición de Variables CSS para colores */
:root {
    --color-blanco: #ffffff;
    --color-blankito: #f4f4f4ff;
    --color-rojo: #c81b2b;
    --color-naranja: #fd7815;
    --color-gris: #3d3d3d;
    --color-dark-red: #b60c1f;
    --color-negro: #333333; /* Color común en textos */
    --color-negro-transparente: rgba(0, 0, 0, 0.6);
    --color-accent: #ed5425; /* Color para enlaces */
}

/* Estilo general para el navbar */
.navbar {
    display: flex;
    justify-content: space-between; /* Ajusta el espacio entre el logotipo y el menú */
    align-items: center;
    padding: 15px 20px;
    position: relative;
}

/* Navbar brand (logotipo) */
.navbar-brand {
    font-size: 1.2rem;
    color: var(--color-negro);
}
/* Links del navbar */
.nav-link {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-negro);
    text-transform: uppercase;
    transition: color 0.3s ease;
}

/* Contenedor de enlaces del navbar */
.navbar-nav { 
    display: flex;
    justify-content: center; /* Centra horizontalmente los elementos */
    align-items: center; /* Alinea verticalmente */
    gap: 1.5rem; /* Espaciado entre los elementos */
}

.nav-link:hover { 
    color: var(--color-rojo); /* Cambia a rojo al pasar el cursor */
}

/* Estilo para el logo SVG */
.navbar-brand {     position: absolute; /* Posiciona el logo fuera del flujo normal */ 
    top: 107%; /* Coloca el logo justo debajo del navbar */
    left: 50%; /* Centra el logo horizontalmente */ 
    transform: translate(-50%, -25%); /* Ajusta la posición del logo */
    z-index: 10; /* Asegura que el logo esté sobre otros elementos */
    height: auto; /* Mantén la proporción del SVG */ }

/* Animación del logo al pasar el ratón */
.navbar-brand:hover svg {     transform: scale(1.2); /* Escalado ligero */
    transition: transform 0.3s ease-in-out; /* Transición suave */ } 

/* Para dispositivos móviles, el menú se colapsa automáticamente */
.navbar-toggler {
    border: none; /* Elimina el borde del botón */
}


.navbar-toggler-icon {
    color: var(--color-negro); /* Cambia el color del icono de hamburguesa */
}

.nav-link:hover {
    color: var(--color-rojo);
}

/* Espaciado y centrado para el contenido colapsable */
.collapse {
    display: flex;
    flex-direction: column; /* Organización vertical para móviles */
    justify-content: center;
    align-items: center;
}

/* Para pantallas pequeñas */
@media (max-width: 768px) {
    .navbar { flex-direction: row; /* Reorganiza el contenido en columna */
    }
   .video-container {
        width: 100%; /* En móviles, ocupa todo el ancho */
        padding-top: 56.25%; /* Mantiene la relación de aspecto 16:9 */
    }
}

    .navbar-nav {
        flex-direction: row; /* Organización vertical de enlaces */
        gap: 0.5rem; /* Menor espacio entre enlaces */
    }

    .navbar-brand {
        top: 95%; /* Ajusta la posición del logo */
        transform: translate(-50%, -15%);
    }

 

/* Estilos generales para la sección principal */
.main-image-section {
    position: relative; /* Permite posicionar el texto sobre la imagen */
    width: 100%; /* Asegura que ocupe todo el ancho */
    height: auto;
    text-align: center; /* Centra el contenido */
    overflow: hidden; /* Evita desbordes */
}

/* Imagen principal */
.main-image {
    width: 100%; /* Imagen responsiva */
    height: auto; /* Mantiene las proporciones */
}

/* Banner de superposición */
.overlay-text {
    position: absolute; /* Posiciona el banner sobre la imagen */
    bottom: 0; /* Fija el banner en la parte inferior */
    left: 0;
    width: 100%; /* Ocupa todo el ancho */
    background-color: rgba(0, 0, 0, 0.6); /* Fondo negro con opacidad ajustable */
    color: #fff; /* Texto en blanco */
    padding: 20px; /* Espaciado interno */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
    text-align: center; /* Centra el texto dentro del banner */
}

/* Título */
.overlay-text h5 {
    font-size: 1.5rem; /* Tamaño del texto */
    font-weight: bold;
    margin: 0 0 10px 0; /* Espaciado inferior */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para destacar sobre la imagen */
}

/* Párrafo */
.overlay-text p {
    font-size: 1rem; /* Tamaño del texto */
    margin: 0; /* Elimina márgenes adicionales */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para el texto */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .overlay-text {
        padding: 15px; /* Reduce el espaciado interno */
    }

    .overlay-text h5 {
        font-size: 1.2rem; /* Reduce el tamaño del título */
    }

    .overlay-text p {
        font-size: 0.9rem; /* Reduce el tamaño del texto */
    }
}



.special.box {
    padding: 20px;
    background-color: #f4f4f4; /* Puedes cambiar el color de fondo si lo prefieres */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center; /* Centra el texto */
    height: 100%;
}

.special.box img {
    max-width: 100%; /* Asegura que las imágenes no excedan el ancho del contenedor */
    height: auto;
    margin-bottom: 15px; /* Espacio entre la imagen y el texto */
}

.special.box h3 {
    font-size: 1.5rem;
    margin-bottom: 10px; /* Espacio debajo del título */
}

 .special.box p {
        font-size: 0.9rem; /* Ajusta el tamaño del texto */
    }


/*
    .special.box {
        display: flex;
        flex-direction: column; /* Coloca el círculo y el texto en columna 
        align-items: center; /* Centra horizontalmente 
        justify-content: center; /* Centra verticalmente 
        margin: 10px auto; /* Márgenes verticales iguales al tamaño del contenedor circular 
        padding: 0; /* Elimina cualquier padding adicional 
        box-sizing: border-box; /* Asegura que padding y borde no afecten las dimensiones 
        width: 91%; /* Asegura que el ancho ocupe todo el espacio disponible 
    }  /*
/* Contenedor circular 
.contenedor-circulo {
    width: 160px; /* Tamaño del círculo 
    height: 160px;
    background-color: rgba(0, 0, 0, 0.1); /* Fondo semitransparente 
    border-radius: 50%; /* Hace el contenedor circular 
    display: flex;
    flex-direction: column; /* Organiza el SVG y el texto verticalmente 
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible; /* Permite que el texto aparezca fuera del círculo 
}    */

/* Contenedor circular */
.contenedor-circulo {
    width: 150px; /* Tamaño del círculo */
    height: 150px;
    background-color: rgba(0, 0, 0, 0.1); /* Fondo semitransparente */
    border-radius: 50%; /* Hace el contenedor circular */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    overflow: hidden;
    transition: all 0.5s ease;
}

/* animacion svg */
.contenedor-circulo svg {
    width: 90%; /* Escala del SVG */
    height: 90%;
    transition: transform 0.8s ease, opacity 0.5s ease; /* Suavidad en rotación y opacidad */
}

/* Efecto al pasar el mouse */

.contenedor-circulo:hover svg {
    transform: rotate(360deg); /* Rota el SVG */
    opacity: 0; /* Reduce opacidad */
    transition-delay: 0.3s; /* Espera a que termine la rotación */
}

/* Texto oculto por defecto */
.contenedor-circulo .hidden {
    opacity: 0; /* Hace el texto invisible */
    transform: scale(0.9); /* Reduce ligeramente el tamaño */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Suavidad en la aparición */
    position: absolute; /* Asegura que no desplace el SVG */
    text-align: center;
    bottom: 10px; /* Coloca el texto en la parte inferior del círculo */
}

/* Texto visible al hover */
.contenedor-circulo:hover .hidden {
    opacity: 1; /* Hace el texto visible */
    transform: scale(1); /* Restaura el tamaño original */
    transition-delay: 1.3s; /* Aparece después de que el SVG haya reducido su opacidad */
}
.especial-box {
    margin: auto
}

/* Estilo del título */
.contenedor-circulo h3 {
    font-size: 1.2rem;
    font-weight: bold;
    position: absolute;
    top: 60px;
    display: table-cell;
    
    vertical-align: middle;
    color: var(--color-rojo);/* Color principal */
}

.contenedor-circulo .internet h3 {
    font-size: 1.2rem;
    font-weight: bold;
    position: relative;
    top: 40px;     color: var(--color-rojo);/* Color principal */
}

/* Contenedor del texto debajo del círculo */
.texto-debajo {
    background-color: #f3f3f3;
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    border-radius: 5px;
    opacity: 0; /* Oculto por defecto */
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Texto visible al pasar el mouse */
.contenedor-circulo:hover + .texto-debajo {
    opacity: 1;
    transform: translateY(0);
}




/* Estilo del párrafo */
.debajosvg {
    font-size: 0.9rem;
    color: var(--color-negro);
    margin: 0;
    text-align: center;
}


.video-container {
    position: relative;
    width: 75%; /* Ocupa el 75% del ancho en pantallas grandes */
    padding-top: 56.25%; /* Relación de aspecto 16:9 */
    margin: 0 auto; /* Centra el video horizontalmente */
    overflow: hidden; /* Evita que el contenido se desborde */
}


/* Estilo para el iframe */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Asegura que el video ocupe todo el ancho del contenedor */
    height: 100%; /* Asegura que el video ocupe todo el alto del contenedor */
    border: none; /* Elimina bordes alrededor del iframe */
}




/* Botón principal */
.btn-contact {
    background-color: var(--color-rojo); /* Fondo rojo inicial */
    border: 2px solid var(--color-rojo); /* Borde rojo */
    color: #fff; /* Texto en blanco */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 1rem; /* Tamaño del texto */
    text-align: center;
    text-decoration: none; /* Sin subrayado */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.4s ease, color 0.4s ease; /* Suavidad en la transición */
    display: inline-block; /* Asegura comportamiento de botón */
    cursor: pointer; /* Indicador de clic */
}

/* Efecto hover en el botón */
.btn-contact:hover {
    background-color: var(--color-blanco); /* Cambia fondo a blanco */
    border-color: var(--color-negro); /* Cambia el borde a negro */
    color: var(--color-negro); /* Cambia el texto a negro */
}

/* Estilo para el footer */
#footer {
    background-color: var(--color-rojo); /* Fondo rojo */
    color: var(--color-blanco); /* Texto en blanco */
    padding: 20px; /* Espaciado interno */
    text-align: center; /* Centrado del texto */
}

/* Estilo para el enlace dentro del footer */
#footer a {
    color: var(--color-blanco); /* Color del enlace */
    text-decoration: underline; /* Subrayado para distinguir el enlace */
    transition: color 0.3s ease; /* Suavidad al cambiar el color */
}

/* Hover para el enlace */
#footer a:hover {
    color: var(--color-blankito); /* Color más claro al pasar el cursor */
}





/* Estilos para la sección Misión y Visión */

#mision-vision p {
      text-align: justify;
    }

#mision-vision {
    background-color: var(--color-blanco); /* Fondo gris claro */
    padding: 60px 0;
}

.bloque {
    background-color: var(--color-blankito); /* Fondo blanco para los bloques */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.bloque h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: var(--color-verde);
    margin-bottom: 15px;
}

.bloque p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}


/* Estilos generales */
body {
    
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

h2, h4 {
    
    font-weight: 600;
}

h2 {
    text-align: center;
    margin-bottom: 30px;
}

/* Sección de contacto */
.header {
    background-color: #007bff;
    color: white;
    padding: 30px 0;
}

.header h2 {
    margin: 0;
}