*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

:root{
--primary:#005DAA;
--secondary:#003B6F;
--light:#f7f7f7;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}




/* --------------   Seccion de Img Fondo  ---------------- */


.hero{
	height:90vh;
	background:url('../img/fondos/portadaContacto.jpg') center/cover;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}

.overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,.55);
}

.hero-content{
position:relative;
color:white;
text-align:center;
max-width:800px;
}

.hero h1{
font-size:60px;
margin-bottom:20px;
}

.hero p{
font-size:20px;
margin-bottom:30px;
}



/* -------------- Main ---------------- */
.logos{
	padding:100px 0;
    margin: 2%;	
}

.steps{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    gap:30px;
    margin-top:40px;
}

.steps .info{  
    display: grid; text-align: left;
}

.lineLeft {
     padding-left: 12%;
     border-left: solid 2px #2d292977;
}

.logos h1{
    font-size: 1.2vw;
}

@media(max-width:768px){
    .logos h1{
        font-size: 3.2vh;
    }   
    .steps {
        display: inherit;
    }
    .steps .info{  
        display: grid; text-align: center;
    }

    .lineLeft {        
        justify-content: center; /* Centra horizontalmente */
        align-items: center;
        padding: 5%;
        border-left: none;
        margin-top: 10%;
        margin-bottom: 10%;
    }   
    .lineCenter {
        display: flex;
        justify-content: center; /* Centra horizontalmente */
        align-items: center;
    }    
}



.grid-formulario{
    margin-top: 20px; border-top: solid 2px #2d292977; padding-top: 4%;
}

        .campo-tarjeta {
            background-color: #f8f9fa;
            border: 1px solid #e1e8ed;
            border-radius: 8px;
            padding: 12px 15px;
            position: relative;
            transition: all 0.3s ease;
            margin-bottom: 10px;
        }

        .campo-tarjeta:hover {
            border-color: #3498db;
            background-color: #fff;
        }
        .campo-tarjeta input, 
        .campo-tarjeta textarea {
            width: 100%;
            border: none;
            background: transparent;
            font-size: 15px;
            color: #2c3e50;
            padding: 5px 0;
            box-sizing: border-box;
            outline: none;
            font-family: inherit;
        }


        /* Ocupar todo el ancho en campos largos o en móvil */
        .full-width {
            grid-column: span 2;
        }

        .btn-enviar {
            grid-column: span 2;
            background-color: #357abd ;
            text-align: center;
            padding: 18px;
            width: 100%;
            font-weight: 500;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            color: white; 
            margin-top: 20px;
            transition: background 0.3s;
        }

        .btn-enviar:hover { background-color:#4a90e2; }


        /* Grid para organizar el formulario */

        /* Ocupar todo el ancho en campos largos o en móvil */
        .full-width {
            grid-column: span 2;
        }


        /* --- ESTRUCTURA DEL FORMULARIO --- */
        .seccion-contenido {
            /* Ocultas por defecto */
            animation: fadeIn 0.4s ease;
        }

        .seccion-contenido.visible {
            display: grid;
           
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
     
        .full-width { grid-column: span 2; }


        @media (max-width: 600px) {
            .navegacion-secciones { grid-template-columns: 1fr; }
            .seccion-contenido.visible { grid-template-columns: 1fr; }
            .full-width, .titulo-paso, .btn-enviar { grid-column: span 1; }
        }