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

.invisible{
	display: none;
}
/* W H A T S A P P */

.whatsapp-button {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 60px;
    height: 60px;
    z-index: 2000;
}
/* R E S E T S*/

img {
	max-width: 100%;
	height: auto;
	display: block;
}
.img-redonda{
  	width: 110px;
  	height: 110px;
  	border-radius: 50%;
  	overflow: hidden;
	border: 1px solid #777;
	object-fit: cover;
  	display: block;	
}
.img-pablo{
	margin-top: -40px;
}
h1,h2,h3,p{
	margin: 0;
	padding: 0;
}


p{
	font-family: 'Red Hat Display';
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
}

body{
	font-size: 1rem;
	padding: 0;
	margin: 0;
	color: #444444;	
}

/* Links*/
a{
	text-decoration: none;
	color: #fff;
}
a:hover{
	color: #e6873c;
}
.a-bold{
	color: #e6873c;	
	font-weight: 600;
	transition: color 0.2s;	
}
.a-bold:hover{
	color: #4069a6;	
	font-weight: 600;
}

/* Fonts */

@font-face{
	font-family: 'Red Hat Display';
	font-weight: 300;
	src: url("../fonts/red-hat-display-light.woff2") format('woff2');
	src: url("../fonts/red-hat-display-light.woff") format('woff');
}
@font-face{
	font-family: 'Red Hat Display';
	font-weight: 400;
	src: url("../fonts/red-hat-display-regular.woff2") format('woff2');
	src: url("../fonts/red-hat-display-regular.woff") format('woff');
}
@font-face{
	font-family: 'Red Hat Display';
	font-weight: 500;
	src: url("../fonts/red-hat-display-medium.woff2") format('woff2');
	src: url("../fonts/red-hat-display-medium.woff") format('woff');
}
@font-face{
	font-family: 'Red Hat Display';
	font-weight: 600;
	src: url("../fonts/red-hat-display-semi-bold.woff2") format('woff2');
	src: url("../fonts/red-hat-display-semi-bold.woff") format('woff');
}
@font-face{
	font-family: 'Red Hat Display';
	font-weight: 700;
	src: url("../fonts/red-hat-display-bold.woff2") format('woff2');
	src: url("../fonts/red-hat-display-bold.woff") format('woff');
}

.h1-texto-heroe{
	color: #e6873c;
	font-size: 3rem;
	font-family: "Red Hat Display";
	font-weight: 500;
	font-optical-sizing: auto;
}
.h2-texto-heroe{
	font-size: 2rem;
	font-family: "Red Hat Display";
	font-weight: 300;
	font-optical-sizing: auto;
	color: #fff;
}
.h2-texto-destacado{
	font-size: 1.25rem;
	font-family: "Red Hat Display";
	font-weight: 600;
	font-optical-sizing: auto;
	color: #fff;
}
.texto-4-destacados{
	color: #fff;
}
.titulo-testimonio{
	font-size: 2rem;
	font-family: "Red Hat Display";	
	color: #e6873c;
	font-weight: 600;
	font-optical-sizing: auto;
}
.copy-servicios{
	color: #444444;
	font-size: 1.25rem;
	font-family: "Red Hat Display";
	font-weight: 300;
	line-height: 1.75rem;
	max-width: 50ch;
	text-align: center;
	font-optical-sizing: auto;
}
.titulos-servicios{
	font-size: 1.25rem;
	font-family: "Red Hat Display";
	font-weight: 600;
	font-optical-sizing: auto;
	color: #444444;
}
.titulos-experiencia{
	font-size: 1.25rem;
	font-family: "Red Hat Display";
	font-weight: 600;
	font-optical-sizing: auto;
	color: #e6873c;
}
.texto-testimonio{
	color: #444444;
	font-size: 1.1rem;
	font-family: "Red Hat Display";
	font-weight: 400;
	line-height: 1.75rem;
	font-optical-sizing: auto;
}
.texto-autor{
	color: #444444;
	font-size: 1.2rem;
	font-family: "Red Hat Display";
	font-weight: 600;	
	font-optical-sizing: auto;
}
.texto-cargo{
	color: #4069a6;
	font-size: 1rem;
	font-family: "Red Hat Display";
	font-weight: 300;	
	font-optical-sizing: auto;
}
.texto-abogado-corporativo{
	color: #4069a6;
	font-size: 1.5rem;
	font-family: "Red Hat Display";
	font-weight: 400;	
	font-optical-sizing: auto;
	margin: -0.5rem 0;	
}
.texto-descricpion-pablo-cinque{
	font-size: 1.4rem;
	line-height: 2rem;
	color: #4069a6;	
}
.texto-contacto-principal{
	color: #e6873c;
	font-size: 1.25rem;
	font-family: "Red Hat Display";
	font-weight: 600;
	line-height: 1.75rem;
	font-optical-sizing: auto;
}
.texto-blanco{
	color: #fff;
}
.titulo-contacto{
	font-size: 2rem;
	font-family: "Red Hat Display";	
	color: #e6873c;
	font-weight: 600;
	font-optical-sizing: auto;
}
.titulo-bio{
	font-size: 1.75rem;
	font-family: "Red Hat Display";	
	color: #e6873c;
	font-weight: 600;
	font-optical-sizing: auto;	
}
.texto-bio{
	font-size: 1.2rem;
	line-height: 1.8rem;
	color: #4069a6;	
}

