/* ================================================================
   CETRIX ADDENDUM 2 — SEO / Breadcrumb / FAQ / Performance
   2026-06-21
   ================================================================ */

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb-nav {
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--space-3) 0;
    font-size: var(--text-sm);
}
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0;
}
.breadcrumb-item { display: flex; align-items: center; gap: var(--space-1); color: var(--color-gray-500); }
.breadcrumb-item a { color: var(--color-primary-light); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item [aria-current="page"] { color: var(--color-gray-700); font-weight: var(--font-medium); }
.breadcrumb-sep { color: var(--color-gray-400); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-section { background: var(--color-gray-50); }

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
    gap: var(--space-4);
    margin-top: var(--space-8);
}
.faq-grid--wide { grid-template-columns: 1fr; max-width: 780px; margin-inline: auto; }

.faq-item {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-item[open] { box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); }

.faq-question {
    cursor: pointer;
    padding: var(--space-5) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    user-select: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: var(--font-normal);
    color: var(--color-primary-light);
    flex-shrink: 0;
    transition: transform var(--transition-base);
}
.faq-item[open] .faq-question::after { content: '−'; }
.faq-question:hover { color: var(--color-primary-light); background: var(--color-gray-50); }

.faq-answer {
    padding: 0 var(--space-6) var(--space-5);
    font-size: var(--text-base);
    color: var(--color-gray-700);
    line-height: var(--leading-relaxed);
    border-top: 1px solid var(--color-gray-100);
}
.faq-answer p { margin: var(--space-3) 0 0; }

.saas-faq { margin-top: var(--space-16); }
.saas-faq-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--space-2);
    text-align: center;
}

/* ── Hero background ─────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero-bg-picture { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-content { position: relative; z-index: 2; }
.hero-overlay  { position: absolute; inset: 0; z-index: 1; }

/* ── Dropdown — fix posición cuando navbar es fixed ─────────── */
/*
   El navbar usa position:fixed en la mayoría de temas.
   El dropdown debe estar en el contexto del navbar (z-index alto)
   y NO quedar flotando sobre el contenido al hacer scroll.
   Solución: ocultarlo con display:none por defecto y mostrarlo
   solo con la clase --open, garantizando z-index correcto.
*/
.nav-dropdown {
    display: none !important;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    min-width: 260px;
    padding: var(--space-2);
    /* z-index por encima del navbar pero sin crear stacking context extra */
    z-index: 9999;
    list-style: none;
    /* Animación suave de aparición */
    animation: none;
}
.nav-dropdown--open {
    display: block !important;
}

/* Asegurar que el li padre tenga position:relative */
.nav-item-dropdown {
    position: relative;
}

/* ── Responsive FAQ ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .faq-grid { grid-template-columns: 1fr; }
    .faq-question { font-size: var(--text-sm); padding: var(--space-4); }
    .faq-answer   { padding: 0 var(--space-4) var(--space-4); }

    /* En móvil el dropdown va debajo del botón en flujo normal */
    .nav-dropdown {
        position: static;
        box-shadow: none;
        border: 1px solid var(--color-gray-100);
        margin-top: var(--space-2);
        z-index: auto;
    }
}