* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
html{font-size: 12px; /* Tamaño base de la fuente */
  scroll-behavior: smooth;}

/* CONTENEDOR GENERAL DE LA PÁGINA WEB */
#wrapper {
  width: 100%;
  background-color: rgb(249, 195, 204);
  }

/* CONTENEDOR DE ESTRUCTURA - INCLUYE EL FONDO, LA BANDA CON EFECTO MULTIPLICAR Y EL CONTENIDO CENTRADO */
.contenedor{
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch; /* estira los hijos a mismo alto */
  }

  nav{
    position: fixed;
    z-index: 3;
    max-width: 1200px;
    width: 80%;
    display: flex;
    pointer-events: none; /* <-- Esto hace que el puntero "atraviese" el nav */
  }


/* --- LOGO --- */
#menu-logo {
  width: 85%;/* <- PONER ESTO EN 80 EN RESPONSIVE  */
  position: relative;
  transition: opacity 0.8s ease;
  visibility:visible;
  opacity: 1;
}

#menu-logo img {
  max-width: 40%;
  margin-top: 70px;
  pointer-events: auto;
  display: block;
  transition:all .5s ease-in-out;
  cursor: pointer;
}
#menu-logo img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#menu-logo a:hover img.hover {
  opacity: 1;
}
#menu-logo a:hover img.normal {
  opacity: 0;
}




#menu-botones{
  
  width: 10%;/* <- PONER ESTO EN 20 EN RESPONSIVE  */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
  transform: translateY(0);
  transition: transform 0.8s ease-in-out;
}


/* --- SIMBOLO/LOGO SCROLL --- */

#simbolo-scroll {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  text-align: center;
  height: auto;
}

#simbolo-scroll img {
  width: 100%;
  display: block;
  margin-top: 20px;
  transition: opacity .5s ease-in-out;
}

#simbolo-scroll img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#simbolo-scroll a {
  position: relative;
  display: inline-block;
  width: 50%; /* ESTABLECE EL ANCHO DE LA IMAGEN DEL SIMBOLO */
}

#simbolo-scroll a:hover img.hover {
  opacity: 1;
}

#simbolo-scroll a:hover img.normal {
  opacity: 0;
}


/* --- TEL --- */

#menu-botones #tel {
  position: relative;
}

#menu-botones #tel img {
  width: 100%;
  height: 70px;
  display: block;
  transition: opacity .5s ease-in-out;
  cursor: pointer;
}

#menu-botones #tel img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#menu-botones #tel a:hover img.hover {
  opacity: 1;
}

#menu-botones #tel a:hover img.normal {
  opacity: 0;
}
/* --- CITA --- */
#menu-botones #cita {
  position: relative;
  margin-top: 15px;
}
#menu-botones #cita img {
  width: 100%;
  display: block;
  transition:all .5s ease-in-out; cursor: pointer;
}
#menu-botones #cita img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#menu-botones #cita a:hover img.hover {
  opacity: 1;
}
#menu-botones #cita a:hover img.normal {
  opacity: 0;
}

/* --- BLOG --- */
#menu-botones #blog {
  position: relative;
  margin-top: 15px;
}
#menu-botones #blog img {
  width: 100%;
  display: block;
  transition:all .5s ease-in-out; cursor: pointer;
}
#menu-botones #blog img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#menu-botones #blog a:hover img.hover {
  opacity: 1;
}
#menu-botones #blog a:hover img.normal {
  opacity: 0;
}

/* --- CONTACTO --- */
#menu-botones #contacto {
  position: relative;
}
#menu-botones #contacto img {
  width: 100%;
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
  transition:all .5s ease-in-out; cursor: pointer;
}
#menu-botones #contacto img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#menu-botones #contacto a:hover img.hover {
  opacity: 1;
}
#menu-botones #contacto a:hover img.normal {
  opacity: 0;
}


/* --- RRSS --- */
#menu-botones .rrss {
  display: flex;
  justify-content: flex-end;
  gap: 10px; /* Espacio entre iconos */
  margin-bottom: 5px;
}

#menu-botones .rrss a {
  position: relative;
  display: inline-block;
}

#menu-botones .rrss img {
  height: 40px;
  display: block;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

#menu-botones .rrss img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#menu-botones .rrss a:hover img.hover {
  opacity: 1;
}

