/* Theme Name: AlMomento Theme URI: https://almomento.do/ Author: AlMomento Author URI: https://almomento.do/ Description: Tema clásico, rápido y sin JavaScript para AlMomento — periódico digital de la República Dominicana. Disciplina visual tipo FT: fondo papel cálido, filetes finos en lugar de cajas, serifa editorial con pocos escalones tipográficos, imaginería contenida. Portada con jerarquía editorial, mesas especiales (Dominicanos en el Exterior, Haití), franja de Opinión, boletín y espacios publicitarios reservados (GAM). Version: 1.8.5 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: almomento Tags: news, newspaper, classic, accessibility-ready, custom-menu, featured-images, rtl-language-support, translation-ready */ /* ============================================================ v1.1.0 — FT-discipline restyle (Alvaro 2026-07-04: "use something visually superior like ft.com as reference"). Grammar: warm paper bg, hairline rules draw the grid (no card boxes, no fills, no radius), Georgia display serif at few unmistakable scale steps, muted small-caps kickers, navy/gold strictly as accents. ZERO web fonts, ZERO JS. ============================================================ */ /* Typography v1.1 (2026-09-01, option 2 "Serif Editorial"): self-hosted variable fonts, Latin subset, no third-party requests. Source Serif 4 = headlines (--display, optical sizing on); Libre Franklin = UI (--sans); Georgia stays for the wordmark and article prose. */ @font-face{font-family:"Source Serif 4";src:url("assets/fonts/source-serif-4-var-latin.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:"Libre Franklin";src:url("assets/fonts/libre-franklin-var-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{color-scheme:light;--navy:#294b8e;--navy-d:#1f3a6e;--gold:#eeae00;--gold-ink:#8a6400; --ink:#191b1f;--muted:#66696f;--paper:#faf7f1;--paper-2:#f2ede2; --rule:#e2dbcc;--rule-d:#b9af9b;--sans:"Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --serif:Georgia,"Times New Roman",serif;--display:"Source Serif 4",Georgia,"Times New Roman",serif; /* role tokens — dark theme 2026-09-01. --navy/--navy-d stay solid (buttons, footer); text uses the *-text pair */ --navy-text:#294b8e;--navy-d-text:#1f3a6e;--field:#fff;--ink-2:#3f4248;--ink-prose:#212429; --red:#a3342b;--red-solid:#a3342b;--red-ink:#8f2418;--red-tint:#fbeae7;--red-rule:#f2c9c3; --green:#1e6b3a;--green-d:#0c6332;--green-ink:#1e5b32;--green-tint:#e9f5eb;--green-rule:#c7e0cd; --gold-tint:#fbf3e6;} /* Dark theme: follows the device; an explicit data-theme on (header toggle) wins in both directions */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ink:#ecebe6;--muted:#a3a7ae;--paper:#15171c;--paper-2:#1d2026;--rule:#2c3038;--rule-d:#454a54; --navy-text:#9fb6e8;--navy-d-text:#c9d6f3;--gold-ink:#f1c04b; --field:#1c1f25;--ink-2:#c9ccd3;--ink-prose:#e4e3de; --red:#ff8a7c;--red-ink:#ffb1a6;--red-tint:#3b1c19;--red-rule:#5c2d28; --green:#6dd08c;--green-d:#8fe3a8;--green-ink:#a6e3b6;--green-tint:#14301d;--green-rule:#24522f; --gold-tint:#2a2416; } } :root[data-theme="dark"]{ color-scheme:dark; --ink:#ecebe6;--muted:#a3a7ae;--paper:#15171c;--paper-2:#1d2026;--rule:#2c3038;--rule-d:#454a54; --navy-text:#9fb6e8;--navy-d-text:#c9d6f3;--gold-ink:#f1c04b; --field:#1c1f25;--ink-2:#c9ccd3;--ink-prose:#e4e3de; --red:#ff8a7c;--red-ink:#ffb1a6;--red-tint:#3b1c19;--red-rule:#5c2d28; --green:#6dd08c;--green-d:#8fe3a8;--green-ink:#a6e3b6;--green-tint:#14301d;--green-rule:#24522f; --gold-tint:#2a2416; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.45} a{color:inherit;text-decoration:none} img{max-width:100%;display:block;object-fit:cover} .wrap{max-width:1220px;margin:0 auto;padding:0 20px} h1,h2,h3,h4{font-family:var(--display);font-optical-sizing:auto;line-height:1.18;font-weight:700;letter-spacing:-.01em} .kicker{display:inline-block;font:700 12px/1 var(--sans); letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:7px} .meta{display:flex;align-items:center;gap:7px;margin-top:8px; font:400 12.5px/1 var(--sans);color:var(--muted)} .meta .by{color:var(--navy-text);font-weight:600} .meta .dot{color:var(--rule-d)} .meta time{color:var(--muted)} .meta .cmts{color:var(--navy-text);font-weight:600} .meta .cmts:hover{color:var(--gold-ink)} .meta .cmts-n{display:inline-flex;align-items:center;gap:3px} .meta .cmts-n svg{display:block} /* focus + skip link */ a:focus-visible,button:focus-visible,input:focus-visible,label:focus-visible, .nt:focus-visible+.mast .burger{outline:3px solid var(--navy-text);outline-offset:2px} .skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--navy);color:#fff; padding:10px 16px;font-weight:700} .skip:focus{left:0} .nt{display:none} /* top bar — quiet utility strip on paper */ .top{background:var(--paper);border-bottom:1px solid var(--rule);font-size:12px;color:var(--muted)} .top .wrap{display:flex;justify-content:space-between;align-items:center;height:32px} .top .soc a{margin-left:14px;color:var(--muted);font-weight:500} .top .soc a:hover{color:var(--navy-text)} .top .sub{color:var(--navy-text);font-weight:700;letter-spacing:.02em} /* masthead — centered brand on paper, FT-style */ .mast{background:var(--paper)} .mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:20px 20px 16px} .burger{display:none;cursor:pointer;color:var(--navy-d-text);font-size:24px;line-height:1; width:44px;height:44px;align-items:center;justify-content:center;justify-self:start} .burger:hover{background:var(--paper-2)} .brand{display:flex;align-items:center;justify-content:center;gap:14px;grid-column:2;text-align:center} .brand img{height:52px;width:auto} .brand .wm{color:var(--navy-d-text);font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:40px;letter-spacing:.4px} .brand .wm b{color:var(--navy-text);font-weight:700} .brand .wm b:after{content:"";display:none} .brand .tg{display:block;color:var(--muted);font:400 12.5px/1 var(--sans);margin-top:5px;letter-spacing:.04em} form.search{grid-column:3;justify-self:end;display:flex;background:var(--field);border:1px solid var(--rule-d);overflow:hidden;max-width:250px;width:100%} form.search input{border:0;padding:8px 12px;font-size:13.5px;width:100%;outline:none;background:transparent} form.search button{border:0;background:var(--navy-d);color:#fff;font-weight:700;font-size:12.5px;padding:0 14px;cursor:pointer} form.search button:hover{background:var(--navy)} /* nav — paper band ruled top and bottom, gold underline states */ .nav{background:var(--paper);position:sticky;top:0;z-index:40; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule-d)} .nav ul{list-style:none;display:flex;align-items:center;justify-content:center;gap:4px;overflow-x:auto; -webkit-overflow-scrolling:touch;max-width:1220px;margin:0 auto;padding:0 20px} .nav a{display:block;white-space:nowrap;color:var(--ink); font:600 13.5px/1 var(--sans);padding:13px 12px 11px;border-bottom:3px solid transparent} .nav a:hover{color:var(--navy-text);border-bottom-color:var(--rule-d)} .nav .current-menu-item>a,.nav .current_page_item>a,.nav a[aria-current]{color:var(--navy-d-text);border-bottom-color:var(--gold)} /* mobile drawer */ .navdrawer{display:none;background:var(--paper);border-bottom:2px solid var(--rule-d)} .navdrawer form.search{margin:14px 20px;max-width:none} .navdrawer ul{list-style:none} .navdrawer a{display:block;color:var(--ink);font-weight:600;font-size:16px; padding:13px 20px;border-top:1px solid var(--rule)} .navdrawer a:hover{background:var(--paper-2);color:var(--navy-text)} /* indicadores — masthead data strip (WSJ markets-strip pattern) */ .indic{background:var(--paper);border-bottom:1px solid var(--rule);font-family:var(--sans)} .indic .wrap{display:flex;align-items:center;gap:22px;height:34px;overflow-x:auto;-webkit-overflow-scrolling:touch} .indic .ind-t{font:800 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .indic a{display:flex;align-items:baseline;gap:6px;font:700 12.5px/1 var(--sans);color:var(--navy-d-text);white-space:nowrap;font-variant-numeric:tabular-nums} .indic a:hover{color:var(--navy-text)} .indic .ind-l{font-weight:600;color:var(--muted)} .indic .ind-d{font:700 11px/1 var(--sans)} .indic .ind-d.up{color:var(--red)} .indic .ind-d.down{color:var(--green)} /* última hora — gold tag + up to 3 stamped items (NYT live-strip pattern) */ .brk{background:var(--paper);border-bottom:1px solid var(--rule)} .brk .wrap{display:flex;align-items:center;padding:9px 20px;font-family:var(--sans)} .brk b{background:var(--gold);color:var(--navy-d);font:800 11px/1 var(--sans);letter-spacing:.1em; text-transform:uppercase;padding:5px 9px;white-space:nowrap;margin-right:16px} .brk a{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;padding:0 16px;border-left:1px solid var(--rule)} .brk a:first-of-type{border-left:0;padding-left:0} .brk a:last-of-type{padding-right:0} .brk time{font:700 11px/1.2 var(--sans);color:var(--red);white-space:nowrap;text-transform:uppercase} .brk span{display:block;min-width:0;font-size:13.5px;font-weight:600;color:var(--navy-d-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brk a:hover span{color:var(--navy-text)} /* hero — lead package: text left, contained image right, ruled rail */ .hero{background:var(--paper);padding:30px 0 26px;border-bottom:1px solid var(--rule-d)} .hero .wrap{display:grid;grid-template-columns:8fr 4fr;gap:0} .lead{display:grid;grid-template-columns:1.02fr 1fr;gap:28px;padding-right:32px;align-content:start} .lead .thumb{overflow:hidden;aspect-ratio:16/10;background:var(--paper-2)} .lead .thumb img{width:100%;height:100%} .lead h1{font-size:37px;margin:2px 0 12px;letter-spacing:-.2px} .lead a:hover h1{color:var(--navy-d-text)} .lead .dek{color:var(--ink-2);font-size:15.5px;line-height:1.55;font-family:var(--sans);max-width:58ch} .secs{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--rule);padding-left:32px} .sec{padding:14px 0;border-bottom:1px solid var(--rule)} .sec:first-child{padding-top:2px} .sec:last-child{border-bottom:0;padding-bottom:0} .sec h3{font-size:17.5px;line-height:1.25} .sec:hover h3{color:var(--navy-text)} /* ads — reserved, labeled, quiet; house creatives fill unsold slots */ .ad{margin:24px auto;text-align:center} .ad small{display:block;color:var(--muted);font-size:11px;letter-spacing:.18em;margin-bottom:6px;text-transform:uppercase} .ad .box{background:var(--paper-2);border:1px solid var(--rule);color:var(--rule-d); display:flex;align-items:center;justify-content:center;font:600 11px/1 var(--sans);letter-spacing:.08em} .ad .board{height:90px;max-width:970px;margin:0 auto} .ad .feed{height:90px;max-width:728px;margin:0 auto} .had{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100%;padding:8px 16px;letter-spacing:0} /* v1.6.3 (2026-08-09) — ?ads_preview=1 placement placeholders (docs/ads-readiness.md) */ /* v1.6.4 (2026-08-10) — code-review fixes: site.js retries a failed VAPID key fetch and rolls back a push subscription the server didn't record; exit-intent modal reads the newsletter contract from window.ALMOMENTO_NL instead of restating it; PWA icon paths templated at serve time. No visual change. */ .ad-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;border:1px dashed var(--rule-d);background:repeating-linear-gradient(45deg,transparent 0 8px,rgba(0,0,0,.02) 8px 16px);letter-spacing:0} .ad-preview-k{font:800 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .ad-preview-t{font:700 13px/1.2 var(--sans);color:var(--navy-d-text);text-align:center} .had-k{font:800 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)} .had-t{font:700 16.5px/1.2 var(--serif);color:var(--navy-d-text);text-align:center;max-width:70ch} .had-t small{font:400 12px/1 var(--sans);color:var(--muted);letter-spacing:.02em} .had-cta{font:700 12px/1 var(--sans);color:var(--navy-text)} .had:hover .had-cta{color:var(--gold-ink)} /* section bands — small-caps label sitting on a hairline */ .sect{padding:34px 0 30px} .sect-head{display:flex;align-items:center;gap:14px;margin-bottom:22px} .sect-head h2{font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--navy-d-text)} .sect-head .win{font:400 12px/1 var(--sans);color:var(--muted);white-space:nowrap} .sect-head:before{content:"";width:26px;height:3px;background:var(--gold)} .sect-head:after{content:"";flex:1;height:1px;background:var(--rule)} /* story grid — columns drawn by hairlines, not card boxes */ .grid{display:grid;grid-template-columns:repeat(3,1fr)} .grid .card{padding:0 22px;border-left:1px solid var(--rule);min-width:0} .grid .card:nth-child(3n+1){border-left:0;padding-left:0} .grid .card:nth-child(3n){padding-right:0} .grid .card:nth-child(n+4){border-top:1px solid var(--rule);padding-top:20px;margin-top:20px} .card{display:block} .card .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);margin-bottom:12px} .card .thumb img{width:100%;height:100%} .card h3{font-size:18px;margin-top:2px;line-height:1.24} .card:hover h3{color:var(--navy-text)} .ph{width:100%;height:100%;background:linear-gradient(135deg,var(--paper-2),var(--rule))} /* lo más comentado — numbered strip (FT most-read pattern) */ .mostc{display:grid;grid-template-columns:repeat(5,1fr)} .mostc a{display:flex;gap:12px;padding:0 18px;border-left:1px solid var(--rule);min-width:0} .mostc a:first-child{border-left:0;padding-left:0} .mostc a:last-child{padding-right:0} .mostc .n{font:700 34px/1 var(--serif);color:var(--rule-d)} .mostc h4{font-size:14.5px;font-weight:700;line-height:1.3} .mostc a:hover h4{color:var(--navy-text)} .mostc .c{display:block;font:600 12px/1 var(--sans);color:var(--navy-text);margin-top:6px} /* comentario del día — editorial pick under the most-commented strip */ .cotd{border-top:1px solid var(--rule);margin-top:18px;padding-top:14px} .cotd-lbl{font:800 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--navy-d-text)} .cotd blockquote{font:italic 400 17px/1.5 var(--serif);max-width:920px;margin:8px 0 8px} .cotd-by{font:400 12.5px/1.5 var(--sans);color:var(--muted)} .cotd-by strong{color:var(--navy-d-text)} .cotd-by a{color:var(--navy-text)} .cotd-by a:hover{text-decoration:underline} .cotd-cta{font-weight:700;white-space:nowrap} /* selección del editor — Portada picks, four text-forward ruled columns */ .selec{display:grid;grid-template-columns:repeat(4,1fr)} .selec .li{padding:0 18px;border-top:0;margin-top:0;border-left:1px solid var(--rule);min-width:0} .selec .li:first-child{border-left:0;padding-left:0;margin-top:0} .selec .li:last-child{padding-right:0} .selec .li h4{font-size:15.5px} /* desks — two ruled columns */ .desks{display:grid;grid-template-columns:1fr 1fr;gap:0} .desk{min-width:0} .desk+.desk{border-left:1px solid var(--rule);padding-left:40px} .desks .desk:first-child{padding-right:40px} .desk-head{border-bottom:1px solid var(--rule-d);padding-bottom:10px;margin-bottom:18px} .desk-head h2{font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--navy-d-text)} .desk-tag{font:400 12.5px/1.3 var(--sans);color:var(--muted);margin-top:6px} .desk-lead .thumb{aspect-ratio:16/9;overflow:hidden;margin-bottom:12px;background:var(--paper-2)} .desk-lead .thumb img{width:100%;height:100%} .desk-lead h3{font-size:21px} .desk-lead:hover h3{color:var(--navy-text)} .desk-list{margin-top:6px;display:flex;flex-direction:column} .li{padding:13px 0;border-top:1px solid var(--rule)} .li:first-child{margin-top:8px} .li h4{font-size:15.5px;font-weight:700;line-height:1.3} .li:hover h4{color:var(--navy-text)} /* newsletter — one slim ruled band */ .news-band{border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d); background:var(--paper-2);margin:8px 0} .news-band .wrap{display:flex;align-items:center;gap:18px;padding:16px 20px;flex-wrap:wrap} .news-band p{font:700 15px/1.35 var(--serif);color:var(--navy-d-text);flex:1;min-width:230px} .news-band .fine{display:block;font:400 12px/1.3 var(--sans);color:var(--muted);margin-top:4px} .news-band form{display:flex;gap:0;flex:1;min-width:280px;max-width:430px} .news-band input{flex:1;min-width:0;border:1px solid var(--rule-d);border-right:0;background:var(--field);padding:10px 13px;font-size:14px} .news-band .go{background:var(--navy-d);color:#fff;border:0;font-weight:700;font-size:13.5px;padding:0 18px;cursor:pointer} .news-band .go:hover{background:var(--navy)} /* opinion — italic serif, thin gold spine */ .ops{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .op{border-left:3px solid var(--gold);padding:4px 0 4px 20px;min-width:0} .op-by{font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)} .op h4{font-size:19px;margin-top:8px;font-style:italic;line-height:1.3} .op:hover h4{color:var(--navy-text)} .op .meta{font-style:normal} /* footer — dark ground */ .foot{background:var(--navy-d);color:#c2cde3;margin-top:44px;padding:36px 0 24px;font-family:var(--sans)} .foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;max-width:1220px;margin:0 auto;padding:0 20px} .foot h5{color:#fff;font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px} .foot ul{list-style:none} .foot a{display:block;color:#aebcd8;font-size:13.5px;padding:4px 0} .foot a:hover{color:var(--gold)} .foot .fb{display:flex;align-items:center;gap:10px;margin-bottom:10px} .foot .fb img{height:38px;width:auto} .foot .fb b{color:#fff;font-family:var(--serif);font-size:20px} .foot .fb b i{color:var(--gold);font-style:normal} .copy{border-top:1px solid #2c4577;margin-top:24px;padding-top:16px;color:#aab9dc;font-size:12.5px;text-align:center} /* ============================================================ Article, archive/list rows, search, pagination, 404 — same FT grammar. ============================================================ */ /* article (single.php) */ .article{background:var(--paper);padding:32px 0 10px} .article .wrap{max-width:780px} .article .crumbs{font:700 11.5px/1 var(--sans);color:var(--gold-ink);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px} .article .crumbs a:hover{color:var(--navy-text)} .article h1{font-size:36px;margin:4px 0 12px;letter-spacing:-.2px} .article .lede-img{overflow:hidden;margin:20px 0;background:var(--paper-2)} .article .lede-img img{width:100%;height:auto} .article .badges{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px} .article .badges a{display:inline-block;border:1px solid var(--rule-d);color:var(--navy-d-text);font:600 11px/1 var(--sans); letter-spacing:.08em;text-transform:uppercase;padding:6px 10px} .article .badges a:hover{border-color:var(--navy-text);color:var(--navy-text)} /* homepage storm-alert band — WeatherNext live block, compact (above hero) */ .storm-band{background:var(--gold-tint);border-top:2px solid var(--gold);border-bottom:1px solid var(--rule-d)} .storm-band .wrap{display:flex;align-items:center;gap:14px;padding:12px 20px;flex-wrap:wrap} .storm-band .sb-tag{background:var(--gold);color:var(--navy-d);font:800 10.5px/1 var(--sans); letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;white-space:nowrap} .storm-band .sb-txt{flex:1;min-width:240px;font:600 14px/1.45 var(--sans);color:var(--navy-d-text)} .storm-band .sb-ai{color:var(--ink);font-weight:600} .storm-band .sb-cta{white-space:nowrap;font:700 13px/1 var(--sans);color:var(--navy-text); border-bottom:2px solid var(--gold);padding-bottom:3px} .storm-band .sb-cta:hover{color:var(--navy-d-text)} .storm-band--alert{background:var(--red-tint);border-top-color:var(--red)} .storm-band--alert .sb-tag{background:var(--red-solid);color:#fff} .storm-band--alert .sb-cta{border-bottom-color:var(--red)} /* WeatherNext AI layer on /huracanes — experimental tag + inline house SVG */ .wn-tag{display:inline-block;vertical-align:middle;margin-left:8px;border:1px solid var(--gold-ink); color:var(--gold-ink);font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:4px 7px} .wn-chart{margin:14px 0 6px;background:var(--paper)} .wn-chart svg{max-width:100%;height:auto;display:block} /* wpDiscuz utility elements ship fixed pixel widths that widen the page on small viewports (verified 2026-08-08: unauth message div at 659px on a 390px viewport was the only element forcing document-level h-scroll). */ .wpdiscuz-comment-message-unauth,.wpdiscuz-loading-bar-unauth{max-width:100% !important} /* Mesa de Datos "Fuentes" lists cite long official URLs verbatim; let them wrap instead of widening the page on phones. */ .prose a{overflow-wrap:anywhere} #wpcomm{max-width:100%;overflow-x:hidden} #wpcomm a{overflow-wrap:anywhere} .share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 4px; padding-top:14px;border-top:1px solid var(--rule)} .share-row .share-label{font:700 11px/1 var(--sans);letter-spacing:.1em; text-transform:uppercase;color:var(--gold-ink);margin-right:2px} .share-row a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule-d); color:var(--navy-d-text);font:600 12px/1 var(--sans);padding:8px 12px;min-height:32px} .share-row a:hover{border-color:var(--navy-text);color:var(--navy-text)} .share-row svg{flex:none} .wa-follow{display:inline-flex;align-items:center;gap:7px;margin:12px 0 2px;border:1px solid var(--green-rule); background:var(--green-tint);color:var(--green);font:700 12.5px/1 var(--sans);padding:8px 14px;border-radius:999px} .wa-follow:hover{border-color:#25d366;background:var(--green-tint);color:var(--green-d)} .wa-follow svg{flex:none} .prose{font-family:var(--serif);font-size:18px;line-height:1.72;color:var(--ink-prose);margin-top:20px} .prose p{margin:0 0 19px} .prose h2,.prose h3{color:var(--navy-d-text);margin:28px 0 10px} .prose a{color:var(--navy-text);text-decoration:underline} .prose img{margin:20px 0;height:auto} .prose iframe,.prose embed,.prose object{max-width:100%} .prose iframe[src*="youtube.com"],.prose iframe[src*="youtu.be"],.prose iframe[src*="vimeo.com"]{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;margin:20px 0} .prose figure,.prose .wp-caption{max-width:100% !important} .prose figure img,.prose .wp-caption img{max-width:100%;height:auto} .prose blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 18px;margin:20px 0;color:var(--ink-2);font-style:italic} .prose ul,.prose ol{margin:0 0 19px 22px} .prose figure{margin:20px 0} .prose figure.grafico{margin:26px 0} .prose figure.grafico svg{max-width:100%;height:auto;display:block} .prose figure.grafico svg.g-m{display:none} @media(max-width:700px){ .prose figure.grafico svg.g-d{display:none} .prose figure.grafico svg.g-m{display:block} } .prose figcaption{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:7px} /* relacionadas (single.php) — tag-affine stories on a hairline band (v1.1.8) */ .rel{padding:26px 0 0} .rel .wrap{border-top:1px solid var(--rule);padding-top:26px} .rel-grid{display:grid;grid-template-columns:repeat(4,1fr)} .rel-grid .card{padding:0 18px;border-left:1px solid var(--rule);min-width:0} .rel-grid .card:first-child{border-left:0;padding-left:0} .rel-grid .card:last-child{padding-right:0} .rel-grid .card h3{font-size:16px} /* list pages (archive/category/search/index) */ .pagehead{background:var(--paper);border-bottom:1px solid var(--rule-d);padding:28px 0 22px} .pagehead h1{font-size:30px;color:var(--navy-d-text)} .pagehead p{font-family:var(--sans);color:var(--muted);font-size:14px;margin-top:6px} .rows{display:flex;flex-direction:column} .row{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--rule);align-items:start} .row:first-child{border-top:0} .row .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)} .row .thumb img{width:100%;height:100%} .row h3{font-size:20px;margin:2px 0 4px;line-height:1.25} .row:hover h3{color:var(--navy-text)} .row .dek{font-family:var(--sans);font-size:14px;color:var(--ink-2);margin-top:5px;max-width:70ch} .card .dek{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:5px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:30px 0 4px} .pager .page-numbers{display:inline-block;padding:9px 14px;border:1px solid var(--rule-d); background:var(--paper);color:var(--navy-d-text);font:700 13px/1 var(--sans)} .pager .page-numbers.current{background:var(--navy-d);color:#fff;border-color:var(--navy-d-text)} .pager a.page-numbers:hover{border-color:var(--navy-text);color:var(--navy-text)} .notice{border:1px solid var(--rule);border-left:3px solid var(--gold); padding:24px;margin:26px 0;font-family:var(--sans);color:var(--ink-2);background:var(--paper)} .notice form.search{background:var(--field);border:1px solid var(--rule-d);max-width:420px;margin-top:14px} .notice form.search input{background:transparent} /* comments — the house differentiator: ruled thread, same paper ground */ .comments-area{font-family:var(--sans);margin:30px 0 10px} .comments-title,.comment-reply-title{font:700 17px/1.2 var(--serif);color:var(--navy-d-text); border-top:2px solid var(--navy-d-text);padding-top:14px;margin-bottom:14px} .comment-list,.comment-list .children{list-style:none;margin:0;padding:0} .comment-list>li{border-top:1px solid var(--rule)} .comment-list .comment-body{padding:15px 0} .comment-list .children{margin-left:38px} .comment-list .children li{border-top:1px dotted var(--rule)} .comment-author{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;color:var(--ink)} .comment-author .avatar{width:30px;height:30px;border-radius:50%} .comment-author .says{display:none} .comment-metadata{font-size:11.5px;margin:3px 0 0 39px} .comment-metadata a{color:var(--muted)} .comment-metadata a:hover{color:var(--navy-text)} .comment-content{font-size:14.5px;line-height:1.55;color:var(--ink-prose);margin:7px 0 0 39px} .comment-content p{margin:0 0 8px} .comment-content p:last-child{margin-bottom:0} .reply{margin:7px 0 0 39px} .comment-reply-link{font:700 12px/1 var(--sans);color:var(--navy-text)} .comment-reply-link:hover{color:var(--gold-ink)} .comment-awaiting-moderation{display:block;font-size:12px;color:var(--gold-ink);margin-left:39px} .comment-respond{margin:24px 0 36px} .comment-notes,.logged-in-as{font-size:12.5px;color:var(--muted);margin-bottom:6px} .comment-form label{display:block;font:600 12px/1 var(--sans);color:var(--muted);margin:12px 0 5px} .comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url], .comment-form textarea{width:100%;border:1px solid var(--rule-d);background:var(--field);padding:9px 12px; font:400 14px/1.45 var(--sans);color:var(--ink)} .comment-form .form-submit{margin:14px 0 0} .comment-form .submit{background:var(--navy-d);color:#fff;border:0;font:700 13.5px/1 var(--sans); padding:12px 22px;cursor:pointer} .comment-form .submit:hover{background:var(--navy)} .comment-form .comment-form-cookies-consent{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--muted);margin-top:10px} .comment-form .comment-form-cookies-consent input{width:auto} /* utility pages (dólar / combustibles) — server-rendered official data */ .util-updated{font:600 12.5px/1.4 var(--sans);color:var(--muted);margin:2px 0 18px;text-transform:uppercase;letter-spacing:.4px} .util-hero{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule-d);background:var(--paper);margin:0 0 10px} .util-fig{padding:22px 24px;display:flex;flex-direction:column;gap:7px} .util-fig+.util-fig{border-left:1px solid var(--rule-d)} .util-lbl{font:700 12px/1 var(--sans);color:var(--muted);text-transform:uppercase;letter-spacing:.6px} .util-big{font:700 40px/1.05 var(--serif);color:var(--navy-d-text);font-variant-numeric:tabular-nums} .delta{display:inline-block;font:700 12.5px/1 var(--sans);padding:5px 9px;align-self:flex-start} .delta.up{background:var(--red-tint);color:var(--red)} .delta.down{background:var(--green-tint);color:var(--green)} .delta.flat{background:var(--paper-2);color:var(--muted)} .util-note{font:400 13px/1.5 var(--sans);color:var(--muted);margin:0 0 22px} .util-h2{font:700 20px/1.2 var(--serif);color:var(--navy-d-text);border-top:2px solid var(--navy-d-text);padding-top:12px;margin:26px 0 12px} .util-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule-d);border:1px solid var(--rule-d);margin:0 0 8px} .ucard{background:var(--paper);padding:16px 18px;display:flex;flex-direction:column;gap:6px} .ucard h3{font:700 14px/1.3 var(--sans);color:var(--ink);margin:0} .ucard .price{font:700 26px/1.1 var(--serif);color:var(--navy-d-text);font-variant-numeric:tabular-nums} .ucard .per{font:400 11.5px/1 var(--sans);color:var(--muted)} .util-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:14px;margin:0 0 8px} .util-table th{font:700 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;border-bottom:2px solid var(--navy-d);padding:8px 10px} .util-table td{border-bottom:1px solid var(--rule);padding:8px 10px;font-variant-numeric:tabular-nums} .util-table td:nth-child(n+2),.util-table th:nth-child(n+2){text-align:right} .util-src{font:400 12.5px/1.6 var(--sans);color:var(--muted);border-top:1px solid var(--rule);padding-top:12px;margin:18px 0 6px} /* mobile */ @media(max-width:860px){ .util-hero{grid-template-columns:1fr} .util-fig+.util-fig{border-left:0;border-top:1px solid var(--rule-d)} .util-big{font-size:32px} .util-cards{grid-template-columns:1fr 1fr} .mast .wrap{padding:12px 14px;grid-template-columns:auto 1fr auto} .brand{justify-content:start;text-align:left;gap:10px} .brand .wm{font-size:26px}.brand img{height:36px} .brand .tg{display:none} form.search{display:none} .burger{display:inline-flex} .nav{display:none} .nt{display:block;position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} .nt:checked~.navdrawer{display:block} .navdrawer form.search{display:flex} .hero{padding:18px 0 20px} .hero .wrap{grid-template-columns:1fr} .lead{grid-template-columns:1fr;gap:14px;padding-right:0} .lead .thumb{order:-1} .lead h1{font-size:27px} .secs{border-left:0;padding-left:0;border-top:1px solid var(--rule-d);margin-top:20px;padding-top:6px} .grid{grid-template-columns:1fr 1fr} .grid .card{border-left:0;padding:0;min-width:0} .grid .card:nth-child(2n){padding-left:16px;border-left:1px solid var(--rule)} .grid .card:nth-child(2n+1){padding-right:16px} .grid .card:nth-child(n+3){border-top:1px solid var(--rule);padding-top:16px;margin-top:16px} .mostc{grid-template-columns:1fr} .mostc a{border-left:0;padding:12px 0;border-top:1px solid var(--rule)} .mostc a:first-child{border-top:0;padding-top:0} .selec{grid-template-columns:1fr} .selec .li{border-left:0;padding:12px 0;border-top:1px solid var(--rule)} .selec .li:first-child{border-top:0;padding-top:0} .brk a:nth-of-type(n+2){display:none} .had-t{font-size:14px} .indic .wrap{gap:16px;padding:0 14px} .desks{grid-template-columns:1fr} .desk+.desk{border-left:0;padding-left:0;border-top:1px solid var(--rule-d);margin-top:26px;padding-top:26px} .desks .desk:first-child{padding-right:0} .ops{grid-template-columns:1fr;gap:20px} .foot .cols{grid-template-columns:1fr 1fr} .ad .board,.ad .feed{height:100px;max-width:336px} .brk .wrap{padding:8px 14px} .article h1{font-size:27px} .row{grid-template-columns:120px 1fr;gap:14px} .rel-grid{grid-template-columns:1fr 1fr} .rel-grid .card{border-left:0;padding:0} .rel-grid .card:nth-child(2n){border-left:1px solid var(--rule);padding-left:16px} .rel-grid .card:nth-child(2n+1){padding-right:16px} .rel-grid .card:nth-child(n+3){border-top:1px solid var(--rule);padding-top:16px;margin-top:16px} } @media(max-width:520px){ .util-cards{grid-template-columns:1fr} .indic .ind-t{display:none} .grid{grid-template-columns:1fr} .grid .card{border-left:0 !important;padding-left:0 !important;padding-right:0 !important} .grid .card:nth-child(n+2){border-top:1px solid var(--rule);padding-top:16px;margin-top:16px} .top .soc{display:none} .news-band form{min-width:100%} .row{grid-template-columns:1fr} .row .thumb{max-width:none} .comment-list .children{margin-left:14px} } /* ============================================================ v1.4.1 — "Más leídas" + "Últimas" desktop desk, responsive embedded media, search-results body-class isolation; article upgrades, category hero card. ============================================================ */ /* --- Portada live desk: two compact modules on desktop --------------- */ .portada-live{padding-bottom:0} .portada-live-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px} .portada-live-grid.is-single{grid-template-columns:1fr} .portada-live-module{min-width:0} .portada-live-module+.portada-live-module{border-left:1px solid var(--rule);padding-left:40px} .portada-live .sect-head{margin-bottom:16px} /* --- Más leídas: numbered list with thumbnail ----------------------- */ .masleidas{list-style:none;display:flex;flex-direction:column;gap:0} .masleidas-item{border-top:1px solid var(--rule);padding:14px 0} .masleidas-item:first-child{border-top:0;padding-top:0} .masleidas-item a{display:flex;align-items:flex-start;gap:12px;text-decoration:none} .masleidas-item a:hover h4{color:var(--navy-text)} .masleidas-n{font:700 28px/1 var(--serif);color:var(--rule-d);min-width:28px;text-align:center;flex-shrink:0;margin-top:2px} .masleidas-thumb{flex-shrink:0;width:90px;height:60px;overflow:hidden;background:var(--paper-2)} .masleidas-thumb img{width:90px;height:60px;object-fit:cover;display:block} .masleidas-thumb .ph{width:90px;height:60px} .masleidas-body{min-width:0;flex:1} .masleidas-body .kicker{margin-bottom:4px} .masleidas-body h4{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)} /* --- Últimas: two compact columns + verbose timestamps -------------- */ .ultimas-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px} .ultimas-item{display:block;padding:13px 0;border-top:1px solid var(--rule);text-decoration:none;position:relative;padding-left:0} .ultimas-item:nth-child(-n+2){border-top:0;padding-top:0} .ultimas-item:hover h3{color:var(--navy-text)} .ultimas-item h3{font-size:16px;font-weight:700;line-height:1.25;margin:3px 0 6px;color:var(--ink)} .ultimas-ts{display:block;font:400 12px/1 var(--sans);color:var(--muted)} /* Pulse dot: CSS-only live indicator */ .pulse-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red-solid); margin-right:6px;margin-bottom:1px;vertical-align:middle; animation:almomento-pulse 2s ease-in-out infinite} @keyframes almomento-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.85)} } /* No animation for users who prefer reduced motion */ @media(prefers-reduced-motion:reduce){ .pulse-dot{animation:none;opacity:.7} } /* --- Single article upgrades --------------------------------------- */ /* Breadcrumb nav */ .crumbs-nav{font:400 12.5px/1.4 var(--sans);color:var(--muted);margin-bottom:10px} .crumbs-nav a{color:var(--navy-d-text);font-weight:600} .crumbs-nav a:hover{color:var(--navy-text);text-decoration:underline} .crumbs-nav span[aria-hidden]{color:var(--rule-d);margin:0 4px} /* Article dek (standfirst) */ .article-dek{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink-2);margin:10px 0 14px;font-weight:400} /* Dual timestamps */ .article-timestamps{font:400 12px/1.5 var(--sans);color:var(--muted);margin:8px 0 12px;display:flex;flex-wrap:wrap;gap:4px 10px} .article-timestamps time{color:var(--navy-d-text);font-weight:600} .ts-sep{color:var(--rule-d)} /* "Te puede interesar" — 5-col recirculation using existing rel-grid */ .teinteresa .rel-grid{grid-template-columns:repeat(5,1fr)} .teinteresa .rel-grid .card{padding:0 16px;border-left:1px solid var(--rule);min-width:0} .teinteresa .rel-grid .card:first-child{border-left:0;padding-left:0} .teinteresa .rel-grid .card:last-child{padding-right:0} .teinteresa .rel-grid .card h3{font-size:14.5px} /* --- Category hero card -------------------------------------------- */ .hero-card{display:grid;grid-template-columns:1.4fr 1fr;gap:0;margin-bottom:4px;text-decoration:none} .hero-card:hover h2{color:var(--navy-d-text)} .hero-card-img{overflow:hidden;aspect-ratio:16/9;background:var(--paper-2)} .hero-card-img img{width:100%;height:100%;object-fit:cover} .hero-card-body{padding:18px 0 18px 28px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--rule)} .hero-card-body .kicker{margin-bottom:8px} .hero-card-body h2{font-size:24px;line-height:1.2;color:var(--ink)} .hero-card-body .dek{font-family:var(--sans);font-size:14px;color:var(--ink-2);margin-top:8px;max-width:55ch;line-height:1.5} .hero-card-body .meta{margin-top:10px} /* --- Responsive adjustments for new modules (≤860px) --------------- */ @media(max-width:860px){ .portada-live-grid{grid-template-columns:1fr;gap:0} .portada-live-module+.portada-live-module{border-left:0;border-top:1px solid var(--rule-d);padding-left:0;padding-top:30px;margin-top:30px} .masleidas-thumb{width:72px;height:48px} .masleidas-thumb img{width:72px;height:48px} .masleidas-thumb .ph{width:72px;height:48px} .teinteresa .rel-grid{grid-template-columns:1fr 1fr} .teinteresa .rel-grid .card{border-left:0;padding:0} .teinteresa .rel-grid .card:nth-child(2n){border-left:1px solid var(--rule);padding-left:14px} .teinteresa .rel-grid .card:nth-child(2n+1){padding-right:14px} .teinteresa .rel-grid .card:nth-child(n+3){border-top:1px solid var(--rule);padding-top:14px;margin-top:14px} .hero-card{grid-template-columns:1fr} .hero-card-img{aspect-ratio:16/9} .hero-card-body{padding:14px 0 0;border-left:0;border-top:0} .hero-card-body h2{font-size:20px} } /* --- Responsive adjustments for new modules (≤520px) --------------- */ @media(max-width:520px){ .ultimas-list{grid-template-columns:1fr} .ultimas-item:nth-child(2){border-top:1px solid var(--rule);padding-top:13px} .teinteresa .rel-grid{grid-template-columns:1fr} .teinteresa .rel-grid .card{border-left:0 !important;padding:0 !important} .teinteresa .rel-grid .card:nth-child(n+2){border-top:1px solid var(--rule);padding-top:14px !important;margin-top:14px} } /* ============================================================ v1.5.0 — Boletín (mu-plugin almomento-newsletter.php). Reader-capture card, same FT grammar: warm paper-2 ground, hairline rules, navy accent for the CTA, muted small-caps kicker. Two placements: inline (inside the article prose, ~3rd paragraph) and footer (bottom of every other page). Zero JS, no images, no layout shift. ============================================================ */ .alm-nl{background:var(--paper-2);border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);margin:26px 0;scroll-margin-top:60px} .alm-nl-inner{max-width:1220px;margin:0 auto;padding:20px 20px 18px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .alm-nl-head{flex:1 1 260px;min-width:0} .alm-nl-kicker{display:inline-block;font:800 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px} .alm-nl-title{font:700 20px/1.2 var(--serif);color:var(--navy-d-text);margin:0 0 4px} .alm-nl-sub{font:400 13.5px/1.5 var(--sans);color:var(--muted);margin:0;max-width:60ch} .alm-nl-sub.is-ok{color:var(--green);font-weight:600} .alm-nl-sub.is-err{color:var(--red);font-weight:600} .alm-nl-form{flex:1 1 320px;display:flex;gap:0;max-width:460px;min-width:0;position:relative} .alm-nl-input{flex:1;min-width:0;border:1px solid var(--rule-d);border-right:0;background:var(--field);padding:11px 13px;font:400 14px/1.2 var(--sans);color:var(--ink);outline:none} .alm-nl-input:focus{border-color:var(--navy-text);box-shadow:inset 0 0 0 1px var(--navy-text)} .alm-nl-btn{background:var(--navy-d);color:#fff;border:0;font:700 13.5px/1 var(--sans);padding:0 20px;cursor:pointer;white-space:nowrap;letter-spacing:.02em} .alm-nl-btn:hover{background:var(--navy)} .alm-nl-fine{flex-basis:100%;font:400 11.5px/1.4 var(--sans);color:var(--muted);margin:6px 0 0} .alm-nl-fine-link{color:inherit;text-decoration:underline;text-underline-offset:2px} .alm-nl-fine-link:hover{color:var(--navy-d-text)} .alm-nl-after{flex-basis:100%;font:400 13px/1.45 var(--sans);color:var(--navy-d-text);margin:2px 0 0} /* honeypot — absolutely-positioned zero-size trap; screen readers see aria-hidden=true */ .alm-nl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} .alm-nl-visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} /* Inline placement inside article prose sits between paragraphs — keep it from breaking the reading rhythm on wide viewports. */ .prose .alm-nl{margin:26px -6px} /* Footer placement supersedes the legacy .news-band; keep the class for any template still referencing it but hide when the mu-plugin's .alm-nl runs. */ .alm-nl+.news-band,.news-band+.alm-nl{display:none} @media(max-width:640px){ .alm-nl-inner{gap:14px;padding:18px 20px 16px} .alm-nl-title{font-size:19px} .alm-nl-form{flex-basis:100%;max-width:none} .alm-nl-input{padding:12px 13px;font-size:16px} /* prevent iOS zoom */ .alm-nl-btn{padding:0 16px} } /* ============================================================ v1.6.0 (2026-08-09, ADR-0013) — first sanctioned JS UI. v1.6.1 (2026-08-09) — permission-first subscribe, modal source attribution. Bell = push subscribe. Install = PWA install prompt. Exit-intent modal wraps a clone of the footer newsletter form. All targets stay in the theme's navy/gold/paper palette; no custom fonts, no third-party icons. ============================================================ */ /* Corner action rail — fixed, bottom-right, always over content */ .alm-actions{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none} .alm-actions>*{pointer-events:auto} .alm-bell,.alm-install{ display:inline-flex;align-items:center;gap:8px; padding:10px 14px;border:0;border-radius:999px; font:600 13px/1 var(--sans);cursor:pointer; box-shadow:0 6px 18px rgba(31,58,110,.22); transition:background .15s ease,color .15s ease} .alm-bell{background:var(--navy);color:#fff} .alm-bell:hover{background:var(--navy-d)} .alm-bell[data-state="subscribed"]{background:var(--gold);color:var(--navy-d)} .alm-bell[data-state="subscribed"]:hover{background:#dba000} .alm-bell[data-state="busy"]{opacity:.7;cursor:progress} .alm-bell svg{display:block} .alm-install{background:var(--field);color:var(--navy-d-text);border:1px solid var(--rule-d)} .alm-install:hover{background:var(--paper-2)} .alm-install svg{display:block} @media(max-width:640px){ .alm-actions{right:12px;bottom:12px} .alm-bell-txt{display:none} .alm-bell{padding:12px} } /* Exit-intent modal — desktop only (site.js arms only for pointer:fine) */ body.alm-modal-open{overflow:hidden} .alm-modal-overlay{ position:fixed;inset:0;z-index:100; background:rgba(20,25,40,.55); display:flex;align-items:center;justify-content:center; padding:20px} .alm-modal{ position:relative;background:var(--paper);color:var(--ink); max-width:520px;width:100%; border:1px solid var(--rule-d);border-top:4px solid var(--gold); padding:26px 28px 22px; box-shadow:0 24px 60px rgba(0,0,0,.32); font-family:var(--sans)} .alm-modal-close{ position:absolute;top:6px;right:6px; width:36px;height:36px;line-height:1; border:0;background:transparent;color:var(--muted); font-size:26px;cursor:pointer} .alm-modal-close:hover{color:var(--navy-d-text)} .alm-modal-title{font-family:var(--serif);font-size:24px;line-height:1.15;color:var(--navy-d-text);margin:0 0 6px} .alm-modal-sub{font-size:14px;color:var(--muted);margin:0 0 14px} /* The cloned newsletter card sits inside the modal — flatten the paper card background so it doesn't nest a second panel. */ .alm-modal .alm-nl{margin:0;background:transparent} .alm-modal .alm-nl-inner{padding:0;gap:12px} .alm-modal .alm-nl-head{display:none} .alm-modal .alm-nl-form{flex-basis:100%;max-width:none} /* ============================================================ v1.6.2 (2026-08-09, ADR-0014) — reader accounts (Phase 1). /registro + /acceso pages, plus the topbar + footer entry points ("Crear cuenta / Acceder" vs "Hola, X / Salir"). ZERO JS: server-rendered forms, no autoplay states, no client validation beyond the browser's native constraints. ============================================================ */ /* Topbar entry links — sit alongside "Suscríbete" in .top .wrap. Neutral until hover (topbar is muted); brand navy on hover so it reads as an action without shouting on a stark hairline strip. */ .top .acc{color:var(--muted);text-decoration:none;margin-right:12px} .top .acc:hover{color:var(--navy-text)} .top .acc-reg,.top .acc-me{font-weight:600} .top .acc-out{color:var(--gold-ink)} .top .acc-out:hover{color:var(--gold)} /* Card wrapping the form on /registro and /acceso. Same paper panel + hairline discipline as .alm-nl so the two identity surfaces (boletín + cuenta) feel like one system. */ .alm-acc{max-width:520px;margin:24px auto 32px;background:var(--paper-2);border:1px solid var(--rule);border-radius:4px} .alm-acc-inner{display:flex;flex-direction:column;gap:14px;padding:22px 24px 20px} .alm-acc-head{display:flex;flex-direction:column;gap:4px} .alm-acc-kicker{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)} .alm-acc-title{font-family:var(--serif);font-size:26px;line-height:1.15;color:var(--navy-d-text);margin:0} .alm-acc-sub{font-size:14px;color:var(--muted);margin:0} .alm-acc-msg{margin:0;padding:10px 12px;border-radius:3px;font-size:14px} .alm-acc-msg.is-ok{background:var(--green-tint);color:var(--green-ink);border:1px solid var(--green-rule)} .alm-acc-msg.is-err{background:var(--red-tint);color:var(--red-ink);border:1px solid var(--red-rule)} .alm-acc-closed{margin:0;font-size:14px;color:var(--muted);padding:10px 12px;background:var(--paper);border:1px dashed var(--rule);border-radius:3px} .alm-acc-form{display:flex;flex-direction:column;gap:12px;margin:0} .alm-acc-row{display:flex;flex-direction:column;gap:4px} .alm-acc-lbl{font-size:13px;color:var(--ink);font-weight:600} .alm-acc-input{padding:10px 12px;font:16px/1.3 var(--sans);color:var(--ink);background:var(--field);border:1px solid var(--rule-d);border-radius:3px} .alm-acc-input:focus{outline:2px solid var(--navy-text);outline-offset:1px;border-color:var(--navy-text)} .alm-acc-hint{font-size:12px;color:var(--muted)} .alm-acc-check{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--ink);cursor:pointer} .alm-acc-check input{margin-top:3px} .alm-acc-btn{align-self:flex-start;padding:10px 18px;font:600 15px/1 var(--sans);color:#fff;background:var(--navy);border:0;border-radius:3px;cursor:pointer} .alm-acc-btn:hover{background:var(--navy-d)} .alm-acc-fine{margin:2px 0 0;font-size:12px;color:var(--muted)} .alm-acc-fine a{color:var(--navy-text)} .alm-acc-alt{margin:6px 0 0;font-size:14px;color:var(--ink);border-top:1px dashed var(--rule);padding-top:12px} .alm-acc-alt a{color:var(--navy-text);font-weight:600} .alm-acc-body{margin:20px auto 0;max-width:640px;color:var(--ink)} /* Honeypot: hard-hidden from real users. off-screen + zero-size so layout-analyzer bots that skip display:none still submit. */ .alm-acc-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden} /* Welcome banner on the article a fresh signup lands on. */ .alm-acc-welcome{margin:0 0 18px;padding:10px 14px;background:var(--green-tint);color:var(--green-ink);border:1px solid var(--green-rule);border-radius:3px;font-size:14px} @media(max-width:640px){ .alm-acc{margin:16px 12px 24px} .alm-acc-inner{padding:18px 18px 16px} .alm-acc-title{font-size:22px} .alm-acc-input{font-size:16px} /* iOS: keeps native keyboard non-zooming */ /* Compact the topbar entries on phone: keep "Crear cuenta" visible, hide "Acceder" (login is one click away from register). */ .top .acc-log{display:none} .top .acc-out{margin-left:8px} } /* ===== 2026-08-31 audit: compact mobile header (4 stacked bars -> 2 tight rows) ===== */ @media(max-width:700px){ .top .wrap>span:first-child{display:none} /* date/city: menu material, not header */ .top .wrap{height:30px;gap:10px;justify-content:flex-end;flex-wrap:nowrap;overflow:hidden} .mast .wrap{padding:10px 14px 8px;gap:10px} .indic .wrap,.indic{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .indic .wrap::-webkit-scrollbar{display:none} .indic a{white-space:nowrap;flex:0 0 auto} .brk .wrap{overflow-x:auto;white-space:nowrap;scrollbar-width:none;display:flex;gap:14px;align-items:center} .brk .wrap::-webkit-scrollbar{display:none} .brk a{flex:0 0 auto} } /* ===== homepage audit 2026-09-01 ===== */ .top .wrap{height:auto;min-height:32px} .top a{display:inline-flex;align-items:center;min-height:32px} .brk a{min-height:40px;align-items:center} .ad-house small{display:none} @media(max-width:520px){ .top a{min-height:36px} /* Últimas noticias: the second block as compact rows so the phone river ends sooner */ .grid + .ad + .grid .card{display:grid;grid-template-columns:104px 1fr;gap:0 12px;align-items:start} .grid + .ad + .grid .card .thumb{grid-row:1/span 4;margin:0;aspect-ratio:1/1;padding:0;height:auto} .grid + .ad + .grid .card .thumb img{width:100%;height:100%;object-fit:cover} .grid + .ad + .grid .card .dek{display:none} .grid + .ad + .grid .card h3{font-size:1rem;line-height:1.25;margin:2px 0 4px} } /* ===== social icons 2026-09-01 (utility bar) ===== */ .top .soc{display:inline-flex;align-items:center} .top .soc a{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin-left:12px;line-height:1} .top .soc svg{width:15px;height:15px;flex:none} .top .soc a:hover svg{color:var(--navy-text)} @media(max-width:1024px){.top .soc a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.top .soc a{margin-left:10px;padding:0 3px}} @media(max-width:520px){.top .soc{display:none}} /* theme toggle 2026-09-01 — sits with the search in the masthead's third cell; icon shows the theme you switch TO */ .mast-tools{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px;width:100%;max-width:296px} .mast-tools form.search{grid-column:auto;justify-self:auto;flex:1 1 auto;min-width:0} .theme-toggle{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--rule-d);background:var(--field);color:var(--navy-d-text);cursor:pointer;transition:border-color .2s ease,background .2s ease} .theme-toggle:hover{border-color:var(--navy-text);background:var(--paper-2)} .theme-toggle svg{width:18px;height:18px;display:block} .theme-toggle .icon-sun{display:none} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) .theme-toggle .icon-sun{display:block} html:not([data-theme="light"]) .theme-toggle .icon-moon{display:none} } html[data-theme="dark"] .theme-toggle .icon-sun{display:block} html[data-theme="dark"] .theme-toggle .icon-moon{display:none} @media(max-width:860px){.mast-tools{max-width:none;width:auto}} @media(prefers-reduced-motion:reduce){.theme-toggle{transition:none}} /* wpDiscuz comments (plugin CSS loads after ours, hard-coded light palette) — both themes */ #wpdcom .wpd-rating-title{color:var(--muted)!important} #wpdcom .ql-toolbar button.ql-sourcecode,#wpdcom .ql-toolbar button.ql-spoiler{color:var(--ink-2)!important} /* wpDiscuz — dark theme overrides */ @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) #wpdcom .wpd-thread-info, html:not([data-theme="light"]) #wpdcom .wpd-sbs-title, html:not([data-theme="light"]) #wpdcom .wpd-rating-title, html:not([data-theme="light"]) #wpdcom .wpd-comment-date, html:not([data-theme="light"]) #wpdcom .wpd-thread-filter, html:not([data-theme="light"]) #wpdcom .wpd-sbs-toggle, html:not([data-theme="light"]) #wpdcom .wpd-comment-status, html:not([data-theme="light"]) #wpdcom .wpd-user-info, html:not([data-theme="light"]) #wpdcom .ql-toolbar button, html:not([data-theme="light"]) #wpdcom .wpd-editor-char-counter{color:var(--muted)!important} html:not([data-theme="light"]) #wpdcom, html:not([data-theme="light"]) #wpdcom label, html:not([data-theme="light"]) #wpdcom .wpd-comment-text, html:not([data-theme="light"]) #wpdcom .wpd-comment-author, html:not([data-theme="light"]) #wpdcom .wpd-comment-author a, html:not([data-theme="light"]) #wpdcom .ql-editor, html:not([data-theme="light"]) #wpdcom .wpd-thread-head, html:not([data-theme="light"]) #wpdcom .wpd-form-foot, html:not([data-theme="light"]) #wpdcom .wpd-field, html:not([data-theme="light"]) #wpdcom .wpd-secondary-forms-social-content{color:var(--ink)!important} html:not([data-theme="light"]) #wpdcom a:not(.wpd-prim-button):not(.wpd-comment-author):not(.wpd-cta-button){color:var(--navy-text)!important} html:not([data-theme="light"]) #wpdcom .ql-container.ql-snow, html:not([data-theme="light"]) #wpdcom .ql-editor, html:not([data-theme="light"]) #wpdcom .wpd-editor-wraper, html:not([data-theme="light"]) #wpdcom textarea, html:not([data-theme="light"]) #wpdcom input[type=text], html:not([data-theme="light"]) #wpdcom input[type=email], html:not([data-theme="light"]) #wpdcom input[type=url], html:not([data-theme="light"]) #wpdcom .wpd-field{background:var(--field)!important;border-color:var(--rule-d)!important} html:not([data-theme="light"]) #wpdcom .ql-toolbar.ql-snow{background:var(--paper-2)!important;border-color:var(--rule-d)!important} html:not([data-theme="light"]) #wpdcom .ql-toolbar .ql-stroke{stroke:var(--muted)!important} html:not([data-theme="light"]) #wpdcom .ql-toolbar .ql-fill{fill:var(--muted)!important} html:not([data-theme="light"]) #wpdcom .ql-editor.ql-blank::before{color:var(--muted)!important} html:not([data-theme="light"]) #wpdcom .wpd-comment-wrap, html:not([data-theme="light"]) #wpdcom .wpd-thread-head, html:not([data-theme="light"]) #wpdcom .wpd-thread-list, html:not([data-theme="light"]) #wpdcom .wpd-form-wrap, html:not([data-theme="light"]) #wpdcom .wpd-comment-footer, html:not([data-theme="light"]) #wpdcom .wpd-thread-filter, html:not([data-theme="light"]) #wpdcom .wpdiscuz-item-count, html:not([data-theme="light"]) #wpdcom .wpd-load-more-submit, html:not([data-theme="light"]) #wpdcom .wpd-sbs-wrap{border-color:var(--rule)!important} html:not([data-theme="light"]) #wpdcom .wpd-reply .wpd-comment-right, html:not([data-theme="light"]) #wpdcom .wpd-comment-right.wpd-sticky{background:var(--paper-2)!important} html:not([data-theme="light"]) #wpdcom .wpd-prim-button{background:var(--navy)!important;color:#fff!important} } html[data-theme="dark"] #wpdcom .wpd-thread-info, html[data-theme="dark"] #wpdcom .wpd-sbs-title, html[data-theme="dark"] #wpdcom .wpd-rating-title, html[data-theme="dark"] #wpdcom .wpd-comment-date, html[data-theme="dark"] #wpdcom .wpd-thread-filter, html[data-theme="dark"] #wpdcom .wpd-sbs-toggle, html[data-theme="dark"] #wpdcom .wpd-comment-status, html[data-theme="dark"] #wpdcom .wpd-user-info, html[data-theme="dark"] #wpdcom .ql-toolbar button, html[data-theme="dark"] #wpdcom .wpd-editor-char-counter{color:var(--muted)!important} html[data-theme="dark"] #wpdcom, html[data-theme="dark"] #wpdcom label, html[data-theme="dark"] #wpdcom .wpd-comment-text, html[data-theme="dark"] #wpdcom .wpd-comment-author, html[data-theme="dark"] #wpdcom .wpd-comment-author a, html[data-theme="dark"] #wpdcom .ql-editor, html[data-theme="dark"] #wpdcom .wpd-thread-head, html[data-theme="dark"] #wpdcom .wpd-form-foot, html[data-theme="dark"] #wpdcom .wpd-field, html[data-theme="dark"] #wpdcom .wpd-secondary-forms-social-content{color:var(--ink)!important} html[data-theme="dark"] #wpdcom a:not(.wpd-prim-button):not(.wpd-comment-author):not(.wpd-cta-button){color:var(--navy-text)!important} html[data-theme="dark"] #wpdcom .ql-container.ql-snow, html[data-theme="dark"] #wpdcom .ql-editor, html[data-theme="dark"] #wpdcom .wpd-editor-wraper, html[data-theme="dark"] #wpdcom textarea, html[data-theme="dark"] #wpdcom input[type=text], html[data-theme="dark"] #wpdcom input[type=email], html[data-theme="dark"] #wpdcom input[type=url], html[data-theme="dark"] #wpdcom .wpd-field{background:var(--field)!important;border-color:var(--rule-d)!important} html[data-theme="dark"] #wpdcom .ql-toolbar.ql-snow{background:var(--paper-2)!important;border-color:var(--rule-d)!important} html[data-theme="dark"] #wpdcom .ql-toolbar .ql-stroke{stroke:var(--muted)!important} html[data-theme="dark"] #wpdcom .ql-toolbar .ql-fill{fill:var(--muted)!important} html[data-theme="dark"] #wpdcom .ql-editor.ql-blank::before{color:var(--muted)!important} html[data-theme="dark"] #wpdcom .wpd-comment-wrap, html[data-theme="dark"] #wpdcom .wpd-thread-head, html[data-theme="dark"] #wpdcom .wpd-thread-list, html[data-theme="dark"] #wpdcom .wpd-form-wrap, html[data-theme="dark"] #wpdcom .wpd-comment-footer, html[data-theme="dark"] #wpdcom .wpd-thread-filter, html[data-theme="dark"] #wpdcom .wpdiscuz-item-count, html[data-theme="dark"] #wpdcom .wpd-load-more-submit, html[data-theme="dark"] #wpdcom .wpd-sbs-wrap{border-color:var(--rule)!important} html[data-theme="dark"] #wpdcom .wpd-reply .wpd-comment-right, html[data-theme="dark"] #wpdcom .wpd-comment-right.wpd-sticky{background:var(--paper-2)!important} html[data-theme="dark"] #wpdcom .wpd-prim-button{background:var(--navy)!important;color:#fff!important} #wpd-post-rating .wpd-rating-wrap .wpd-rating-title,.wpd-rating .wpd-rating-wrap .wpd-rating-title{color:var(--muted)!important} #wpdcom .wpdiscuz-sort-button,#wpdcom .wpd-comment-date,#wpdcom .wpd-reply-button,#wpdcom .wpd-reply-button span,#wpdcom .wpd-comment-footer .wpd-cta-button,#wpdcom .wpd-comment-footer span{color:var(--muted)!important} /* indicators strip 2026-09-01: non-link item (Bitcoin) matches the links; "higher is better" chips (remesas, bitcoin) */ .indic .ind-x{display:flex;align-items:baseline;gap:6px;font:700 12.5px/1 var(--sans);color:var(--navy-d-text);white-space:nowrap;font-variant-numeric:tabular-nums} .indic .ind-d.pos{color:var(--green)} .indic .ind-d.neg{color:var(--red)} /* strip fit 2026-09-01: 8 indicators in the 1220px wrap (measured 1366px at gap 22 / 12.5px -> ~1160px at gap 14 / 12px); under 1200px the strip scrolls by design — fade the right edge so a cut item reads as scrollable, not broken */ .indic .wrap{gap:12px;max-width:1300px} /* full-bleed strip: 80px wider than the page columns buys ~70px of headroom for 8 items */ .indic a,.indic .ind-x{font-size:12px} @media(max-width:1240px){.indic .wrap{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);padding-right:36px}}