@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,500;9..40,800&display=swap');

:root {
  --color-primary: #c1701e;
  --color-primary-hover: #833c0e;
  --color-secondary: #360e04;
  --color-white: #FFF;
  --color-gray: #F5F5F5;
  --color-black: #232323;
}

body, html {margin: 0;padding: 0;width: 100%;color: var(--color-secondary);font-size: 15px;height: 100%; min-height: 100%;scroll-behavior: smooth;font-weight: 300;background-color: var(--color-white);}
* {box-sizing: border-box;font-family: 'DM Sans', sans-serif;}

h2 {color: var(--color-primary);font-weight: 500;}
section {position: relative;margin: 0 auto;width: 100%;max-width: 1300px;z-index: 2;}

/* header */
header {position: fixed;z-index: 999;width: 100%;top: 0;transition: .3s;}
header::before {content: '';background-color: var(--color-white);position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 0;transition: .3s;transform: translateY(-100%);}
header section {text-align: center;padding: 12px 10px;/*border-bottom: 1px solid var(--color-white);*/}
header.fixed {/*background-color: var(--color-white);*/box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);}
header.fixed::before {transform: translateY(0);}
.logo_color {display: none;}

header.fixed .logo_color {display: inline-block;}
header.fixed .logo_white {display: none;}

header.templates {background-color: var(--color-white);box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);position: sticky;}

header .logos {display:flex;align-items: center;}
header .logo_lander {padding: 5px 15px 5px 0;margin-right: 15px;border-right: 1px solid var(--color-white);}

header.fixed .logo_lander {border-color: var(--color-black);}

nav {display: none;position: fixed;top: 80px;left: 10px;right: 10px; padding: 20px;background-color: var(--color-black);z-index: 3;border-radius: 10px;box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);}
nav a {padding: 10px;color: var(--color-white);font-size: 16px;transition: .3s;position: relative;display: block;text-decoration: none;text-transform: uppercase;font-weight: 400;}
nav a svg {width: 20px;fill: var(--color-white);transform: .3s;}
nav a:hover,
nav a.active,
header.fixed nav a:hover,
header.fixed nav a.active {color: var(--color-primary);}
nav a:hover svg,
nav a.active svg,
header.fixed nav a:hover svg,
header.fixed nav a.active svg {fill: var(--color-primary);}

.schedule_button {display: none;}

.btn_burger {overflow: hidden;transition: .3s;z-index: 3;position: absolute;top: 10px;right: 10px;height: 40px;display: flex;align-items: center;width: 25px;}
.btn_burger div {background-color: var(--color-white);bottom: auto;display: inline-block;height: 3px;position: absolute;width: 100%;z-index: 10;border-radius: 1px;}
.btn_burger div:before, 
.btn_burger div:after {background-color: var(--color-white);content: "";height: 100%;position: absolute;right: 0;top: 0;width: 100%;transform: translateZ(0);backface-visibility: hidden;transition: .3s;}
.btn_burger div:before {transform: translateY(-8px) rotate(0deg);}
.btn_burger div:after {transform: translateY(8px) rotate(0deg);}
header.fixed .btn_burger.close_nav div,
.btn_burger.close_nav div {background-color: rgba(255, 255, 255, 0);}
.btn_burger.close_nav div:before {transform: translateY(0) rotate(45deg);}
.btn_burger.close_nav div:after {transform: translateY(0) rotate(-45deg);}

header.fixed .btn_burger div,
header.fixed .btn_burger div:before, 
header.fixed .btn_burger div:after {background-color: var(--color-secondary);}