#menu-botones .rrss a:hover img.normal {
  opacity: 0;
}


/* --- IDIOMA --- */
#menu-botones .idioma {
  width: 100%; /* Mantén este ancho para versiones de escritorio */
  margin-top: 20px;
  position: relative;
}

#menu-botones .idioma img {
  width: 30%;
  margin-left: 70%;
  display: block;
  transition: all .5s ease-in-out;
  cursor: pointer;
}

#menu-botones .idioma img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#menu-botones .idioma a:hover img.hover {
  opacity: 1;
}

#menu-botones .idioma a:hover img.normal {
  opacity: 0;
}

#caja-wp-scroll {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 50px;
  width: 100%;
  height: 100%;
}

#scroll-top-btn {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 0;
  padding: 10px;
  background-color: rgb(35, 102, 92); /* Color verde inicial */
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.3s ease;
}

#scroll-top-btn:hover {
  background-color: #fff; /* Cambio a blanco cuando se pasa el puntero */
}

#scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, background-color 0.3s ease; /* Añadimos la transición para el color de fondo aquí */
}

#scroll-top-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(180deg); /* Voltea la imagen verticalmente */
}

#whatsapp-btn {
  position: relative;
  display: inline-block;
  height: 40px;
}

#whatsapp-btn img {
  width: 100%;
  height: 100%;
  display: block;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

#whatsapp-btn img.hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

#whatsapp-btn:hover img.hover {
  opacity: 1;
}

#whatsapp-btn:hover img.normal {
  opacity: 0;
}





/* CONTENEDOR DE IMAGEN DE FONDO A LA IZQUIERDA / DERECHA BUSTOS */
#contenedor1-bg{
  position: absolute;
  top: 10vh;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  display: flex;
  justify-content: flex-start; /* Empuja el <img> a la derecha */
}
#contenedor1-bg img{
  max-width: 50%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 25%;
  object-position: top;
}

/* CONTENEDOR DE IMAGEN DE FONDO A LA DERECHA */
#contenedor2-bg{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  display: flex;
  justify-content: flex-end; /* Empuja el <img> a la derecha */
}
#contenedor2-bg img{
  max-width: 55%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 35%;
  object-position: bottom;
}

/* CONTENEDOR DE ESTRUCTURA DE FONDO - POSICIONADO SOBRE EL CONTENEDOR DE IMAGEN DE FONDO */
.contenedor-bg-spaces{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.contenedor-bg-spaces-izquierda{
  width: 10%;
  flex:1;
  display: flex; /* <- Para centrar el hijo */
  justify-content: center;
}
.contenedor-bg-spaces-izquierda-verde{
  width: 50%;
  background-color: rgb(16, 133,116);/* <- No es el verde real, es un verde que multiplicado es muy similar al verde corporativo */
}
.contenedor-bg-spaces-centro{
  width: 80%;
  max-width: 1200px;
}
.contenedor-bg-spaces-derecha{
      width: 10%;
      flex:1;
}

/* CONTENEDOR DE CONTENIDO */
.contenedor-main{
  width: 80%;
  max-width: 1200px;
  z-index: 2;

}
#abogada-sistemica{
  margin-top: 550px;
  width: 85%; /* <- PONER ESTO EN 80 EN RESPONSIVE  */
  display: flex;
  flex-wrap: wrap;
  padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
}
#abogada-sistemica #titulo{
  width: 100%;

}
#abogada-sistemica #titulo h1{
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
    font-size: 10rem;
    line-height: 7.5rem;
    letter-spacing: -2px;
    color: white;
}
#abogada-sistemica #descripcion{
  width: 50%;
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: white;
  padding-top: 50px;

}

  #abogada-sistemica #btn-servicios{
    width: 50%;
  padding-top: 50px;
    display: flex;
