*,::before,::after{box-sizing:inherit}
header{background-color:#095779;display:grid;grid-template-rows:auto;grid-template-columns:1fr}
header picture,header img{width:100%;grid-row:1/3;grid-column:1/2;max-height:50vh;object-fit:cover}
header .hero{grid-row:3/4;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));color:white;text-shadow:1px 1px #000000;margin:40px 20px 50px;align-items:center}
header .hero h1 b{color:#F36E42}
header .hero h1{margin-bottom:20px;}
header .hero>p:first-of-type{margin-bottom:5px;font-size:.75rem;letter-spacing:2px}
header .hero .bajada{font-size:1rem;line-height:1.5rem;font-weight:300}
header .dash{letter-spacing:-3px;color:#F36E42;display:inline}
main hr{border:1px solid #095779}
main .fh1{margin-bottom:30px;text-align: center}
.preguntas{margin:4.5rem 20px}
br {display: none}
.contacto .grid br {display: block}
.preguntas .fh1, .faq .fh1 {color:#095779}
.faq div a {color: blue}
.faq div a:hover {color:#36bae6}
.fh1.center {text-align: center;}
/* ACORDEONES */

.accordion {
    font-family: "Space Grotesk", serif;
    cursor: pointer;
    padding: 0.5rem 0;
    font-size: 1.125rem;
    line-height: 1.4rem;
    font-weight: 600;
    color: #095779;
    width: 100%;
    border: 0;
    text-align: left;
    outline: 0;
    background: 0;
    display: flex;
    justify-content: space-between;

 /*
    overflow: hidden;
    color: #333;
    font-size: 1rem;
    font-weight: 300;
    padding-right: 2rem;
    transition: max-height 0.4s ease-out;
    margin-bottom: 1rem;
 */

}
details {border-bottom: 1px solid #095779; padding-bottom: 10px}
details br {display: block;}
summary{font-family:'Space Grotesk',serif;cursor:pointer;padding:.5rem 0;font-size:1.1rem;line-height:1.4rem;font-weight:600;color:#095779;width:100%;border:0;text-align:left;outline:0;background:0;display:flex;justify-content:space-between;transition: margin 150ms ease-out;}
summary:after{font-family:"Inter";content: "+";font-size: 1.2rem;font-weight: 300;display: flex;align-items: center;margin-right: 0.5rem;transition: rotate 200ms ease-out;margin-left:1rem;color:transparent;text-shadow:0 0 0 #095779}
details[open] summary::after{font-family:"Inter";content:"-";color:transparent;text-shadow:0 0 0 #095779}
details[open] summary {margin-bottom: 5px;}


.quesello{background:#095779;color:white;padding:50px 20px}
.quesello p{font-family:'Space Grotesk',serif;font-size:1.7rem;line-height:2rem;font-weight:600;text-align:center;max-width:800px;margin:30px auto}
.quesello a{margin:0 auto;display:block}
.contacto{margin:0}
.principios{margin:50px 20px;text-align:center}
.principios .grid{grid-template-columns:1fr;grid-gap:20px 30px}
.principios p.fadelay{margin-bottom:3rem;transition-delay:.5s}
.principios .fh1{color:#095779;max-width:800px;margin:50px auto 100px;text-align:center}
.grid.servicio>:first-child{grid-column:1/3;grid-row:1/2;font-size:8rem;font-weight:400;font-family:'Space Grotesk',serif;color:#F36E42;opacity:.4;justify-self:left;align-self:center;z-index:-10;position:relative;top:-60px}
.grid.servicio div{grid-column:1/2;grid-row:1/2}
.principios .grid div p:first-of-type{color:#095779;font-family:'Space Grotesk',serif;font-size:1.25rem;line-height:1.4rem;opacity:1;font-weight:600;margin:0}
.principios .grid div p:last-of-type{grid-column:1/-1;grid-row:3/4;color:#333;font-weight:300;margin-top:10px}
.testimonios .fh1{color:#095779;margin-bottom:50px;text-align: center;}
.testimonios a{display:block;margin:40px auto}
.testimonios {margin-bottom: 50px;}
aside.testimonios.center {background-color: rgb(238, 237, 237);padding: 30px 20px;}
.faq {margin: 50px 20px}
.faq .fh1 {text-align: center;margin: 0 auto 30px}
.faq .flex {display: block;}
.call-to-action{background:#F36E42;padding:50px 20px}
.call-to-action .celeste{color:#095779}
.call-to-action>:first-child{font-size:1.75rem;font-weight:400;line-height:1.9rem;color:#095779}
.call-to-action .fp{font-size:1.75rem;font-family:'Space Grotesk',serif}
.call-to-action p,.call-to-action .fp{font-weight:300;color:#095779;text-align:center;max-width:800px;margin:20px auto}
.call-to-action a{display:block;margin:20px auto 0;background:#F36E42}
.call-to-action a:hover{background:#5FC4E5;transition: all .5s}

@media screen and (min-width:550px){
header{grid-template-columns:repeat(10,1fr);grid-template-rows:auto}
header picture,header img{grid-column:5/-1;justify-self:end;object-fit:cover;height:100%; max-height: 65vh}
header .hero{margin:0;grid-column:2/7;grid-row:1/3;z-index:10;grid-template-columns:1fr;align-self:center;justify-items:baseline}
header .hero .bajada{display:none}
}
@media screen and (min-width:600px){
.lista-servicios div:nth-of-type(2){transition-delay:.3s}
}
@media screen and (min-width:700px){
header .hero .bajada{display:block;margin-left:0;max-width:70%;margin-top:20px;font-size:1.2rem}
}
@media screen and (min-width:875px){
.principios{margin:80px 50px}
.lista-servicios div:nth-of-type(3){transition-delay:.6s}
}
@media screen and (min-width:1024px){
  br {display: block;}
.lista-servicios div:nth-of-type(4){transition-delay:.9s}
header picture,header img{height:83vh;object-fit:cover;width:100%; max-height: 83vh}
.servicio {max-width: 23%;}
.principios{margin:80px}
.principios .grid div p:first-of-type {font-size: 1rem;}
.principios .grid div p:last-of-type {font-size: .9rem;}
main .fh1{font-size:1.8rem;line-height:2rem;margin-top:20px;text-align: left}
.testimonios {margin-bottom: 100px;}
.fadelay>.panel:first-of-type{border-bottom:0}
.quesello{max-width:80%;margin:50px auto}
.preguntas, .faq{display:grid;grid-template-columns:50px 1fr 1fr 50px;grid-gap:50px;max-width:max(1400px,80%);margin:4.5rem auto}
.preguntas .fh1, .faq .fh1{grid-column:2/3;grid-row:1/2}
.preguntas div, .faq div{grid-column:3/4;grid-row:1/3}
.faq { display: block;}
.faq .flex {display: flex}
.faq div { margin: 20px 40px; flex: 1;}
.preguntas .panel{max-height:500px;padding-left:0;margin-left:0;border-bottom: none;}
.preguntas .panel p{margin-top:0}
hr{display:none}
.preguntas .accordion{cursor:auto}
.preguntas .accordion:after{display:none}
.call-to-action{max-width:80%;margin:50px auto 100px}
}

@media screen and (min-width:1920px){
.principios .fh1{max-width:1000px;}
}