@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');
:root{
  --background-color: #fffcf2;
  --primary-color: #fffcf2;
  --primary-color-rgb: '255, 252, 242';
  --secondary-color: #008833;
  --secondary-color-rgb: '0,136,51';
  --third-color: #d7c29e;
  --white-color: #ffffff;
  --dark-color: #000;
  --grey-color:#C8C8C8;
  --background-ventaja:#EDEAE1;
}          
            
body{font-family: 'Roboto Condensed';scroll-behavior: smooth;background: var(--background-color);padding:0;margin: 0;}
h1,h2,h3,h4,h5,h6{font-family: 'Playfair Display', serif;}
p{margin:0;padding:0;font-family: 'Roboto Condensed';font-size:1em;}
a{font-family: 'Roboto Condensed';text-decoration: none;}
.container{width:90%;margin:0 auto;overflow: hidden;max-width: 1920px;}

@media(max-width:460px){
    .container{max-width: 360px;}
}

button{font-family: 'Roboto Condensed'; transition: all 300ms ease-in-out; background: var(--secondary-color);color:var(--white-color);border:0;outline:0;font-size: 24px;padding:10px 30px;border-radius: 50px;}
button:hover{cursor: pointer; transform:scale(1.1); opacity: .8;}

button.light{background: var(--third-color);font-size:16px;}

        /*    HEADER    */
        header{background: var(--dark-color);width:calc(100% - 40px);margin: 0 auto;padding:20px;}
        header .container{display: grid;grid-template-columns: auto auto; justify-content: space-between; align-items: center; overflow: visible;}
        header .logoContainer{max-width:344px;align-items: center;margin:0 auto;}
        header .logoContainer img{width: 100%;}
          
        footer{padding: 50px 0;background-color:var(--dark-color);}
        footer .container{display: grid;grid-template-columns: 1fr 1fr;justify-items: center;}
        footer #contactoFooter{max-width:360px;display: grid;grid-template-columns: 1fr;}
        footer #contactoFooter p{color:var(--white-color)}
        footer .footer_social_container{display: grid;grid-template-columns: repeat(3,40px);align-items: center;grid-gap: 30px;}
        footer .footer_social_container img{width:100%;}
        footer .footer_aviso_container{display: flex;justify-content: center;align-items: center;padding:20px 0 0 0;}
        footer .footer_aviso_container p{color: #989898;}
        footer .footer_aviso_container a{color: #989898;text-decoration: underline;}
        footer .footer_aviso_container .p-2{padding: 5px;}
        footer .footer_form h2{color:var(--third-color);text-align: center;}
        footer .footer_form form{max-width:360px;}
        footer .footer_form form input[type="text"],
        footer .footer_form form input[type="email"],
        footer .footer_form form input[type="tel"]{background: transparent;color:var(--white-color);padding: 15px 10px;border: 1px solid var(--third-color);margin-bottom:15px;width: calc(100% - 32px);outline:0;font-family: 'Roboto Condensed';transition:all 300ms ease-in-out;}
        footer .footer_form form select{background: var(--dark-color);color:var(--white-color);padding: 15px 10px;border: 1px solid var(--third-color);margin-bottom: 15px;width: calc(100% - 10px);outline:0;font-family: 'Roboto Condensed';transition:all 300ms ease-in-out;}
        footer .footer_form form p{font-size:1rem;color:#989898;}
        footer .footer_form forminput[type="text"]:focus,
        footer .footer_form form input[type="email"]:focus,
        footer .footer_form form input[type="tel"]:focus{border: 1px solid var(--third-color);}
        footer .footer_form form input[name="messageAgendaCita"]{background:transparent;border:0;border-radius:0;padding:0;font-size:1.1rem;font-weight:800;text-align:center;}
        footer .footer_form form ul{list-style: none;text-align: left;}
        footer .footer_form form ul li{padding:5px 0;}
        footer .footer_form form a{color: var(--secondary-color);}
        footer .footer_form form .check_container{ display:grid; grid-template-columns: 30px auto;text-align: left;width: 200px;margin:25px auto 0 auto;}
        footer .footer_form form .check_container p{text-align:left;font-size: .9em;max-width: 100%;margin: 0;}
        footer .footer_form form .btn-golden-full{width:calc(100% - 10px); font-size:1rem; padding: 15px 10px; border: 1px solid transparent; background: var(--secondary-color);border-radius: 50px;color: var(--white-color); font-family: 'Roboto Condensed'; transition: all 300ms ease-in;}
        footer .footer_form form .btn-golden-full:hover{cursor: pointer;border: 1px solid var(--secondary-color);color: var(--secondary-color);background: transparent;}
        footer .footer_form form .btn-golden-full:disabled{opacity:.5;touch-action: none;pointer-events: none;}
        footer .footer_form .glider-contain{max-width:360px;margin:50px auto 0 auto; }

        @media (max-width:1080px) {
            footer #contactoFooter{grid-template-columns: 1fr;}
            footer .footerLogoContainer{grid-row-start: 1;}

        }
        @media (max-width:768px) {
            footer .container{grid-template-columns: 1fr;}
            footer #contactoFooter{grid-template-columns: 1fr;grid-gap:25px;}
            footer .socialContainer{grid-column-start: 1;grid-column-end: 2;}
            footer .footer_social_container{        justify-content: space-evenly;}
            footer #contactoFooter p{text-align: center;}
            footer .footer_aviso_container{padding: 50px 0 0 0;}
            footer .certificacionesContainer{grid-template-columns: 1fr;grid-gap: 20px;}
        }
        @media (max-width:630px) {
            header .logoContainer{max-width:200px;}
        }
         @media (max-width:450px) {
            header button{transform: scale(.7);}
        }

            
            section#first_banner{background: var(--dark-color);background-image:url(../img/UNACOLUMNA_MINI-SITIO_2.png); background-size: contain; background-position: 35% 0;background-repeat: no-repeat;}
            section#first_banner .container{  padding:50px 0; color:var(--white-color); border-top:1px solid var(--white-color);display: grid;grid-template-columns:1fr 1fr;justify-items: center;align-items: center;    justify-content: center;}
            section#first_banner .container .text_container{text-align: center;}
            section#first_banner .container .text_container h1,
            section#first_banner .container .text_container h2,
            section#first_banner .container .text_container h3{font-family: 'Roboto Condensed';padding:0;margin:0;}
            section#first_banner .container .text_container h1{font-size: 10rem;font-weight: 800;    line-height: 9rem;}
            section#first_banner .container .text_container h2{font-size: 2rem;color:var(--third-color);text-transform: uppercase;}
            section#first_banner .container .text_container h3{font-size: 1.5rem;font-weight: 300;}
            section#first_banner .container .texto_img_container{display: grid;grid-template-columns: auto auto; align-items: center; margin-bottom: 25px; text-align: center;justify-content: center;}

            @media (max-width:768px) {
                section#first_banner{background-position: 50% 0;  background-size:600px; background-image:url(../img/UNACOLUMNA_MINI-SITIO_Mobile.png);  }
                section#first_banner .container{grid-template-columns: 1fr;grid-gap:25px;grid-template-rows: 1.3fr 1fr;}
            }

            section#que_es_innate{position:relative; text-align: center;padding:100px 0;}
            section#que_es_innate .container{padding-bottom:50px;}
            section#que_es_innate .vertebra{    position: absolute;bottom: -55px;right: 0;max-width: 250px;z-index: 10;}
            section#que_es_innate h1{color:var(--secondary-color);font-size: 2rem;}
            section#que_es_innate p{max-width: 50%;margin:25px auto;font-size: 1.25rem;line-height:1.5rem;}
            /*section#que_es_innate button{transform:scale(1.5);}*/
            @media (max-width:768px) {
              section#que_es_innate{overflow: hidden;}
              section#que_es_innate .vertebra{    bottom: 0;right: -72px; width: 200px; }
              section#que_es_innate p{max-width:100%; }

            }
             @media (max-width:480px) {
              section#que_es_innate .vertebra{  right: -50px; width: 135px; }

            }
            
            section#porque_ajuste{padding:0;}
            section#porque_ajuste h2{text-align: center; color:var(--secondary-color); }
            section#porque_ajuste .container{display:grid;grid-template-columns:1fr 1fr;align-items:center;}
            section#porque_ajuste .container .bullets_container{display: grid;grid-template-rows: 1fr 1fr;  height: 100%; align-items: center;}
            section#porque_ajuste .container .title_container{text-align:center;}
            section#porque_ajuste .container .title_container h3{margin:0;color:var(--secondary-color); font-size:1.5rem;}
            section#porque_ajuste .container .title_container p{margin:0;}
            section#porque_ajuste .container ul{max-width:225px;margin:20px auto;}
            section#porque_ajuste .container ul li{padding:0 0 5px 0;}
            section#porque_ajuste .container ul li::marker{color:var(--secondary-color);}
            section#porque_ajuste .container .video_container{height:590px;text-align: center;}
            section#porque_ajuste .container .video_container iframe{width:50%;height:100%;aspect-ratio:9/16;}
            @media (max-width:768px) {
              section#porque_ajuste .container{grid-template-columns:1fr;}
              section#porque_ajuste .container .bullets_container{ grid-gap:25px; }

            }


            section#primera_cita{padding:100px 0;}
            section#primera_cita .container.title{text-align: center; color:var(--secondary-color); margin-bottom: 50px; font-size:1.5rem;}
            section#primera_cita .container#pasos_container {display: grid;grid-template-columns: 1fr 1fr; justify-content: center; align-items: center;    justify-items: center;}
            section#primera_cita .container .img_container{text-align: center;   width: 200px;  height: 200px; aspect-ratio:1/1; position:relative;}
            section#primera_cita .container .svg_icons{display:none;}
            section#primera_cita .container .pasos_img{position:absolute;top:0;left:0;opacity: 0;height: 0%;transform-origin:center;transform:scale(0);transition: all 500ms ease-in-out;margin:0 auto;}
            section#primera_cita .container .pasos_img.active{opacity: 1;transform:scale(1);height: 100%;width:100%;}

                  /* Core styles/functionality */
                  .tab {position: relative;}
                  .tab input {  position: absolute;opacity: 0;z-index: -1;}
                  .tab__content {max-height: 0;overflow: hidden;transition: all 0.35s;}
                  .tab input:checked ~ .tab__content {max-height: 10rem;}

                  /* Visual styles */
                  .accordion {  overflow: hidden;}
                  .tab__label,.tab__close {display: flex;color: var(--dark-color);  background: transparent; border-top:1px solid var(--dark-color); border-bottom:1px solid var(--dark-color); cursor: pointer;}
                  .tab__label {  justify-content: space-between;  padding: 1rem; font-size: 20px;}
                  .tab__label span{padding: 0 25px;}
                  .tab__label::after { content: "\276F"; width: 1em; height: 1em; text-align: center; transform: rotate(90deg);transition: all 0.35s;}
                  .tab input:checked + .tab__label::after { transform: rotate(270deg);}
                  .tab__content p { margin: 0 0 0 25px; padding: 1rem; font-size: 18px; }
                  .tab__close { justify-content: flex-end;padding: 0.5rem 1rem;font-size: 0.75rem;}
                  .tab input:checked + .tab__label{background: var(--secondary-color); color:var(--white-color); border-top:1px solid transparent; border-bottom:1px solid transparent;font-weight: 600; }

                  /* Arrow animation */
                  .tab input:not(:checked) + .tab__label:hover::after {animation: bounce .5s infinite;}
                  @keyframes bounce {
                    25% {
                      transform: rotate(90deg) translate(.25rem);
                    }
                    75% {
                      transform: rotate(90deg) translate(-.25rem);
                    }
                  }
            @media (max-width:768px) {
              section#primera_cita .container#pasos_container{grid-template-columns: 1fr;grid-template-rows: 150px auto;}
              section#primera_cita .container .img_container{width: 100px;    height: 100px; }
            }
            
            
            
            #thank-you-container{background:var(--dark-color);color:var(--white-color);}
            #thank-you-container .container{ border-top:1px solid var(--white-color);height:calc(100vh - 248px - 140px);display:grid;justify-items:center;align-items:center;text-align:center;}
            #thank-you-container h1{color:var(--secondary-color);font-size:3rem;}
            #thank-you-container p{font-size:1.5rem;}
            footer#thank-you-footer{text-align:center;}
            footer#thank-you-footer .footer_social_container{justify-content: center;margin-top: 25px;}