/* slider */
.splide {position: relative;}
.splide__pagination__page {background: rgba(255, 255, 255, 0);border: 1px solid var(--color-white);width: 10px;height: 10px;}
.splide__pagination__page.is-active {background-: rgba(255, 255, 255, 1)!important;transform: scale(1);}
.splide__arrow {background: none;width: auto;height: auto;}
.splide__arrow svg {fill: var(--color-black);width: 25px;height: unset;}
.splide__arrow--prev {left: 0;}
.splide__arrow--next {right: 0;}
.splide_info {position: absolute;top: 0;left: 0;bottom: 0;right: 0;/*background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.85) 100%);*/display: flex;align-items: center;justify-content: center;color: var(--color-white);padding: 72px 25px 20px;text-align: center;}
.splide_info .text {position: relative;width: 100%;}
.splide_info h1 {font-weight: 700;text-transform: uppercase;margin-top: 0;text-shadow: 2px 2px 6px var(--color-black);letter-spacing: 4px;font-size: 20px;}
.splide_info h2 {display: flex;align-items: center;font-size: 15px;text-transform: uppercase;margin-bottom: 0;gap: 15px;letter-spacing: 2px;font-weight: 300;text-shadow: 2px 2px 6px var(--color-black);margin: 0 auto;max-width: 230px;color: var(--color-white);}
.splide_info h2::before,
.splide_info h2::after {content: '';height: 2px;background-color: var(--color-white);flex-grow: 1;}
.splide__slide a {cursor: pointer;}

.items_list {padding: 50px 0 0;display: flex;align-items: flex-start;gap: 15px;justify-content: center;flex-wrap: wrap;}

/* benefits */
#benefits {position: relative;padding: 100px 0;text-align: center;}
.benefit {width: 130px;text-align: center;color: var(--color-primary);text-decoration: none;transition: .3s;padding-bottom: 10px;}
.benefit .icon {display: inline-flex;align-items: center;justify-content: center;width: 130px;height: 130px;border-radius: 50%;background-color: var(--color-gray);transition: .3s;}
.benefit img {margin: 10px 0;transition: .3s;}
.benefit .name {font-size: 15px;text-transform: uppercase;font-weight: 500;}

.benefit:hover {padding-bottom: 0;}
.benefit:hover .icon {transform: scale(1.1);}
.benefit:hover .icon img {transform: rotateY(180deg);transform-style: preserve-3d;}
.benefit:hover img {margin: 15px 0;}

.places_cont {padding: 70px 10px;background-color: var(--color-primary);color: var(--color-white);text-align: center;}
.places_cont section {display: flex;align-items: flex-start;justify-content: center;flex-wrap: wrap;margin-top: 50px;gap: 10px;}
.places_cont a {display: inline-block;color: var(--color-white);text-decoration: none;transition: .5s;width: 220px;cursor: pointer;}
.places_cont a .name {padding: 5px 0;font-size: 14px;text-transform: uppercase;font-weight: 600;color: var(--color-primary);background-color: var(--color-white);border-radius: 60px;margin-top: 5px;margin: 10px;line-height: 1;height: 43px;display: flex;align-items: center;justify-content: center;}
.places_cont a svg {width: 75px;fill: var(--color-white);transition: .2s;}
.places_cont a:hover {transform: scale(1.1);}

/* about us */
.about_cont {position: relative;background: url(../images/about-background.webp) no-repeat center;background-size: cover;padding-top: 80px;color: var(--color-white);text-align: center;margin-bottom: 200px;max-height: 290px;text-shadow: 2px 2px px var(--color-black);}
.about_cont .title_section {font-weight: 700;font-size: 30px;}
.about_cont h3 {text-transform: uppercase;margin: 0;font-weight: 300;font-size: 20px;letter-spacing: 3px;}
.about_cont .text {border-radius: 20px;background-color: var(--color-primary);padding: 30px;margin: 30px auto -100px;max-width: 800px;font-size: 16px;box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);}

/* models */

.models_container {min-height: 100%;padding-bottom: 110px;padding-top: 71px;}

#models {padding: 130px 0 30px;position: relative;text-align: center;}
.models {width: 230px;position: relative;text-decoration: none;color: var(--color-white);margin-bottom: 40px;}
.models .image {border-radius: 20px;border: 4px solid var(--color-white);box-shadow: 0 0 8px rgba(0, 0, 0, .2);transition: .3s;overflow: hidden;width: 230px;}
.models .image img {transition: 1s;}
.models .name {background-color: var(--color-primary);color: var(--color-white);text-transform: uppercase;width: 200px;height: 40px;display: flex;align-items: center;justify-content: center;box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);border-radius: 20px;transition: .3s;position: absolute;left: 50%;bottom: -20px;margin-left: -100px;font-weight: 400;}

.models:hover .image {transform: translateY(-15px);}
.models:hover .image img {transform: scale(1.2);}
.models:hover .name {transform: translateY(15px);}

