/*@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');*/

*{
    margin: 0;
    padding: 0;
    font-size: 10px;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

:root{
    --bg-1: #fefdfc;    
    --bg-2: #f2f2f2;
    --green-1: #009688;
    --green-2: #a1d9d1;        
    --grey: #778d9b;
    --title:  "Lexend Deca", sans-serif;
    --description: "Archivo", sans-serif;;
}

.titulo-apoyo {
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 5px;
  color: #333;
  text-align: left; /* Alinea el título a la izquierda */
}

.bloque-apoyo {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  text-align: left; /* Asegura que el contenido esté alineado a la izquierda */
}

.label-apoyo {
  font-weight: 600;
  color: #555;
  margin-right: 8px;
  min-width: 130px;
  text-align: left;
}

.valor-apoyo {
  color: #333;
  word-break: break-word;
  flex: 1;
  text-align: left;
}

body{
    background-color: var(--bg-1);
    font-size: 1.6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

main{
    flex: 1;
    padding: 1.2rem 6rem 3rem 6rem;
    width: 100%;
}

h1, h2, h3{
    font-family: var(--title);
    font-size: 2.8rem;
    font-weight: 300;
}

header{
    background-color: var(--bg-1);
    padding: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    transition: ease-in 0.2s;
    z-index: 2;
}

#navBarRegister{
    position: relative;
}

.scrolled{
    background-color: var(--bg-2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

section{
    scroll-margin-top: 8rem;
    margin: 9rem 0;
}

p, li, strong, span{
    font-family: var(--description);
    font-size: 1.4rem;
}

li{font-size: 1.3rem !important;}

a{
    text-decoration: none;
    font-family: var(--description);
    font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
    li{padding-left: 2% !important; list-style: none;}
}

img{
    border-radius: 1.2rem ;
}


.hero-buttons, .empresas-buttons, .unis-buttons, .empresas-buttons_responsivos, .unis-buttons_responsivos{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

.cta-button, .emp-button, .submit-button{
    background-color: var(--green-1);
    color: var(--bg-1);
    height: 4.2rem;
    width: 100%;
    /* width: 14rem; */
    display: flex;
    align-items: center;
    justify-content: center;    
    border-radius: 1.8rem;
    padding: .6rem;
    transition: ease-in 0.2s;
}

.submit-button{
    font-size: var(--description);
    border: none;
    font-size: 1.6rem;
}

.cta-button:hover{
    background-color: var(--bg-1);
    color: var(--grey);
}

.cta-button_off, .emp-button_off{
    background-color: var(--bg-1);
    color: var(--grey);
    width: 100%;
    height: 4.2rem;
    transition: ease-in 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.8rem;
}

.emp-button_off{
    background-color: var(--grey);
    color: var(--bg-1);
}

.emp-button_off:hover, .emp-button:hover{
    background-color: var(--green-2);
}

.cta-button_off:hover{
    background-color: var(--green-1);
    color: var(--bg-1);
}

ul{
    margin: 0;
    padding: 0;
}

li{
    font-size: 1.6rem;
    font-family: var(--description);
    margin-bottom: 1rem;
    font-weight: 300;
}

.custom-list{
    list-style: none;
    padding-left: 0;
}

.custom-list li{
    display: flex;
    align-items: center;
    gap: .5rem;

}

.custom-list .icon-list{
    width: 2em;
    height: 2em;
    color: var(--green-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23009688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icon-tabler-check'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");

    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.icon{
    color: var(--green-1);
}


footer{
    background-color: var(--green-2);
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    align-items: center;
}

footer a{
    color: black;
    font-size: 1.4rem;

}

.logo, .logo-loginNav {
    width: 18rem;
}

.logo-icon, .logo-iconNav {
    width: 7.2rem;
}

.text-logo {
    width: 21rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.nav-links a {
    color: black;
    font-size: 1.6rem;
    border-bottom: 0.2rem solid transparent;
    transition: border-bottom-color 0.3s ease;
}

.nav-links a:hover {
    border-bottom: solid 0.2rem var(--grey);
}

.login{
    display: flex;
    align-items: center;
    background-color: var(--grey);
    color: var(--bg-1);
    height: 3.2rem;
    width: 14rem;
    justify-content: center;
    border-radius: 1.8rem;
    transition: ease 0.4s;
}

.login_lateral{
    width: 100%;
    height: 4.2rem;
    display: flex;
    align-items: center;
    background-color: var(--grey);
    color: var(--bg-1);
    justify-content: center;
    border-radius: 1.8rem;
    transition: ease 0.4s;
}

.login:hover, .login_lateral:hover {
    background-color: var(--bg-2);
    color: var(--grey);
}


/* HERO */

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    margin: 0;
    padding-bottom: 9rem;
    /* position: relative; */
    z-index: 1;
    /* position: relative; */
    /* left: 4%;     */
    /* width: 100vw; */
    /* margin-left: -s1rem; */
    /* padding-left: 1rem; */
    /* padding-right: 1rem; */
    /* box-sizing: border-box; */
}

.fondo-hero {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fondo-hero iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Capa de desenfoque simulada */
.overlay-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.05);
    /* opcional */
}


.hero-text {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 1.6rem;
}

.hero-text h1,
.hero-text span {
    font-weight: 300;
}

.hero-text span {
    font-family: var(--description);
    font-size: 1.8rem;
    /* color: var(--grey); */
    color: var(--green-1);
    /* font-weight: 700; */
}

.hero-text h1 {hero
               font-family: var(--title);
               font-size: 3.2rem;
               color: black;
}

.hero-text p {
    font-family: var(--description);
    font-size: 1.8rem;
    /* color: var(--grey); */
    font-weight: 300;
}



/* empresarial y universidades*/
#empresas,
#universidades,
.empresas-container,
.unis-container {
    display: flex;
    gap: 2rem;

}

.empresas-encabezados,
.unis-encabezados {
    display: flex;
    gap: .8rem;
    align-items: end;
}

.empresas-encabezados h2,
.unis-encabezados h2 {
    font-family: var(--title);
    font-size: 2.8rem;
    color: black;
}

.empresas-encabezados p,
.unis-encabezados p {
    font-family: var(--title);
    color: var(--grey);
    font-size: 1.8rem;
}


.banner-empresarial,
.banner-universidades {
    width: 50%;
    object-fit: cover;
    height: 100%;
}

.empresas-text,
.unis-text {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 46%;
}

.empresas-text p,
.unis-text p {
    font-family: var(--description);
    font-size: 1.6rem;
    text-align: justify;
}

.empresas-text h3,
.unis-text h3 {
    font-size: 2.1rem;
    /* color: var(--grey); */
    /* color: var(--grey); */
    font-weight: 300;
}

/* UNIVERSIDADES */


.unis-text {
    width: 50%;
}

/* .unis-encabezados p{
    color: var(--green-1);
} */

/* SERVICIOS*/
#servicios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
}

#servicios h3 {
    font-size: 1.8rem;
    color: var(--grey);
}

.servicios-content {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.4rem;
}

.card-service {
    color: var(--grey);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem;
}

.card-service p {
    color: black;
    font-family: var(--description);
}



.footer-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* LOGIN */


.main-login, .main-register{
    background-color: var(--bg-2);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /*height: 100vh;*/
    height: 100vh;
    overflow-y: hidden !important;
}

.login-container, .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    border-radius: 2.4rem;
    background-color: var(--bg-1);
    box-shadow: 0 1.2rem 3.8rem var(--grey);
}

.main-register{
    height: auto;
    padding-bottom: 2%;
    padding-top: 2%;
}

.register-container{    
    flex-direction: column;
    justify-content: center;
    width: 60% !important;
    padding: 2%;
    height: auto;
}

.logo-login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    /* background-color: var(--green-1); */
    /* background-image: linear-gradient(var(--green-2, var(--grey))); */
    border-radius: 2.4rem 0 0 2.4rem;
}

.logo-login {
    object-fit: contain;
    width: 80%;
}

.login-div {
    width: 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.2rem;
    padding: 1.6rem;
    box-sizing: border-box !important;
    /*width: 36%;*/
}

.login-form label {
    font-size: 1.4rem;
    font-family: var(--description);
    color: var(--grey);
}

.login-form input {
    width: 100%;
    height: 4.2rem;
    border-radius: 1.8rem;
    padding: 0 1.2rem;
    font-size: 1.6rem;
    font-family: var(--description);
    border: none;
    box-shadow: 0 0.2rem 0.6rem var(--grey);
}

.login-form input:focus {
    outline: none;
    box-shadow: 0 0.2rem 0.6rem var(--green-1);
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.6s ease-out;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-39px);
    transition: all 0.6s ease-in-out;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(39px);
    transition: all 0.6s ease-in-out;
}

