* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
body{
    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--colorFondo);
    width:100vw;
    height:auto;
    overflow-x:hidden;
    
}

@font-face {
  font-family: 'Satisfy';
  src: url('/Utils/fonts/Satisfy-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


:root{
    
    --colorVerdeOscuro:#735E20;
    --colorRosaPiel:#A66E4E;
    --colorRosaclaro:#F2AB91;
    --colorFondo:#F2F2F2;
    --colorNegro:#0D0D0D;
    --triadico1:#5e2073;
    --triadico2:#20735e;
    --complementario:#203573;
    --colorNegroCalido:#2a2a2a;
    --colorGrisCalidoOscuro: #e0ddd5;
    --colorDoradoOscuro:#86652b; 
    --colorGrisBeige:#e4e0d7;
    --colorHoverBotones:#b69c73;
    --colorTonoDoradoCalido:#d9b96f;
    --colorOroAmarillo:#f1c40f;
    --colorMarfilsuave:#f4f1ea;
    --colorOroCalido:#d6b161;
    --colorTextoGrisOscuro:#333;
    --colorNegroCalido1:#1a1a1a;
    --colorGrisClaroFondoCard:#f6f6f6;
    --colorBlancoFondo:#fefefe;
}

html{
  scroll-behavior:smooth;
}
.back-to-top {
  position: fixed;
  bottom: 4vh;
  right: 3vw;
  z-index: 99;
  display: none;
  background: none;
 /* color: var(--colorOroAmarillo);*/
  border-radius: 50%;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.3s, background 0.3s;
  text-decoration: none;
  border:none;
}

.back-to-top:hover {
  opacity: 1;
}

.logo-svg{
    width: 20vw;
    max-width:150px;  
}

/**********************************************************************
***********************************************************************
*********************   Header Movil***********************************
***********************************************************************
***********************************************************************/
 h1 {
  font-size: calc(1.05rem + .8vw);
  font-weight:600;
  text-shadow: .4px .4px 1px var(--colorOroCalido);
  text-align: center;
  width:auto;
  color:var(--colorDoradoOscuro);

}
h1 a {
  text-decoration: none;
  color:inherit;
}


.encabezado{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  font-family: 'poppins', 'Ui Segoe',sans-serif;
  width:100%; 
 
}

header{
background-color:var(--colorNegroCalido);
width:100%;
overflow:hidden;
box-shadow: 1.2px 1.2px 6px var(--colorTextoGrisOscuro);
height:auto;
max-height:700px;
padding-top:2rem;
padding-bottom:2rem;
}
nav.escritorio{
  display:none;
}

nav.movil{
  display:flex;
}
nav.movil ul{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
  width:35vw;
  left:0;
  top:-150px;
 /* transform:translateY(-15rem);*/
  height:100vh;
  z-index:10;
  color:var(--colorNegroCalido1);
  visibility:visible;
  list-style: none;
  gap:20px;
  margin-top:12rem;
 
}
nav.movil{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
  width:50vw;
  max-width:280px;
  top:-18rem;
  height:100vh;
  background-color:var(--colorDoradoOscuro);
  z-index:10;
  box-shadow:1.2px 1.2px 6px var(--colorTextoGrisOscuro);
  opacity:1;
  position: fixed;
  top: 0;
  left: -100%;
  padding-top: 20px;
  transition: left 0.7s ease;
  font-family:'poppins', 'Segoe UI', sans-serif;
  z-index:99;
  box-shadow: .7px .8px 3px var(--colorTextoGrisOscuro);
  border-radius: 4px;
}

 nav.movil ul a {
  text-decoration: none;
  color: var(--colorNegro);
  text-shadow:.6px .6px 2px var(--colorTextoGrisOscuro);
  font-weight: 500;
  text-align: center;
  position: relative;
  display:inline-block;
  padding-bottom:2px;
  transition: transform 0.5s ease-in-out;
  
}

nav.movil ul li a::after{
   content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: .2px;
  width: 0%;
  background-color: var(--colorTonoDoradoCalido); 
  transition: width 0.8s ease-in-out;
}
nav.movil ul li a:hover{
  transform: scale(1.05); 
  color: var(--colorTonoDoradoCalido);
}
nav ul li a:hover::after{
  border-bottom:2px solid var(--colorDoradoCalido);
       width:100%;
}

.Subtitulo {
  text-align: center;
  color: var(--colorDoradoOscuro);
  font-size: calc(.9rem + 1vw);
  font-weight: 600;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
 
}

.logo a {
  display: inline-block;
  line-height: 1;
  height:100px;
  vertical-align:middle;

}


.logo-svg.movil {
  display: inline-block;
  margin: 0 auto;
  /* Quita transformaciones verticales si el logo se desajusta */
  transform: none;
  position: static;
  width: 20vw;
  max-width: 100px;
  height: auto;
  vertical-align:middle;
  margin-top:3rem;
  
}





.hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 100;
}

 .hamburger span {
  display: block;
  width: 30px;
  height: 4px;
  background-color: var(--colorTonoDoradoCalido);
  margin: 6px 0;
  transition: all 0.3s ease;
  border-radius: 30%;
  box-shadow: .7px .7px 1px var(--colorTextoGrisOscuro);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#menu-toggle:checked ~ #menu {  
  left: 0;
}

#menu-toggle:checked + .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 10px);
}

#menu-toggle:checked + .hamburger span:nth-child(2) {
  opacity: 0;
}

#menu-toggle:checked + .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(3px, -6px);
}
input {
   visibility: hidden;
}

#andrea{

  scroll-margin-bottom:8rem;
}

.logo-svg {
  display: block;
  margin: 0 auto;
  height: auto;
  width: 20vw;
  max-width: 150px;
  --logo-stroke:var(--colorDoradoOscuro); /* Dorado elegante para escritorio */
  pointer-events: none;
}

