/* ========================================================== FAQ UNIFICADO — SHARED V1 Referencia visual: Codependencia / tarjetas celestes. Alcance exclusivo a los 12 acordeones visibles detectados en public_html(3).zip. No modifica títulos, textos, respuestas, estructura, header, footer, CTA ni otras tarjetas. ========================================================== */ :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) { --faq-line-a: #00a8ff; --faq-line-b: #0879d8; --faq-line-c: #45c7f3; --faq-bg-a: #d7efff; --faq-bg-b: #eef9ff; --faq-bg-open-a: #c9e8ff; --faq-bg-open-b: #e7f6ff; --faq-title: #123f6b; --faq-body: #4d667d; --faq-border: rgba(30, 143, 214, .42); --faq-shadow: 0 7px 20px rgba(13, 78, 130, .08); } /* INDEX usa wrappers directos; las demás páginas usan .accordion-item. */ #seoAccordion > div, :is( #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) > .accordion-item { position: relative !important; overflow: hidden !important; margin: 0 0 12px !important; border: 1px solid var(--faq-border) !important; border-radius: 17px !important; background: #fff !important; box-shadow: var(--faq-shadow) !important; transform: none; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important; } /* Quita franjas/pseudo-elementos anteriores para evitar doble decoración. */ #seoAccordion > div::before, :is( #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) > .accordion-item::before { content: "" !important; position: absolute !important; z-index: 5 !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 5px !important; background: linear-gradient(90deg, var(--faq-line-a), var(--faq-line-c) 52%, var(--faq-line-b)) !important; pointer-events: none !important; } #seoAccordion > div::after, :is( #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) > .accordion-item::after { display: none !important; content: none !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-header { margin: 0 !important; padding: 0 !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button { position: relative !important; min-height: 58px !important; margin: 0 !important; padding: 1.02rem 3.45rem 1.02rem 1.08rem !important; border: 0 !important; border-radius: 16px !important; background: linear-gradient(110deg, var(--faq-bg-a) 0%, var(--faq-bg-b) 100%) !important; color: var(--faq-title) !important; font-size: 1rem !important; font-weight: 750 !important; line-height: 1.38 !important; letter-spacing: -.005em !important; text-align: left !important; box-shadow: none !important; transition: background .25s ease, color .25s ease !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button:not(.collapsed) { background: linear-gradient(110deg, var(--faq-bg-open-a) 0%, var(--faq-bg-open-b) 100%) !important; color: #073d70 !important; box-shadow: none !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button:focus { border-color: transparent !important; box-shadow: inset 0 0 0 2px rgba(0, 126, 218, .16) !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button::after { position: absolute !important; top: 50% !important; right: 1.12rem !important; flex: 0 0 auto !important; margin: 0 !important; transform: translateY(-50%) !important; background-size: 1rem !important; opacity: .72 !important; transition: transform .25s ease, opacity .25s ease !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button:not(.collapsed)::after { transform: translateY(-50%) rotate(-180deg) !important; opacity: 1 !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-collapse { background: #fff !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-body { position: relative !important; margin: 0 !important; padding: 1.15rem 1.25rem 1.3rem !important; border: 0 !important; border-top: 1px solid rgba(37, 146, 216, .16) !important; background: linear-gradient(180deg, #fff 0%, #f6fcff 100%) !important; color: var(--faq-body) !important; font-size: .98rem !important; line-height: 1.72 !important; text-align: left !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-body p, :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-body li { color: inherit !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-body strong { color: #164b77 !important; font-weight: 750 !important; } /* Estado abierto: misma elevación en todos. */ #seoAccordion > div:has(.accordion-button:not(.collapsed)), :is( #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) > .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(15, 133, 211, .62) !important; box-shadow: 0 11px 28px rgba(16, 83, 137, .12) !important; } @media (hover: hover) and (pointer: fine) { #seoAccordion > div:hover, :is( #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) > .accordion-item:hover { transform: translateY(-1px) !important; border-color: rgba(7, 139, 222, .62) !important; box-shadow: 0 10px 25px rgba(16, 74, 121, .11) !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button.collapsed:hover { background: linear-gradient(110deg, #cceaff 0%, #e9f8ff 100%) !important; } } @media (max-width: 991.98px) { :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button { min-height: 56px !important; font-size: .97rem !important; } } @media (max-width: 575.98px) { #seoAccordion > div, :is( #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) > .accordion-item { margin-bottom: 10px !important; border-radius: 15px !important; } #seoAccordion > div::before, :is( #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) > .accordion-item::before { height: 4px !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button { min-height: 54px !important; padding: .92rem 2.9rem .92rem .92rem !important; border-radius: 14px !important; font-size: .91rem !important; line-height: 1.36 !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button::after { right: .9rem !important; } :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-body { padding: 1rem .95rem 1.08rem !important; font-size: .93rem !important; line-height: 1.66 !important; } } @media (prefers-reduced-motion: reduce) { #seoAccordion > div, :is( #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) > .accordion-item, :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button, :is( #seoAccordion, #abusoAccordion, #enfoqueAccordion, #adiccionesAccordion, #amarV2Accordion, #ansiedadAccordion, #autocuidoAccordion, #faqCodependencia, #cuidarteAccordion, #violenciaAccordion, #sentidoAccordion, #parejaAccordion ) .accordion-button::after { transition: none !important; } }