.fade-in-up.show,
.fade-in-down.show {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease-out;
}

.fade-in-left.show,
.fade-in-right.show {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.6s ease-out;
}

/* MENU */
#nav-icon3 {
    width: 48px;
    height: 45px;
    position: relative;
    margin-right: .8rem;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon3 span {
    display: block;
    position: absolute;
    height: .6rem;
    width: 100%;
    background: black;
    border-radius: .8rem;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

/* Icon 3 */

#nav-icon3 span:nth-child(1) {
    top: 0px;
}

#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
    top: 18px;
}

#nav-icon3 span:nth-child(4) {
    top: 36px;
}

#nav-icon3.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
}

#nav-icon3.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
}

.fondoMenuLateral {
    position: fixed;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.25);
    height: 100%;
    width: 100%;
    top: 0;
}

.menuLateralLanding {
    /* background-color: red; */
    background-color: var(--bg-1);
    position: relative;
    width: 70%;
    height: 100%;
    z-index: 2;
    top: 0%;
    left: 30%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2.8rem 1.8rem;
}

.menuLateral a{    
    font-size: 2.4rem;
    color: black;
}

.menuActivado {
    transition: ease-in .2s;
    transform: translate(-2px, 0);
}

.menuApagado {
    transition: ease-in .2s;
    transform: translate(-600px, 0);
}