@media (max-width: 768px) {
  .logo-svg { display: none; }
  .logo-svg.movil { display: block; 
  }

.header-burger-portada {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    /*background-color: white;*/
    padding: 10px;
  }

  /*Prueba solución visibilidad ancho pantalla móvil*/
  header {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-left: 0;
    padding-right: 0;
  }

  .encabezado {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0 1rem; /* pequeño padding lateral */
    box-sizing: border-box;
  }

  .logo,
  .NombreCompleto {
    width: 100%;
    text-align: center;
  }

  .logo-svg.movil {
    width: 25vw;
    max-width: 90px;
  }


}
/****************************************************************************
******************************Salto******************************************
****************************************************************************/
@media (min-width:769px){
   .logo-svg { display: block; }
  .logo-svg.movil { display: none; }

nav.escritorio{
  display:flex;
 width:100vw;
 height:auto;
 max-height:500px;
 align-items:center;
 justify-content:center;

}



nav.movil{
  display:none;
}
.hamburger{
  display:none;
}
h1 a {
  text-decoration: none;
  color:inherit;
}

.encabezado{ 
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-direction: row;  
    left:2vw;
       
}
nav.escritorio ul {
     list-style: none;
     display:flex;
     align-items:center;
     justify-content:center;
     font-size: calc(.7rem + .6vw);
     padding: 1.2vw;
     margin-left:2.5vw;
     text-shadow: .3px .3px .3px var(--colorHoverBotones);
     
}
nav.escritorio ul li {
    padding: 1.2vw; 
}

nav.escritorio ul li a {
    text-decoration:none;
    color:inherit;
    transition:text-decoration 0.5s ease; 
    position: relative;
    display:inline-block;
    padding-bottom:2px;
    transition: transform 0.3s ease-in-out;
}
nav.escritorio ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: .2px;
  width: 0%;
  background-color: var(--colorDoradoOscuro); 
  transition: width 0.8s ease-in-out;
  
}
nav.escritorio ul li a:hover {
  transform: scale(1.05); 

}

nav.escritorio ul li a:hover::after{
       border-bottom:2px solid var(--colorDoradoOscuro);
       width:100%;    
}

header{
     margin-bottom:15vh;
     width:100%; /*cambiado por % */
     height:40vh;
     max-height:600px;
     font-weight: 500;
     background-color:var(--colorNegroCalido);
     color: var(--colorDoradoOscuro);
     box-shadow:1.2px 1.2px 6px var(--colorTextoGrisOscuro);
     padding-top:1.2rem;
     padding-bottom:1.2rem;
}
.Subtitulo{
    margin-left: 2vw;
    margin-top:-3vh;
    font-size: calc(.8rem + .9vw);
    text-shadow: .3px .3px .3px var(--colorHoverBotones);
    text-align: center;
    font-family:'poppins', 'Segoe UI', sans-serif;
    font-weight: 400;
}

}

/*********************************************************************************
**********************************************************************************
************************************** HERO ************************************************
**********************************************************************************
*********************************************************************************/

.hero{
      width:100vw;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction: row;
      flex-wrap: wrap;
      /*margin-top:10rem;
      margin-bottom:12rem;*/
}
.textohero{
  width:95vw;
  order:1;
  gap:.5vw;
}
.textoHero h2{
    margin-bottom:2vh;
   /*font-size: calc( 1rem + 1.8vw);*/
    font-size: calc(1.3rem + .8vw);
    font-family:'Poppins', 'Roboto', 'Segoe-UI';
    width:100%;
    text-align: center;
    line-height:1.2;
}
.textoDeclaracion{
  order:3;
  width:40vw;
}
 .textoDeclaracion h3{
   margin-bottom:3vh;
    padding:4vh;
    font-size: calc( .8rem + 1.8vw);
    font-family:'Satisfy', cursive ;
    width:100%;
    line-height:1.1;

 }
.Foto {
    order:2;
}
.Foto img {
       width:50vw;
       max-width: 500px;  
       transform:translateY(-2rem); 
}
.CTA {
      display:flex;
      align-items:center;
      justify-content:center;
      width:70vw;
      gap:2vw;
      margin-left:2vw;
      cursor:pointer;
      transition:background-color 0.4s ease;
      order:4;
      flex-wrap: wrap;
      flex-direction: row;
      margin-top:3vh;
      position:relative;
      transform:translateY(-1rem);
}
.CTA a {
    text-decoration: none;
    display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(.5rem + .6vw);
  width: 110px;
  min-width: 60px;
  height: 50px;
  max-width:250px;
  border-radius: 8px;
  box-shadow: 1.2px 1.2px 3px var(--colorHoverBotones);
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  padding: 2rem;
  text-align: center;
  transition: transform 0.5s ease;
  text-shadow: .8px .8px 1.2px var(--colorNegroCalido);
     
}


.CV{
    background-color:var(--colorVerdeOscuro);
    color:var(--colorFondo);
   
}

.videoPresentacion{
    background-color: var(--colorRosaclaro);
    color: var(--colorNegroCalido);
    white-space:nowrap; 
    width:500px  !important;
    font-size: calc(.5rem + .5vw);
    
}

.contacto {
       background-color:var(--colorHoverBotones);
       color:var(--colorFondo);
       
}
.CTA a i {
  margin-right: 0.5rem;
  font-size: calc(.7rem + .5vw);
}

.CV:hover, .videoPresentacion:hover, .contacto:hover{
    transform:scale(.95);
    box-shadow: 1.5px 1.5px 4px var(--colorNegroCalido);
}

/****************************************************************************
******************************Salto******************************************
****************************************************************************/

