/* ============================================================ PULSO CRÍTICO — Sistema de diseño Editorial oscuro premium · v1.0 Colócalo en /static/pulso.css y enlázalo desde base.html ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* superficies */ --bg:#0B0B0C; /* fondo base (OLED) */ --bg-2:#131316; /* fondo elevado / bandas */ --surface:#17181B; /* tarjetas, inputs */ --surface-2:#1D1E22; /* hover / avatar */ --line:#26272B; /* filetes finos */ --line-2:#34363B; /* bordes más marcados */ /* tinta */ --ink:#F3EFE7; /* texto principal (blanco hueso) */ --ink-2:#A7A49C; /* secundario */ --ink-3:#6E6C67; /* meta / mono tenue */ /* marca */ --red:#C8102E; /* acento de marca (fondos, botones) */ --red-ink:#FF5A6E; /* acento sobre oscuro (texto/enlaces, AA) */ /* color por sección */ --c-pol:#FF5A6E; /* Política */ --c-eco:#5B94D6; /* Economía */ --c-inv:#F3EFE7; /* Investigación */ --c-soc:#3FB08F; /* Sociedad */ --c-mun:#A98BE0; /* Mundo */ --c-opi:#D68A52; /* Opinión */ /* medidas */ --wrap:1280px; /* ancho contenedor */ --col:720px; /* columna de lectura */ --radius:2px; /* tipografía */ --font-head:'Bricolage Grotesque',system-ui,sans-serif; --font-body:'Newsreader',Georgia,serif; --font-ui:'IBM Plex Mono',ui-monospace,monospace; /* escala titulares (clamp fluido) */ --h1:clamp(40px,6vw,72px); --h2:clamp(30px,3.6vw,46px); --h3:32px; --h4:19px; } /* Tema claro opcional (añade data-theme="light" al ) */ html[data-theme="light"]{ --bg:#F7F5F0; --bg-2:#EEEBE3; --surface:#FFFFFF; --surface-2:#F1EEE7; --line:#E0DCD2; --line-2:#CFCabc; --ink:#141310; --ink-2:#565249; --ink-3:#8A857A; --red-ink:#C8102E; --c-pol:#C8102E; --c-inv:#141310; } /* ---------- 2. RESET ---------- */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ::selection{background:var(--red);color:#fff;} :focus-visible{outline:2px solid var(--red-ink);outline-offset:3px;} /* ---------- 3. TIPOGRAFÍA ---------- */ .grot{font-family:var(--font-head);} .serif{font-family:var(--font-body);} .mono{font-family:var(--font-ui);} .kicker{font-family:var(--font-ui);font-size:11px;letter-spacing:.14em; text-transform:uppercase;color:var(--red-ink);font-weight:600;} .meta{font-family:var(--font-ui);font-size:10px;letter-spacing:.06em;color:var(--ink-3);} /* ---------- 4. LAYOUT ---------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;} .hero{display:grid;grid-template-columns:1.62fr 1px 1fr;} .secblk{display:grid;grid-template-columns:1.5fr 1px 1fr;} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;} .vr{background:var(--line);} .col-r{padding-left:40px;} .feat{padding-right:36px;} .list-r{padding-left:36px;display:flex;flex-direction:column;} .trio-item{padding:0 22px;border-left:1px solid var(--line);} /* artículo */ .hl{transition:color .18s ease;} a:hover .hl{color:var(--red-ink);} .deskonly{display:flex;} .artgrid{display:grid;grid-template-columns:64px 1fr;gap:0;} .sharerail{position:sticky;top:120px;display:flex;flex-direction:column;gap:12px;align-items:center;} .sharebtn{width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;display:flex; align-items:center;justify-content:center;color:var(--ink-2);transition:all .16s ease;} .sharebtn:hover{border-color:var(--red);color:var(--red-ink);} .body p.lead-first::first-letter{font-family:var(--font-head);font-weight:800;float:left; font-size:76px;line-height:.72;padding:8px 14px 0 0;color:var(--red);} .tag{font-family:var(--font-ui);font-size:10px;letter-spacing:.08em;color:var(--ink-2); border:1px solid var(--line-2);padding:6px 11px;} /* sección: nota destacada + masthead */ .sec-lead{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;} .sec-h1{font-family:var(--font-head);font-weight:800;font-size:clamp(48px,8vw,86px); line-height:.9;letter-spacing:-.04em;margin:0;} /* ---------- 5. HEADER + NAV ---------- */ .utility{background:var(--bg-2);border-bottom:1px solid var(--line);} .utility .wrap{display:flex;align-items:center;justify-content:space-between; height:34px;font-family:var(--font-ui);font-size:11px;letter-spacing:.06em;color:var(--ink-3);} .masthead{position:sticky;top:0;z-index:80;background:rgba(11,11,12,.85); backdrop-filter:blur(14px);border-bottom:1px solid var(--line); transition:transform .3s cubic-bezier(.2,.7,.3,1);} .masthead.is-hidden{transform:translateY(-100%);} /* auto-hide al bajar */ .wordmark{display:flex;align-items:center;gap:11px;} .wordmark span{font-family:var(--font-head);font-weight:800;font-size:24px;letter-spacing:-.03em;} .nav{display:flex;gap:30px;font-family:var(--font-ui);font-size:12px; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);} .nav a{position:relative;padding:6px 0;} .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px; background:var(--red);transition:right .2s ease;} .nav a:hover::after,.nav a[aria-current="page"]::after{right:0;} .nav a[aria-current="page"]{color:var(--ink);} .btn-suscribe{font-family:var(--font-ui);font-size:11px;letter-spacing:.1em; color:var(--red-ink);border:1px solid var(--red);padding:8px 14px;} /* ---------- 6. TICKER "EN VIVO" ---------- */ .ticker{display:flex;align-items:stretch;background:var(--bg-2); border-bottom:1px solid var(--line);overflow:hidden;} .ticker__live{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:0 18px; background:var(--red);color:#fff;font-family:var(--font-ui);font-size:11px; font-weight:600;letter-spacing:.12em;} .ticker__dot{width:6px;height:6px;border-radius:50%;background:#fff; animation:beat 2.4s ease-in-out infinite;} .ticker__track{overflow:hidden;flex:1;display:flex;align-items:center;} .ticker__track > div{display:flex;gap:38px;white-space:nowrap;padding-left:22px; font-family:var(--font-ui);font-size:12.5px;color:var(--ink-2); animation:marquee 58s linear infinite;} /* ---------- 7. TARJETAS ---------- */ /* imagen con aspect-ratio fijo (CLS≈0) + duotono placeholder */ .thumb{position:relative;overflow:hidden;background:var(--surface);} .thumb img{width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1);} a:hover .thumb img{transform:scale(1.05);} .thumb--16-9{aspect-ratio:16/9;} .thumb--16-10{aspect-ratio:16/10;} .card-title{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em; line-height:1.08;transition:color .18s ease;} a:hover .card-title{color:var(--red-ink);} /* variante DESTACADA (hero) */ .card--lead{background:var(--bg-2);border-radius:0;} .card--lead .card-title{font-size:var(--h1);line-height:.94;letter-spacing:-.035em;} /* variante ESTÁNDAR */ .card--std .card-title{font-size:22px;} .card--std .deck{font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--ink-2);} /* variante COMPACTA (lista lateral) */ .card--compact{display:block;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line);} .card--compact .card-title{font-weight:600;font-size:var(--h4);line-height:1.12;} /* lo más leído (numerado) */ .ranked{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);} .ranked__n{font-family:var(--font-head);font-weight:800;font-size:24px;line-height:1; width:30px;flex-shrink:0;color:var(--ink-3);} .ranked:first-child .ranked__n{color:var(--red);} /* ---------- 8. CUERPO DE ARTÍCULO ---------- */ .body{max-width:var(--col);margin:0 auto;} .body p{font-family:var(--font-body);font-size:20px;line-height:1.75;margin:0 0 28px;} .body p.first::first-letter{font-family:var(--font-head);font-weight:800;float:left; font-size:76px;line-height:.72;padding:8px 14px 0 0;color:var(--red);} .body h2{font-family:var(--font-head);font-weight:700;font-size:var(--h3); line-height:1.08;letter-spacing:-.02em;margin:44px 0 20px;text-wrap:balance;} .body a{color:var(--red-ink);border-bottom:1px solid rgba(255,90,110,.4);} .body blockquote{margin:40px 0;padding-left:24px;border-left:3px solid var(--red);} .body blockquote p{font-family:var(--font-head);font-weight:600;font-size:28px; line-height:1.12;letter-spacing:-.02em;margin:0;} figure{margin:36px 0;} figcaption{font-family:var(--font-ui);font-size:10px; color:var(--ink-3);margin-top:10px;} /* Caja "Lo esencial" */ .esencial{background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--red);padding:22px 24px;margin:0 0 40px;} .esencial ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} .esencial li{display:flex;gap:12px;font-family:var(--font-body);font-size:16.5px;line-height:1.45;} .esencial li::before{content:"—";color:var(--red);flex-shrink:0;} /* ---------- 9. BOTONES / FORM / CHIPS / PAGINACIÓN ---------- */ .btn{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.1em; border:none;cursor:pointer;padding:15px 26px;} .btn--primary{background:var(--red);color:#fff;} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);} .input{background:var(--surface);border:1px solid var(--line-2);color:var(--ink); padding:14px 16px;font-family:var(--font-body);font-size:18px;outline:none;border-radius:var(--radius);} .input--line{background:transparent;border:none;border-bottom:2px solid var(--line-2);border-radius:0;} .form-msg-ok{font-family:var(--font-ui);font-size:11px;color:#7fdca3;} .form-msg-err{font-family:var(--font-ui);font-size:11px;color:var(--red-ink);} .chip{font-family:var(--font-ui);font-size:11px;letter-spacing:.06em;padding:8px 14px; border:1px solid var(--line-2);color:var(--ink-2);cursor:pointer;transition:all .15s ease;} .chip:hover{border-color:var(--red);color:var(--red-ink);} .chip.is-active{background:var(--red);border-color:var(--red);color:#fff;} .pagebtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line-2);color:var(--ink-2);font-family:var(--font-ui); font-size:13px;transition:all .15s ease;} .pagebtn:hover{border-color:var(--red);color:var(--red-ink);} .pagebtn.is-active{background:var(--red);border-color:var(--red);color:#fff;} /* ---------- 10. BADGES DE SECCIÓN ---------- */ .badge{width:10px;height:10px;display:inline-block;} .badge--pol{background:var(--c-pol);} .badge--eco{background:var(--c-eco);} .badge--inv{background:var(--c-inv);} .badge--soc{background:var(--c-soc);} .badge--mun{background:var(--c-mun);} .badge--opi{background:var(--c-opi);} /* ---------- 11. NEWSLETTER / FOOTER ---------- */ .newsletter{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .newsletter .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;padding:40px;} .footer{border-top:1px solid var(--line);} .footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;} /* ---------- 12. NAV MÓVIL (thumb bar) ---------- */ .mobilenav{display:none;} .sharebar{display:none;} .progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--red);z-index:120;} /* ---------- 13. SELLO EKG ---------- */ .ekg{display:inline-block;} .ekg__draw{stroke-dasharray:1400;stroke-dashoffset:1400; animation:ekgdraw 2.6s cubic-bezier(.6,0,.2,1) forwards;} @keyframes ekgdraw{to{stroke-dashoffset:0;}} @keyframes beat{0%,100%{transform:scale(1);opacity:1;}18%{transform:scale(1.5);opacity:.7;} 36%{transform:scale(1);opacity:1;}54%{transform:scale(1.32);opacity:.85;}} @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}} /* reveal al hacer scroll (CSS puro; degrada a visible) */ @supports (animation-timeline: view){ .reveal{animation:rise linear both;animation-timeline:view(); animation-range:entry 0% entry 34%;} } /* ---------- 14. RESPONSIVE (mobile-first override) ---------- */ @media(max-width:920px){ .wrap{padding:0 20px;} .hero,.secblk{grid-template-columns:1fr;} .hero .vr,.secblk .vr{display:none;} .grid3,.newsletter .wrap,.footer__grid{grid-template-columns:1fr;gap:30px;} .col-r,.feat,.list-r{padding:0;} .col-r,.list-r{border-top:1px solid var(--line);margin-top:22px;padding-top:22px;} .trio-item{padding:0;border-left:none;border-top:1px solid var(--line);margin-top:18px;padding-top:18px;} .deskonly{display:none !important;} .artgrid{grid-template-columns:1fr;} .sharerail{display:none;} .sec-lead{grid-template-columns:1fr;gap:20px;} .nav,.utility,.btn-suscribe{display:none;} .body p{font-size:18px;line-height:1.7;} .body h2{font-size:25px;} /* barra inferior de pulgar */ .mobilenav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90; justify-content:space-around;align-items:center; background:rgba(11,11,12,.9);backdrop-filter:blur(16px); border-top:1px solid var(--line); padding:10px 0 calc(10px + env(safe-area-inset-bottom));} .mobilenav a{display:flex;flex-direction:column;align-items:center;gap:5px; color:var(--ink-2);min-width:56px;min-height:44px;justify-content:center; font-family:var(--font-ui);font-size:9px;} .mobilenav a[aria-current="page"]{color:var(--red-ink);} .sharebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100; align-items:center;gap:12px;background:rgba(11,11,12,.92);backdrop-filter:blur(16px); border-top:1px solid var(--line);padding:12px 20px calc(12px + env(safe-area-inset-bottom));} body.has-mobilenav{padding-bottom:104px;} } /* ---------- 15. ACCESIBILIDAD: movimiento reducido ---------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none !important;} .ekg__draw{stroke-dashoffset:0;} .masthead{transition:none;} }