/* REVIEWS */
#reviews {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    width: 100%;
    padding: 2rem 0;
}

.reviews-carousel {
    width: 100%;
    overflow: hidden;
}

.reviews-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* importante para scroll a la izquierda */
    gap: 2.4rem;
    animation: scroll 20s linear infinite;
    width: max-content;
    /*permite que no se rompa el scroll*/
}

.review-logo {
    width: 20rem;
    object-fit: contain;
}

.aviso-privacidad{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    margin: 0;
    padding-bottom: 9rem;
    z-index: 1;
}

.terminos-y-condiciones{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    margin: 0;
    padding-bottom: 9rem;
    z-index: 1;
}

.hero-text-terminos-y-condiciones {
    display: flex;
    flex-direction: column;
    width: 80%;
    gap: 1.6rem;
}


.hero-text-terminos-y-condiciones h1,
.hero-text-terminos-y-condiciones span {
    font-weight: 300;
}

.hero-text-terminos-y-condiciones span {
    font-family: var(--description);
    font-size: 1.8rem;
    /* color: var(--grey); */
    color: var(--green-1);
    /* font-weight: 700; */
}

.hero-text-terminos-y-condiciones h1 {hero
                                      font-family: var(--title);
                                      font-size: 3.2rem;
                                      color: black;
}

.hero-text-terminos-y-condiciones p {
    font-family: var(--description);
    font-size: 1.8rem;
    /* color: var(--grey); */
    font-weight: 300;
}

