/* Nextgon SAS - extras de lanzamiento: migas de pan, preguntas frecuentes, promesa de respuesta,
   CTA fijo en móvil, casos de éxito, 404 y gracias. Se carga después de v5.css (y legal.css). */

/* Migas de pan */
.crumbs { font-size: var(--t-sm); color: var(--liquen); margin-bottom: 1.25rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--musgo-2); }
.crumbs a { color: var(--liquen); text-decoration: none; }
.crumbs a:hover { color: var(--niebla); text-decoration: underline; text-decoration-color: var(--senal); }
.crumbs [aria-current] { color: var(--niebla); }

/* Preguntas frecuentes */
.faq { border-top: 1px solid var(--musgo-2); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3rem; }
.faq-list { border-top: 1px solid var(--musgo-2); }
.faq-list details { border-bottom: 1px solid var(--musgo-2); }
.faq-list summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    padding-block: 1.35rem; font-family: var(--display); font-size: var(--t-md); font-weight: 700; font-stretch: 105%; line-height: 1.2;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
    content: ""; flex: none; width: .75rem; height: .75rem; border-right: 2px solid var(--senal); border-bottom: 2px solid var(--senal);
    transform: rotate(45deg) translate(-25%, -25%); transition: transform .25s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(225deg); }
.faq-list summary:hover { color: var(--senal); }
.faq-list details p { padding-bottom: 1.5rem; max-width: 60ch; color: #CBD6CF; }
.faq-list details a { color: var(--niebla); text-decoration: underline; text-decoration-color: var(--senal); text-underline-offset: .25em; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: 0; } }

/* Promesa de respuesta */
.promise { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; padding: .45rem .9rem; border: 1px solid var(--musgo-2); border-radius: 999px; font-size: var(--t-sm); font-weight: 600; color: var(--niebla) !important; }
.promise::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 4px rgba(55, 214, 227, .18); }
.wa-link { display: block; margin-top: .5rem; color: var(--liquen); font-weight: 600; text-decoration: none; }
.wa-link:hover { color: var(--niebla); }

/* Pie con columna de proyectos */
.footer-grid { grid-template-columns: minmax(0, 2fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1.2fr); }
@media (max-width: 960px) { .footer-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-biz { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* CTA fijo en móvil */
.mobile-cta { display: none; }
@media (max-width: 760px) {
    .mobile-cta {
        display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
        position: fixed; inset: auto 0 0; z-index: 45;
        padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
        background: rgba(12, 23, 22, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--musgo-2);
        transition: transform .25s var(--ease);
    }
    .mobile-cta.is-hidden { transform: translateY(110%); }
    .mobile-cta .btn { min-height: 2.9rem; padding-inline: .5rem; }
    body.has-mobile-cta { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}

/* Encabezado de páginas internas */
.legal-page .site-nav { gap: 1.5rem; }
@media (max-width: 520px) { .legal-page .site-nav .nav-link { display: none; } }

/* Casos de éxito */
.case-lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: #CBD6CF; margin-top: 1rem; max-width: 56ch; }
.case-top h1 { font-stretch: 125%; }
.case-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 1rem; }
.case-shots img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.case-icon { width: 8.5rem; height: auto; aspect-ratio: 1; border-radius: 22%; margin: 2rem 0 1rem; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7); }
.case-doc .specs { margin-top: 0; }
.case-cta { margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.25rem); border: 1px solid var(--musgo-2); border-radius: 16px; background: var(--musgo); }
.case-cta h2 { margin: 0 0 .75rem !important; padding: 0 !important; border: 0 !important; }
.case-cta .cta-group { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.case-cta .btn { text-decoration: none; }
.case-cta .btn-signal { color: var(--paramo) !important; }
.case-cta .btn-line { color: var(--niebla) !important; }
@media (max-width: 520px) { .case-shots { grid-template-columns: 1fr; } }

/* 404 y gracias */
.big-code { font-family: var(--display); font-size: clamp(4.5rem, 16vw, 9rem); font-weight: 800; font-stretch: 140%; line-height: .9; color: var(--senal); margin-bottom: .5rem; }
.link-grid { list-style: none; padding: 0 !important; margin: 1.5rem 0 0 !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem !important; }
.link-grid li::marker { content: none; }
.link-grid a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--musgo-2); border-radius: 12px; background: var(--musgo); color: var(--niebla) !important; text-decoration: none !important; font-weight: 700; }
.link-grid a:hover { border-color: var(--senal); }
.link-grid span { display: block; font-weight: 400; font-size: var(--t-sm); color: var(--liquen); margin-top: .2rem; }