/**
 * ConlineWeb — Design System unificado (páginas secundarias).
 * Activo con body.cw-ds (inyectado desde layout-nav).
 * No altera SEO ni estructura HTML; solo lenguaje visual.
 * Home (.page-home) y páginas del menú principal quedan fuera.
 */

:root {
    --cw-ds-title: clamp(1.9rem, 3.6vw, 2.8rem);
    --cw-ds-title-sm: clamp(1.35rem, 2.4vw, 1.75rem);
    --cw-ds-lead: clamp(1rem, 1.25vw, 1.1rem);
    --cw-ds-body: 0.95rem;
    --cw-ds-muted: rgba(255, 255, 255, 0.6);
    --cw-ds-lead-color: rgba(255, 255, 255, 0.72);
    --cw-ds-line: rgba(255, 255, 255, 0.1);
    --cw-ds-gap: clamp(2.25rem, 5vw, 3.75rem);
    --cw-ds-gap-tight: clamp(1.25rem, 2.5vw, 2rem);
    --cw-ds-radius: 16px;
    --cw-ds-radius-sm: 12px;
    --cw-ds-title-gradient: linear-gradient(
        135deg,
        var(--neon-blue, #00f3ff),
        var(--neon-purple, #b967ff),
        var(--matrix-green, #00ff9d)
    );
}

/* ——— Tipografía de sección ——— */
body.cw-ds:not(.page-home) :is(
    .section-title,
    .faq-title,
    .sw-section-title,
    .ia-title,
    .integrations-title,
    .services-text h2,
    .faq-section > h2,
    .personal-consult-module h3,
    .cta-module h3,
    .demos-hub-section-title,
    .portfolio-header h2,
    .neon-title
) {
    font-family: 'Poiret One', sans-serif !important;
    font-size: var(--cw-ds-title) !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    letter-spacing: 2px !important;
    background: var(--cw-ds-title-gradient) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
    padding-block: 0.05em 0.15em;
    overflow: visible;
}

body.cw-ds:not(.page-home) :is(
    .section-subtitle,
    .sw-section-lead,
    .ia-subtitle,
    .integrations-subtitle,
    .faq-section > .section-subtitle,
    .faq-section > .section-label,
    .section-label,
    .personal-consult-module > p,
    .cta-module > p
) {
    font-size: var(--cw-ds-lead) !important;
    line-height: 1.7 !important;
    color: var(--cw-ds-lead-color) !important;
    font-weight: 400 !important;
}

body.cw-ds:not(.page-home) :is(.section-title, .faq-title, .sw-section-title) {
    margin-bottom: 0.85rem !important;
}

body.cw-ds:not(.page-home) :is(.section-subtitle, .sw-section-lead, .section-label) {
    margin-bottom: 1.75rem !important;
}

/* ——— FAQ acordeón unificado ——— */
body.cw-ds:not(.page-home) .accordion-container,
body.cw-ds:not(.page-home) .faq-section .accordion-container {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-width: 900px;
    margin-inline: auto;
}

body.cw-ds:not(.page-home) .accordion-item {
    margin-bottom: 0 !important;
    border: 1px solid var(--cw-ds-line) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-color 0.2s ease, background 0.2s ease;
}

body.cw-ds:not(.page-home) .accordion-item:hover {
    border-color: rgba(0, 243, 255, 0.28) !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

body.cw-ds:not(.page-home) .accordion-header {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.05rem 1.2rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: inherit;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-align: left;
    color: var(--stardust, rgba(255, 255, 255, 0.9)) !important;
    background: transparent !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

body.cw-ds:not(.page-home) .accordion-header::before {
    display: none !important;
    content: none !important;
}

body.cw-ds:not(.page-home) .accordion-header:hover {
    color: var(--neon-blue, #00f3ff) !important;
}

body.cw-ds:not(.page-home) .accordion-header i {
    flex-shrink: 0;
    color: var(--matrix-green, #00ff9d);
    transition: transform 0.25s ease;
}

body.cw-ds:not(.page-home) .accordion-header[aria-expanded="true"] i {
    transform: rotate(180deg);
}

body.cw-ds:not(.page-home) .accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none !important;
    overflow: hidden;
    padding: 0 1.2rem !important;
    background: transparent !important;
    transition: grid-template-rows 0.32s ease, padding 0.32s ease;
}

body.cw-ds:not(.page-home) .accordion-content.active {
    grid-template-rows: 1fr;
    padding: 0 1.2rem 1.15rem !important;
}

body.cw-ds:not(.page-home) .accordion-content > * {
    min-height: 0;
    overflow: hidden;
}

body.cw-ds:not(.page-home) .accordion-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.68);
    text-align: left;
}

/* ——— Botones CTA comunes ——— */
body.cw-ds:not(.page-home) :is(
    .cta-button,
    .modern-button,
    .card-button,
    .hero-pillar-btn
) {
    border-radius: 999px !important;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

body.cw-ds:not(.page-home) :is(.cta-button, .modern-button, .card-button):hover {
    transform: translateY(-2px);
}

/* ——— Módulos CTA ——— */
body.cw-ds:not(.page-home) .personal-consult-module,
body.cw-ds:not(.page-home) .cta-module {
    border-radius: 20px !important;
    border-color: rgba(0, 243, 255, 0.2) !important;
}

/* ——— Formularios ——— */
body.cw-ds:not(.page-home) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="search"]):not([type="image"]):not([type="range"]):not([type="color"]),
    select,
    textarea
) {
    border-radius: var(--cw-ds-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.92);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.cw-ds:not(.page-home) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="search"]):not([type="image"]):not([type="range"]):not([type="color"]),
    select,
    textarea
):focus {
    outline: none;
    border-color: rgba(0, 243, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(0, 243, 255, 0.12);
}

body.cw-ds:not(.page-home) :is(label, .form-label, .contact-form__label):not(.mx-hub-search):not(.mx-directory-search):not(.blog-search) {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.78);
}