.aviso-privacidad-logo {
    width: 18rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.aviso-privacidad-icono{
    width: 7.2rem;
}

.aviso-privacidad-icono{
    width: 7.2rem;
}

.logo_button{
    width: 16rem; 
    transition: ease-in .3s;
    padding: .4rem;    
}

.logo_button:hover{
    transform: translate(0, -1.8rem);
    background-color: transparent;
}

.contenidoRow:hover .logo_button{
    opacity:  0.4;
}


.contenidoRow .logo_button:hover{
    opacity:  1;
}

.busquedaSection{
    width:  100%;
    display:  flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    position: relative !important;      
    padding:  0;
    height: 80vh;    
    /*margin-top: 2rem;*/
}

.busquedaSection h1{
    font-size: 3.8rem !important;    
}

.busquedaSection div{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    width: 70%;    
}


.fondo_busquedaSection{
    width: 100%;     
    height: 86vh;
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border: transparent 1px solid;        
}

.botonBusqueda{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.8rem;
    text-decoration: none !important;
    gap: .6rem;
    color: var(--bg-1) !important;
    background-color: var(--green-1);
    font-size: 1.8rem !important;    
    font-weight: bold !important;
    border-radius: 1.2rem;
    padding: .6rem;
    transition: ease-in .3s;
}

.botonBusqueda:hover{
    background-color: var(--green-2);
    color: var(--bg-2) !important;
}

.inputBuscadores{
    height: 4.8rem !important; 
    font-size: 1.8rem !important;
    border-radius: 1.2rem;
    width: 35%;
    border-radius: 1.2rem !important;
}

    #wave {
      position: absolute;
      width: 200%;
      height: 100%;
      top: 0;
      left: -50%;
      /* debe cubrir masss sm,apcio que la pantalla*/
    }

    .wave-path {
      fill: #00c6a7;
      opacity: 0.6;
      animation: moveWave 12s linear infinite;
    }

    .wave-path.second {
      fill: #00a896;
      opacity: 0.4;
      animation-duration: 18s;
    }

    .wave-path.third {
      fill: #008f7d;
      opacity: 0.3;
      animation-duration: 25s;
    }

    @keyframes moveWave {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-11%);
      }
    }

.ContainerLayout{
    width: 100%;
    height: 100%;
    position: relative;
    background-color: var(--bg-1); 
}

.buscadorSection{    
    height: 2.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4% 0%;    
}

.buscadorSection_filtros{    
    height: auto;
    /*height: 10.8rem;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    /*padding: 1% 0;*/
    position:fixed;
    top: 14%;
    background-color: var(--bg-1);
    z-index: 2;
    width: 100%;
    box-shadow: 0 1rem 2.2rem #BDBDBD;
    left: 0;
    padding: 1% 4%;
}

/*.buscadorSection_filtros div{
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1.2rem;
}*/

.containerCarrusel{
    width: 100%;  
    display: flex;
    justify-content: space-between;
    overflow: auto;
    /*display: none;*/    
}

.inputBuscadoresModulo{
    height: 3.8rem !important; 
    font-size: 1.6rem !important;
    border-radius: 1.2rem;
    width: 35%;
    border-radius: 1.2rem !important;
    background-color: #f5f5f5;
    padding: 6px;
    border: solid var(--grey) 1px;
}

.inputBuscadoresModulo::placeholder{
    font-style: italic !important;
}

