/* COLORES */
.text-primary-color{color:#BC774E}
.text-secondary-color{color:#000}
.text-light{color: #ffffff;}
.btn{background: #DDC28B; padding: 8px 20px; margin:45px 0; border-radius: 6px; display: block;  transition: all 0.5s ease!important;
    text-transform: uppercase; text-decoration: none; width: fit-content; letter-spacing: 0.5; }
.btn:hover{background: #BC774E; color: #ffffff; letter-spacing: 0.8; }

.divider-intro{width: 100%; height: 60px; background: url(../images/divisor-intro.svg) no-repeat; background-size: cover; margin:35px 0; display: block;}
.divider-corral{width: 100%; height: 60px;  background: url(../images/divisor-corral.svg) no-repeat; background-size: cover; margin:35px 0; margin-bottom: 0px; display: block;}

/* Modificadores de encabezados */
.container{max-width:1400px}
h1{font-family: 'Ysabeau SC', sans-serif; letter-spacing: 0.08rem;}
h1, h2{font-family: 'Ysabeau SC', sans-serif; letter-spacing: .08rem;  text-transform: uppercase; font-weight: 400;}
h2 strong{ font-family: 'Ysabeau SC', sans-serif; letter-spacing: .08rem; font-weight: 700;  }
h3{font-family: 'Poppins', sans-serif;}
p, a {  transition: all 0.5s ease;}
a:hover{font-weight: bold; letter-spacing: 0.08rem;}


.pic-frame img{max-width: 100%;}

ul.list, ul.list-02 { list-style: none; margin: 25px 0; padding: 0;}
ul.list {width: 70%;}
ul.list li{ letter-spacing: 0.08rem; font-size: 1.2rem;  margin: 35px 0; color: #BC774E; list-style: none; 
    background: url(../images/icon-list.svg) no-repeat; background-size: 60px; padding-left: 75px; min-height: 70px; }

ul.list-02 li{ letter-spacing: 0.08rem; font-size: 1.2rem; margin: 35px 0; color: #ffffff; list-style: none; 
        background: url(../images/icon-list-02.svg) no-repeat; background-size: 60px; padding-left: 75px; min-height: 70px;}

        .en ul.list-02 li strong{ color: #fff; }
        .en ul.list-02 li { color: #fff; font-family: 'Ysabeau SC', sans-serif;  font-size: 1.1rem;  }
 
        ul.list-03 { list-style: none; width: fit-content; text-align: center; padding: 0!important; margin: 15px auto!important;}

        ul.list-03 li{ list-style:none; text-align: center; width: fit-content; margin:15px auto; font-size: 1.125!important;
                width: fit-content;
    max-width: 80%;
    background-position: 3px 8px;}
    ul.list-03 li i img{padding: 2px;}

/* Primera sección */
header{min-height: 100vh; width: 100vw; max-width: 100%; overflow-x: hidden;  background-image: url(../images/primera-seccion.webp); background-repeat: no-repeat; 
    background-size: cover; background-position: center; margin:0 auto}
header nav{position:absolute; right:0px; top:-3px;  background-color: #DDC28B;  background: url(../images/back-nav.webp) no-repeat bottom left; 
    background-size: cover;  padding-left: 30px; padding-bottom: 34px; padding-right:30px; padding-top:15px; text-align: center; }
header nav a { color: #000; text-decoration: none; letter-spacing: .03rem; margin-left: 15px;  transition: all 0.5s ease!important;}
header nav li:hover a{  font-weight: 600; }
header nav .lang-option{ display: inline-block; padding-left: 10px; margin-left:10px; border-left: 1px solid #000;}
header .top-navigation.row{ margin:0px!important; }
header .row nav[class^=col] {margin:0px!important}
header .page-title{ position:absolute; bottom: 0px; left:0px; right: 0px; padding:25px; background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); text-align: center; }
header .page-title h1{ margin-bottom: 0px; }
header .page-title p{ font-size: 1.2rem; color: #ffffff; margin-top: 0; }

/* Segunda sección */
.intro-page{ padding: 35px 0px; text-align: center; }
.intro-page p{font-size: 20px; }
.intro-page a, .intro-page a i { padding: 35px 0px; color: #BC774E; font-size: 20px; text-decoration: none;}

/* Tercera sección 
.confianza p{font-size: 20px; font-weight: 400;}
*/

/* Cuarta sección */
.corral{text-transform: uppercase; min-height: 100vh; width: 100vw; max-width: 100%; overflow-x: hidden; 
    background-image: url(../images/trabajo-corral.webp); background-repeat: no-repeat; 
    background-size: cover; background-position: top; font-family: 'Ysabeau SC', sans-serif!important; letter-spacing: .08rem; 
     margin:0 auto; margin-bottom:65px}
.corral .content{padding-top: 60px;}
.corral h2 {margin-bottom: 55px;}
.corral h2 strong{ font-weight: 700;}
.corral p, .corral strong{font-family: 'Ysabeau SC', sans-serif!important;}
/* .corral p{font-size: 18px; font-weight: 400;}*/

/* Quinta sección */
.actividades {text-align: center; margin-bottom: 75px;}
.actividades i {min-height: 155px; display: block;}
.actividades h3 {font-weight: 400; min-height: 70px; text-transform: uppercase;}


/* Sexta sección */
.naturaleza{ background-image: url(../images/su-naturaleza-dkp.webp); background-repeat: no-repeat; 
    background-size: cover; background-position: top;
    margin:0 auto; margin-bottom:65px; color: #ffffff!important; padding:55px 0}
.naturaleza  [class^=col] {float: right;}

.naturaleza p, .naturaleza strong{font-family: 'Ysabeau SC', sans-serif!important;  letter-spacing: .08rem; text-transform: uppercase; }

.naturaleza strong{color: #fff;}

/* Séptima */
.nosotros h2 { margin-top:75px  }
/*.nosotros p{ font-size: 1.3rem;}*/

/* Octava sección */
.experiencias{width:100%; padding-top: 130px; text-align: center; 
    background: #DDC28B url(../images/separador-experiencias-dkp.webp) no-repeat top; background-size: 100%; }
    .experiencias p, .experiencias ul.list-03{ font-size:1rem!important; 
    font-weight: 400!important; }
    .experiencias .col-6{ padding: 0; }
.experiencias .card{ margin:5px;  border-radius: 12px; background-color: #ffffff; padding-bottom:25px;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; margin-bottom: -45px;}
.experiencias .card picture, .experiencias .card picture img{max-width: 100%!important;}
.experiencias h3{padding: 10px 10px;
    text-transform: none;
    font-weight: 500!important;
    margin-top: 5px;
    padding-top: 30px;; }
.experiencias picture{margin-bottom: 25px;}
.experiencias .btn{margin:35px auto; display: block; clear: both;}

.importante{text-align: center; padding:25px 0; margin-top: 45px!important;}
.importante strong{font-family: 'Ysabeau SC', sans-serif;letter-spacing: .08rem; font-size: 1.2rem; }

/* Novena sección */
.aprenda{background: rgb(221,194,139);
    background: linear-gradient(108deg, rgba(221,194,139,1) 0%, rgba(203,164,86,1) 77%);  padding:45px 0; text-align: center; }
.aprenda h2{width: 65%; margin:10px auto}
.aprenda p{font-size: 1.3rem; }
.aprenda strong{display: block; clear: both; text-transform: uppercase; font-family: 'Ysabeau SC', sans-serif; letter-spacing: .08rem;  }


/* Sección contacto */
.contacto{ width: 100vw; max-width: 100%; overflow-x: hidden; 
    background-image: url(../images/contacto-dkp-b.webp); background-repeat: no-repeat; 
    background-size: cover; background-position: bottom;
    margin:0 auto; margin-top:10px; min-height: 80vh;}
/*.contacto p{color:#ffffff; font-size: 1.3rem; }*/
.contacto h2{text-align: center;}
.contacto .content p{ color: #fff!important; font-weight: 400; text-transform: uppercase;  font-family: 'Ysabeau SC', sans-serif; 
    letter-spacing: .08rem; font-weight: 400; }
    .contacto .content p strong{ font-family: 'Ysabeau SC', sans-serif; font-weight: 700;  color: #fff!important;}
.contacto .content i{width: 50px;}
.contacto .content i  img{width: 100%; margin-bottom: 20px;}
.contacto .content{margin-bottom: 105px;}
.contacto a{color: #ffffff; text-decoration: none; letter-spacing: 0.05rem;font-size: 1.2rem; }

.contacto form{display: block; margin-bottom: 185px;}
.contacto input, .contacto textarea{
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    display: block;
    padding: 11px;
    border-radius: 6px;
    display: block;
    width: 90%;
    margin:10px 0px;
    border: #BC774E 1px solid;
    background: rgba(255,255,255,.8);
    font-size: 1.1rem;
}
.contacto textarea{max-height: 140px;}
.contacto input[type='submit']{background-color: #DDC28B; border: none; width: fit-content; padding: 8px 45px; margin-bottom: 65px; transition: all 0.5s ease!important;}
.contacto input[type='submit']:hover{ background-color: #BC774E; color: #fff; cursor: pointer; }
.contacto input::placeholder, .contacto textarea::placeholder{font-size: .9rem; font-weight: 300;}
.contacto .contact-info{display: block; margin-bottom: 45px;}
.contacto .contact-info i{float: left; }
.contacto .contact-info a{margin-left:15px}

/*Footer*/
footer{background-color: #DDC28B;min-height: 80px;  margin-top: -40px; ; }
footer a{ padding: 8px; }
footer p{ padding: 0px 8px;color: #fff!important }
footer .copyR{color: #000!important; border-top: 1px solid #666; text-align: center; font-size:.9rem; margin-top: 20px;}
footer .copyR i{margin-right: 10px;}




@media only screen and (max-width: 33.75em) {  /* 540px */

    p{font-size: 18px; }
    h2{font-size: 1.4rem;}

    ul.list {width: 70%;}

    header nav a{   letter-spacing: .01rem;
        margin-left: 8px; font-size: 14px;}
    
        header nav .lang-option{ border: none; padding-left: 0; margin-left: 0; display: block;}
        header nav .lang-option a{padding-bottom:3px}
        header nav .lang-option a.active{ border-bottom:1px solid #000; font-weight: bold;}

    header{background-position: 40% top;}
    header .logo{ margin-top: 65px!important; max-width: 65%;}
    header .logo img {max-width: 100%!important; display: block;}
    header nav{position:absolute; right:0px; top:-3px;  background-color: #DDC28B;  background: url(../images/back-nav.webp) no-repeat bottom left; 
        background-size: cover;  padding-left: 5px; padding-bottom: 15px; padding-right:5px; padding-top:15px; text-align: center; }

   .experiencias{padding-top: 50px;}
    .experiencias .card{ margin:5px 2px;  border-radius: 12px; background-color: #ffffff; 
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; margin-bottom: 25px;}

    .experiencias .card p, .experiencias .card ul, .experiencias .card h3{padding: 5px 15px; font-size: 1rem;}
    .experiencias .card h3{padding-top: 25px!important;}

            ul.list{width: 80%;}
            ul.list li{font-size:1rem; letter-spacing: 0.03rem;}
            ul.list-02 li{font-size:1rem; letter-spacing: 0.03rem;}

    .naturaleza{ background-position: 25%; }

    .corral .container {background: linear-gradient(180deg, rgba(255,255,255,.4) 90%, rgba(255,255,255,0) 100%); margin: 0; padding: 10px; width: 100%;}
    .corral .content  {padding-top: 0; width: 80%;}
    .corral .content h2 {font-size:1.4rem;}
    .corral .content p{font-size: 18px;}

    .nosotros, .ensenan{text-align: center;}
    .nosotros .btn, .ensenan .btn{ margin: 25px auto!important; display: block;}
    .nosotros h2{margin-top: 15px; font-size: 1.6rem;}
    .nosotros h3{ font-size: 1.3rem;}

    .aprenda h2{width: 100%; margin:10px auto}
.aprenda p{font-size: 1.2rem; }

    .contacto form{margin-bottom:45px}
    .contacto a{ font-size: 1.1rem;}
    
  }
  
  @media only screen and (min-width: 45em) {  /* 720px */


}


@media only screen and (min-width: 60em) {  /* 960px */
  

}