section.section-faq div.e-con-inner {
    flex-direction: row-reverse !important;
    flex-wrap: wrap !important;
    align-items: end !important;
    justify-content: end !important;
}

div.lumik-toggle {
    border-radius: 16px;
    background: #FEF3E7;
}

div.section-faq__faq-container h3.lumik-tab-title, div.section-faq__faq-container div.lumik-tab-content {
    border: 0;
}

div.section-faq__faq-container .lumik-toggle-title {
    font-family: Qalogre Fit;
    font-weight: 300;
    color: #BB5D80 !important;
}

div.section-faq__faq-container .lumik-toggle-title:focus {
    outline: none;
}

div.section-faq__faq-container span.lumik-toggle-icon svg {
    stroke: #BB5D80;
}

div.section-faq__faq-container div.lumik-tab-content {
    background: #F9EAE0 !important;
}

div.section-faq__faq-container div.lumik-tab-content p {
    font-family: Founders Grotesk Official;
    color: #D08BA0;
    font-weight: 300;
}

/* Defecto 5 (revisión de salud 2026-09-26): las preguntas de 2 líneas se
   enciman. .section-faq__faq-container aparece en 14 páginas publicadas
   (home, funerales y florales) y detrás usa DOS widgets distintos según la
   página: el Toggle nativo de Elementor (home, /desayunos-sorpresas/, etc,
   clases .elementor-toggle/.elementor-tab-title) y el Lumik Toggle propio
   del plugin lumik-agency-widgets (las landings fúnebres: coronas,
   pedestales, ramos-funebres, arreglos-funebres; clases .lumik-toggle/
   .lumik-tab-title). Los DOS traen line-height:1 con font-size 20px en su
   propio CSS (Elementor: widget-toggle.min.css; Lumik: assets/css/widgets/
   toggle.css, una copia deliberada del primero) — cero interlineado extra,
   comprobado con Chrome en home, coronas y desayunos-sorpresas (captura:
   la segunda línea toca la primera). Se sube a 1.35 SOLO adentro de este
   contenedor — el acordeón legal del pie y cualquier otro toggle del sitio
   (ids 1981-1986, 3861-3864) no llevan .section-faq__faq-container y no se
   tocan. Se fija tanto el título (h3) como el enlace/botón interno: en
   /desayunos-sorpresas/ el título del widget trae tipografía propia por
   elemento (Elementor genera una regla con más peso solo para ese enlace),
   así que hace falta pisar las dos capas para que gane en todas las
   páginas. Especificidad (0,3,0): más que la regla del widget y que el CSS
   por elemento de Elementor (ambas (0,2,0)), sin tocar _elementor_data. */
div.section-faq__faq-container .elementor-toggle .elementor-tab-title,
div.section-faq__faq-container .lumik-toggle .lumik-tab-title {
    line-height: 1.35;
}
div.section-faq__faq-container .elementor-toggle .elementor-toggle-title,
div.section-faq__faq-container .lumik-toggle .lumik-toggle-title {
    line-height: 1.35;
}



@media screen and (min-width: 1025px) {
    
    div.section-faq__title h2 {
        margin-top: 1rem !important;
        margin-bottom: 2rem !important;
        width: 26rem;
        border-radius: 6rem;
        text-align: center;
    }
    
    div.section-faq__faq-container {
        max-width: 70% !important;
        min-width: 70% !important;
        margin-bottom: 2rem !important;
        margin-left: 2rem;
    }
    
    /* El padding va en el BOTON, que es el elemento interactivo desde 2026-09-01.
       Antes iba en el encabezado; al meter el <button> adentro, los dos paddings
       se sumaban y la barra pasaba de 56 a 89 px de alto. */
    div.section-faq__faq-container .lumik-tab-trigger {
        padding-left: 20px;
        padding-bottom: 17px;
    }
    
    div.section-faq__faq-container .lumik-toggle-title {
        font-size: 1.4rem;
    }
    
    div.section-faq__faq-container span.lumik-toggle-icon {
        margin-left: 4rem;
    }
    
    div.section-faq__faq-container svg.lumik-toggle-icon-opened, div.section-faq__faq-container svg.lumik-toggle-icon-closed {
        width: 16px !important;
    }
    
    div.section-faq__faq-container div.lumik-tab-content {
        padding: 1.5rem;
        border-radius: 0 0 16px 16px;
    }
    
    div.section-faq__faq-container div.lumik-tab-content p {
        font-size: 1.1rem;
        line-height: 1.2;
    }
    
    div.section-faq__img {
        width: 24%;    
    }    
}