@media (min-width: 320px){

.hero{
     margin-top:8rem;
}

.textoHero h2{
    margin-bottom:2vh;
   /*font-size: calc( 1rem + 1.8vw);*/
    font-size: calc(1.3rem + .8vw);
    font-family:'Poppins', 'Roboto', 'Segoe-UI';
    width:100%;
    text-align: center;
    line-height:1.2;
    margin-bottom:2rem;
}

.textoDeclaracion{
  order:3;
  width:50vw;
}
 .textoDeclaracion h3{
   margin-bottom:3vh;
    padding:.2vh;
    font-size: calc( .7rem + 1.5vw);
    font-family:'Satisfy', cursive ;
    width:100%;
    line-height:1.1;
 }
.CTA {
      display:flex;
      align-items:center;
      justify-content:center;
      width:90vw;
      gap:2vw;
      margin-left:2vw;
      cursor:pointer;
      transition:background-color 0.4s ease;
      order:4;
      flex-wrap: wrap;
      flex-direction: row;
      margin-top:3vh;
      position:relative;
      transform:translateY(-1rem);
}
CTA a{
  width: 80px;
  min-width: 60px;
  height: 50px;
  max-width:100px;
}
a.videoPresentacion {
  max-width:10rem;
  padding: 1rem 2rem;

}
}
@media (min-width:481px) and (max-width: 768px) {

  a.videoPresentacion {
  max-width:15rem;
  padding: 1rem 2rem;
}
}
@media (min-width:769px)and (max-width:1024px){
  div.hero{
      width:100vw;
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 3vh;
}
div.textohero{
    width:70vw;
    order:1;
  
}
div.textoHero h2{
    margin-bottom:2vh;
    padding:3vh;
    font-size: calc( .8rem + 2vw);
    font-family:'Poppins', 'Roboto', 'Segoe-UI';
    width:90vw;
    position:relative;
    text-align: start;
    line-height:1.1;

    
}
div.textoDeclaracion{
  order:2;
  width:55vw;
  position:relative;
  transform:translateY(-0rem);
  left:11vw;
}
 div.textoDeclaracion h3{
    font-size: calc( .6rem + 2vw);
    font-family:'Satisfy', cursive ;
    width:100%;
    
 }
div.Foto {
    order:3;
}
div.Foto img {
       width:45vw;
       max-width: 500px; 
       position:relative;
     transform:translateY(-8rem);
}

div.CTA {
      display:flex;
      align-items:center;
      justify-content:center;
      width:50vw;
      gap:2vw;
      margin-left:2vw;
      cursor:pointer;
      transition:background-color 0.4s ease;
      flex-wrap: wrap;
      position:relative;
      transform:translateY(-3rem);
      left:-8rem;
}
div.CTA a {
    text-decoration: none;
    display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(.5rem + .4vw);
  width: 150px;
  min-width: 100px;
  height: 50px;
  border-radius: 8px;
  box-shadow: 1.2px 1.2px 3px var(--colorHoverBotones);
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  padding: 0.8rem 1rem;
  text-align: center;
  transition: transform 0.5s ease;
  text-shadow: .8px .8px 1.2px var(--colorNegroCalido);
     
}

.CV{
    background-color:var(--colorVerdeOscuro);
    color:var(--colorFondo);
   
}

.videoPresentacion{
    background-color: var(--colorOroCalido);
    color: var(--colorNegroCalido);
    white-space:nowrap; 
    width:500px  !important;
    font-size: calc(.5rem + .5vw);
    
}

 a.videoPresentacion {
  max-width:15rem;
  padding: 1rem 2rem;
}

.contacto {
       background-color:var(--colorHoverBotones);
       color:var(--colorFondo);
       
}
div.CTA a i {
  margin-right: 0.5rem;
  font-size: calc(.7rem + .5vw);
}

div.CV:hover, .videoPresentacion:hover, .contacto:hover{
    transform:scale(.95);
    box-shadow: 1.5px 1.5px 4px var(--colorNegroCalido);
}
}


@media (min-width:1025px) and (max-width:1199px){
/*.hero{
  overflow-x:hidden;
}*/
div .CTA a{
  width: 15rem;
  padding:2rem 1rem;
}

a.videoPresentacion {
  max-width:20rem;
  padding: 1rem 2rem;
  background-color:var(--colorTonoDoradoCalido);
}
div.textohero{
    width:40vw;
    order:1;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align: center;
    flex-wrap:wrap;

}
div.Foto {
    order:3;
}
div.Foto img {
       width:45vw;
       max-width: 500px; 
       position:relative;
}

div.textoHero h2{
    margin-bottom:2vh;
    padding:3vh;
    font-size: calc( .9rem + 2vw);
    font-family:'Poppins', 'Roboto', 'Segoe-UI';
    width:70vw;
    position:absolute;
    line-height:1.25;
    top:18rem;
    left:19rem;
    margin-right:2vw;
    display:inline-flexbox;
    white-space: normal;
    overflow-wrap: break-word;

}
.textoDeclaracion h3{
     margin-bottom:3vh;
    padding:.2vh;
    font-size: calc( .8rem + 2vw);
    font-family:'Satisfy', cursive ;
    width:100%;
    line-height:1.3;
    margin-right:2vw;
    position:relative;
 }

 div.CTA {
    top:-8rem;
    left:12rem;
    flex-wrap: wrap;
    gap:.5rem

 }
div .CTA a{
  width: 12rem;
  padding:2rem .5rem;
  
}
a.videoPresentacion {
  max-width:15rem;
  padding: 1rem 2rem;
  background-color:var(--colorTonoDoradoCalido);
}


}
@media (min-width:1200px){

div.hero{
      width:100vw;
      display:flex;
      align-items:center;
      justify-content:center;
     top:5rem;
    
}
div.textohero{
    width:50vw;
    order:1;
    gap: 3vh;
}
div.textoHero h2{
    margin-bottom:2vh;
    padding:3vh;
    font-size: calc( .8rem + 2vw);
    font-family:'Poppins', 'Roboto', 'Segoe-UI';
    width:55vw;
    position:relative;
    text-align: start;
    left:-12rem;
    line-height: 1.4;
    top:7rem;
}
div.textoDeclaracion{
  order:2;
  width:55vw;
  gap:3vh;
  position:relative;
 transform: translateY(-2rem);
}
 div.textoDeclaracion h3{
   margin-bottom:2vh;
    padding:3vh;
    font-size: calc( .6rem + 2vw);
    font-family:'Satisfy', cursive ;
    width:100%;
    line-height:1.4;
    top:5rem;
 }
div.Foto {
    order:3;
}
div.Foto img {
       width:45vw;
       max-width: 500px; 
       position:relative;
       transform: translateY(1rem);
}

div.CTA {
      display:flex;
      align-items:center;
      justify-content:center;
      width:50vw;
      gap:2vw;
      margin-left:2vw;
      cursor:pointer;
      transition:background-color 0.4s ease;
      margin-bottom:30vh;
      flex-wrap: nowrap;
      position:relative;
      transform:translateY(-5rem);
      left: -12rem;
}
div.CTA a {
    text-decoration: none;
    display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(.6rem + .5vw);
  width: auto;
  min-width: 200px;
  height: 50px;
  border-radius: 8px;
  box-shadow: 1.2px 1.2px 3px var(--colorHoverBotones);
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  padding: 0.8rem 1rem;
  text-align: center;
  transition: transform 0.5s ease;
  text-shadow: .8px .8px 1.2px var(--colorNegroCalido);   
}

.CV{
    background-color:var(--colorVerdeOscuro);
    color:var(--colorFondo); 
}

.videoPresentacion{
    background-color: var(--colorRosaclaro);
    color: var(--colorNegroCalido);
    white-space:wrap; 
    width: auto;
    height:auto;
    font-size: calc(.5rem + .3vw); 
}

.contacto {
       background-color:var(--colorHoverBotones);
       color:var(--colorFondo);    
}
div.CTA a i {
  margin-right: 0.5rem;
  font-size: calc(.7rem + .5vw);
}
div.CV:hover, .videoPresentacion:hover, .contacto:hover{
    transform:scale(.95);
    box-shadow: 1.5px 1.5px 4px var(--colorNegroCalido);
}
}