align-items: flex-end;
justify-content: flex-start;
padding-left: 10%;/* <- DISTANCIA RESPECTO CAJA DE TEXTO  */
}
#abogada-sistemica #enlace{
  width: 100%;
  padding-top: 60px;
}
  #abogada-sistemica #enlace a{
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
    font-size: 8rem;
    line-height: 5rem;
    letter-spacing: -2px;
    color: rgb(216, 64, 115);
    transition:all .5s ease-in-out; cursor: pointer;
    
  }
  #abogada-sistemica #enlace a:hover{
    color: rgb(35, 102, 92);
  }




  #abogada-sistemica-desarrollo{
    margin-top: 200px;
    width: 85%;
    padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
  }
  #abogada-sistemica-desarrollo #titulo{
    width: 100%;

  }
  #abogada-sistemica-desarrollo #titulo h3{
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
    font-size: 6rem;
    line-height: 4.75rem;
    letter-spacing: -1px;
    color: white;
  }
  .caja-info {
    width: 100%;
    padding: 50px;
    margin-top: 60px;
    border: 5px solid white;
  }
  .caja-info h4{
    font-size: 2.75rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
    color: white;
  }
  .caja-info h5{
    font-size: 2rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
    color: white;
  }
  .caja-info p{
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: white;
  }



  #servicios{
    margin-top: 150px;
    width: 85%;
    padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
  }

  #servicios h2{

    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
    font-size: 8rem;
    letter-spacing: -2px;
    color: rgb(35, 102, 92);

  }
  #servicios h6{

    font-size: 2.5rem;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
    color: white;
    line-height: 2.5rem;
    padding-top: 25px;

  }

  #servicios #menu{
    display: flex;
    justify-content: space-between;
    gap: 5%;
    padding-top: 75px;
    text-align: center;
  }
 #servicios #menu .boton{
  flex: 1;
  aspect-ratio: 1 / 1; /* mantiene forma cuadrada */
  background-color: white;
 
  }
  #servicios #menu .boton a{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.8rem;
    line-height: 2.6rem;
    color: rgb(249, 195, 204);
    text-decoration: underline;
    transition:all .5s ease-in-out; cursor: pointer;

  }
  #servicios #menu .boton a:hover{
    background-color: rgb(35, 102, 92);

  }

  #servicios #otros-servicios{
    margin-top: 45px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.8rem;
    color: white;
  }
  #servicios #otros-servicios span{
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.8rem;
    color: rgb(35, 102, 92);
    text-transform: uppercase;
  }
  #servicios #otros-servicios a{
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.8rem;
    color: white;
    transition:all .5s ease-in-out; cursor: pointer;
  }

  #servicios #otros-servicios a:hover{ color: rgb(35, 102, 92);}

  #servicios #otros-servicios span.aclaraciones{font-size: 1.25rem;    font-weight: normal;
    line-height: normal; text-transform: none; color: white;}
.linea-separador{
  display: flex; /* Usamos flexbox en el contenedor */
  justify-content: flex-start; /* Centra el contenido horizontalmente */
  align-items:center; /* Centra el contenido verticalmente (si lo necesitas) */
  height: 150px;
  width: 85%;
  padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
}
.linea-separador .linea{
  width: 100%; /* La línea ocupará el 60% del ancho del contenedor */
  height: 3px; /* El grosor de la línea */
  background-color: rgb(35, 102, 92); /* El color de la línea */
}

#valores{
  margin-top: 80px;
  width: 85%;
  padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
}
#valores h2{

  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  font-size: 8rem;
  letter-spacing: -2px;
  color: rgb(35, 102, 92);

}


.valores-contenedor {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Fila base */
.fila {
  width: 100%;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  color: white;
  text-align: center;
}

/* Fila 1 */
.fila1 {
  background-color: rgba(35, 102, 92, 0.4);
  padding: 25px;
  font-size: 3rem;
  line-height: 2.5rem;
  border-left: 5px solid white;
  border-right: 5px solid white;
}

/* Fila 2 con 3 columnas */
.fila2 {
  font-size: 2rem;
  line-height: 1.8rem;
  display: flex;
  background-color: rgba(35, 102, 92, 0.9);

}
.fila2 .col1 {
  flex: 1;
  padding: 25px;
  border-left: 5px solid white;

}
.fila2 .col2 {
  flex: 1;
  padding: 25px;
  border-left: 5px solid white;
  border-right: 5px solid white;

}
.fila2 .col3 {
  flex: 1;
  padding: 25px;
  border-right: 5px solid white;

}

/* Fila 3 */
.fila3 {
  font-size: 3rem;
  line-height: 2.5rem;
  padding: 25px;
  border-bottom: 5px solid white;
  background-color: rgba(35, 102, 92, 0.60);
}

/* Fila 4 con 2 columnas */
.fila4 {
  font-size: 2rem;
  line-height: 1.8rem;
  display: flex;
  background-color: rgba(35, 102, 92, 0.5);
}
.fila4 .col1 {
  flex: 1;
  padding: 25px;
  border-right: 5px solid white;
}
.fila4 .col2 {
  flex: 1;
  padding: 25px;
}

/* Fila 5 */
.fila5 {
  font-size: 3rem;
  line-height: 2.5rem;
  padding: 25px;
  background-color: rgba(35, 102, 92, 0.8);
  border-left: 5px solid white;
  border-right: 5px solid white;
}




footer{
  margin-top: 50px;
  width: 85%;
  padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
}
footer ul {
  list-style: none;
}
footer li a{
  font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
    color: rgb(35, 102, 92);
    transition:all .5s ease-in-out; cursor: pointer;
}
footer li a:hover{
  color: white;
   
}



footer #misc {
  width: 100%;
  display: flex;
  margin-top: 50px;
}