@media screen and (max-width: 767px) {
    
    div.section-faq__title {
        padding: 0 0 0 1rem !important;
    }
    
    div.section-faq__title h2 {
        margin-top: 2.2rem !important;
        margin-bottom: 1.5rem !important;
        border-radius: 6rem 0 0 6rem;
        padding: 1.2rem 1.8rem .7rem 2.6rem;
        text-align: end;
    }
    
    div.section-faq__faq-container {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    div.section-faq__faq-container div.lumik-toggle {
        width: 92% !important;
        max-width: 34rem;
        margin: auto;
    }
    
    /* El padding va en el BOTON, que es el elemento interactivo desde 2026-09-01.
       Antes iba en el encabezado; al meter el <button> adentro, los dos paddings
       se sumaban y la barra pasaba de 56 a 89 px de alto. */
    div.section-faq__faq-container .lumik-tab-trigger {
        padding-left: 20px;
    }
    
    div.section-faq__faq-container .lumik-toggle-title {
        font-size: 1.3rem;
        line-height: 1.6;
    }
    
    div.section-faq__faq-container span.lumik-toggle-icon {
        margin-left: 3rem;
        margin-top: 3px;
        margin-right: .2rem;
    }
    
    div.section-faq__faq-container svg.lumik-toggle-icon-opened, div.section-faq__faq-container svg.lumik-toggle-icon-closed {
        width: 15px !important;
    }
    
    div.section-faq__faq-container div.lumik-tab-content {
        padding: 1.5rem;
        border-radius: 0 0 16px 16px;
    }
    
    div.section-faq__faq-container div.lumik-tab-content p {
        font-size: 1.2rem;
        line-height: 1.2;
    }
    
    div.section-faq__img {
        display: none;   
    }    
}



@media screen and (min-width: 768px) and (max-width: 1024px) {
    
    div.section-faq__title h2 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        width: 26rem;
        border-radius: 6rem;
        text-align: center;
    }
    
    div.section-faq__faq-container {
        max-width: 66% !important;
        min-width: 66% !important;
        margin-bottom: 2.4rem !important;
        margin-right: 2rem;
        margin-left: 1rem;
    }
    
    /* El padding va en el BOTON, que es el elemento interactivo desde 2026-09-01.
       Antes iba en el encabezado; al meter el <button> adentro, los dos paddings
       se sumaban y la barra pasaba de 56 a 89 px de alto. */
    div.section-faq__faq-container .lumik-tab-trigger {
        padding-left: 20px;
        padding-bottom: 17px;
    }
    
    div.section-faq__faq-container .lumik-toggle-title {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    
    div.section-faq__faq-container span.lumik-toggle-icon {
        margin-left: 4rem;
    }
    
    div.section-faq__faq-container svg.lumik-toggle-icon-opened, div.section-faq__faq-container svg.lumik-toggle-icon-closed {
        width: 16px !important;
    }
    
    div.section-faq__faq-container div.lumik-tab-content {
        padding: 1.5rem;
        border-radius: 0 0 16px 16px;
    }
    
    div.section-faq__faq-container div.lumik-tab-content p {
        font-size: 1.1rem;
        line-height: 1.2;
    }
    
    div.section-faq__img {
        width: 23%;    
    }    
}