/***********************************************************************************
************************************************************************************
******************************** Sobre mi ******************************************
************************************************************************************
************************************************************************************/

.sobremi {
    display:flex;
    justify-content:center;
    align-items:center;
    margin: 3vw;
    flex-direction:column;
    width: 100vw; 
}
.sobremi p {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: calc( .8rem + .8vw);
    width:90%;
}

.sobremi h3, h3#Quepuedoaportar, h3#logrosdestacados, 
#testimonios, h3#contacto{
     font-family: 'Poppins', 'Segoe UI', sans-serif;
     font-size: calc(1.3rem + 1.1vw);
     width:100%;
     text-align: center;
     color:var(--colorDoradoOscuro);
     text-shadow: 1.3px 1.3px 2px var(--colorNegroCalido);
}

 .fa-star{ 
    font-size: calc(.7rem + .5vw);
    color: var(--colorDoradoOscuro);
    text-shadow: .8px .8px 1.4px var(--colorNegroCalido);
    margin-right:.5rem;           
}
.sobre-mi-cualidades {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  font-family: 'Poppins', sans-serif;
  margin-top: .8rem; 
}

.cualidad-card {
  background-color: var(--colorBlancoFondo);
  width: 150px;
  padding: .4rem;
  border-radius: 12px;
  box-shadow: 0 3px 6px var(--colorNegroCalido);
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  height:90px;
  position:relative;
  margin-top:2rem;

}

.cualidad-card .icono-svg svg {
  transition: all 0.3s ease;
  width: 36px;
  height: 36px;
  fill:var(--colorOroCalido);
}
.cualidad-card .icono-svg svg path {
  fill: var(--colorOroCalido);
  transition: fill 0.3s ease;
}

.cualidad-card h4 {
  margin-top: .4rem;
  font-size: calc( .8rem + .5vw);
  color: var(--colorNegroCalido1)
}

.cualidad-card p {
  font-size: calc( .7rem + .4vw);
  color: var(--colorNegroCalido);
  margin-top: 0.5rem;
  opacity:0;
  line-height:1rem;
  height:50px;
  overflow-y: hidden;
  position:relative;
  top: 20px;

}

/* Efecto hover */
.cualidad-card:hover {
  background-color: var(--colorOroCalido);
  box-shadow: 0 5px 10px var(--colorNegroCalido);
  transform: translateY(-4px);
  height:145px;
  transition:2s;
}

.cualidad-card:hover .icono-svg svg path{
  fill: var(--colorNegroCalido);
  transform: rotate(5deg) scale(1.05);
}

.cualidad-card:hover p{
  opacity:1;
  transform: translateY(-60px);
  transition:3s;
  overflow-y:visible;
  font-size: calc( .7rem + .4vw);
}
.cualidad-card:hover h4{
opacity:0;
transition:2s;
}

/****************************************************************************
******************************Salto******************************************
****************************************************************************/
@media (min-width: 320px){

.sobremi{
         margin-top: 6rem;       
}
.cualidad-card {
 
  width: 130px;
  padding: .4rem;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  height:90px;
  position:relative;
  margin:2rem .4rem .6rem .4rem;

}
.sobre-mi-cualidades{
  gap:1rem;
}
}

@media (min-width:769px){

.sobremi {
    display:flex;
    justify-content:center;
    align-items:center;
    margin: 2vw;
    flex-direction:column;
    width: 100vw;
    margin-top:5rem;
    
}
/*h3#sobremi{
  margin-top:12rem;
}*/

.cualidad-card {
  background-color: var(--colorBlancoFondo);
  width: 210px;
  padding: .4rem;
  border-radius: 12px;
  box-shadow: 0 3px 6px var(--colorNegroCalido);
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  height:100px;
  position:relative;
  top:-3rem;

}
.cualidad-card p {
  font-size: calc( .7rem + .3vw);
  color: var(--colorNegroCalido);
  margin-top: 0.5rem;
  opacity:0;
  line-height:1.3rem;
  height:50px;
  position:relative;
  top:2rem;
  text-align: center;
}
.cualidad-card:hover p{
  opacity:1;
  transform: translateY(-5rem);
  transition:3s;
  font-size: calc( .7rem + .3vw);
}

}


/************************************************************
*************************************************************
************************* Que puedo aportar *******************
**************************************************************
**************************************************************/
 .quepuedoaportar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2vw;
  flex-direction:column;
  flex-wrap: wrap;
  width: 100vw;
  gap: 4vh;
  margin-top:2rem;
  margin-bottom:2rem;
}
h3#Quepuedoaportar{
 margin-top:12rem;
  margin-bottom:2rem;
 
}
.PotenciarTalento, .adaptacion, .conectar {
  width: 80vw;
  height: 220px;
  background-color: var(--colorGrisBeige);
  border-radius: 8px;
  box-shadow: 1.2px 1.2px 2.4px var(--colorNegroCalido);
  padding: .8vw .5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  font-family: 'poppins', 'Segoe Ui', sans-serif;
  color: var(--colorNegroCalido);
  justify-content: center;
  
}

.texto-principal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
  transition: transform 0.9s cubic-bezier(.77,0,.18,1);
  z-index: 2;
}

