@font-face {
  font-family: 'DK Soerabaja Regular';
  src: url('fonts/DKSoerabaja.otf') format('opentype');
  font-display:swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-display:swap;
}

:root{
  --blanco:#f7efe7;
  --blanco-light:#f7f2ed;
  --lila: #8d64a7;
  --lila-light:#ae90c4;
  --lila-dark: #714c8c;
  --rosa: #d35ea9;
  --rosa-light: #e774b9;
  --rosa-dark:#b24290;
  --verde: #80dc7f;
  --verde-dark: #335b32;
  --beige: #f9f4ee;
  --beige-dark: #f2ebe4;
  --texto: #2a2630;
  --bg-blur:rgba(25, 25, 25, 0.4);

  --shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* Pantalla de carga */
 body.loading {
      overflow: hidden;
    }

    #loader {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: var(--beige);
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 9999;
     }

/*Header con logo*/
header{
  background-color: var(--lila);
  padding: 25px 10px;
}

header img{
  max-width: 90dvw;
}

/*Footer*/
footer{
  padding: 20px;
  border-top: solid;
  border-width: 15px;
  border-color: var(--lila-dark);
  background-color: var(--lila);
  color:var(--blanco);
  font-weight: 400;
  font-size: 15px;
}

.footer img{
  max-width: 300px;
  margin: auto;
}

.footer a{
  text-transform: uppercase;
  color: var(--blanco);
}

/*Barra de navegacion*/
nav{
  background-color: var(--lila-dark);
  box-shadow: var(--shadow);
}
.nav-link, .dropdown-item{
  font-weight: 500;
  color:var(--blanco);
  text-transform: uppercase;
}

.dropdown-menu{
  background-color: var(--lila);;
  border: none;
}

.navbar-toggler{
  border-color:var(--blanco);
}

body{
  background-color: var(--beige);
  color: var(--texto);
  overflow-x: hidden;
  font-family: 'Montserrat';
  font-size: 18px;
  font-weight: 550;
  text-align: justify;
  text-align-last: center;
}


#main, #section01, #equipo, #testimonios, #servicios, #contenido,
#cm, #capsulas, #web, #nosotras, #contacto, footer{
  padding-block: 50px;
}

/*Sombra containers*/
.shadow{
  box-shadow: var(--shadow);
}

/*Ancho de los contenedores*/
.container-custom, .card-servicio{
  margin-inline:auto;
}

/*Alineacion dentro de los contenedores*/
.row, #main{
  display: flex;
  place-items: center;
}


#main{
  color: var(--blanco);
  background-image: linear-gradient(rgba(25, 25, 25, 0.80), rgba(25, 25, 25, 0.80)),
                  url("bg/bgmain_01.webp");
  background-position: center;
  background-size: cover;
  min-height: 70dvh;
}


h1, h2{
  text-align: center;
  font-weight:800;
  font-size: 50px;
  line-height: 0.9;
}
h1{
  font-size: 50px;
}
h2{
  font-size: 35px;
}

/*Palabras resaltadas*/
.resaltado{
  --color:#80dc7f;

  background:linear-gradient(
    to top,
    var(--color) 60%,
    transparent 60%
  );
}
.resaltado.lila{ --color:#ae90c4; }
.resaltado.rosa{ --color:#d35ea9; }
.resaltado.verde{ --color:#80dc7f; }

/*Boton*/

.boton{
  background-color: var(--verde);
  border-radius: 20px;
  width: 250px;
  height: 40px;
  padding: 5px;
  margin: auto;
  box-shadow: var(--shadow);
  }

  .boton.sm{
    width: 160px;
  }

.boton.rosa{
background-color: var(--rosa-light);
}

.boton.rosa a{
  font-size: 15px;
  color: var(--blanco);
}

.boton:hover{
    transform: scale(1.05);
    transition: all .2s ease-in-out;
}

.boton a, .boton p{
  font-weight: bold;
  color: var(--verde-dark);
  text-transform: uppercase;
   text-decoration: none;
}

.boton a:hover{
   text-decoration: none;
}

/*Divider con palabras clave*/
#palabras-clave{
  font-family: 'DK Soerabaja Regular';
  padding: 5px;
  background-color: var(--rosa-light);
  color: var(--rosa-dark);
}

/*Fondos de secciones*/
.bg-section{
  background-size: contain;
  background-repeat: repeat;
}

.bg-title{
  background-size: contain;
  background-repeat: no-repeat;
}

/*Seccion 01*/
#section01{
  background-image:url("bg/bg_main.webp");
}

.section01{
  position: relative;
  padding: 50px 5px;
}

.items{
  text-align-last: left;
}

.sticker {
  position: absolute;
  width: 150px;
}

.s1 {
  top: -30px;
  left: 10px;
  transform: rotate(-15deg);
}

.s2 {
  top: -45px;
  right: 20px;
  transform: rotate(20deg);
}

.s3 {
  bottom: -85px;
  left: 20px;
  transform: rotate(-10deg);
}

.s4 {
  bottom: -100px;
  right: 30px;
  transform: rotate(5deg);
}

/*Seccion Equipo*/

#equipo{
  background-color:var(--rosa-light);
  background-image: url('bg/bg_equipo01.webp');
}

