/* ═══════════════════════════════════════════════════════════════════ editorial.css — capa compartida que lleva las SUBPÁGINAS al look editorial (estilo periódico) sobre la paleta azul Clinical Indigo. Se enlaza al final del de cada subpágina; gana por !important sobre el CSS inline del template viejo (Outfit/Playfair, nav dorado, hero con degradado verde/teal). Trae sus PROPIAS fuentes (@import), así basta enlazar este archivo en cualquier página o generador — durable ante regeneración. ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800&family=Libre+Caslon+Display&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap'); :root { --bg: #0E1424; --ink: #EAEFF8; --ink-soft: #B9C5DD; --ink-mut: #8094B8; --rule: rgba(130,160,210,0.16); --rule-strong: rgba(160,185,225,0.40); --accent: #6AA0FF; --serif-head: 'Libre Caslon Display', Georgia, 'Times New Roman', serif; --serif-body: 'Source Serif 4', Georgia, serif; --sans: 'Libre Franklin', system-ui, -apple-system, sans-serif; /* Repunta los tokens legacy del template a la nueva escala */ --bg-deep: #0A0E18 !important; --bg-base: #0E1424 !important; --bg-raised: #0E1424 !important; --bg-card: rgba(255,255,255,0.025) !important; --bg-card-hover: rgba(255,255,255,0.05) !important; --text-primary: #EAEFF8 !important; --text-secondary: #B9C5DD !important; --text-muted: #8094B8 !important; --cream: #EAEFF8 !important; --cream-pale: #EAEFF8 !important; --gold: #6AA0FF !important; --teal: #6AA0FF !important; --burgundy: #6AA0FF !important; --dark-teal: #0A0E18 !important; --font-display: 'Libre Caslon Display', Georgia, serif !important; --font-body: 'Source Serif 4', Georgia, serif !important; } html, body { overflow-x: clip; } body { background: #0E1424 !important; color: var(--ink) !important; font-family: var(--serif-body) !important; } a { color: var(--accent) !important; } h1, h2, h3, h4, .section-title, .hero h1 { font-family: var(--serif-head) !important; color: var(--ink) !important; font-weight: 400 !important; letter-spacing: -0.01em; } .section-label, .eyebrow, [class*="label"] { font-family: var(--sans) !important; color: var(--accent) !important; letter-spacing: 0.08em; text-transform: uppercase; } /* MASTHEAD — la navbar se vuelve cabecera de periódico. Reglas BASE (autosuficientes) para que el nav se vea bien incluso en subpáginas que NO traen CSS de nav inline. */ .nav, .nav.scrolled { position: static !important; background: #0E1424 !important; backdrop-filter: none !important; border-top: 2px solid var(--accent) !important; /* firma editorial: filete de acento arriba */ border-bottom: 1px solid var(--rule-strong) !important; box-shadow: none !important; top: 0; left: 0; right: 0; z-index: 1000; } .nav-menu { display: flex; list-style: none; align-items: center; margin: 0; padding: 0; } .nav-group { position: relative; } .nav-group-toggle { background: none !important; border: none !important; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.6rem; font-family: var(--sans) !important; } .nav-group-toggle svg { width: 10px; height: 10px; opacity: 0.6; } .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #121A2C; border: 1px solid var(--rule); border-radius: 12px; padding: 0.5rem; min-width: 210px; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; z-index: 200; box-shadow: 0 14px 36px rgba(0,0,0,0.5); } .nav-group:hover .nav-dropdown { opacity: 1; visibility: visible; } .nav-dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .nav-dropdown a { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.9rem; border-radius: 8px; white-space: nowrap; text-decoration: none; } .nav-dropdown a svg { width: 16px; height: 16px; opacity: 0.55; flex: none; } .nav-ctas { display: flex; gap: 0.5rem; align-items: center; } .nav-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; } .nav-cta svg { width: 14px; height: 14px; } .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .nav-hamburger span { width: 24px; height: 2px; display: block; } .nav-mobile { display: none; } .nav-mobile.show { display: flex; flex-direction: column; } @media (max-width: 768px) { .nav-menu, .nav-ctas { display: none !important; } .nav-hamburger { display: flex; } } .nav-inner { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; height: auto !important; max-width: 1180px; margin: 0 auto; padding: 0.85rem 2rem 0.55rem !important; column-gap: 1.4rem; row-gap: 0.5rem; position: relative; } .nav-logo { flex-basis: 100% !important; flex-shrink: 1 !important; text-align: center; font-family: var(--serif-head) !important; font-weight: 400 !important; font-size: clamp(1.55rem, 2.6vw, 2rem) !important; letter-spacing: -0.005em !important; color: var(--ink) !important; padding: 0 !important; margin: 0 0 0.15rem !important; border-bottom: none !important; } .nav-logo span { color: var(--accent) !important; } .nav-menu { flex: 0 1 auto !important; justify-content: center !important; gap: 1.3rem !important; flex-wrap: wrap; } .nav-group-toggle { color: var(--ink-soft) !important; font-family: var(--sans) !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem !important; } .nav-group-toggle:hover, .nav-group:hover .nav-group-toggle { color: var(--ink) !important; background: rgba(255,255,255,0.04) !important; } .nav-dropdown { background: #131C30 !important; border: 1px solid var(--rule) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.5) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 12px !important; padding: 0.5rem !important; min-width: 210px !important; } .nav-dropdown a { color: var(--ink-soft) !important; font-family: var(--sans) !important; background: transparent !important; } .nav-dropdown a:hover { background: rgba(255,255,255,0.05) !important; color: var(--ink) !important; } .nav-dropdown a svg { color: var(--ink-mut) !important; opacity: 1 !important; } /* Toggle del menú: misma tinta y peso en todas las páginas */ .nav-group-toggle, .nav-menu a, .nav a { color: var(--ink-soft) !important; } .nav-group:hover .nav-group-toggle, .nav-group-toggle:hover { color: var(--ink) !important; background: transparent !important; } .nav-group-toggle svg { color: var(--ink-soft) !important; } .nav-cta--primary { background: var(--accent) !important; color: #08111F !important; border-radius: 3px !important; font-family: var(--sans) !important; font-weight: 700 !important; } .nav-cta--secondary { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--rule-strong) !important; border-radius: 3px !important; font-family: var(--sans) !important; } .nav-hamburger span { background: var(--ink) !important; } .nav-mobile { background: #0E1424 !important; border-bottom: 1px solid var(--rule) !important; } .nav-mobile a, .nav-mobile-heading { color: var(--ink-soft) !important; } @media (max-width: 768px) { .nav-logo { font-size: 1.5rem !important; } .nav-inner { padding: 0.85rem 1.3rem !important; } .nav-hamburger { position: absolute !important; right: 1.2rem; top: 50%; transform: translateY(-50%); } } /* HERO de subpágina: fuera el degradado verde/teal; índigo plano editorial */ .hero { background: #0E1424 !important; color: var(--ink) !important; padding: 3.2rem 1.5rem 2.6rem !important; text-align: left !important; border-bottom: 1px solid var(--rule) !important; min-height: auto !important; } .hero::before, .hero::after { display: none !important; } .hero h1 { color: var(--ink) !important; } .hero p, .hero .subtitle, .hero-sub { color: var(--ink-soft) !important; } /* KPIs y tarjetas comunes: aplanar (mata glow/gradiente/sombra dura) */ .hero-kpi, .kpi-card, .stat-card, .metric-card, .info-card, .glass { background: rgba(255,255,255,0.025) !important; border: 1px solid var(--rule) !important; box-shadow: none !important; backdrop-filter: none !important; border-radius: 12px !important; } .hero-kpi { color: var(--ink) !important; } /* Bandas de sección con fondo de color -> índigo plano */ .section[style*="background"], .pipeline-bg, .results-bg, .about, .team-bg, .scope-bg, .cta-hub, .news-bg { background: #0E1424 !important; } /* Footer */ .footer { background: #0A0E18 !important; border-top: 1px solid var(--rule-strong) !important; color: var(--ink-soft) !important; } .footer a { color: var(--ink-soft) !important; } .footer-brand { font-family: var(--serif-head) !important; color: var(--ink) !important; } .footer-brand span { color: var(--accent) !important; } .footer-links { flex-wrap: wrap !important; } .footer-divider { background: var(--accent) !important; } /* ═══ REFINAMIENTO NYT en subpáginas: encabezados centrados, hero centrado ═══ */ body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero { text-align: center !important; } .hero h1 { text-align: center !important; max-width: 18ch; margin-left: auto !important; margin-right: auto !important; } .hero .subtitle, .hero p, .hero .lead, .hero .hero-sub { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 60ch; } .section-title { text-align: center !important; } .section-label, .eyebrow { justify-content: center !important; text-align: center !important; } .section-desc { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 62ch; }