.models_menu {display: flex;}
.models_menu a {position: relative;text-decoration: none;padding: 12px 5px;color: var(--color-secondary);text-transform: uppercase;transition: .3s;font-size: 12px;font-weight: 500;text-align: center;display: flex;align-items: center;justify-content: center;}
.models_menu a.current {background-color: var(--color-primary)!important;color: var(--color-white);}
.models_menu a:hover {background-color: var(--color-gray);}

.models_header {height: 250px;background-color: var(--color-primary);}
.models_title {position: relative;padding: 40px 20px 20px;}
.models_title h1 {color: var(--color-white);text-transform: uppercase;font-weight: 900;font-size: 30px;margin: 0;letter-spacing: 2px;}
.models_title h2 {color: var(--color-primary-hover);text-transform: uppercase;font-weight: 500;font-size: 18px;margin-bottom: 0;letter-spacing: 7px;}
.models_info {position: relative;}
.models_info .column {flex-grow: 1;padding: 20px;position: relative;}
.models_info .column.gallery {margin-top: -100px;width: 100%;flex-grow: 0;flex-shrink: 0;}

.models_info .splide {border: 4px solid var(--color-white);border-radius: 20px;overflow: hidden;box-shadow: 0 0 10px rgba(0, 0, 0, .3);}
.models_info .splide__arrow {background: rgba(255, 255, 255, .5);width: 40px;height: 40px;}
.models_info .splide__arrow svg {fill: var(--color-black);width: 25px;}
.models_info .splide__arrow--prev {left: 5px;}
.models_info .splide__arrow--next {right: 5px;}

.models_features {position: relative;}
.models_features_title {color: var(--color-secondary);text-transform: uppercase;font-size: 22px;font-weight: 500;padding: 10px 0;border-bottom: 2px solid var(--color-secondary);margin-bottom: 30px;}
.models_features_info {position: relative;}
.models_features_info .column {position: relative;padding: 0;}

.models_features_line {display: flex;width: 100%;gap: 10px;padding: 10px 0;align-items: center;}
.models_features_line div {flex-grow: 1;}
.models_features_line svg {width: 20px;fill: var(--color-secondary);}
.models_features_line .num {width: 42px;flex-grow: 0;}


/* gallery */
#gallery {text-align: center;padding: 100px 0;}
#gallery img {border-radius: 20px;}
#gallery .splide {padding: 0 40px;margin-top: 40px;}
#gallery .splide__arrow--prev {left: 0;}
#gallery .splide__arrow--next {right: 0;}
#gallery .splide__arrow svg {fill: var(--color-black);}
#gallery  .splide__track--draggable {box-shadow: 0 0 8px rgba(0, 0, 0, .2);border-radius: 20px;border: 5px solid var(--color-white);}

/* agendar cita */
.date_cont {position: relative;padding: 70px 0;color: var(--color-white);text-align: center;text-shadow: 2px 2px px var(--color-black);overflow: hidden;}
.date_background {transition: 1s;background: url(../images/date-background.webp) no-repeat center;background-size: cover;position: absolute;z-index: 1;left: 0;right: 0;top: 0;bottom: 0;}
.date_cont .title_section {font-weight: 700;font-size: 25px;}
.date_cont h3 {text-transform: uppercase;margin: 0;font-weight: 300;font-size: 25px;letter-spacing: 3px;}
.date_cont .button {display: inline-flex;align-items: center;justify-content: center;border: 2px solid var(--color-white);color: var(--color-white);text-decoration: none;gap: 10px;font-size: 20px;height: 50px;padding: 0 20px;transition: .3s;border-radius: 50px;margin-top: 30px;}
.date_cont .button svg {width: 20px;fill: var(--color-white);}