footer #simbolo {

  display: flex;  /* Usamos flex para alinear la imagen dentro del contenedor */
  justify-content: flex-start;  /* Centra la imagen horizontalmente */
  align-items: flex-end;  /* Centra la imagen verticalmente */
}
footer #simbolo img {
  height: 160px;
}

/* --- RRSS --- */
footer #caja {
  display: flex;
  flex-direction: column;
  height: 160px; /* Altura total */
  align-items: center;
  justify-content: flex-end; /* Empuja el <img> a la izquierda */
  gap: 5px;
  margin-left: 15px;
  margin-right: 15px;
}

footer #caja .rrss {
  display: flex;
  position: relative;

}

footer #caja .rrss img {
  height: 50px;
  display: block;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}

footer #caja .rrss img.hover {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0; /* Oculta la imagen verde por defecto */
}

footer #caja .rrss a:hover img.hover {
  opacity: 1; /* Muestra la imagen verde al hacer hover */
}

footer #caja .rrss a:hover img.normal {
  opacity: 0; /* Oculta la imagen original al hacer hover */
}


footer #enlaces {
  width: 100%;  /* Ocupa el espacio restante */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
footer #enlaces ul{
  text-align: right;
}

footer #enlaces ul li{
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2rem;
  color: rgb(35, 102, 92);
  margin-bottom: 5px;
  text-decoration: underline;
  transition:all .5s ease-in-out; cursor: pointer;
}

footer #firmalegal {
  width: 100%;  /* Ocupa el espacio restante */

  margin-top: 50px;
  margin-bottom: 50px;
}
footer #firmalegal p{
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: white;
}
footer #firmalegal a{
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: white;
  transition:all .5s ease-in-out; cursor: pointer;
}

footer #firmalegal a:hover{
  color: rgb(35, 102, 92);
}


/* Firma Genotipe */
footer #firma-web-genotipe{margin-top: 5px;}
footer #firma-web-genotipe a {
  color: white;
  text-decoration: none;
  transition:all .5s ease-in-out; cursor: pointer;

}

footer #firma-web-genotipe a:hover {
  color: #D20078;
}


.boton-circulo{
  background-color: white;
  border-radius: 60px;
  width: 60px;
  height: 60px;
text-align: center;
transition:all .5s ease-in-out; cursor: pointer;
}
.boton-circulo:hover{background-color: rgb(35, 102, 92);}


.boton-circulo img {
  height: 55px;
  padding-top: 6px;
  width: auto;
	cursor: pointer;
}

.bounce {
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  animation: bounce 6s ease infinite;
  transform-origin: 50% 50%;
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(-1px);
  }
  80% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}













/* SECCIONES */
#contenedor-bg-secciones{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  display: flex;
  justify-content: flex-start; /* Empuja el <img> a la derecha */
}
#contenedor-bg-secciones img{
  max-width: 50%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 20%;
  object-position: top;
}
footer.secciones{
  margin-top: 200px;
  width: 85%;
  padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
}
#secciones{
  margin-top: 550px;
  width: 85%; /* <- PONER ESTO EN 80 EN RESPONSIVE  */
  display: flex;
  flex-wrap: wrap;
  padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
}
#secciones #titulo{
  width: 100%;

}
#secciones #titulo h1{
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
    font-size: 10rem;
    line-height: 6rem;
    letter-spacing: -2px;
    color: white;
}
#secciones #titulo h1 span{
  font-size: 8rem;
  line-height: 6.5rem;
}
#secciones #titulo h2{

  font-size: 3.5rem;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  color: white;
  line-height: 3.15rem;
  padding-top: 35px;

}