/*Fotos seccion equipo*/
.fotos{
  display: flex;
  flex-direction: column;
}

.fotos img{
  width: 300px;
  margin: auto;
}


.f1{ transform:rotate(5deg); }
.f2{ transform:rotate(-4deg); }
.f3{ transform:rotate(8deg); }
.f4{ transform:rotate(-1deg); }
.f5{ transform:rotate(3deg); }

/*Página Servicios*/
#servicios{
  background-image: url('bg/bg_servicios.webp');
}
.servicios img{
  width: 250px;
  height: 250px;
}
.lista-servicios, .product-web{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.card-servicio{
  text-align: center;
  border-image-repeat: stretch;
  border-image-slice: 10 10 10 10 fill;
  border-image-source: url('bg/bg_lila_v.webp');
  border-image-width: 3px;
  color: var(--blanco);
  text-transform: uppercase;
  font-weight: 700;
  display: grid;
  place-items: center;
  max-height: 400px;
  width: 290px;
  padding: 25px;
}

.card-servicio lord-icon{
  width: 180px;
  height: 180px;
}

/*Pagina Servicio | Creación de contenido*/
#contenido{
  background-image: url('bg/bg_contenido.webp');
}

.incluye{
  margin: 30px 10px;
  text-align-last: left;
  position: relative;
  background-color: #fcfbf0;
  border-radius: 30px;
  padding: 40px 20px;
}

.s5 {
  top: -20px;
  left: 30px;
  transform: rotate(-2deg);
}

/*Página Servicio | Acompañamiento integral*/
#cm{
  background-image: url('bg/bg_cm.webp');
}

/*Página Servicio | Capsulas de contenido*/
#capsulas{
  background-image: url('bg/bg_capsulas.webp');
}
.accordion{
    text-align-last: left;
  max-width: 450px;
  margin: auto;
  --bs-accordion-bg:var(--beige);
  --bs-accordion-color:var(--texto);
  --bs-accordion-btn-bg: var(--rosa-light);
  --bs-accordion-btn-color: var(--blanco);
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-active-color: var(--blanco);
  --bs-accordion-active-bg: var(--rosa-dark);
}


.accordion-button{
  font-weight: 800;
  text-transform: uppercase;
}

/*Pagina Servicio | Web*/
#web{
  background-image: url('bg/bg_web.webp');
}

.product-item{
  border-radius: 20px;
  max-height: 450px;
  max-width: 425px;
  margin: auto;
}
.product-title {
  padding: 10px;
  text-transform: uppercase;
  font-weight: 800;
  background-color: var(--rosa-light);
  color: var(--rosa-dark);
  border-radius: 20px 20px 0px 0px;
}
.product-body{
  padding: 15px;
}

/*Pagina Nuestro Team*/
#nosotras{
  background-image: url('bg/bg_nosotras_01.webp');
}

.integrantes{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.team-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    max-width: 350px;
    padding: 1.5rem;

    border-radius: 20px;
    text-align: center;
}

.team-card img{
  box-shadow: var(--shadow);
    width: 260px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.team-card h3{
    margin: 0;
    font-size: 1.3rem;
    text-transform: uppercase;
}

.boton.team{
    border: none;
    border-radius: 20px;
    cursor: pointer;
    background-color: var(--verde);
    color: var(--verde-dark);
    font-weight: 700;
    text-transform: uppercase;
    width: 150px;
}


.modal{
  background-color:var(--bg-blur);
  backdrop-filter:blur(10px);
}
.modal-content{
  background-color:var(--beige);
  padding: 15px 15px 35px 15px;
}

.modal-body{
  font-size: 16px;
}

/*Pagina de contacto*/
#contacto{
  background-image: url('bg/bg_contacto.webp');
}
.bg-beige{
  background-color: var(--beige);
  border-radius: 0px 30px 0px 30px;
  padding: 20px;
  }

/*Otros dispositivos*/

@media screen and (min-width: 768px){
  #main{
    min-height: 60dvh;
  }
  h2{
  font-size: 35px;
  }

  .fotos{
    flex-direction: row;
  }

  .fotos img{
  width: 150px;
  }

  header img{
  max-width: 450px;
  }

  .divide-footer{
    border-left:solid;
  }

  .lista-servicios, .product-web{
    grid-template-columns: repeat(2, 1fr);
  }
  
}
@media screen and (min-width: 1024px){
  .container-custom{
    width: 90%;
  }
  .lista-servicios{
    grid-template-columns: repeat(4, 1fr);
  }

  .fotos img{
  width: 180px;
  }

}

@media screen and (min-width: 1440px){
  .container-custom{
    width: 70%;
  }

  .fotos img{
    width: 220px;
  }
}