.date_cont .button:hover {background-color: #25D366;transform: scale(1.1);}

.date_cont:hover .date_background {transform: scale(1.5);}

.title_section {display: inline-flex;align-items: center;gap: 10px;font-size: 26px;text-transform: uppercase;letter-spacing: 3px;text-align: center;}
.title_section::before,
.title_section::after {content:'';flex-grow: 1;background-color: var(--color-secondary);height: 2px;width: 50px;display: none;}

.title_section.white {color: var(--color-white);}
.title_section.white::before,
.title_section.white::after {background-color: var(--color-white);}

/* contact */
#contact {padding: 100px 0 60px; text-align: center;}
#contact .column {padding: 20px;position: relative;}
#contact .column .city {color: var(--color-primary);font-size: 22px;padding: 5px 0;}
#contact .column .line {display: flex;gap: 10px;align-items: flex-start;padding: 5px 0;text-align: left;}
#contact .column .line svg {width: 18px;fill: var(--color-primary);}
#contact .column .line svg.place {width: 22px;}

.contact_cont input,
.contact_cont textarea {padding: 12px 20px;background-color: var(--color-gray);transition: .3s;border: none;outline: none;width: 100%;margin-bottom: 20px;}
.contact_cont input::focus,
.contact_cont textare::focus {box-shadow: 2px 2px 6px rgba(0, 0, 0, .1);}

.contact_cont input.btn {background-color: var(--color-primary);color: var(--color-white);text-transform: uppercase;font-weight: 700;cursor: pointer;}
.contact_cont input.btn:hover {background-color: var(--color-primary-hover);}

.contact_cont input::placeholder,
.contact_cont textarea::placeholder {color: #ccc;}

/* footer */
footer {padding: 20px;background-color: #505050;color: var(--color-white);text-align: center;}
footer .socialmedia {display: flex;gap: 20px;align-items: center;justify-content: center;padding-top: 20px;}
footer .socialmedia svg {width: 30px;fill: var(--color-white);}
footer a {color: var(--color-white);}
footer.models_footer {margin-top: -110px;}

.modal_alert_container {position: fixed;overflow-y: auto;background: rgba(0, 0, 0, .6);padding: 20px;top: 0;bottom: 0;left: 0;right: 0;display: none;z-index: 5}
.modal_alert {width: 100%;max-width: 350px;background-color: var(--color-white);padding: 20px;border-radius: 20px;box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);text-align: center;margin: 10% auto 0;position: relative;}
.modal_alert .icon {width: 110px;fill: var(--color-red);}
.modal_alert .buttons_container {padding-bottom: 0; display: flex;align-items: center;justify-content: center;gap:10px;}
.modal_alert .close_button {position: absolute;top: 10px;right: 10px;outline: none;border: none;cursor: pointer;background: none;}
.modal_alert .close_button svg {width: 25px;fill: var(--color-primary);}

.btn {display: flex;align-items: center;height: 40px;justify-content: center;border: none;outline: none;font-weight: 600;text-align: center;cursor: pointer;transition: .3s;padding: 0 20px;gap:10px;font-size: 16px;width: 100%;}
.btn.primary {background-color: var(--color-primary);color: var(--color-white);}
.btn.primary:hover {background-color: var(--color-primary-hover);}



.whatsapp_button {display: flex;align-items: center;justify-content: center;border: 2px solid var(--color-white);color: var(--color-white);text-decoration: none;gap: 10px;font-size: 18px;height: 45px;padding: 0 20px;transition: .3s;border-radius: 50px;position: fixed;right: 20px;bottom: 120px;background-color: #25D366;box-shadow: 0 0 8px rgba(0, 0, 0, .3);z-index: 5;}
.whatsapp_button svg {width: 22px;fill: var(--color-white);}
.whatsapp_button:hover {transform: scale(1.05);}

.social_container {position: fixed;top: 55%;right: 0;display: flex;flex-direction: column;gap: 10px;z-index: 3;}
.social_container a {width: 60px;height: 50px;border-radius: 10px 0 0 10px;background-color: var(--color-white);box-shadow: 0 0 10px rgba(0, 0, 0, .3);transition: .3s;text-decoration: none;padding-right: 10px;transform: translateX(10px);display: flex;justify-content: center;align-items: center;}
.social_container a svg {width: 30px;}
.social_container a.whats svg {fill: #25D366;}
.social_container a.facebook svg {fill: #0866FF;}
.social_container a.instagram svg {fill: url(#MyGradient);}


@media screen and (min-width: 375px){

  .about_cont {margin-bottom: 220px;}
  .about_cont .title_section {font-size: 40px;}
  .title_section {font-size: 30px;}

  .about_cont h3 {font-size: 25px;}
  .date_cont .button {padding: 0 30px;font-size: 22px;}
  .date_cont .button svg {width: 25px;}

  .models_menu a {font-size: 13px;}
}

@media screen and (min-width: 425px){

  .about_cont {margin-bottom: 150px;}

  .title_section::before,
  .title_section::after {width: 50px;display: block;}

  .models_menu a {padding: 12px 8px;}
}

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

  /* slider */
  .splide_info .text {max-width: 800px;}
  .splide_info h1 {font-size: 40px;letter-spacing: 3px;margin-bottom: 10px;}
  .splide_info h2 {font-size: 25px;letter-spacing: 3px;max-width: 500px;}

  .about_cont {margin-bottom: 100px;}

  #contact section {display: flex;max-width: 900px;align-items: center;}
  .contact_cont {max-width: 500px;padding-left: 50px;}

  .title_section::before,
  .title_section::after {width: 100px;}

  footer {text-align: left;}
  footer section {display: flex;justify-content: space-between;align-items: center;}
  footer .socialmedia {padding-top: 0;}

  .models_container {padding-top: 85px;}
  .models_menu a {font-size: 16px;width: 100%;max-width: 250px;padding: 12px 20px;}

  .models_header {display: flex;align-items: flex-end;height: 200px}
  .models_title {position: relative;padding: 20px;margin-left: 340px;}
  .models_title h1 {font-size: 40px;}
  .models_title h2 {font-size: 20px;}
  .models_info {display: flex;}
  .models_info .column.gallery {width: 340px;margin-top: -130px;}

  .models_features_info {display: flex;}
  .models_features_info .column:first-child {border-right: 1px solid var(--color-secondary);padding-right: 10px;}
  .models_features_info .column:nth-child(2) {padding-left: 10px;}


  .social_container a {width: 80px;height: 60px;padding-right: 20px;transform: translateX(20px);}
  .social_container a:hover {transform: translateX(0);}
  .social_container a svg {width: 35px;}

  .date_cont .title_section {;font-size: 40px;}

  .items_list {gap: 40px;}
}

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

  .btn_burger {display: none;}

  /* header */
  header section {display: flex;align-items: center;justify-content: space-between;border-bottom: none;}

  /* menu pagina */
  nav {display: flex;gap: 15px;align-items: center;position: relative;top:unset;padding: 0;background: none;left: unset;right: unset;border-radius: 0;box-shadow: none;}  
  nav a {padding: 5px 10px;text-shadow: 1px 1px 5px var(--color-black);}
  nav a svg {transform: translateY(-2px);}

  .schedule_button {color: var(--color-white);display: flex;gap: 10px;text-decoration: none;align-items: center;text-align: left;}
  .schedule_button .icon {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background-color: var(--color-white);flex-grow: 0;flex-shrink: 0;border-radius: 50%;box-shadow: 2px 2px 7px rgba(0, 0, 0, .2);}
  .schedule_button .icon svg {width: 22px;fill: var(--color-secondary);}
  .schedule_button .text {flex-grow: 1;text-shadow: 1px 1px 5px var(--color-black);}
  .schedule_button .text p {margin: 0;text-transform: uppercase;font-weight: 500;}

  header.fixed nav a {color: var(--color-black);text-shadow: unset;}
  header.fixed nav a svg {fill: var(--color-black);}
  header.fixed .schedule_button {color: var(--color-black);}
  header.fixed .schedule_button .icon {background-color: var(--color-primary);}
  header.fixed .schedule_button .icon svg {fill: var(--color-white);}
  header.fixed .schedule_button .text {text-shadow: none;}

  /* slider */
  .splide_info {padding: 100px 40px 30px;}
  .splide__arrow svg {width: 40px;}
  .splide__arrow--prev {left: 15px;}
  .splide__arrow--next {right: 15px;}
  .splide_info h1 {font-size: 50px;}
  .splide_info h2 {font-size: 30px;max-width: 550px;}

  .title_section {gap: 30px;font-size: 40px;letter-spacing: 6px;}

  .models {margin-bottom: 0;}

  .models_title {margin-left: 450px;}
  .models_info .column.gallery {width: 450px;}

  .models_features_info .column:first-child {padding-right: 25px;}
  .models_features_info .column:nth-child(2) {padding-left: 25px;}
}