@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wght@300&family=Montserrat:wght@300&family=Poppins:wght@400;500&family=Roboto:ital,wght@0,500;1,400&family=Sintony&display=swap");
@font-face {
  font-family: "Gantic";
  src: url("../webfonts/GANTIC_Regular.ttf")
}
@font-face {
  font-family: "GanticLt";
  src: url("../webfonts/GANTIC_Light.ttf")
}
@font-face {
  font-family: "HelveticaLt";
  src: url("../webfonts/HelveticaLt.otf") format("opentype")
}
:root {
  --bg-studio: #515432;
  --bg-normal: #FEFFF6;
  --tx-co-1: #8D4D36;
  --tx-co-me: #F7F4E8
}
body {
  font-size: 15px;
  min-width: 380px !important;
  line-height: 2.6rem;
  letter-spacing: 2px;
  font-family: "HelveticaLt";
  font-weight: 400;
  color: var(--tx-co-1);
  background-color: var(--bg-normal)
}
h1, h2 {
  font-weight: inherit;
  display: inline
}
h1 {
  font-size: 15px
}
hr {
  color: #F1E1CD;
  opacity: 1
}
.preh {
  display: inline
}
.font-helv {
  font-family: "HelveticaLt"
}
.font-gant {
  font-family: "Gantic"
}
.font-gantl {
  font-family: "GanticLt"
}
.ttl1 {
  font-size: 2.5rem;
  letter-spacing: 5px
}
.ttl2 {
  font-size: 35px;
  letter-spacing: 2px
}
.ttl3 {
  font-size: 1.95rem;
  font-family: "Gantic";
  padding-top: .75rem;
  margin-bottom: 10px
}
.ttl-s {
  font-size: 27px
}
.ttl-po {
  font-size: 2.25rem;
  font-family: "Gantic"
}
.sttl-po {
  font-size: 1.95rem;
  font-family: "Gantic"
}
.legales .ttl-po, .legales .sttl-po, .legales .ttl1 {
  margin-bottom: 1.5rem;
  font-weight: 600
}
.legales a {
  text-decoration: none;
  color: var(--bg-studio)
}
.no-ltr-s {
  letter-spacing: normal
}
.fw-100 {
  font-weight: 100
}
.tnormal {
  font-size: 1rem
}
.anota {
  font-size: .875rem
}
.nodeco {
  text-decoration: none
}
.ngrt {
  font-weight: 600
}
.subr {
  text-decoration: underline
}
.vermas {
  letter-spacing: normal;
  color: var(--tx-co-1)
}
.btn-vermas {
  font-size: 15px;
  font-family: "HelveticaLt";
  margin: 0px !important;
  padding: 0px !important;
  transition: ease-in-out 0.25s
}
.btn-vermas:hover {
  transform: scale(1.1)
}
.navbar-brand img {
  max-height: 117px
}
.navbar-toggler {
  border-color: transparent !important
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28247, 244, 232, 1.00%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' stroke-height='5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.nav-link {
  letter-spacing: 3px;
  transition: ease-in-out 0.15s
}
.bg-studio {
  background-color: var(--bg-studio)
}
.mt-header-logo {
  margin-top: 146px;
  max-height: 117px
}
.pt-header-logo {
  padding-top: 146px;
  padding-bottom: 60px
}
.pb-menu {
  margin-top: 80px
}
.menustudio .nav-link, .menu-f .nav-link {
  color: var(--tx-co-me)
}
.nav.pb-menu {
  padding: 8px 0px
}
.pb-menu .nav-link {
  padding: 8px 16px;
  margin-bottom: 20px;
  line-height: normal
}
.nav-link:hover {
  transform: scale(1.1)
}
.m-over {
  margin-top: calc(-10vw);
  text-align: end;
  margin-right: 1rem;
}
.m-over div {
  margin-left: 20vw;
  margin-right: 1rem;
  letter-spacing: 3px;
  font-size: 15px;
  line-height: 2.6rem
}
.s-prore {
  margin-top: 10rem;
  margin-bottom: 48px
}
#marquee {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 10px;
  margin: 71px 0px
}
.grid-group {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%
}
.o-info {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  font-family: "Gantic";
  font-size: 1.5rem;
  font-weight: 400;
  transition: ease 0.25s;
  color: transparent;
  line-height: normal;
  align-items: center;
  justify-content: center
}
.o-info:hover {
  background-color: rgba(95, 95, 95, 0.5);
  color: var(--bg-normal)
}
.relativo {
  margin-top: auto !important;
  margin-bottom: auto !important
}
.relativo .hel-16 {
  font-size: 16px;
  line-height: 2.6rem
}
.grid-ser {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid rgba(141, 77, 54, 0.15);
  border-bottom: 1px solid rgba(141, 77, 54, 0.15)
}
.grid-ser #div1 {
  order: 1
}
.grid-ser #div2 {
  order: 2
}
.grid-ser #div3 {
  order: 3
}
.grid-ser #div4 {
  order: 4
}
.grid-ser #div5 {
  order: 5
}
.grid-ser #div6 {
  order: 6
}
.grid-ser #div7 {
  order: 7
}
.grid-ser #div8 {
  order: 8
}
.video-c video {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.s-teac {
  margin: 60px
}
.s-teac p {
  line-height: 2.6rem
}
.accordion-button {
  background-color: var(--bg-normal)
}
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238D4D36' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e")
}
.accordion-header span, .accordion-body {
  color: var(--tx-co-1)
}
.accordion-header .ttl3 {
  margin: 0px;
  padding: 12px 0px
}
.accordion-button:not(.collapsed) {
  background-color: rgba(81, 84, 50, 0.35);
  box-shadow: none
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238D4D36' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
  transform: rotate(-180deg)
}
.accordion-button:focus {
  box-shadow: none
}
.accordion-item {
  border: var(--bs-accordion-border-width) solid #F1E1CD
}
.accordion-body, .accordion-body a {
  background-color: var(--bg-studio);
  color: var(--bg-normal)
}
.lesp-5 {
  margin-bottom: 35px
}
footer {
  background-color: var(--bg-studio)
}
.marima {
  margin: 30px 0px
}
.menu-f {
  gap: 3.5%;
  font-size: 13px
}
.politicas a {
  font-size: 14px;
  color: var(--tx-co-me)
}
.copyr, .copyr a {
  color: var(--tx-co-me);
  font-size: 12px;
  text-align: center;
  margin-bottom: 0px;
  padding-bottom: 32px;
  line-height: normal
}
.contacto a {
  color: var(--tx-co-me)
}
.grupo {
  margin-top: -16px
}
.grupo p {
  margin: 0px 0px 0px 1rem;
  line-height: 32px
}
.s-teac {
  margin-top: 110px;
  margin-bottom: 90px;
  line-height: 56px
}
.airegrande {
  margin: 6rem 0rem;
  padding-bottom: 5rem
}
.btn-studio a, .btn-studio, .btn-contacto {
  color: var(--tx-co-me) !important;
  border-radius: 0;
  padding: .65rem 0rem;
  text-transform: uppercase;
  font-family: "Gantic";
  font-size: 1.5rem;
  letter-spacing: 5px
}
.btn-studio {
  background-color: var(--bg-studio) !important;
  transition: ease-in-out .25s;
  width: 12.5rem
}
.btn-contacto {
  background-color: #f1e1cd !important;
  transition: ease-in-out .25s;
  padding: 20px
}
.btn-contacto a {
  color: var(--tx-co-1);
  font-size: 1.5rem;
  font-family: "HelveticaLt"
}
.btn-studio:hover, .btn-contacto:hover {
  transform: scale(1.05)
}
.my-contactanos {
  margin: 120px 0px
}
.marbottom {
  margin-bottom: 50px
}
.pd5 {
  margin-top: 12px
}
form {
  margin-top: 142px
}
form label {
  margin: 4px 0px 0px 1rem
}
form label a {
  text-decoration: underline;
  color: var(--tx-co-1);
}
form input, form textarea {
  font-family: "HelveticaLt";
  background-color: var(--bg-normal);
  color: var(--tx-co-1) !important;
  letter-spacing: 3px
}
form .custom-checkbox:checked {
  background-color: brown;
  border-color: brown
}
.form-check-input[type="checkbox"] {
  border-radius: 0px
}
.form-control {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--tx-co-1) !important;
  background-color: var(--bg-normal)
}
.mar-form, .mar-form2 {
  margin-bottom: 61px;
  background-color: var(--bg-normal)
}
.mar-form2 {
  margin-bottom: 125px
}
.op-form {
  color: var(--tx-co-1) !important;
  font-weight: 500;
  font-family: "HelveticaLt";
  font-size: 1rem !important;
  letter-spacing: 3px
}
::placeholder {
  color: var(--tx-co-1) !important;
  font-weight: 500;
  font-family: "HelveticaLt" !important;
  font-size: 1rem;
  letter-spacing: 3px;
  background-color: var(--bg-normal)
}
.nobo {
  border-radius: 0;
  box-shadow: none !important
}
.nobo:focus {
  box-shadow: none !important;
  background-color: var(--bg-normal) !important
}
.custom-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid brown;
  background-color: white;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.grid-blog {
  display: grid
}
.dg-1 {
  grid-template-columns: 4fr 7fr
}
.dg-2 {
  grid-template-columns: 7fr 4fr
}
.ord1 {
  order: 1
}
.ord2 {
  order: 2
}
.arblog .sttl-po {
  font-weight: 600
}
.layer-cookie {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: 100%;
  background-color: var(--bg-normal);
  font-family: "HelveticaLt";
  line-height: 25pt;
  font-size: 12px;
  letter-spacing: normal
}
.layer-cookie .btn-studio {
  font-family: "HelveticaLt";
  font-size: 12px;
  line-height: 18px;
  letter-spacing: normal;
  padding: 18px 20px 10px;
  min-height: 56px;
  margin-bottom: 16px;
}
.layer-cookie a {
  color: var(--tx-co-1)
}
.justifica {
  justify-content: flex-end
}
.hidden {
  display: none
}
.go-top {
  background-color: var(--bg-studio);
  padding: 5px 10px;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  position: fixed;
  z-index: 50;
  bottom: 1.5rem;
  right: 1.5rem;
  opacity: 1;
  transition: opacity ease-in-out .25s;
  display: none
}
.go-top:hover {
  opacity: .5;
}
@media(max-width:1131.98px) {
  .s-serv .absoluto, .s-serv .relativo {
    position: inherit
  }
  .grid-ser {
    grid-template-columns: 1fr
  }
  .grid-ser #div1 {
    order: 1
  }
  .grid-ser #div2 {
    order: 2;
    border-top: none
  }
  .grid-ser #div3 {
    order: 4
  }
  .grid-ser #div4 {
    order: 3
  }
  .grid-ser #div5 {
    order: 5
  }
  .grid-ser #div6 {
    order: 6
  }
  .grid-ser #div7 {
    order: 8;
    border-bottom: none
  }
  .grid-ser #div8 {
    order: 7
  }
}
@media(max-width:991.98px) {
  #mlst {
    display: none
  }
  #marquee {
    font-size: 18px;
    letter-spacing: 8px
  }
  nav button img {
    margin-top: 24px;
    margin-bottom: 5px
  }
  .pt-header-logo {
    padding-top: 55px;
    padding-bottom: 0px
  }
  .o-info {
    font-size: 1.25rem
  }
  .dg-1 {
    grid-template-columns: 1fr
  }
  .dg-2 {
    grid-template-columns: 1fr
  }
  .ord1 {
    order: 2
  }
  .ord2 {
    order: 1
  }
  .pos {
    margin-right: auto
  }
  .justifica {
    justify-content: center
  }
  .pd5 {
    margin-top: 10px
  }
}
@media(max-width: 767.98px) {
  .s-serv {
    max-width: 720px
  }
  .img-mobile {
    content: url("../images/header-mobile-home.webp")
  }
}
@media(max-width:575.98px) {
  .layer-cookie .btn-studio {
    width: 9.5rem
  }
  .s-teac p {
    line-height: 1.5rem
  }
  .menu-f .nav-link {
    letter-spacing: 1px
  }
}
@media(min-width: 1px) {
  .s-serv .s-teac {
    max-width: 100%;
    padding: 0rem 1rem
  }
}
@media(min-width: 576px) {
  .s-serv .s-teac {
    max-width: 540px;
    padding: 0rem
  }
}
@media(min-width: 768px) {
  .s-serv .s-teac {
    max-width: 720px
  }
}
@media(min-width: 992px) {
  #mnav {
    display: none
  }
  .s-serv .s-teac {
    max-width: 960px
  }
}
@media(min-width: 1200px) {
  .s-serv .s-teac {
    max-width: 1140px
  }
}
@media(min-width: 1400px) {
  .s-serv .s-teac {
    max-width: 1320px
  }
}
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}
.swiper-slide p {
  font-size: 20px;
  font-family: "HelveticaLt";
  line-height: normal;
  padding-top: 20px;
  letter-spacing: normal;
  font-weight: 100
}
.sldrn span {
  cursor: pointer
}
.sldrn img {
  width: 3.5rem;
  margin: 38px 8px 60px
}
/* carruseles proyectos*/
.carruseles .row > * {
  padding: 5px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease-in-out
}
.overlay-especial {
  width: 100%;
  height: 100%
}
.overlay .text {
  color: white;
  font-size: 24px;
  text-align: center;
  font-family: "Gantic"
}
.carousel-item:hover .overlay {
  opacity: 1
}