#secciones #subtitulo h2{
  font-size: 4rem;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  color: rgb(35, 102, 92);
  line-height: 3.5rem;
  padding-top: 50px;

}

#secciones #titulo h2 span{

  color: rgb(35, 102, 92);

}
#secciones #descripcion{
  width: 100%;
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: white;
  padding-top: 50px;
  
}
#secciones #descripcion a{
  color: white;
  transition:all .5s ease-in-out; cursor: pointer;
}
#secciones #descripcion a:hover{
  color: rgb(35, 102, 92);
}
.mayus{
  text-transform: uppercase;
}
.mayus-verde{
  text-transform: uppercase;
  color: rgb(35, 102, 92);
}
.destacado{  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 2rem;}

#secciones #descripcion span .destacado{
  color: rgb(35, 102, 92);}

#secciones #cajafoto{
margin-top: 50px;
}

#secciones #cajafoto img{width: 100%;
  border: 3px solid rgb(35, 102, 92);
padding: 15px;}

#secciones #descripcion .telefono a{
  font-size: 1.8rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: white;
  transition:all .5s ease-in-out; cursor: pointer;
}
#secciones #descripcion .telefono a:hover{color: rgb(35, 102, 92);}

#secciones #descripcion .email a{
  font-size: 1.8rem;

  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: white;
  transition:all .5s ease-in-out; cursor: pointer;
}
#secciones #descripcion .email a:hover{color: rgb(35, 102, 92);}


#secciones #descripcion .horario{
  width: 100%;
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: white;
  padding-top: 50px;
}
#titulo-blog h1{
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  font-size: 6rem;
  line-height: 4.75rem;
  letter-spacing: -1px;
  color: white;
}

#secciones #descripcion-blog{
  width: 100%;
  font-size: 1.5rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: rgb(35, 102, 92);
  padding: 50px 0px 50px 25px;
  margin-top: 50px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
);
  
}


#secciones #descripcion-blog .cita{
  font-size: 1rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
  color: rgb(35, 102, 92);
  
}

#secciones #navegacion-blog{
  font-size: 1.25rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: rgb(35, 102, 92);
  margin-top: 50px;
  
}
#secciones #navegacion-blog a{
  font-size: 1.25rem;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: white;
  cursor: pointer;
  transition:all .5s ease-in-out;
}
#secciones #navegacion-blog a:hover{
  color: rgb(35, 102, 92);
}

#secciones-desarrollo{
  margin-top: 100px;
  width: 85%;
  padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
}
#secciones-desarrollo #caja-contenido{
  margin-top: 100px;
  width: 100%;
  padding-right: 3%;/* <- SEPARACIÓN DEL MENÚ */
  padding-left: 20px;
  padding-top: 25px;
  padding-bottom: 20px;
  background-color: rgba(35, 102, 92, 0.8);
}
#secciones-desarrollo ul{color: rgb(249, 195, 204);}
#secciones-desarrollo li{ margin-bottom: 10px;}
#secciones-desarrollo li a{font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  color: rgb(249, 195, 204);
  text-decoration: underline;
  transition:all .5s ease-in-out;
  cursor: pointer;}
  #secciones-desarrollo li a span{font-family: "Lato", sans-serif;
  font-size: 1rem;
}
#secciones-desarrollo li a:hover{color: white;}

#secciones-desarrollo #titulo{
  margin-top: 100px;
  width: 100%;
}
#secciones-desarrollo #titulo h3{
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  font-size: 4.5rem;
  line-height: 4rem;
  letter-spacing: -1px;
  color: white;
}
#secciones-desarrollo #caja-contenido .botondescargas{margin-left: 15px;}











































































/* ESTILOS ADAPTADOS PARA LA VERSIÓN RESPONSIVE SECCIONES*/

