body {
    /* 1. Ruta de tu imagen SVG */
    background-image: url("../imag/imagenFondo.svg");

    /* 2. Controla la repetición: no se repite a los lados (horizontal), solo hacia abajo */
    background-repeat: repeat-y;

    /* 3. Fuerza a que el SVG abarque el 100% del ancho del navegador */
    background-size: 100% auto;

    /* 4. Centra el fondo en la pantalla */
    background-position: top center;

    /* Opcional: Asegura que el body ocupe al menos el alto de la pantalla */
    min-height: 100vh;
    margin: 0;
}


/* LOGO IEEBCS CONVOCATORIA Y FOCO */


.banner {
    color: #ffffff;
    font-family: Arial, sans-serif;
    padding: 80px;
    box-sizing: border-box;
    max-width: 1300px;
    margin: auto; /* Refuerza el centrado en el bloque */
}

.banner-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.logo-block {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 45%;
}

.logo-img {
    height: 100px; /* Ajusta según el tamaño de tu logo */
}

.logo-text {
    font-size: 17px;
    line-height: 1.2;
    max-width: 250px;
}

.convoca-block {
    /* Define un ancho máximo para que no se gigante en pantallas enormes */
    max-width: 60%; 
    display: flex;
    justify-content: center;
}

.convoca-img {
    /* CLAVE: Hace que la imagen responda al tamaño de su contenedor */
    width: 200px;
    max-width: 150px; /* El tamaño máximo real que quieres que tenga en escritorio */
    height: auto;     /* Mantiene la proporción para que no se deforme */
    display: block;
}

.foco-img {
    height: 100px;
}

.infoIEEBCS {
    text-align: center;
    font-size: 20px;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    color: white;
}

.banner-footer p {
    text-align: center;
    font-size: 20px;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    color: white;
    padding-top: 40px;
    padding-bottom: 80px;
}


.texto-clausula {
    font-family: Arial, sans-serif;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: justify;
    font-size: 15px;
    width: 80%;
    margin: 0 auto;
    line-height: 1.5;
    color: white;
    max-width: 1300px;
    margin: auto; /* Refuerza el centrado en el bloque */
}


.texto-diseno {
    font-family: Arial, sans-serif;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    font-size: 14px;
    width: 80%;
    margin: 0 auto;
    line-height: 1.5;
    color: white;
    max-width: 1300px;
    margin: auto; /* Refuerza el centrado en el bloque */
}


.texto-informe {
    font-family: Arial, sans-serif;
    padding-bottom: 60px;
    text-align: justify;
    font-size: 19px;
    width: 80%;
    margin: 0 auto;
    line-height: 1.5;
    color: #ffffff !important;
    max-width: 1300px;
    margin: auto; /* Refuerza el centrado en el bloque */
}

.contenido-convoca img {
    display: block;       /* 1. Convierte la imagen en bloque para permitir el centrado */
    width: 40%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    margin: 0 auto;       /* 2. Centra horizontalmente en el navegador */
}


/* LOGO CONSEJO */

