/* ========== Estilos landing oposicion (page=oposicion) ========== */
/* Se carga tanto en modo standalone (no logueado) como dentro del layout (logueado). */

.opo-page { max-width:1100px; margin:0 auto; padding:0 1.25rem; }
.opo-nav { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.opo-nav .logo { font-size:1.3rem; font-weight:800; color:#1e293b; text-decoration:none; }
.opo-nav .nav-links { display:flex; gap:0.5rem; flex-wrap:wrap; }
.opo-nav a.nav-link { color:#64748b; font-size:0.9rem; text-decoration:none; padding:0.45rem 0.85rem; border-radius:6px; }
.opo-nav a.nav-link:hover { background:#f1f5f9; color:#1e293b; }
.opo-nav a.nav-link.primary { background:#4f6ef7; color:#fff; }

.breadcrumb { font-size:0.85rem; color:#64748b; padding:0.5rem 0 1rem; }
.breadcrumb a { color:#4f6ef7; text-decoration:none; }

.opo-hero { padding:2rem 0 3rem; text-align:center; }
.opo-hero h1 { font-size:2.4rem; font-weight:800; color:#0f172a; margin-bottom:1rem; line-height:1.2; }
.opo-hero .subtitle { font-size:1.15rem; color:#475569; max-width:800px; margin:0 auto 2rem; line-height:1.5; }
.opo-hero .cta-row { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.opo-hero .cta-row a { display:inline-block; padding:0.85rem 1.6rem; border-radius:10px; text-decoration:none; font-weight:600; }
.opo-hero .cta-primary { background:#4f6ef7; color:#fff; box-shadow:0 6px 20px rgba(79,110,247,0.3); }
.opo-hero .cta-primary:hover { background:#3f5cdf; }
.opo-hero .cta-ghost { background:#fff; color:#1e293b; border:1px solid #e2e8f0; }
.opo-hero .cta-ghost:hover { background:#f8fafc; }

.opo-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin:2rem 0; }
.opo-stat { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:1.5rem; text-align:center; }
.opo-stat .num { font-size:2.2rem; font-weight:800; color:#4f6ef7; line-height:1; }
.opo-stat .lbl { color:#64748b; font-size:0.85rem; margin-top:0.5rem; }

.opo-section { background:#fff; border-radius:14px; padding:2rem; margin-bottom:1.5rem; border:1px solid #e2e8f0; }
.opo-section h2 { font-size:1.6rem; color:#0f172a; margin-bottom:1rem; line-height:1.3; }
.opo-section h3 { font-size:1.15rem; color:#1e293b; margin:1.5rem 0 0.5rem; }
.opo-section p { color:#475569; line-height:1.7; margin-bottom:1rem; }
.opo-section ul, .opo-section ol { color:#475569; line-height:1.8; padding-left:1.5rem; margin-bottom:1rem; }
.opo-section ul li, .opo-section ol li { margin-bottom:0.35rem; }
.opo-section a { color:#4f6ef7; text-decoration:none; }
.opo-section a:hover { text-decoration:underline; }

.opo-faq { padding:0.85rem 0; border-bottom:1px solid #f1f5f9; }
.opo-faq:last-child { border-bottom:none; }
.opo-faq summary { font-weight:600; color:#1e293b; cursor:pointer; font-size:1rem; padding:0.25rem 0; }
.opo-faq summary:hover { color:#4f6ef7; }
.opo-faq p { margin-top:0.6rem; color:#475569; }

.opo-cta-final { background:linear-gradient(135deg,#4f6ef7,#6366f1); color:#fff; text-align:center; padding:3rem 2rem; border-radius:14px; margin:2rem 0; }
.opo-cta-final h2 { color:#fff; font-size:1.8rem; margin-bottom:0.75rem; }
.opo-cta-final p { color:#e0e7ff; margin-bottom:1.5rem; }
.opo-cta-final a { background:#fff; color:#4f6ef7; padding:0.85rem 1.8rem; border-radius:10px; text-decoration:none; font-weight:700; display:inline-block; }
.opo-cta-final a:hover { background:#f1f5f9; }

.opo-related { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1rem; }
.opo-related a { display:block; padding:1rem; background:#f8fafc; border-radius:10px; text-decoration:none; color:#1e293b; border:1px solid #e2e8f0; transition:all 0.15s; }
.opo-related a:hover { background:#eff6ff; border-color:#4f6ef7; transform:translateY(-2px); }
.opo-related a strong { display:block; margin-bottom:0.25rem; }
.opo-related a span { font-size:0.85rem; color:#64748b; }

.opo-footer { text-align:center; padding:2rem; color:#94a3b8; font-size:0.85rem; border-top:1px solid #e2e8f0; margin-top:3rem; }
.opo-footer a { color:#4f6ef7; text-decoration:none; }

@media (max-width:640px) {
    .opo-hero h1 { font-size:1.6rem; }
    .opo-hero .subtitle { font-size:1rem; }
    .opo-hero { padding:1rem 0 2rem; }
    .opo-section { padding:1.25rem; }
    .opo-section h2 { font-size:1.3rem; }
    .opo-cta-final { padding:2rem 1rem; }
    .opo-cta-final h2 { font-size:1.4rem; }
}

/* Modo oscuro: si el usuario logueado tiene .dark en <html>, ajustar contraste */
.dark .opo-section { background:#1e293b; border-color:#334155; color:#e2e8f0; }
.dark .opo-section h2, .dark .opo-section h3 { color:#f1f5f9; }
.dark .opo-section p, .dark .opo-section ul, .dark .opo-section ol { color:#cbd5e1; }
.dark .opo-section a { color:#93c5fd; }
.dark .opo-faq summary { color:#f1f5f9; }
.dark .opo-faq { border-color:#334155; }
.dark .opo-stat { background:#1e293b; border-color:#334155; }
.dark .opo-stat .lbl { color:#94a3b8; }
.dark .opo-related a { background:#0f172a; border-color:#334155; color:#e2e8f0; }
.dark .opo-related a:hover { background:#1e3a8a; border-color:#3b82f6; }
.dark .opo-related a span { color:#94a3b8; }
.dark .opo-hero h1 { color:#f1f5f9; }
.dark .opo-hero .subtitle { color:#cbd5e1; }
.dark .opo-hero .cta-ghost { background:#1e293b; color:#f1f5f9; border-color:#334155; }