/* FAQs — acordeon de preguntas/respuestas. La respuesta se anima con max-height
   (misma tecnica que el diseño original, .faq-a{max-height:0 -> 260px}), no con
   grid-template-rows:0fr — esa variante se probo primero pero nunca colapsaba
   en el navegador real (".indexdesign-faqs__item" es flex-item de ".list", y el
   min-content de un flex-item puede ignorar una fila 0fr al medirse, aun con
   min-height:0 en toda la cadena) — se abandono esa ruta en vez de seguir
   persiguiendola, y se uso la tecnica ya probada del diseño original.
   El valor de max-height en "is-open" NO es fijo por CSS — lo pone
   widget-faqs.js en px reales (scrollHeight de la respuesta). El original usa
   260px fijo porque conoce su contenido; este widget es reusable con texto de
   largo variable, y un max-height generico grande (probado primero: 2000px)
   hace que la transicion se vea casi instantanea — interpola sobre todo ese
   rango mientras el contenido real (mucho mas chico) llega a su alto visible
   enseguida. Medir el alto real evita el recorte Y la animacion instantanea. */
.indexdesign-faqs__list {
    display: flex;
    flex-direction: column;
}

.indexdesign-faqs__question {
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
}

/* 2 causas, no 1 — el primer intento (solo flex+min-width) no alcanzó,
   reportado de nuevo por Claudio con captura (el "+" quedaba flotando en
   medio del texto, que seguía sin partir en líneas):
   1) el span de texto es flex-item de un flex-container sin min-width propio
      (default min-width:auto), así que no podía achicarse para dejarle lugar
      al wrap — fix: flex:1 1 0%;min-width:0.
   2) aun pudiendo achicarse, el texto no partía porque heredaba
      "white-space:nowrap" del propio <button> — hello-elementor/reset.css
      trae "button{...white-space:nowrap}" (mismo reset ya visto en el bug
      del fondo rojo de FAQs y del Índice Lateral), y white-space es una
      propiedad heredada. Fix: white-space:normal acá, con especificidad de
      clase (0,1,0) le gana al tag selector del reset (0,0,1). */
.indexdesign-faqs__question-text {
    flex: 1 1 0%;
    min-width: 0;
    white-space: normal;
}

.indexdesign-faqs__question:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ⚠️ Corrección: el fondo rosa NO era theming nativo del SO (esa hipótesis
   estaba mal, "appearance:none" no lo tocaba porque no tenía nada que ver).
   Causa real, confirmada con DevTools: hello-elementor/assets/css/reset.css
   trae "button:focus,button:hover{background-color:#c36;color:#fff}" — un
   reset base para CUALQUIER <button> del sitio. Ese selector con pseudo-clase
   (0,1,1 de especificidad) le gana a nuestra clase sola en reposo (0,1,0) ya
   perdía; en estado hover/focus el "background:none" de arriba sí perdía
   contra "button:hover" del reset. Fix: repetir el reset EN el estado
   hover/focus con nuestra propia clase, que sí gana (0,2,0 > 0,1,1). */
.indexdesign-faqs__question:hover,
.indexdesign-faqs__question:focus {
    background: none;
    color: inherit;
}

/* "Posición del ícono: Izquierda" invierte el orden de texto/icono sin tocar
   el HTML (el icono ya viene despues del texto en el markup). */
.indexdesign-faqs--icon-left .indexdesign-faqs__question {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Signo +/− calcado del diseño original (".faq-q .plus"): un span vacío, sin
   SVG ni librería de íconos — 2 pseudo-elementos dibujan las barras (currentColor
   sigue al control "Color" vía la propiedad color en este mismo selector), la
   vertical se desvanece con opacity al abrir. --idx-faqs-plus-size lo pone el
   control "Tamaño" (responsive); las posiciones de las barras se calculan a
   partir de esa variable para que se mantengan centradas en cualquier tamaño. */
.indexdesign-faqs__plus {
    --idx-faqs-plus-size: 22px;
    flex: none;
    height: var(--idx-faqs-plus-size);
    position: relative;
    width: var(--idx-faqs-plus-size);
}

.indexdesign-faqs__plus::before,
.indexdesign-faqs__plus::after {
    background: currentColor;
    border-radius: 2px;
    content: "";
    position: absolute;
}

.indexdesign-faqs__plus::before {
    height: 2px;
    left: 0;
    right: 0;
    top: calc(var(--idx-faqs-plus-size) / 2 - 1px);
}

.indexdesign-faqs__plus::after {
    bottom: 0;
    left: calc(var(--idx-faqs-plus-size) / 2 - 1px);
    top: 0;
    transition: opacity .3s;
    width: 2px;
}

.indexdesign-faqs__item.is-open .indexdesign-faqs__plus::after {
    opacity: 0;
}

.indexdesign-faqs__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .indexdesign-faqs__answer {
        transition: none;
    }
}