@media (max-width: 1024px){
  #contenedor-bg-secciones img{max-width: 70%;}
  #secciones{
      margin-top: 400px; /* <- 550 original */
      width: 80%; /* <- PONER ESTO EN 80 EN RESPONSIVE 85 original  */}
  #secciones #descripcion{
      font-size: 1.3rem; /* <- 1.5 original  */}
  #secciones #descripcion-blog{
    font-size: 1.3rem;/* <- 1.5 original  */}
  #secciones-desarrollo{
    width: 80%; /* <- PONER ESTO EN 80 EN RESPONSIVE 85 original  */ }
  footer.secciones{
    width: 80%;/* <- 85 original  */
    margin-top: 100px;/* <- 200 original  */
  }

    

  #contenedor1-bg img{max-width: 70%;}
  #contenedor2-bg img{max-width: 70%;}

  #menu-logo {width: 85%;}/* <- PONER ESTO EN 85 EN RESPONSIVE 85 original */
  #menu-logo img {max-width: 50%;}
  #menu-botones{width: 15%;/* <- PONER ESTO EN 15 EN RESPONSIVE 25 original */}

  #abogada-sistemica{
    margin-top: 400px; /* <- 550 original */
    width: 80%; /* <- PONER ESTO EN 80 EN RESPONSIVE 85 original  */}
  #abogada-sistemica #descripcion{
    width: 80%;/* <- 50 original  */
    font-size: 1.3rem; /* <- 1.5 original  */
    padding-top: 50px;}
    #abogada-sistemica #btn-servicios{
    width: 20%; /* <- 50 original  */
    justify-content: center;
    padding-left: 0%;}
  #abogada-sistemica-desarrollo{
    margin-top: 150px;/* <- 200 original  */
    width: 80%; /* <- PONER ESTO EN 80 EN RESPONSIVE 85 original  */ }
  #abogada-sistemica-desarrollo #titulo h3{
    font-size: 4.3rem; /* <- 6 original  */
    line-height: 3.8rem; /* <- 4.75 original  */}
#titulo-blog h1{
      font-size: 4.3rem; /* <- 6 original  */
      line-height: 3.8rem; /* <- 4.75 original  */} 
  .caja-info p{
    font-size: 1.3rem;/* <- 1.5 original  */}
    #servicios{
      margin-top: 100px; /* <- 150 original  */
      width: 80%;/* <- 85 original  */
      }#servicios #menu {
        flex-direction: column;
        gap: 20px;
      }
    
      #servicios #menu .boton {
        aspect-ratio: auto; /* Deja que la altura se adapte al contenido */
      }
      #servicios #menu .boton a{
        padding: 50px;/* <- definido para este estilo - no existe en versión normal  */
    
      }
      .linea-separador{
        width: 80%;/* <- 85 original  */
      }
      #valores{
        margin-top: 40px;/* <- 80 original  */
        width: 80%;/* <- 85 original  */
      }
      footer{
        width: 80%;/* <- 85 original  */
      }
}

@media (max-width: 800px) {
  nav {
    width: 90%;
    padding-left: 5%;
    box-sizing: border-box;
}
#menu-logo img {max-width: 60%;}
  #contenedor-bg-secciones img{max-width: 90%;}
  #secciones #titulo h1{
    font-size: 6.8rem; /* <- 10 original  */
    line-height: 3rem; /* <- 6 original  */}
    #secciones #titulo h1 span{
      font-size: 5rem;/* <- 8 original  */
    }
    #secciones-desarrollo #titulo h3{
      font-size: 3.5rem;/* <- 4.5 original  */
      line-height: 3rem;/* <- 4 original  */}
      #secciones-desarrollo #caja-contenido{
        margin-top: 80px;/* <- 100 original  */
        padding-top: 50px;/* <- 25 original  */
        padding-bottom: 30px;/* <- 25 original  */}
      #secciones-desarrollo li{ margin-bottom: 20px;/* <- 10 original  */}
      #secciones-desarrollo li a{font-family: "Lato", sans-serif;
        font-size: 1.3rem; /* <- 1.5 original  */}

  #contenedor1-bg img{max-width: 90%;}
  #contenedor2-bg img{max-width: 90%;}


  #menu-logo {width: 80%;}/* <- PONER ESTO EN 80 EN RESPONSIVE 85 original */
  #menu-botones{width: 20%;/* <- PONER ESTO EN 20 EN RESPONSIVE 25 original */
    align-items: center;
  }
  #menu-botones #cita,
  #menu-botones #blog,
  #menu-botones #contacto {
      width: 100%;
  }


  #simbolo-scroll a {
    width: 70%; /* ESTABLECE EL ANCHO DE LA IMAGEN DEL SIMBOLO */
  }
 
  #menu-botones .idioma img {
    width: 32.5%;
    margin-left: 33%;}
  #caja-wp-scroll {
  align-items: center;}
  #abogada-sistemica #titulo h1{
    font-size: 6.8rem; /* <- 10 original  */
    line-height: 5rem; /* <- 7.5 original  */}
  #abogada-sistemica #descripcion{
    width: 100%;/* <- 50 original  */}
  #abogada-sistemica #btn-servicios{
    width: 100%; /* <- 50 original  */
    justify-content: flex-start;
    }
  #abogada-sistemica #enlace a{
    font-size: 5.25rem; /* <- 8 original  */
    line-height: 5rem;/* <- 5 original  */
    }
  #abogada-sistemica-desarrollo{
    margin-top: 100px;/* <- 200 original  */}

  #abogada-sistemica-desarrollo #titulo h3{
    font-size: 3.8rem; /* <- 6 original  */
    line-height: 3.3rem; /* <- 4.75 original  */}