.PotenciarTalento p,
.adaptacion p,
.conectar p {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(60px);
  transition: opacity 0.9s, transform 0.9s, max-height 0.9s;
  margin: 0;
  padding: 0 .5rem;
  font-size: calc(.7rem + .4vw);
  line-height: 1.4;
  text-align: center;
  width: 100%;
  pointer-events: none;
  position: relative;
}

.PotenciarTalento:hover .texto-principal,
.adaptacion:hover .texto-principal{
  transform: translateY(-1px);
}

.conectar:hover .texto-principal{
  transform: translateY(-5px);
}


.PotenciarTalento:hover p,
.adaptacion:hover p {

  opacity: 1;
  max-height: 250px; /* Ajusta según el contenido del p */
  transform: translateY(0);
  margin-top: .6rem;
  pointer-events: auto;
}
.conectar:hover p {
 opacity: 1;
  max-height: 200px; /* Ajusta según el contenido del p */
  transform: translateY(0);
  margin-top: .6rem;
  pointer-events: auto;
}

/* Titulares */
.PotenciarTalento h4, .adaptacion h4, .conectar h4 {
  font-size: calc(.8rem + .6vw);
  text-shadow: .8px .8px 1.2px var(--colorHoverBotones);
  margin-bottom: 0.6rem;
}


.PotenciarTalento i, .adaptacion i, .conectar i {
  font-size: calc(.8rem + .6vw);
  padding-right: 1rem;
  color: var(--triadico2);
  text-shadow: .8px .8px 1.3px var(--colorNegroCalido);
}


.PotenciarTalento .fa-star, .adaptacion .fa-star, .conectar .fa-star {
  color: var(--colorDoradoOscuro);
}


.lineaIconos {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}


.frase-resumen {
  text-align: center;
  font-size: calc( 1.2rem + .5vw);
  padding: 2vw;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  margin-top:1.2rem;
   

}

.frase-resumen .fa-quote-left {
  margin-right: .8vw;
  font-size: calc(1rem + .5vw);
  vertical-align: text-top;
}

.frase-resumen .fa-quote-right {
  margin-left: .8vw;
  font-size: calc(1rem + .5vw);
  vertical-align: text-top;
}

/****************************************************************************
******************************Salto******************************************
****************************************************************************/

@media (min-width:500px){

.PotenciarTalento, .adaptacion, .conectar {
width:70vw;
}
}

@media (min-width:600px){
  .PotenciarTalento, .adaptacion, .conectar {
width:60vw;
}
}

@media (min-width:769px){
  .quepuedoaportar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2vw;
  flex-direction:row;
  flex-wrap: wrap;
  width: 100vw;
  gap: 4vh;
 
}

.PotenciarTalento, .adaptacion, .conectar {
width:45vw;
height: 250px;
max-width:400px;
}

}

@media (min-width:1201px){
.PotenciarTalento, .adaptacion, .conectar {
width:28vw;
height: 390px;
}
}

/*********************************************************************************
**********************************************************************************
*****************************LOGROS DESTACADOS ************************************
**********************************************************************************
**********************************************************************************/
.logrosdestacados{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align: center;
  flex-direction: row;
  width:100vw;
  gap:3vw;
  flex-wrap: wrap;
 margin-top:2rem;
 margin-bottom:8rem;
}
h3.tituloLogros{
  text-align:center;
  margin-top:12rem; 
}

h4.fraseIntroduccionLogros{
   text-align:center;
}

.tasasConversion, .rankinCierres, .oficinasDinamizadas,
.comercialesFormados, .coordinacionPersonas{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap:2vw;
  width:24vw;
  background-color:var(--colorBlancoFondo);
  height:280px;
  box-shadow: 0 4px 8px var(--colorNegroCalido);
  border-radius:8px;
  color:var(--colorTextoGrisOscuro);
  text-shadow:.4px .4px .8px var(--colorNegro);
  font-family:'poppins', 'Segoe-UI';
  text-align: center;
  padding:.8rem;
  overflow: hidden;
  min-width: 150px;
  max-width: 400px;
  min-height:400px;
  max-height:700px;
  cursor:pointer;
  position:relative;

}

.fraseIntroduccionLogros{
  width: 100%;
  font-size: calc( 1.3rem + .5vw);
  margin-bottom:2vw;
  text-align: center;
  font-family:'poppins', 'Segoe-UI', sans-serif;
  text-shadow:0 1.8px 1.8px var(--colorDoradoOscuro);
  color: var(--colorNegroCalido1);
}

.logrosdestacados i {
  font-size: calc(1.2rem + .6vw);
  color: var(--colorOroCalido);
  text-shadow: .8px .8px 2.5px var(--colorNegroCalido);
  transition: transform 0.3s ease; 
  position:absolute;
  top:5%;
}
.cifraReclamo{
  font-size: calc(1.2rem + .6vw);
  transition:transform 0.3s ease;
  text-shadow: .4px .4px .8px var(--colorNegro);
  position:absolute;
  top: 15%;
}
.tituloLogros h4{
  font-size: calc(1 rem + .6vw);
  position:absolute;
  top: 24%;
  left:50%;
  transform: translateX(-50%);
  max-height:60px;
  overflow-y: hidden;
  line-height: 20px;
}

.textoLogros p{
  font-size: calc(.7rem + .3vw );
  position:absolute;
  top: 42%;
  left:50%;
  transform:translateX(-50%);
  line-height:18px ;
  padding: 0px,.5rem, 0px, .5rem;
}
@keyframes ladoALado {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-5px) rotate(-15deg); }
  50%  { transform: translateX(5px) rotate(0deg); }
  75%  { transform: translateX(-5px) rotate(15deg); }
  100% { transform: translateX(0) rotate(0deg);}
}


.tasasConversion:hover i , .rankinCierres:hover i, 
.oficinasDinamizadas:hover i,
.comercialesFormados:hover i, .coordinacionPersonas:hover i{
  transform: rotate(15deg) scale(1.1);
  color:var(--colorMarfilsuave);
  animation: ladoALado 0.6s ease-in-out;
}
.tasasConversion:hover, .rankinCierres:hover, .oficinasDinamizadas:hover,
.comercialesFormados:hover, .coordinacionPersonas:hover{
background-color:var(--colorOroCalido);
color:var(--colorNegroCalido1);
text-shadow:.5px .5px .10px var(--colorNegro);
}
.tasasConversion:hover .cifraReclamo , .rankinCierres:hover .cifraReclamo, 
.oficinasDinamizadas:hover .cifraReclamo,
.comercialesFormados:hover .cifraReclamo, .coordinacionPersonas:hover .cifraReclamo{
  transform: scale(1.2);
  color: var(--colorDoradoOscuro);
  text-shadow: 0, 6px 12px var(--colorNegroCalido1);
}