/* Contenedor principal adaptable */

        .banner-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            max-width: 1200px;
            gap: 20px;
            margin: auto; /* Refuerza el centrado en el bloque */
        }

        /* Cuadrado de la izquierda */
        .cuadrado {
            width: 10%;
            height: auto;
            max-height: 250px; /* Limita la altura máxima en pantallas gigantes */
            object-fit: contain;
        }

        /* Contenedor de la imagen central */
        .contenido-central {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            max-width: 60%; /* Evita que la imagen crezca desproporcionadamente */
        }

        /* Imagen adaptable */
        .contenido-central img {
            width: 100%;
            height: auto;
            max-height: 250px; /* Limita la altura máxima en pantallas gigantes */
            object-fit: contain;
        }

        /* Círculo de la derecha */
        .circulo {
            width: 10%;
            height: auto;
            max-height: 250px; /* Limita la altura máxima en pantallas gigantes */
            object-fit: contain;
        }



        .contenedor-slider {
            width: 90%;
            max-width: 1300px;
            margin: auto; /* Refuerza el centrado en el bloque */
            padding-top: 100px;
        }

        .contenedor-slider img {
            width: 100%;
            height: auto;
            display: block;
        }


           .contenedor-formulario {
            width: 90%;
            max-width: 1300px;
            margin: auto; /* Refuerza el centrado en el bloque */
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .contenedor-formulario img {
            width: 100%;
            height: auto;
            display: block;
        }


        ul {
            list-style-type: none; /* Quita los puntos de las viñetas */
            padding-left: 0;        /* Alinea el texto a la izquierda */
            margin: 0;
        }


        .boton-descarga {
            background-color: #007bff;
            color: #ffffff;
            padding: 12px 24px;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none;
            border-radius: 6px;
            display: inline-block;
            transition: background-color 0.3s ease;
        }

        .boton-descarga:hover {
            background-color: #0056b3;
        }


/* IMAGEN BASES */

        /* Contenedor de la imagen central */
        .contenido-base {
            padding-top: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            max-width: 50%; /* Evita que la imagen crezca desproporcionadamente */
            margin: auto; /* Refuerza el centrado en el bloque */
            padding-bottom: 60px;
        }

        /* Imagen adaptable */
        .contenido-base img {
            width: 50%;
            height: auto;
            max-height: 250px; /* Limita la altura máxima en pantallas gigantes */
            object-fit: contain;
        }


      .contenido-informe {
            padding-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            max-width: 45%; /* Evita que la imagen crezca desproporcionadamente */
            margin: auto; /* Refuerza el centrado en el bloque */
            padding-bottom: 10px;
        }

        /* Imagen adaptable */
        .contenido-informe img {
            width: 40%;
            height: auto;
            max-height: 250px; /* Limita la altura máxima en pantallas gigantes */
            object-fit: contain;
        }



      .contenido-logoIEEBCS {
            padding-top: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            max-width: 70%; /* Evita que la imagen crezca desproporcionadamente */
            margin: auto; /* Refuerza el centrado en el bloque */
        }

        /* Imagen adaptable */
        .contenido-logoIEEBCS img {
            width: 30%;
            height: auto;
            max-height: 250px; /* Limita la altura máxima en pantallas gigantes */
            object-fit: contain;
            padding-bottom: 100px;
        }




/* BASES */

.container {
            width: 90%;
            max-width: 1300px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px 30px; /* 40px de espacio arriba/abajo, 30px a los lados */
            margin: auto; /* Refuerza el centrado en el bloque */
            font-family: Arial, sans-serif;
        }

        /* Bloques de sección */
        .card {
            background-color: #ffffff;
            border-radius: 15px;
            padding: 40px 30px 30px 30px;
            position: relative;
            box-shadow: 0 10px 20px rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }


         .card p {
            font-size: 18px;
        }

         .card p2 {
            font-size: 18px;
            color: black;
            font-family: Arial, sans-serif;
            justify-content: left;
            line-height: 1.4;
        }

          .card p3 {
            font-size: 18px;
            color: black;
            font-family: Arial, sans-serif;
            text-align: justify;
            line-height: 1.4;
        }

         .card li {
            font-size: 18px;
            line-height: 1.9;
            color: black;
        }


        .card-yellow {
            background-color: #ffd014;
            color: #2b0057;
            text-align: center;
            font-weight: 800;
            font-size: 1.5rem;
            line-height: 1.3;
            padding: 40px;
        }

        .card-blue {
            background-color: #40c4ff;
            color: #2b0057;
            text-align: center;
            font-weight: 800;
            font-size: 1.5rem;
            line-height: 1.3;
            padding: 40px;
        }

        /* Etiquetas superiores */
        .badge {
            position: absolute;
            top: -15px;
            left: 30px;
            color: #2b0057;
            font-weight: 900;
            padding: 8px 25px;
            border-radius: 8px;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .badge-yellow {
            background-color: #ffd014;
        }

        .badge-blue {
            background-color: #40c4ff;
        }

        /* Textos */
        p {
            color: #333333;
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 20px;
            text-align: justify;
        }

        p:last-child {
            margin-bottom: 0;
        }

        /* Contenedor adaptivo para tus imágenes */
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
            width: 100%;
        }

        .image-container img {
            max-width: 100%;
            height: 120px; /* Controla la altura fija para mantener simetría */
            object-fit: contain; /* Evita que tus imágenes se deformen */
        }




/* ===================================================
   MÓVIL: Pantallas de menos de 768px de ancho
   =================================================== */
@media (max-width: 768px) {
    .banner-top {
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    .logo-block {
        max-width: 100%;
        flex-direction: column; 
        margin-bottom: 20px;
    }

    .foco-block {
        display: none; /* Sigue ocultando el foco */
    }

    /* Ajustes para la imagen en móvil */
    .convoca-block {
        max-width: 80%; /* En móvil permitimos que use más espacio de la pantalla */
        order: 2; 
    }
    
    .convoca-img {
        max-width: 260px; /* Un tamaño tope ligeramente menor para pantallas chicas */
    }

    .cuadrado, .circulo {
        display: none;
    }

    .cuadrado, .cuadrado {
        display: none;
    }

    .banner-container {
        justify-content: center;
    }
    .contenido-central {
        max-width: 90%; /* En móviles la imagen aprovecha mejor el espacio */
    }

    .contenido-base {
        max-width: 100%; /* En móviles la imagen aprovecha mejor el espacio */
    }

    .contenido-base img {
        width: 60%;
    }

     .contenido-informe img {
        width: 100%;
    }

    .container {
    /* Cambia a una sola columna y centra todo el contenido */
        grid-template-columns: 1fr;
        justify-items: center; 
        align-items: center;
        gap: 50px; /* Espacio amplio entre la tarjeta PRIMERA y SEGUNDA */
    }

    .card {
        width: 90%;
        max-width: 500px; /* Limita el ancho en móvil para que luzca estético y centrado */
    }
            
    /* Desactiva y oculta las tarjetas de colores en móvil */
    .card-yellow, 
    .card-blue {
         display: none !important;
    }


    .contenido-convoca img {
    display: block;       /* 1. Convierte la imagen en bloque para permitir el centrado */
    width: 80%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
    margin: 0 auto;       /* 2. Centra horizontalmente en el navegador */
}


.texto-clausula {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 0px;
    padding-right: 0px;
}


}



@media (max-width: 990px) {
    .banner-top {
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    .logo-block {
        max-width: 100%;
        flex-direction: column; 
        margin-bottom: 20px;
    }

    .foco-block {
        display: none; /* Sigue ocultando el foco */
    }

    /* Ajustes para la imagen en móvil */
    .convoca-block {
        max-width: 80%; /* En móvil permitimos que use más espacio de la pantalla */
        order: 2; 
    }
    
    .convoca-img {
        max-width: 260px; /* Un tamaño tope ligeramente menor para pantallas chicas */
    }

      .contenido-base img {
        width: 60%;
    }

     .contenido-informe img {
        width: 60%;
    }
}