#titulo-blog h1{
      font-size: 3.8rem; /* <- 6 original  */
      line-height: 3.3rem; /* <- 4.75 original  */
    }
  .caja-info {
    padding: 50px 20px; /* <- 50 original  */}
  .caja-info h4{
    font-size: 2.2rem;/* <- 2.75 original  */
    }
  .caja-info h5{
    font-size: 1.6rem;/* <- 2 original  */
    }

  #servicios h2{
    font-size: 6.2rem;/* <- 8 original  */}

    
    #servicios #menu{
      padding-top: 50px;/* <- 75 original  */
    }
    #valores h2{
      font-size: 6.2rem;/* <- 8 original  */ }
    /* Fila 1 */
.fila1 {
  font-size: 2.5rem;/* <- 3 original  */
  line-height: 2.2rem;/* <- 2.5 original  */
}

/* Fila 2 con 3 columnas */
.fila2 {
  display: block;}
.fila2 .col1 {
  border-left: 0px solid white;
  border-bottom: 5px solid white;}
.fila2 .col2 {
  border-left: 0px solid white;
  border-right: 0px solid white;
  border-bottom: 5px solid white;}
.fila2 .col3 {
  border-right: 0px solid white;}

/* Fila 3 */
.fila3 {
  font-size: 2.8rem;/* <- 3 original  */
  line-height: 2.5rem;/* <- 2.5 original  */
  border-top: 5px solid white;
}
/* Fila 4 con 2 columnas */
.fila4 {
  line-height: 1.6rem;
}
.fila4 .col1 {
  padding: 15px;
}
.fila4 .col2 {
  padding: 15px;
}
/* Fila 5 */
.fila5 {
  font-size: 2.5rem;/* <- 3 original  */
  line-height: 2rem;/* <- 2.5 original  */
}
footer li a{
  font-size: 1.8rem;/* <- 2 original  */
  line-height: 3rem;
}
footer #misc {
  flex-direction: column;
}
footer #simbolo img {
  height: auto;/* <- 160 original  */
  width: 105px;
}
/* --- RRSS --- */
footer #caja {
  flex-direction:initial;
  height: 100px; /* <- 160 original  */
  align-items: center;
  justify-content: flex-start; /* Empuja el <img> a la izquierda */
  margin-left: 0px;
  margin-right: 0px;
}
footer #enlaces {
  justify-content: flex-start;}
footer #enlaces ul{
  text-align: left;}
footer #enlaces ul li{
  font-size: 1.8rem;/* <- 2 original  */}


footer #firmalegal p{
  font-size: 0.8rem;/* <- 1 original  */}
footer #firmalegal a{
  font-size: 0.8rem;/* <- 1 original  */}


  
}

