/* ============================================================
   SEO-CONTENT — Bloque de contenido indexable + FAQ
   ============================================================
   Hoja de estilos AISLADA para el bloque de contenido SEO
   (texto descriptivo + preguntas frecuentes) añadido en las
   landing pages (index.html / en/index.html / it/index.html).

   Rediseño v2: mismo lenguaje visual del portal (glassmorphism,
   glow, grid de fondo, tipografía monoespaciada tipo terminal en
   etiquetas), para que se sienta parte de la misma web y no un
   bloque de texto plano pegado debajo.

   Se mantiene en un archivo propio a propósito: cero riesgo de
   colisionar con las reglas ya existentes de portal.css/base.css.
   Reutiliza las variables globales definidas en base.css (:root).
   No requiere ningún cambio de HTML (solo mejora los selectores
   ya existentes), por lo que las traducciones de los 3 idiomas
   siguen funcionando exactamente igual.
   ============================================================ */

.seo-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 780px;
    margin: 56px auto 48px;
    padding: 0 20px;
    color: var(--text-main);
}

/* ── Línea de "escaneo" que separa el portal de este bloque ──
   Sustituye al salto en blanco genérico: da sensación de
   continuidad tecnológica con el resto del sitio. ── */
.seo-content::before {
    content: '';
    display: block;
    width: min(100%, 620px);
    height: 1px;
    margin: 0 auto 40px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(94, 129, 172, 0.55) 35%,
        rgba(122, 163, 212, 0.9) 50%,
        rgba(94, 129, 172, 0.55) 65%,
        transparent
    );
    box-shadow: 0 0 12px rgba(94, 129, 172, 0.5);
}

/* ── Titulares: mismo lenguaje tipográfico que el footer del
   panel ("SISTEMA:", "MOTOR_PDF:") — monoespaciado, mayúsculas,
   letter-spacing amplio — para sentirse parte del mismo sistema. ── */
.seo-content h2 {
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(160, 195, 230, 0.85);
    text-align: center;
    margin: 40px 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.seo-content h2::before,
.seo-content h2::after {
    content: '';
    height: 1px;
    width: 34px;
    background: linear-gradient(90deg, transparent, rgba(94, 129, 172, 0.6));
}

.seo-content h2::after { background: linear-gradient(90deg, rgba(94, 129, 172, 0.6), transparent); }

.seo-content > p {
    font-size: 0.94rem;
    line-height: 1.7;
    color: rgba(224, 224, 224, 0.85);
    text-align: center;
    max-width: 620px;
    margin: 0 auto 26px;
}

/* ── Lista de beneficios/diferenciadores ──
   Tarjetas glass con icono en badge circular con glow, elevación
   al pasar el ratón — mismo tratamiento que .mode-card. ── */
.seo-benefits {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    max-width: 640px;
    margin: 0 auto 8px;
    padding: 0;
}

.seo-benefits li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--portal-panel-bg);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 0.83rem;
    line-height: 1.4;
    color: rgba(224, 224, 224, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.seo-benefits li:hover {
    transform: translateY(-3px);
    border-color: rgba(122, 163, 212, 0.5);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 20px var(--glow-blue);
}

/* El emoji ya viene en el texto del <li>; lo convertimos en un
   badge circular independiente sin tocar el HTML, usando
   ::first-letter no es fiable con emoji, así que en su lugar se
   estiliza el propio <li> como fila con "icono implícito" vía
   un separador visual sutil a la izquierda con glow. */
.seo-benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    box-shadow: 0 0 8px var(--glow-blue);
}

@media (max-width: 560px) {
    .seo-benefits { grid-template-columns: 1fr; }
}

/* ── FAQ (acordeón nativo <details>/<summary>) ──
   Glass real (blur + glow) coherente con .portal-panel, borde que
   se enciende al abrir, icono con transición más fluida. ── */
.seo-faq {
    max-width: 640px;
    margin: 0 auto;
}

.seo-faq details {
    position: relative;
    background: var(--portal-panel-bg);
    border: 1px solid var(--portal-border);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 10px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.seo-faq details[open] {
    border-color: rgba(122, 163, 212, 0.55);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3), 0 0 24px var(--glow-blue);
}

.seo-faq summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.seo-faq summary::-webkit-details-marker { display: none; }

.seo-faq summary::after {
    content: '+';
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--accent-bright);
    border: 1px solid rgba(94, 129, 172, 0.4);
    border-radius: 50%;
    background: rgba(94, 129, 172, 0.08);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.seo-faq details[open] summary::after {
    transform: rotate(45deg);
    background: rgba(94, 129, 172, 0.2);
    box-shadow: 0 0 12px var(--glow-blue);
}

.seo-faq details p {
    font-size: 0.86rem;
    line-height: 1.6;
    color: rgba(224, 224, 224, 0.8);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Navegación entre idiomas (footer de la landing) ──
   Chips glass, mismo tratamiento que .lang-switcher del portal,
   en vez de enlaces de texto plano subrayado. ── */
.seo-lang-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    text-align: center;
    margin-top: 44px;
    font-size: 0.76rem;
    color: rgba(160, 185, 220, 0.55);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
}

.seo-lang-links a {
    display: inline-flex;
    align-items: center;
    color: rgba(224, 224, 224, 0.9);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(94, 129, 172, 0.3);
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.seo-lang-links a:hover {
    background: rgba(94, 129, 172, 0.15);
    border-color: rgba(122, 163, 212, 0.6);
    transform: translateY(-2px);
}