@charset "utf-8";
/* CSS Document */

.imgencabeza{
		width: 477px;
		height: auto;
		}

footer {
	padding: 50px 100px;
	background-color: #000;
		color:#FFF;
	font-size: 10pt;
		}

img {
	/*padding: 10px 0px 0px 0px;*/
	}
.atencion{ font-family:"Brush Script MT", cursive;
/*color:#030;*/
font-size: 45px;
line-height: 1em;
} 
/*desde aqui deppseek*/
body {
    margin: 0;
    padding: 0;
    /*font-family: 'Brush Script MT', cursive;*/
    font-size: 18pt;
}

.contenedor {
    display: flex;
    width: 100%;
	padding-left:50px;
	
}

.columna-izquierda {
    width: 60%;
    /*column-count: 2;*/
    /*column-gap: 20px;*/
    padding: 10px;
}

.columna-derecha {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.columna-derecha img {
    width: 100%;
    height: auto;
    aspect-ratio: 9/16;
    object-fit: cover;
	max-width: 200px;
}

/* ---------------------------------------------------------- */

/* Estilos base para móviles (enfoque mobile-first) */

.main-content {
    background-color: #fff;
    padding: 20px;
    margin: 10px 0;
}

/* Media query para tablets (pantallas de 600px en adelante) */
@media (max-width: 720px) {
	.imgencabeza{
		width: 550px;
		height: auto;
		}
		
	.atencion{ font-family:"Brush Script MT", cursive;
	font-size: 30px;
	line-height: 1em;
}	
    .contenedor {
        width: 100%;
        margin: 0 auto;
        padding-left:10px;
		font-size: 14pt;
		flex-wrap: wrap /* para hacer que todos los campos flebox queden en una columna*/
    }
	
	.columna-izquierda {
    width: 100%;
    padding: 0px
    
}

.columna-derecha {
    width: 100%;
    padding: 0px
}
	
	

    .main-content {
        display: flex;
        flex-wrap: wrap;
    }

    .main-content .section {
        flex: 1 1 45%;
        margin: 10px;
    }
}

/* Media query para escritorios (pantallas de 900px en adelante) */
@media (max-width: 900px) {
	.imgencabeza{
		width: 300px;
		height: auto;
		}
		
	.atencion{ font-family:"Brush Script MT", cursive;
		font-size: 25px;
		line-height: 1em;
	}
		
    .contenedor {
        width: 100%;
        max-width: 1200px;
		margin: 0 auto;
		font-size: 14pt;
		flex-wrap: wrap /* para hacer que todos los campos flebox queden en una columna*/
	}
	
	.columna-izquierda {
    width: 100%;
    }

	.columna-derecha {
    width: 100%;
	}
	
    .main-content .section {
        flex: 1 1 30%;
    }
}

/* ------------------------------------------------------------- */