*{margin: 0; padding: 0; box-sizing: border-box;}

img{
	display: grid;
	width: 100%;
    height: auto;
	}

h1{font-size: 2.5em;
margin-bottom: 1em;
}

h2{
	font-size: 2em;
}
section > h2{
margin-bottom: 0.5em;
color: white;
}
h3{
	font-size: 1.5em;
	text-align: center;
	margin: 0.5em;
}

h2 span, h1,nav ul, aside h3{
font-family: 'futuramedium';
}

aside h3{
	margin-bottom: 2em;
}


header img {
	height: 8rem;
	width: 18rem;
	padding: 4px;
	margin: 0%;
	justify-content: space-between;
	
}

h2.inicio{
	color: #fff;
	font-family: 'homerun';
	font-size: 4em;
	padding: 1em 2em 8em 2em;
	text-align:end;
	text-shadow: 5px 5px 5px rgba(0,0,0,0.7);
 }

a{color: antiquewhite;}
a:hover{color: #cfa372}
p{
	margin-bottom: 1.5em;
}
header{
	background-color: #213243;
	color:#213243;
	justify-items:center;

}
nav ul{
	list-style: none;
}
nav ul li{
	width: 25%;
	font-size: 1em;
	display: inline-block;
	position: relative;
	text-align: center;
	font-family:'Futura Md Bt';
}
nav ul li a{
	color:#ebe6e2;
	display: block;
	padding: 1em;
	text-decoration: none;
}
nav ul li a:link{
	background-color:  #000000;
			
}
nav ul li a:hover{
	background-color:#ffffff;
	color: #000000;
}
nav ul ul{
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	display: none;
	z-index: 10;
}
nav ul li:hover ul{
	display: block;
}
nav ul ul li{ 
	width: 100%;
}


.estructura, footer{
	
	display: grid;
	grid-template-columns: 30% 30%;
	grid-auto-flow: column;
	justify-content:space-around;
	align-content: center;
	line-height: 1.5em;
}
footer{
	grid-template-columns: auto auto;
	padding: 1em;
}
aside{
	background-color: #000000;
	color: #fff;
	padding: 6em;	}


form {
	display: grid;
	grid-template-rows: auto auto auto auto auto;
	grid-gap: 1.5em;
	align-content:center;
}
		
input, textarea {
	padding: 0.5em;
	border-radius: 0.5em;
	border: 0 none;
	width: 100%;
}
		
input[type=submit]{
	background-color:#213243;
	color: #ffffff;
}
.datos{
	display: grid;
	align-content:space-around;
}
.columnas-texto{
	column-count: 2;
	column-gap: 3em;
}

.contenido{
	width: 100%;
}

/*experiencias*/

.columnas-4{
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-template-rows: auto auto auto;
	grid-gap: 2em;	
}
.columnas-4 img{
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%);
	transition: filter 0.5s linear;
}
.columnas-4 img:hover{
	-webkit-filter:none; 
	filter:none;
}	
.columnas-2{
	display: grid;
	grid-template-columns: auto auto ;
	grid-gap: 2em;
	margin-bottom: 2em;
}

.columnas-3{
	display: grid;
	grid-template-columns: auto auto auto ;
	grid-row: auto;
	grid-gap: 2em;	
}

.grid-max{
	display: grid;
	grid-template-columns: auto auto auto;
	grid-template-rows: auto ;
	grid-gap: 3em;
	margin-top: 2em;
	margin-bottom: 2em;
}


.max:active .texto, .max:focus .texto{
	top:0%;
}
.max:hover{
	cursor: pointer;
}
/*Series y Peliculas*/
.grid-series{
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 2em;
}
.grid-series img{
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%);
	height: 100%;
	width: 100%;
}
.grid-series img:hover{
	-webkit-filter: none; 
	filter: none;
	transform: scale(1.4);
	transition: al 2s linear;
	z-index: 100;
}
.testimonio{
	border: 1px solid #ccc;
}
.testimonio p{
	padding: 0 0.5em;
}