/****************************************************************************
******************************Salto******************************************
****************************************************************************/
@media (min-width: 320px){

.tasasConversion, .rankinCierres, .oficinasDinamizadas,
.comercialesFormados, .coordinacionPersonas{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap:2vw;
  width:90vw;
  background-color:var(--colorBlancoFondo);
  height:150px;
  box-shadow: 0 4px 8px var(--colorNegroCalido);
  border-radius:8px;
  color:var(--colorTextoGrisOscuro);
  text-shadow:.4px .4px .8px var(--colorNegro);
  font-family:'poppins', 'Segoe-UI';
  text-align: center;
  padding:.8rem;
  overflow: hidden;
  min-width: 120px;
  max-width: 300px;
  min-height:100px;
  max-height:500px;
  cursor:pointer;
  position:relative;
}
.logrosdestacados i {
  font-size: calc(.9rem + .5vw);
  color: var(--colorOroCalido);
  text-shadow: .8px .8px 2.5px var(--colorNegroCalido);
  transition: transform 0.3s ease; 
  position:absolute;
  top:5%;
}
.cifraReclamo{
  font-size: calc(.9 + .5vw);
  transition:transform 0.3s ease;
  text-shadow: .4px .4px .8px var(--colorNegro);
  position:absolute;
  top: 17%;
}
.tituloLogros h4{
  font-size: calc(.65 rem + .4vw);
  position:absolute;
  top: 35%;
  left:50%;
  transform: translateX(-50%);
  max-height:60px;
  overflow-y: hidden;
  line-height: 15px;
  width:100%;
}

.textoLogros p{
  font-size: calc(.58rem + .4vw );
  position:absolute;
  width:100%;
  top: 57%;
  left:50%;
  transform:translateX(-50%);
  line-height:15px ;
}
h4.fraseIntroduccionLogros{
   text-align:center;
   margin-top:3rem;
   margin-bottom:2rem;
   line-height: 26px;
   font-size: calc( 1rem + .5vw);
   
}

}
@media (min-width:481px) and (max-width: 768px) {
.tasasConversion, .rankinCierres, .oficinasDinamizadas,
.comercialesFormados, .coordinacionPersonas{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap:2vw;
  width:24vw;
  background-color:var(--colorBlancoFondo);
  height:260px;
  box-shadow: 0 4px 8px var(--colorNegroCalido);
  border-radius:8px;
  color:var(--colorTextoGrisOscuro);
  text-shadow:.4px .4px .8px var(--colorNegro);
  font-family:'poppins', 'Segoe-UI';
  text-align: center;
  padding:.8rem;
  overflow: hidden;
  min-width: 180px;
  max-width: 400px;
  min-height:200px;
  max-height:700px;
  cursor:pointer;
  position:relative;

}


}
@media (min-width:769px){
.logrosdestacados{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: row;
  width:100vw;
  gap:2vw;
  flex-wrap: wrap;
  margin-bottom:12rem;
}

 


.tasasConversion, .rankinCierres, .oficinasDinamizadas,
.comercialesFormados, .coordinacionPersonas{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap:1.2vw;
  width:16vw;
  background-color:var(--colorBlancoFondo);
  height:280px;
  box-shadow: 0 4px 8px var(--colorNegroCalido);
  border-radius:8px;
  color:var(--colorTextoGrisOscuro);
  text-shadow:.4px .4px .8px var(--colorNegro);
  font-family:'poppins', 'Segoe-UI';
  text-align: center;
  padding:.8rem;
  overflow: hidden;
  min-width: 220px;
  max-width: 400px;
  min-height:300px;
  max-height:700px;
  cursor:pointer;
  position:relative;

}

.fraseIntroduccionLogros{
  width: 100%;
  font-size: calc( 1.3rem + .5vw);
  margin-bottom:2vw;
  text-align: center;
  font-family:'poppins', 'Segoe-UI', sans-serif;
  text-shadow:0 1.8px 1.8px var(--colorDoradoOscuro);
  color: var(--colorNegroCalido1);
}

.logrosdestacados i {
  font-size: calc(1.5rem + .6vw);
  color: var(--colorOroCalido);
  text-shadow: .8px .8px 2.5px var(--colorNegroCalido);
  transition: transform 0.3s ease; 
  position:absolute;
  top:5%;
}
.cifraReclamo{
  font-size: calc(1.4rem + .6vw);
  transition:transform 0.3s ease;
  text-shadow: .4px .4px .8px var(--colorNegro);
  position:absolute;
  top: 15%;
}
.tituloLogros h4{
  font-size: calc(1.1 rem + .6vw);
  position:absolute;
  top: 30%;
  left:50%;
  transform: translateX(-50%);
  max-height:60px;
  overflow-y: hidden;
  line-height: 20px;
}

.textoLogros p{
  font-size: calc(.8rem + .3vw );
  position:absolute;
  top: 48%;
  left:50%;
  transform:translateX(-50%);
  line-height:20px ;
}
}
/******************************************************************************
*******************************************************************************
*************************TESTIMONIOS*******************************************
*******************************************************************************
******************************************************************************/

 #testimonios h3{
    position:relative;
    margin-bottom:2rem;
 }
.carrusel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  padding: 40px 0;
  margin-top:2rem;
  margin-bottom:10rem;
}