@media (max-width: 450px) {
  #menu-logo img {max-width: 80%;}
  #secciones #titulo h1{
    font-size: 6rem; /* <- 10 original  */
    line-height: 1.5rem; /* <- 6 original  */
}
    #secciones #titulo h1 span{
      font-size: 4rem;/* <- 8 original  */
      line-height: 7rem;/* <- 6.5 original  */
    }
    #secciones #titulo h2 {
      font-size: 3rem;/* <- 3.5 original  */
      line-height: 2.65rem;/* <- 3.15 original  */
    }
    #secciones #subtitulo h2{
      font-size: 2.5rem;/* <- 4 original  */
      line-height: 2.25rem;/* <- 3.5 original  */
    
    }
    #secciones-desarrollo #titulo h3{
      font-size: 2.8rem;/* <- 4.5 original  */
      line-height: 2.5rem;/* <- 4 original  */}

    #abogada-sistemica #titulo h1{
      font-size: 6rem; /* <- 10 original  */
      line-height: 4.8rem; /* <- 7.5 original  */}
    #abogada-sistemica #enlace a{
      font-size: 4.8rem; /* <- 8 original  */
      }
    #abogada-sistemica-desarrollo #titulo h3{
      font-size: 3.25rem; /* <- 6 original  */
      line-height: 3rem; /* <- 4.75 original  */}
#titulo-blog h1{
        font-size: 3.25rem; /* <- 6 original  */
        line-height: 3rem; /* <- 4.75 original  */}
    .caja-info h4{
      font-size: 2rem;/* <- 2.75 original  */
      }
    .caja-info h5{
      font-size: 1.5rem;/* <- 2 original  */
      }
  
    #servicios h2{
      font-size: 5.8rem;/* <- 8 original  */}
      #servicios #menu .boton a{
        font-size: 2rem;/* <- 2.8 original  */
        line-height: 2rem;/* <- 2.6 original  */
    
      }

      #valores h2{
        font-size: 5.8rem;/* <- 8 original  */ }
      /* Fila 1 */
  .fila1 {
    font-size: 2.25rem;/* <- 3 original  */
    line-height: 2rem;/* <- 2.5 original  */
  }
  /* Fila 3 */
  .fila3 {
    font-size: 2.25rem;/* <- 3 original  */
    line-height: 2rem;/* <- 2.5 original  */
  }
  /* Fila 5 */
  .fila5 {
    font-size: 2.25rem;/* <- 3 original  */
    line-height: 2rem;/* <- 2.5 original  */
  }
  footer li a{
    font-size: 1.25rem;/* <- 2 original  */
    line-height: 1.75rem;
  }
  footer #enlaces ul li{
    font-size: 1.25rem;/* <- 2 original  */
    line-height: 1.75rem;
  }
  
}

@media (max-width: 400px) {
  #secciones #titulo h1{
    font-size: 5rem; /* <- 10 original  */
    line-height: 0rem; /* <- 6 original  */}
    #secciones #titulo h1 span{
      font-size: 3rem;/* <- 8 original  */
    }
    #secciones #titulo h2 {
      font-size: 2.25rem;/* <- 3.5 original  */
      line-height: 2.15rem;/* <- 3.15 original  */
    }
    #secciones-desarrollo #titulo h3{
      font-size: 2.25rem;/* <- 4.5 original  */
      line-height: 2.15rem;/* <- 4 original  */}

    #abogada-sistemica #titulo h1{
      font-size: 5.5rem; /* <- 10 original  */
      line-height: 4.5rem; /* <- 7.5 original  */}
    #abogada-sistemica #enlace a{
      font-size: 4.5rem; /* <- 8 original  */
      }
    #abogada-sistemica-desarrollo #titulo h3{
      font-size: 3rem; /* <- 6 original  */
      line-height: 2.8rem; /* <- 4.75 original  */}
#titulo-blog h1{
        font-size: 3rem; /* <- 6 original  */
        line-height: 2.8rem; /* <- 4.75 original  */
      }
    .caja-info h4{
      font-size: 1.6rem;/* <- 2.75 original  */
      text-transform: uppercase;
      }
    .caja-info h5{
      font-size: 1.25rem;/* <- 2 original  */
      text-transform: uppercase;
      margin-top: 25px;
      }
  
    #servicios h2{
      font-size: 5.25rem;/* <- 8 original  */}
      #servicios h6{
        font-size: 2.25rem;/* <- 2.5 original  */
        line-height: 2.1rem;/* <- 2.5 original  */
      }

      #valores h2{
        font-size: 5.25rem;/* <- 8 original  */ }

    /* Fila 4 */
  .fila4 {
    font-size: 1.8rem;/* <- 2 original  */
    line-height: 1.5rem;/* <- 1.8 original  */
  }


  
}