.selectFiltro {
    height: 3.8rem;
    width: 35%;
    padding: .6rem;
    font-size: 1.4rem;
    border-radius: 1.2rem;
    border: none;
    background-color: var(--grey);
    color: var(--bg-1);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* SVG como data URI con color blanco */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23fefdfc' viewBox='0 0 24 24'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M18 9c.852 0 1.297 .986 .783 1.623l-.076 .084l-6 6a1 1 0 0 1 -1.32 .083l-.094 -.083l-6 -6l-.083 -.094l-.054 -.077l-.054 -.096l-.017 -.036l-.027 -.067l-.032 -.108l-.01 -.053l-.01 -.06l-.004 -.057v-.118l.005 -.058l.009 -.06l.01 -.052l.032 -.108l.027 -.067l.07 -.132l.065 -.09l.073 -.081l.094 -.083l.077 -.054l.096 -.054l.036 -.017l.067 -.027l.108 -.032l.053 -.01l.06 -.01l.057 -.004l12.059 -.002z'/></svg>");

    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 2.2rem;
}

.selectFiltro option{
    font-size: 1.4rem;
    padding: 0.6rem;
}

.buscadorSection_text{
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

/*estilos para contenido dividido*/
.containerDividedDinamic, .containerDividedDinamicPrincipal{
    width: 100%;
    /*height: 83vh;*/
    height: 100vh;
    margin: 0;
    padding: 0;    
    display: flex;    
}

.containerDividedDinamicPrincipal{
    margin-top: 7%;
}

.panelCards{
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;    
    padding: 1% 2%;
    background-color: var(--bg-2);
    max-height: 100%;
    height: 100%;
    overflow-y: auto;
    width: 50%;
}



.divCard{
    background-color: var(--bg-1);
    margin-bottom: 1rem;
    border-radius: 1.2rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 14rem;
    width: 100%;
    /*width: 44rem;*/
}

.panelInfoContenido{
    display: flex;
    flex-direction: column;
    /*background-color: red;*/
    width: 50%;
    max-height: 100%;
    overflow-y: auto;
    padding: 1% 2%;
    margin: 1% 1% 0% 1%;
}

/*CSS Tarjetas vacantes*/
.tarjeta-vacante{
    background-color: #ffffff !important;
    width: 100%;
    height: 140px;        
    padding: 2px 6px;
    text-decoration: none !important;
    border-radius: 10px;
    position: relative;
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    /*    margin: 10px;
        display: flex;
        text-decoration: none !important;*/
}

.tarjeta-vacante::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}
.tarjeta-vacante:hover::after {
    background-color: #a1d9d1;
}
.tarjeta-vacante.seleccionada::after {
    background-color: #009688;
}

.infoTarjeta{
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap:.8rem;    
}

.contenidoColumnaIzquierda{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 6px;
    padding: 6px 0;
}

.panelCards {
    flex: 1;
    display: block;
}

.panelInfoContenido {
    flex: 1;
    display: block;
}

.boton-mostrar-izquierda {
    display: none;
}

/* En móviles */
@media screen and (max-width: 768px) {
    .containerDividedDinamicPrincipal {
        position: relative;
    }

    .panelCards {
        display: block;
        width: 100%;
    }

    .panelInfoContenido {
        display: none; /* Oculto por defecto */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: white;
        overflow-y: auto;
        z-index: 10;
    }

    .panelInfoContenido.show-panel {
        display: block; /* Solo visible cuando se activa */
    }

    .boton-mostrar-izquierda {
        display: block;
    }
}

/*estilos de contenedores*/
.centradoRow{
    width: 100%;
    /*outline: solid purple 3px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}

/*clase para colocar etiqueta y campo o contenido todo a la izquierda*/
.contenidoColumnaIzquierda{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 6px;
    padding:0;
}

.contenidoUnaColumnaCentrada{ /*clase para centrar el contenido en el medio de la pantalla*/
    padding: 10px 0;
    /*border: solid green 3px !important;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    /*width: 80%;*/
}

/*clase para colocar boton y titulo en los laterales*/
.encabezado_seccion_formulario{
    /*background: red !important;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.registro-container, .dialog-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-float_whats{
    color: var( --green-1);
    background-color:  var(--bg-2);
    width: 4.8rem;
    height: 4.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 84%;
    left: 96%;    
    border-radius: 50%;*
}

/* animacion de desplzamiento de las reseñas */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}