/* H O M E   P A G E - - - H O M E   P A G E - - - H O M E   P A G E  */

.hero{
	width: 100%;
	height: 20rem;
	background-image: url("../images/hero-pablo-cinque.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: left;
	align-items: center;
}
.hero-contenido{
	margin: auto;
	width: 75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;	
}
.grid-4-columnas{
	margin: auto;
	max-width: 75rem;;
	padding: 3rem 0 5rem 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
	gap:1rem;	
}
.card-principal{
	padding: 1.75rem;
	background-color: #347eb6;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}
.pablo-cinque-descripcion{
	width: 100%;
	background-image: url("../images/fondo-pablo-cinque-op.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	display: flex;
}
.fila-pablo{
	max-width: 75rem;
	display: flex;
	margin: auto;
	flex-direction: row;
}
.columna-pablo-1{
	width: 50%;
	display: flex;
	justify-content: center;
}
.columna-pablo-2{
	width: 50%;
	display: flex;
	flex-direction: column;
 	justify-content:center;
  	align-items:flex-start;
	text-align: left;
	row-gap:1rem;
}
.testimonios{
	width: 100%;
	background-color: #f1f1f1;
	padding: 3rem 0;	
	text-align: center;	
	display:flex;
	align-items: center;
	flex-direction: column;
	row-gap:1rem;
}
.card-testimonio{
	width: 50rem;
	border: 1px solid #c8c8c8;
	text-align: center;
	border-radius: 10px;
	padding: 1.4rem;	
}
.autor-testimonio{
	margin: 1rem auto;
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	gap:0.75rem;				
}
.autor-cargo{
	text-align: left;
}
.autor-foto{
	display: flex;
	justify-content: flex-end;
}
.servicios{
	width: 100%;
	background-color: #fff;
	padding: 3rem 0;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.grid-3-columnas{
	margin: auto;
	max-width: 75rem;
	padding: 2rem 0 1rem 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:1rem;	
}
.card-servicios{
	padding: 1.75rem;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #d0d0d0;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	text-align: left;
}
.contacto{
	width: 100%;
	background-color: #005c97;
	padding: 3rem 0;
	text-align: center;
}
.grid-3-columnas-contacto{
	margin: 2rem auto;
	max-width: 75rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:1rem;		
}
.card-contacto-first{
	display: flex;
	flex-direction: column;
	align-items:flex-start;
	row-gap:1rem;
	text-align: left;
}
.card-contacto{
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap:1rem;
}

/* NAVBAR */

.navbar {
  width: 92%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: #fff;
  padding: 1.5rem 4% 0.8rem 4%;
  margin: auto;
}

/* L O G O */
.logo {
  height: 40px;
  width: 162px;
}

/* MENÚ */
.menu {
  list-style: none;
  display: flex;
}

.menu li {
  margin: 0 0.75rem;
}

.menu a {
  text-decoration: none;
  color: #444444;
  font-size: 1rem;
  font-family: "Red Hat Display";		
  transition: color 0.2s;
}

.menu a:hover {
  color: #e6873c;
}

/* MENÚ HAMBURGUESA */
.hamburguesa {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}

/* INPUT OCULTO */
#menu-toggle {
  display: none;
}

/* E X P E R I E N C I A   P A G E - - - E X P E R I E N C I A   P A G E  */

.hero-experiencia{
	width: 100%;
	height: 15rem;
	background-image: url("../images/hero-experiencia.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: left;
	align-items: center;
}
.hero-areas{
	width: 100%;
	height: 15rem;
	background-image: url("../images/hero-areas.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: left;
	align-items: center;
}
.hero-contenido-interna{
	margin: auto;
	width: 75rem;
	display: flex;
	flex-direction: column;
	justify-content: center;	
}
.linea{
	width: 100%;
	background-color: #a0a0a0;
	height: 1px;
	margin: 1rem 0;
}
.linea-punteada{
	border-top: 1px dashed #a0a0a0; /* Línea punteada */
 	width: 100%; /* O el ancho que desees */
	margin: 1.5rem 0;
}
.experiencia{
	width: 75rem;
	margin: auto;
	background-color: #fff;
	padding: 3rem 0;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.grid-2-columnas-experiencia{
	margin: 1rem auto;
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:3rem;		
}
.columna-experiencia{
	width: 100%;
	text-align: left;
}

/* Q U I E N E S    S O M O S  - - - Q U I E N E S    S O M O S   */

.hero-quienes-somos{
	width: 100%;
	height: 15rem;
	background-image: url("../images/hero-quienes-somos.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: left;
	align-items: center;
}

.grid-2-columnas-quienes-somos{
	margin: 3rem auto;
	max-width: 75rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:2rem;		
}
.columna-1-qs{
	display: flex;
	row-gap:1rem;
	flex-direction: column;
}
.columna-2-qs{
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.contenedor-bio{
	width: 75rem;
	height: 13rem;
	background-image: url("../images/fondo-pablo-el-estudio.png");
	background-position: center center;
	background-size: cover;
	margin: 3rem auto;
	display: flex;
	flex-direction: row;
}
.columna-bio-1{
	width: 30%;
	display: flex;
	align-items:flex-end;
	justify-content:flex-end;
}
.columna-bio-2{
	width: 60%;
	padding: 0 5%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
}

/* C A R R U S E L */
    .carrusel {
      width: 90%;
      max-width: 900px;
      overflow: hidden;
      position: relative;
	  border: 1px solid #c8c8c8;
      border-radius: 10px;
    }
    .carrusel-inner {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }
    .carrusel-slide {
      min-width: 90%;
      text-align: center;
	  padding: 1.4rem 5%;
	  display: flex;
	  flex-direction: column;
    }
    .carrusel-dots {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
    .carrusel-dots button {
      width: 30px;
      height: 10px;
      margin: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 20%;
      background-color: #ccc;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .carrusel-dots button.active {
      background-color: #333;
    }


/* R E S P O N S I V E - - - R E S P O N S I V E - - - R E S P O N S I V E */


@media (max-width: 1199px) {
	.hero-contenido{
		margin: auto;
		width: 90%;
		padding: 0 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;	
	}
	.grid-4-columnas{
		margin: auto;
		width: 90%;
		padding: 3rem 5% 5rem 5%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
		gap:1rem;	
	}
	.fila-pablo{
		width: 90%;
		padding: 0 5%;	
		display: flex;
		margin: auto;
		flex-direction: row;
	}	
	.card-testimonio{
		width: 80%;
		border: 1px solid #c8c8c8;
		text-align: center;
		border-radius: 10px;
		padding: 1.4rem;	
	}	
	.grid-3-columnas{
		margin: auto;
		max-width: 90%;
		padding: 2rem 5% 1rem 5%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));	
		/*grid-template-columns: repeat(3, 1fr);*/
		gap:1rem;	
	}
	.contacto{
		width: 100%;
		background-color: #005c97;
		padding: 3rem 0;
		text-align: center;
	}
	.grid-3-columnas-contacto{
		margin: 2rem auto;
		width: 90%;
		padding: 0 5%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap:1rem;		
	}	
	.experiencia{
		width: 90%;
		margin: auto;
		background-color: #fff;
		padding: 3rem 5%;
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;
  }	
	.grid-2-columnas-experiencia{
		margin: 1rem auto;
		max-width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap:3rem;		
	}	
    .grid-2-columnas-quienes-somos{
	    margin: 3rem 5%;
	    width: 90%;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap:2rem;		
    }	
  .navbar {
	 width: 90%;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 background: #fff;
	 padding: 1.5rem 5%;
	 margin: auto;
  }
	
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 55px;
    left: 0px;
    background: #fff;
    width: 100%;
    text-align: left;
    padding: 1rem 3.25rem;
	height: 100vh;
  }

  .menu li {
    margin: 1rem 0px 1rem 0px;
  }

  .hamburguesa {
    display: block;
	color: #e6873c;
  }

  /* Mostrar menú cuando se active el checkbox */
  #menu-toggle:checked + .hamburguesa + .menu {
    display: flex;
  }	
  .contenedor-bio{
	width: 90%;
	height: 13rem;
	background-image: url("../images/fondo-pablo-el-estudio.png");
	background-position: center center;
	background-size: cover;
	margin: 3rem 5%;
	display: flex;
	flex-direction: row;
  }
  .columna-bio-1{
	width: 35%;
	display: flex;
	align-items:flex-end;
	justify-content:center;
  }
  .columna-bio-2{
	width: 55%;
	padding: 0 5%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
  }	
}

@media (max-width: 768px) {
  .hero{
	 width: 100%;
	 height: 22rem;
	 background-image: url("../images/hero-pablo-cinque.webp");
	 background-repeat: no-repeat;
	 background-size: cover;
	 background-position: top left;
	 display: flex;
	 justify-content: left;
	 align-items: center;
	 text-align: center;
  }	
  .navbar {
	 width: 90%;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 background: #fff;
	 padding: 1.5rem 5%;
	 margin: auto;
  }
	
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 55px;
    left: 0px;
    background: #fff;
    width: 100%;
    text-align: left;
    padding: 1rem 1.75rem;
	height: 100vh;
  }

  .menu li {
    margin: 1rem 20px 1rem 0px;
  }

  .hamburguesa {
    display: block;
	color: #e6873c;
  }

  /* Mostrar menú cuando se active el checkbox */
  #menu-toggle:checked + .hamburguesa + .menu {
    display: flex;
  }
	
 .grid-4-columnas{
	margin: auto;
	width: 90%;
	padding: 3rem 5% 2rem 5%;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	/*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
	gap:1rem;	
  }	
  .pablo-cinque-descripcion{
	width: 100%;
	background-color: #2e3850;
	background-image: url("../images/fondo-palbo-cinque.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom right;
	display: flex;
  }	
  .fila-pablo{
	width: 90%;
	padding: 0 5%;	
	display: flex;
	margin: auto;
	flex-direction: column-reverse;
  }	
  .columna-pablo-1{
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 4rem;  
  }
  .columna-pablo-2{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items:flex-start;
	text-align: left;
	row-gap:1rem;
  }
  .card-testimonio{
	width: 90%;
	padding: 1.4rem 5%;
	border: 1px solid #c8c8c8;
	text-align: center;
	border-radius: 10px;
    min-width: 100%;  
  }	
  .grid-3-columnas-contacto{
	margin: 2rem auto;
	width: 90%;
	padding: 0 5%;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap:3rem;		
  }	
	.card-contacto-first{
		display: flex;
		flex-direction: column;
		align-items:flex-start;
		row-gap:1rem;
		text-align: left;
	}
	.card-contacto{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;	
		row-gap:1rem;
	}
  .copy-servicios{
	color: #444444;
	font-size: 1.25rem;
	font-family: "Red Hat Display";
	font-weight: 300;
	line-height: 1.75rem;
	max-width: 90%;
	text-align: center;
	font-optical-sizing: auto;
  }
  .h1-texto-heroe{
	color: #e6873c;
	font-size: 2.4rem;
	font-family: "Red Hat Display";
	font-weight: 500;
	font-optical-sizing: auto;
	line-height: 3rem;
  }	
  .h2-texto-heroe{
	font-size: 1.8rem;
	font-family: "Red Hat Display";
	font-weight: 300;
	font-optical-sizing: auto;
	color: #fff;
  }	
  .testimonios{
	width: 90%;
	background-color: #f1f1f1;
	padding: 3rem 5%;	
	text-align: left;	
	display:flex;
	align-items:center;
	flex-direction: column;
	row-gap:1rem;
  }	
  .titulo-testimonio{
	font-size: 1.8rem;
	font-family: "Red Hat Display";	
	color: #e6873c;
	font-weight: 600;
	font-optical-sizing: auto;
	text-align: left;
  }	
  .texto-testimonio{
	color: #444444;
	font-size: 1rem;
	font-family: "Red Hat Display";
	font-weight: 400;
	line-height: 1.5rem;
	font-optical-sizing: auto;
	text-align: left;
  }	
  .img-redonda{
  	width: 110px;
	height: 110px;
  	height: auto;
  	border-radius: 50%;
  	overflow: hidden;
	border: 1px solid #777;
	object-fit: cover;
  	display: block;	
  }	
  .servicios{
	width: 90%;
	background-color: #fff;
	padding: 3rem 5%;
	text-align: left;
	display: flex;
	align-items:flex-start;
	flex-direction: column;
  }	
  .copy-servicios{
	color: #444444;
	font-size: 1.25rem;
	font-family: "Red Hat Display";
	font-weight: 300;
	line-height: 1.75rem;
	text-align: left;
	font-optical-sizing: auto;
  }	
  .grid-3-columnas{
	margin: auto;
	max-width: 100%;
	padding: 2rem 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));	
	gap:1rem;	
	}
  .titulo-contacto{
	font-size: 2rem;
	font-family: "Red Hat Display";	
	color: #e6873c;
	font-weight: 600;
	font-optical-sizing: auto;
	text-align: center;
   }
  .experiencia{
	width: 90%;
	margin: auto;
	background-color: #fff;
	padding: 3rem 5%;
	text-align: left;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
  }	
  .grid-2-columnas-experiencia{
	margin: 0 auto;
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-row-gap:0rem;		
  }
  .columna-1-qs{
	display: flex;
	row-gap:1rem;
	flex-direction: column;
	order: 2;
  }
  .columna-2-qs{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	order: 1;
  }	
  .carrusel-dots button {
  	width: 20px;
    height: 10px;
    margin: 0.5rem;
    border:none;
    border-radius: 20%;
    background-color: #ccc;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }
  .contenedor-bio{
	width: 90%;
	height: auto;
	background-image: url("../images/fondo-pablo-el-estudio-mobile.png");
	background-position: bottom left;
	background-size: cover;
	margin: 3rem 5%;
	display: flex;
	flex-direction: column-reverse;
	padding: 3rem 0 0 0;
	background-color: aqua;
  }
  .columna-bio-1{
	width: 90%;
	padding: 0 5%;	  
	display: flex;
	align-items:flex-start;
	justify-content:center;
  }
  .columna-bio-2{
	width: 90%;
	padding: 0 5%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
  }	
}