/* Buscadores (shell propio): sin caja doble del design system */
body.cw-ds:not(.page-home) :is(.mx-hub-search, .mx-directory-search, .blog-search) input[type="search"],
body.cw-ds:not(.page-home) :is(.mx-hub-search, .mx-directory-search, .blog-search) input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: inherit;
    min-width: 0;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

body.cw-ds:not(.page-home) :is(.mx-hub-search, .mx-directory-search, .blog-search) input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.cw-ds:not(.page-home) :is(.mx-hub-search, .mx-directory-search, .blog-search) input[type="search"]::-webkit-search-decoration,
body.cw-ds:not(.page-home) :is(.mx-hub-search, .mx-directory-search, .blog-search) input[type="search"]::-webkit-search-cancel-button,
body.cw-ds:not(.page-home) :is(.mx-hub-search, .mx-directory-search, .blog-search) input[type="search"]::-webkit-search-results-button,
body.cw-ds:not(.page-home) :is(.mx-hub-search, .mx-directory-search, .blog-search) input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

/* ——— Espaciado de secciones ——— */
body.cw-ds:not(.page-home) :is(.faq-section, .sw-section) {
    margin-block: var(--cw-ds-gap-tight);
}

/* ——— Legal / docs ——— */
body.cw-ds:not(.page-home).legal-page :is(h2, h3),
body.cw-ds:not(.page-home).doc-page :is(.doc-content h2, .doc-content h3),
body.cw-ds:not(.page-home).blog-article-page :is(.blog-content h2, .blog-content h3) {
    font-family: 'Poiret One', sans-serif;
    letter-spacing: 1px;
    line-height: 1.3;
}

body.cw-ds:not(.page-home).legal-page p,
body.cw-ds:not(.page-home).doc-page .doc-content p,
body.cw-ds:not(.page-home).blog-article-page .blog-content p {
    color: var(--cw-ds-lead-color);
    line-height: 1.75;
}

/* ——— Responsive ——— */
@media (max-width: 768px) {
    body.cw-ds:not(.page-home) {
        --cw-ds-title: clamp(1.7rem, 6.2vw, 2.15rem);
        --cw-ds-gap: 2rem;
        --cw-ds-gap-tight: 1.35rem;
    }

    body.cw-ds:not(.page-home) .accordion-header {
        padding: 0.95rem 1rem !important;
        font-size: 0.9rem !important;
    }

    body.cw-ds:not(.page-home) .accordion-content.active {
        padding: 0 1rem 1rem !important;
    }
}