p, h1, h2, h3, h4, div, a, ul, li, ol, i, b, strong {   
	-webkit-touch-callout: none; /* iOS Safari */ 
	-webkit-user-select: none; /* Safari */ 
	-khtml-user-select: none; /* Konqueror HTML */ 
	-moz-user-select: none; /* Firefox */ 
	-ms-user-select: none; /* Internet Explorer/Edge */ 
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ 
} 

#bottom-footer a {color: #ffffff;}




footer {
     display: flex;
     justify-content: space-around;}

footer div {
		margin: 1em 1em;
		display: flex;
        justify-content: space-around;
		padding: 1em;
	}	

footer p {
	margin: 0.5em 0.5em;
	display: flex;
	justify-content: right;
}

/* Estilo general del contenedor del carrusel */
#wrapper {
	height: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0px;
    overflow: hidden;
    position: relative;
	padding: 0px;
}

/* Estilo para el contenedor de las imágenes */
.slider-wrapper {
    display: flex;
    width: 100%;
    animation: slide 20s infinite;
}

/* Estilo de las imágenes */
.slider-wrapper img {
    width: 100%;
    flex: 1 0 100%;
    object-fit: cover;
}

/* Animación para el efecto de transición automática */
@keyframes slide {
    0% { transform: translateX(0); }
    25% { transform: translateX(-50%); }
    50% { transform: translateX(-100%); }
    75% { transform: translateX(-150%); }
    100% { transform: translateX(-0%); }
}

/* Estilo de las secciones */
section.contenido {
    padding: 3em;
	background-color: #213243;
}

/* Estilo del grid de abogados */
.grid-abogados {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Estilo de cada tarjeta de abogado */
.abogado-card {
    background-color: #213243;
    border-radius: 10px;
    padding: 20px;
    max-width: 400px;
    text-align: center;
}

/* Imagen circular del abogado */
.abogado-card img {
	display: grid;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 1px solid #333;
	align-content: center;
	align-items: center;
}

/* Información del abogado */
.Abogado-info h3 {
    margin: 10px 0;
    color: white;
    font-size: 20px;
}

.Abogado-info p {
    margin: 5px 0;
    color: white;
}

.contenido-servicios {
    margin: 20px;
    padding: 20px;
}

.card-servicio {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 8px #213243;

}

.imagen-servicio {
    flex: 1 1 30%;
    text-align: center;
}

.imagen-servicio img {
    width: 70%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

.texto-servicio {
    flex: 1 1 60%;
    padding-left: 20px;
}

.texto-servicio h2, .texto-servicio h1 {
    margin-top: 0;
}

.texto-servicio p {
    line-height: 1.6;
}
/*queries*/
@media all and (max-width:1024px){
	body{
		font-size: 1.2em;
	}
	.columnas-2{
	grid-template-columns: auto;

	}
	.columnas-3{
	grid-template-columns: auto auto;

	}
	.columnas-texto{
	column-count: 1;
	}
}
@media all and (max-width:768px){
	header{
		text-align: center;}
	body{
		font-size: 1em;}
	nav ul li{
		width: 100%;
	}

	nav ul ul{
		position: static;
	}
	nav ul ul li{
		font-size: 0.8em;}
	.contenido{
		width: 100%;
	}

	.imagen-servicio img {
		width: 80%;
		height: auto;
		border-radius: 20%;
		object-fit: cover;
	}
	.estructura{
		grid-template-columns: auto;
		grid-auto-flow: row;
	}
	aside{
		padding: 2em;
	}
	.datos{
		margin-bottom: 2em;
	}
	input, textarea {
		padding: 0.5em;
		font-size: 1em;
	}
	.columnas-4{
		grid-template-columns: auto auto;
		justify-content: center;
	}
	.columnas-3{
	grid-template-columns: auto;

	}
	h2{text-align: center; }
	.testimonio{
		margin-bottom: 1em;
	}

	.columnas-3 img{
		display: block;
		width: 100%;
	}
	.grid-destinos{
	grid-template-columns: auto;
	}
	
	.destino .texto{
	padding:3em 1em;

	}
}