.carrusel-viewport {
 /* width: 1020px;*/
  width:auto;
  max-width: 98vw;
  overflow:visible; 
  position: relative;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.carrusel-list {
  display: flex;
  align-items: center;
  transition: transform 0.8s cubic-bezier(.45,.07,.48,1.09);
  will-change: transform;
  padding: 0;
  margin: 0;
}

.card {
  flex: 0 0 340px;
  min-width: 340px;
  max-width: 340px;
  min-height: 390px;
  max-height: 390px;
  background: var(--colorBlancoFondo);
  border-radius: 12px;
  box-shadow: 2px 2px 8px  var(--colorHoverBotones);
  margin: 2px 6px;
  padding: 8px 2px 4px 2px;
  text-align: center;
  opacity: 0.2;
  transform: scale(0.7);
  filter: blur(5px) grayscale(55%);
  pointer-events: none;
  transition:
    opacity 0.45s,
    transform 0.45s,
    filter 0.45s;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  font-size: calc(.8rem + .5vw);
}

.card.active {
  opacity: 1;
  transform: scale(1.07);
  filter: none;
  pointer-events: auto;
  box-shadow: 1.2px 1.2px 3px var(--colorNegroCalido);
  z-index: 3;
  font-size: calc(.8rem + .5vw);
  border-radius:8% !important;
}

.card.prev, .card.next {
  opacity: 0.4;
  transform: scale(0.83);
  filter: blur(0.9px) grayscale(30%);
  z-index: 2;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--colorBlancoFondo);
  border: none;
  font-size: 2rem;
  border-radius: 50%;
  box-shadow: 0 2px 6px var(--colorHoverBotones);
  text-shadow:.8px .8px 2px var(--colorHoverBotones);
  cursor: pointer;
  color: var(--colorDoradoOscuro);
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0.97;
  transition: background 0.2s, box-shadow 0.2s;
}
  .arrow.left { left:20px; }
  .arrow.right { right: 20px; }
 
  .arrow:hover{
  background-color:var(--colorOroAmarillo);
  color:var(--colorBlancoFondo);
  font-weight: 500;
  text-shadow: .5px .5px 1.5px var(--colorNegroCalido);
  opacity:.93;
}

.img-wrap {
  width: 96px; height: 96px;
  /*margin: 0 auto 14px;*/
  border-radius: 50%;
  border: 5px solid var(--colorOroAmarillo);
  background: var(--colorBlancoFondo);
  display: flex;
  align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  top:25px;
  margin-bottom: 55px;
  
}
.img-wrap img { 
   width: 100%;
   height: 100%;
   object-fit: cover; }

.card h4 { color: var(--colorVerdeOscuro);
   margin: 5px; 
   font-size: calc( 1rem + .5vw);
   font-weight: 700;
    line-height:1.2;
    position:relative;
    top: 30px;
  }
.card h4 span {
   font-weight: 400;
   font-size: .9rem;
    color: var(--colorTextoGrisOscuro);
     margin-left: 10px;}

.card p { 
  font-family:'Satisfy', 'Segoe-UI';
  margin: 15px;
  color: var(--colorNegroCalido1);
    line-height:1.37;
     flex:1 1 auto;
     display:flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  min-height: 90px;
  max-height: 90px;
  text-align: center; 
   text-shadow: none;
   font-size: calc( .7rem + 40%)
}


.dots {
   display: flex;
   justify-content: center;
    margin: 50px 0 0 0;
    position: relative;
    

  }

.dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--colorOroCalido);
  margin: 0 6px;
  display: block;
  transition: background 0.2s;
  cursor: pointer;
  transform: translateY(2rem);
  position:relative;
  top:-3rem;
}


ul li {
  list-style: none;
}
.dots span.active {
   background: var(--colorOroAmarillo) 
  }




/****************************************************************************
******************************Salto******************************************
****************************************************************************/

@media (max-width:480px){

   #testimonios h3{
    position:relative;
    top: 1rem;
    margin-bottom:2rem;
   }
   
.card {
  flex: 0 0 270px;
  min-width: 270px;
  max-width: 340px;
  min-height: 330px;
  max-height: 410px;
  background: var(--colorBlancoFondo);
  border-radius: 12px;
  box-shadow: 2px 2px 8px  var(--colorHoverBotones);
  margin: 2px 6px;
  padding: 6px 2px 2px 2px;
  text-align:center;
  opacity: 0.2;
  transform: scale(0.7);
  filter: blur(5px) grayscale(55%);
  pointer-events: none;
  transition:
    opacity 0.45s,
    transform 0.45s,
    filter 0.45s;
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  font-size: calc(.8rem + .5vw);
}
.arrow.left { left:2px; }
  .arrow.right { right: 2px; }
 
 .arrow { 
  font-size: 1rem;
   width: 36px; height: 36px;
   opacity:.65;
}
.arrow:hover{
  background-color:var(--colorOroAmarillo);
  color:var(--colorBlancoFondo);
  font-weight: 500;
  text-shadow: .5px .5px 1.5px var(--colorNegroCalido);
  opacity:.93;
}
.arrow:active { 
  background: var(--colorOroAmarillo); 
  color: var(--colorBlancoFondo);
}
body{overflow-x:hidden;
}

.carrusel-list {
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.carrusel-list .card {
    flex: 0 0 90%;
    max-width: 90%;
    margin: 0 auto;
    transform: none !important;
    position: static !important;
  }

  .card.prev,
  .card.next {
    display: none !important;
  }

/*Reajuste de tarjeta*/
 .card {
    min-height: 420px;  /* Aumentado para dejar espacio */
    padding-bottom: 1.5rem; /* Espacio interior */
  }

  .card h4 {
    top: 20px; /* Menos desplazamiento */
    margin-top: 10px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.1rem;
  }

  .card h4 span {
    display: block;
    margin-top: 5px;
    font-size: 0.9rem;
    line-height: 1.1;
    text-align: center;
    white-space: normal; /* Permite salto de línea */
    overflow-wrap: break-word; /* Por si es largo */
  }

  .dots {
    margin-top: 2rem;
  }

  .dots span {
    top: -3rem;
  }



}

@media (min-width:481px) and (max-width: 768px) {

#testimonios{
  scroll-margin-top:-8rem;
}


 #testimonios h3{
    position:relative;
    top: 8rem;
    margin-bottom:2rem;
   }

  .carrusel-viewport { 
    width: 100vw; 
    overflow-x:hidden;
    height:100vh;
  }
  .carrusel-list {
    display: flex;
    flex-wrap: nowrap;
    /*justify-content: flex-start;*/
    justify-content:center;
  }

  .arrow.left { left:5px; }
  .arrow.right { right: 5px; }

  .card { 
    flex: 0 0 40vw;
    /*max-width:100vw; prueba*/
     max-width:380px;
     max-height:260px;
     margin: 0 5px; 

     margin-top:2rem;
     margin-bottom:1rem;
    }
    .card.prev,
    .card.next{
      display:none;
    }

