/* INTRODUCCION */
html {
  scrollbar-gutter: auto;
}

body {   /* quita el scroll horizontal */
  overflow-x: hidden;
 
}

.faq-intro,
.faq-container {
    max-width: 900px;
    width: 100%;
    padding: 0 8px; /* evita que toque bordes en móvil */
}


.faq-intro{
    margin: 12px auto 8px auto;    
    background: #e9f7ef;
    border: 2px solid #cfe9d8;
    border-radius: 12px;
    padding: 8px 15px;
    text-align: center;
}

.faq-intro p{
    margin: 0;
    line-height: 1.6;
}

.faq-intro h2{
color:#2d7d46;
margin-bottom:2px;

}

/* CONTENEDOR FAQ */
.faq-container{
margin:0 auto 12px auto;
display:flex;
flex-direction:column;
gap:4px;

}

/* ITEM FAQ - pc normal */
.faq-item{
background:white;
border:2px solid #dfeee5;
border-radius:12px;
padding:15px 26px;
transition:0.2s;

}

/* ITEM FAQ - pc grande */
@media (min-width: 1400px) {

.faq-item{
padding: 22px 26px;
}

.faq-container{
gap: 6px;
}

}

/* HOVER */
.faq-item:hover{
transform:translateY(-4px);
border-color:#a7d8b9;

}

/* PREGUNTA */
.faq-item summary{
font-weight:600;
font-size:17px;
cursor:pointer;
color:#2f5e3d;
list-style:none;

}

/* QUITAR TRIANGULO DEFAULT */
.faq-item summary::-webkit-details-marker{
display:none;
}

/* ANIMACION APERTURA */
.faq-body{
overflow:hidden;
max-height:0;
transition: max-height 0.35s ease, opacity 0.3s ease;
opacity:0;
}

.faq-item[open] .faq-body{
opacity:1;
/* max-height se controla desde JS */
}

/* RESPUESTA */
.faq-item p{
margin-top:12px;
line-height:1.6;
text-align:justify;
color:#444;

}

/* ICONO + */
.faq-item summary{
position:relative;
padding-right:25px;

}

/* simbolo + */

/* ICONO */
.faq-item summary{
position:relative;
padding-right:30px;

}

.faq-item summary::after{
content:"+";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%) rotate(0deg);
font-size:20px;
color:#2d7d46;
transition:transform 0.25s ease;

}

/* cuando se abre */
.faq-item[open] summary::after{
transform:translateY(-50%) rotate(45deg);

}

/* TABLET */
@media (max-width: 1024px) {

.faq-container{
margin-bottom: 60px;
}

.faq-item{
padding:16px 20px;
}

}