.dots {
   display: flex;
   justify-content: center;
    margin: 50px 0 0 0;
    position: relative;
    
  }
  .dots span{
  position:relative;
  top:-6rem;
  }
  .arrow:hover{
  background-color:var(--colorOroAmarillo);
  color:var(--colorBlancoFondo);
  font-weight: 500;
  text-shadow: .5px .5px 1.5px var(--colorNegroCalido);
  opacity:.93;
}
.arrow.left { left:2rem; }
  .arrow.right { right: 2rem; }

body{overflow-x:hidden;
}


.carrusel-list {
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.carrusel-list .card {
    flex: 0 0 90%;
    max-width: 90%;
    margin: 0 auto;
    transform: none !important;
    position: static !important;
  }

  .card.prev,
  .card.next {
    display: none !important;
  }

/*Reajuste de tarjeta*/
 .card {
    min-height: 420px;  /* Aumentado para dejar espacio */
    padding-bottom: 1.5rem; /* Espacio interior */
  }

  .card h4 {
    top: 20px; /* Menos desplazamiento */
    margin-top: 10px;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.1rem;
  }

  .card h4 span {
    display: block;
    margin-top: 5px;
    font-size: 0.9rem;
    line-height: 1.1;
    text-align: center;
    white-space: normal; /* Permite salto de línea */
    overflow-wrap: break-word; /* Por si es largo */
  }

  .dots {
    margin-top: 2rem;
  }

  .dots span {
    top: -3rem;
  }


}

@media (min-width:769px) and (max-width:1024px){

.card.prev,
    .card.next{
      display:flex;
      opacity: 0.4;
  transform: scale(0.50);
  filter: blur(0.9px) grayscale(30%);
  z-index: 2;
  position:relative
    }
    .card.prev{
      left:70px;
    }
    .card.next{
      right:70px
    }
 .card{
    margin: 2px 2px;
}
.card.active {
  transform: scale(1); 
}
 .dots span{
  position:relative;
  top:-3rem;
  }
  .arrow:hover{
  background-color:var(--colorOroAmarillo);
  color:var(--colorBlancoFondo);
  font-weight: 500;
  text-shadow: .5px .5px 1.5px var(--colorNegroCalido);
  opacity:.93;
}
#testimonios h3{
  margin-top:8rem;
  margin-bottom:2rem;
}
body{overflow-x:hidden;
}
}
/*****************************************************************************************
******************************************************************************************
********************************* Contacto-Footer*****************************************
******************************************************************************************
******************************************************************************************/
 #contacto{
      position:relative;
      bottom:-8vh;
      margin-bottom:1.2rem
}

footer{
background-color: var(--colorDoradoOscuro);
width:100vw;
height:auto;
position:relative;
bottom:-9vh;
box-shadow: 1.2px 1.2px 8px var(--colorNegro);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
flex-direction: column;

}
.contactoFooter{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  text-align: center;
  color: var(--colorNegro);
  text-shadow:.8px .8px 1.2px var(--colorTextoGrisOscuro);
  font-size: calc(.8rem + .5vw);
  font-family:'poppins', 'Segoe-Ui', sans-serif;
  gap:.8vw;
  position:relative;
 /* bottom:5vh;*/
  flex-wrap: wrap;
  white-space:normal;
  margin-left:2rem;
  line-height: .9rem;
  padding-top:1rem;

}

.copy{
  font-size:calc(.7rem + .5vw);
  color: var(--colorNegro);
  position:relative;
  text-align: center;
  font-weight: 400;
  margin-top:.8rem;

}

footer a{
  color:inherit;
  text-decoration: none;
  
}

.contactoFooter i{
  margin-right:.4rem;
  color:var(--colorOroAmarillo);
  
}
.contactoFooter span{
  margin-right:1rem;
}

footer a {
    text-decoration:none;
    color:inherit;
    transition:text-decoration 0.5s ease; 
    position: relative;
    padding-bottom:1.5px;
    transition: transform 0.3s ease-in-out;
    white-space:nowrap;
    display: inline-flex;
     align-items: center;

}

footer a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: .2px;
  width: 0%;
  background-color: var(--colorOroCalido); 
  transition: width 0.8s ease-in-out;
  
}
footer a:hover {
  transform: scale(.9); 
  transition: transform 0.8s ease-in-out;
}

footer a:hover::after{
       border-bottom:2px solid var(--colorOroCalido);
       width:100%;
       
}
footer a:hover i{
animation: ladoALado 0.6s ease-in-out;
color: var(--colorOroCalido)
}
  #firma-elu-container{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: row;
    width:40vw;
    height:auto;
    max-width:600px;
    min-width:250px;
    margin:0 auto;
    gap:.8rem; 
  }

  img.ladrillos{
     width:34vw;
     height:16vh;
     border-radius:12px;
     position:relative;
     object-fit:cover;
     pointer-events:none;
     filter: brightness(0.15) grayscale(1) contrast(.80) opacity(0.46);

  }

 svg#firma-elu {
      width: 14vw;
      max-width: 120px;
      height: auto;
      display:inline-block;
      margin: 0 auto;
      position:relative;
      margin-top:.8rem;
      position:absolute;
      margin-left: 4.8rem;
      
      
    }
    .firma-path {
      stroke:var(--colorNegro);
      stroke-width: 3;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }
   img.siluetaElu{ 
    width:3rem;
    max-width:60px;
    height:auto;
    margin-left:1.3rem;
    position:absolute;
    margin-left:-2rem;
    }

    h5.created-by{
      display:inline-block;
      font-family:'Satisfy';
      position:relative;
      transform:rotate(-12deg);
      font-weight: 200;
      line-height: 18px;
      position:absolute;
      margin-top:-1.5rem;
      margin-left:-8rem;
    }
    h5.created-by span{
      font-style:oblique;
      font-variant-ligatures:discretionary-ligatures;
      font-size: x-large;
      font-weight: 200;
      margin-left:0rem;
      position:absolute;
      
    }