@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/oswald-600.5f49329007.woff2') format('woff2');
}
@font-face {
font-family: 'Oswald';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/oswald-600.5f49329007.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/barlow-400.81419bf5ab.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/assets/fonts/barlow-600.a1e2a2d7d4.woff2') format('woff2');
}
@font-face {
font-family: 'Barlow';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/assets/fonts/barlow-700.15481e4eab.woff2') format('woff2');
}
:root {
--bg: #f3f6f1;
--bg-raised: #ffffff;
--bg-sunken: #e6ece2;
--text: #13211a;
--text-soft: #43554a;
--text-muted: #78857c;
--line: #d7e0d3;
--accent: #0b6e3b;
--accent-strong: #084f2a;
--accent-tint: #dcebe0;
--verde: #0b6e3b;
--verde-tint: #dcebe0;
--gold: #97730a;
--gold-tint: #fbeeb6;
--yellow: #f5c518;
--down: #b23a2e;
--shadow: 0 1px 0 rgba(19,33,26,0.05);
--font-display: 'Oswald', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-mono: 'Barlow', 'Segoe UI', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0c130e;
--bg-raised: #131c15;
--bg-sunken: #080d09;
--text: #ebf2ea;
--text-soft: #b7c4b8;
--text-muted: #7e8b7f;
--line: #29352b;
--accent: #35b368;
--accent-strong: #55c982;
--accent-tint: #123020;
--verde: #35b368;
--verde-tint: #12251a;
--gold: #e4c24e;
--gold-tint: #33290c;
--yellow: #f5c518;
--down: #e27a6e;
--shadow: 0 1px 0 rgba(0,0,0,0.35);
}
}
:root[data-theme="dark"] {
--bg: #0c130e;
--bg-raised: #131c15;
--bg-sunken: #080d09;
--text: #ebf2ea;
--text-soft: #b7c4b8;
--text-muted: #7e8b7f;
--line: #29352b;
--accent: #35b368;
--accent-strong: #55c982;
--accent-tint: #123020;
--verde: #35b368;
--verde-tint: #12251a;
--gold: #e4c24e;
--gold-tint: #33290c;
--yellow: #f5c518;
--down: #e27a6e;
--shadow: 0 1px 0 rgba(0,0,0,0.35);
}
:root[data-theme="light"] {
--bg: #f3f6f1;
--bg-raised: #ffffff;
--bg-sunken: #e6ece2;
--text: #13211a;
--text-soft: #43554a;
--text-muted: #78857c;
--line: #d7e0d3;
--accent: #0b6e3b;
--accent-strong: #084f2a;
--accent-tint: #dcebe0;
--verde: #0b6e3b;
--verde-tint: #dcebe0;
--gold: #97730a;
--gold-tint: #fbeeb6;
--yellow: #f5c518;
--down: #b23a2e;
--shadow: 0 1px 0 rgba(19,33,26,0.05);
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: 0.005em; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
/* ---------- franja de pico y placa ---------- */
.pico-ribbon {
background: #0f1712;
color: #e9f0e8;
}
.pico-inner {
display: flex;
align-items: center;
gap: 8px 20px;
padding: 8px 0;
flex-wrap: wrap;
}
.pico-title {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--yellow);
white-space: nowrap;
}
.pico-cities { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; }
.pico-city { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; white-space: nowrap; }
.pico-city b { color: #fff; font-weight: 700; }
.pico-digits {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
color: #16220f;
background: var(--yellow);
padding: 1px 8px;
border-radius: 3px;
letter-spacing: 0.03em;
}
.pico-digits.libre { background: rgba(255,255,255,0.14); color: #cfe0cd; }
.pico-time { color: rgba(233,240,232,0.6); font-size: 11.5px; }
/* ---------- utility bar ---------- */
.utility-bar {
background: var(--accent);
color: #fff;
}
.utility-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 9px 0;
flex-wrap: wrap;
}
.utility-date {
font-size: 13px;
color: rgba(255,255,255,0.82);
white-space: nowrap;
}
.ticker-label {
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
color: var(--yellow);
white-space: nowrap;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 7px;
}
/* Botón de la barra: reemplaza al viejo sello "EN VIVO", que invitaba
al clic y no llevaba a ninguna parte. Ahora muestra el dólar del día
y abre el convertidor. */
.dolar-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
color: #15200f;
background: var(--yellow);
padding: 4px 11px;
border-radius: 999px;
white-space: nowrap;
transition: filter 160ms ease, transform 160ms ease;
}
.dolar-cta:hover, .dolar-cta:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.dolar-cta .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #0b6e3b;
animation: pulse 1.8s ease-in-out infinite;
}
.dolar-cta b { font-variant-numeric: tabular-nums; }
.dolar-cta .flecha { font-weight: 700; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
/* ---------- cinta bursátil deslizante ---------- */
.ticker-viewport {
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.16);
position: relative;
}
.ticker-viewport::before,
.ticker-viewport::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 46px;
z-index: 2;
pointer-events: none;
}
.ticker-viewport::before { left: 0; background: linear-gradient(90deg, var(--accent), rgba(11,110,59,0)); }
.ticker-viewport::after { right: 0; background: linear-gradient(270deg, var(--accent), rgba(11,110,59,0)); }
.ticker-track {
display: flex;
width: max-content;
animation: marquee 120s linear infinite;
font-family: var(--font-mono);
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.ticker-viewport:hover .ticker-track,
.ticker-viewport:focus-within .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.ticker-item {
display: flex;
align-items: baseline;
gap: 7px;
white-space: nowrap;
padding: 9px 18px;
border-right: 1px solid rgba(255,255,255,0.14);
}
.ticker-item[title] { cursor: help; }
.ticker-item .name { color: rgba(255,255,255,0.74); }
.ticker-item .val { color: #fff; font-weight: 700; }
.ticker-item.live .name::before {
content: ''; display: inline-block;
width: 5px; height: 5px; border-radius: 50%;
background: #7df0a6; margin-right: 6px; vertical-align: middle;
animation: pulse 1.8s ease-in-out infinite;
}
.ticker-item .delta.up { color: #b9f5cf; font-weight: 600; }
.ticker-item .delta.down { color: #ffd0c6; font-weight: 600; }
.ticker-item .delta.flat { color: rgba(255,255,255,0.6); }
@media (prefers-reduced-motion: reduce) {
.ticker-track { animation: none; width: auto; overflow-x: auto; scrollbar-width: none; }
.ticker-track::-webkit-scrollbar { display: none; }
}
/* ---------- espacios publicitarios ---------- */
.ad-slot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--bg-sunken);
border: 1px dashed var(--line);
border-radius: 6px;
padding: 16px;
text-align: center;
}
.ad-label {
font-family: var(--font-body);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.ad-size { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.04em; }
.ad-hint { font-size: 11px; color: var(--text-muted); }
.ad-billboard { min-height: 132px; }
.ad-leaderboard { min-height: 106px; }
.ad-rectangle { min-height: 258px; }
.ad-wrap { padding: 26px 0; }
.ad-wrap.tight { padding: 0 0 26px; }
/* ---------- anuncios vendidos ---------- */
.ad-unit { position: relative; border-radius: 8px; overflow: hidden; }
.ad-unit .ad-tag {
position: absolute;
top: 10px; right: 12px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
z-index: 3;
}
.ad-body { display: flex; align-items: center; gap: 26px; padding: 26px 28px; flex-wrap: wrap; position: relative; z-index: 2; }
/* Foto del anunciante. Capa absoluta: se funde con el degradado del aviso
mediante mask-image y no participa del layout, así el alto no cambia. */
.ad-media {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 46%;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.ad-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.3) 28%, rgba(0,0,0,0.82) 66%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.3) 28%, rgba(0,0,0,0.82) 66%, #000 100%);
}
.ad-brand { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.ad-headline { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.01em; margin: 6px 0 8px; }
.ad-text { font-size: 14px; max-width: 46ch; }
.ad-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.ad-cta {
display: inline-block;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
border: 2px solid transparent;
}
/* Tienda Sin Estrés — café */
.ad-cafe { background: linear-gradient(120deg, #2a1a10 0%, #3d2617 55%, #5a3a20 100%); color: #f6ece0; }
.ad-cafe .ad-tag { background: rgba(246,236,224,0.18); color: #f6ece0; }
.ad-cafe .ad-brand { color: #f0b96a; }
.ad-cafe .ad-headline { color: #fff8ef; }
.ad-cafe .ad-text { color: rgba(246,236,224,0.82); }
.ad-cafe .ad-cta.primary { background: #f0b96a; color: #2a1a10; }
.ad-cafe .ad-cta.primary:hover { background: #ffd196; }
.ad-cafe .ad-cta.ghost { background: transparent; color: #f6ece0; border-color: rgba(246,236,224,0.45); font-family: var(--font-display); }
.ad-cafe .ad-cta.ghost:hover { border-color: #f0b96a; color: #f0b96a; }
.ad-copy { flex: 1 1 320px; min-width: 0; }
.ad-coupon {
display: flex;
align-items: center;
gap: 16px;
background: #fffaf3;
color: #2a1a10;
border-radius: 8px;
padding: 14px 16px;
flex: 0 1 330px;
}
.ad-coupon[hidden] { display: none; }
.ad-coupon img { width: 108px; height: 108px; border-radius: 4px; flex-shrink: 0; }
.coupon-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #7a4a1e; }
.coupon-code {
font-family: var(--font-display);
font-size: 25px;
font-weight: 700;
letter-spacing: 0.06em;
margin: 3px 0;
font-variant-numeric: tabular-nums;
}
.coupon-valid { font-size: 11.5px; color: #6b5341; line-height: 1.45; }
/* Pirotecnia El Vaquero — nocturno */
.ad-piro {
background:
radial-gradient(circle at 16% 26%, rgba(255,214,120,0.5) 0 2px, transparent 3px),
radial-gradient(circle at 24% 16%, rgba(255,150,120,0.45) 0 2px, transparent 3px),
radial-gradient(circle at 82% 30%, rgba(140,205,255,0.45) 0 2px, transparent 3px),
radial-gradient(circle at 90% 62%, rgba(255,214,120,0.4) 0 2px, transparent 3px),
radial-gradient(circle at 70% 18%, rgba(255,255,255,0.35) 0 1.5px, transparent 3px),
radial-gradient(circle at 40% 78%, rgba(255,180,110,0.3) 0 2px, transparent 3px),
radial-gradient(ellipse at 20% 20%, rgba(255,170,80,0.22), transparent 55%),
radial-gradient(ellipse at 85% 45%, rgba(90,170,255,0.20), transparent 55%),
linear-gradient(120deg, #0a1024 0%, #131c3a 60%, #1d1436 100%);
color: #eef2ff;
text-decoration: none;
display: block;
}
.ad-piro .ad-tag { background: rgba(238,242,255,0.16); color: #eef2ff; }
.ad-piro .ad-body { padding: 22px 28px; gap: 20px; }
.ad-piro .ad-brand { color: #ffd166; }
.ad-piro .ad-headline { color: #fff; font-size: clamp(21px, 2.6vw, 29px); }
.ad-piro .ad-text { color: rgba(238,242,255,0.8); }
.ad-piro .ad-cta { background: #ffd166; color: #16112b; margin-top: 4px; }
.ad-piro:hover .ad-cta { background: #ffe1a0; }
.ad-piro .ad-copy { flex: 1 1 340px; }
.ad-piro-side { display: flex; flex-direction: column; gap: 4px; text-align: right; margin-left: auto; }
.ad-piro-side .site { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #ffd166; letter-spacing: 0.03em; }
.ad-piro-side .note { font-size: 11.5px; color: rgba(238,242,255,0.6); }
@media (max-width: 640px) {
.ad-body { padding: 20px; gap: 18px; }
.ad-coupon { flex-basis: 100%; }
.ad-piro-side { text-align: left; margin-left: 0; }
/* En móvil el texto ocupa todo el ancho: la foto baja de intensidad
para no competir con la lectura. */
.ad-media { width: 62%; opacity: 0.5; }
}
/* ---------- masthead ---------- */
.masthead { padding: 15px 0 12px; text-align: center; border-bottom: 4px solid var(--accent); position: relative; }
.masthead::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 4px;
background: repeating-linear-gradient(90deg, var(--accent) 0 40px, var(--yellow) 40px 80px);
}
.masthead .kicker {
display: inline-block;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-strong);
background: var(--yellow);
padding: 3px 10px;
border-radius: 3px;
margin: 0 0 8px;
}
.masthead h1, .masthead .marca {
font-family: var(--font-display);
font-size: clamp(28px, 4.2vw, 48px);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.01em;
line-height: 0.94;
color: var(--accent);
margin: 0;
}
.masthead h1 .leo, .masthead .marca .leo { color: var(--gold); }
.masthead .tagline {
margin-top: 6px;
font-size: 13px;
color: var(--text-soft);
max-width: 68ch;
margin-left: auto;
margin-right: auto;
}
/* ---------- nav ---------- */
nav.primary {
border-bottom: 1px solid var(--line);
background: var(--bg-raised);
position: sticky;
top: 0;
z-index: 20;
}
.nav-inner {
display: flex;
gap: 2px;
flex-wrap: wrap;
/* Debe quedar visible: con overflow, el navegador recorta el submenú
desplegable de Secciones. Antes hacía falta scroll porque el menú
tenía catorce enlaces; ahora son seis destinos y caben. */
overflow: visible;
}
.nav-inner a {
flex-shrink: 0;
text-decoration: none;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--text-soft);
padding: 13px 14px;
border-bottom: 3px solid transparent;
white-space: nowrap;
}
.nav-inner a:hover, .nav-inner a:focus-visible { color: var(--accent); border-bottom-color: var(--yellow); }
.nav-inner a.current { color: var(--accent); border-bottom-color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---------- submenú de Secciones ---------- */
.nav-grupo { position: relative; flex-shrink: 0; }
.nav-sub-toggle {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--text-soft);
background: none;
border: none;
border-bottom: 3px solid transparent;
padding: 13px 14px;
cursor: pointer;
white-space: nowrap;
}
.nav-sub-toggle:hover, .nav-sub-toggle:focus-visible { color: var(--accent); border-bottom-color: var(--yellow); }
.nav-caret {
width: 0; height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 200ms ease;
}
.nav-grupo.abierto .nav-sub-toggle { color: var(--accent); border-bottom-color: var(--accent); }
.nav-grupo.abierto .nav-caret { transform: rotate(180deg); }
.nav-sub {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 232px;
flex-direction: column;
background: var(--bg-raised);
border: 1px solid var(--line);
border-top: 3px solid var(--accent);
border-radius: 0 0 8px 8px;
box-shadow: 0 14px 30px rgba(19,33,26,0.16);
padding: 6px;
z-index: 30;
}
.nav-grupo.abierto .nav-sub { display: flex; }
.nav-inner .nav-sub a {
font-size: 14px;
padding: 9px 12px;
border-bottom: 0;
border-radius: 6px;
white-space: nowrap;
}
.nav-inner .nav-sub a:hover, .nav-inner .nav-sub a:focus-visible {
background: var(--accent-tint);
color: var(--accent);
border-bottom-color: transparent;
}
.nav-toggle {
display: none;
align-items: center;
gap: 10px;
width: 100%;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text);
background: none;
border: none;
padding: 13px 0;
cursor: pointer;
}
.nav-burger { position: relative; width: 20px; height: 2px; background: var(--accent); flex-shrink: 0; transition: background 0.2s; }
.nav-burger::before, .nav-burger::after {
content: '';
position: absolute;
left: 0;
width: 20px;
height: 2px;
background: var(--accent);
transition: transform 0.25s ease, top 0.25s ease;
}
.nav-burger::before { top: -6px; }
.nav-burger::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-burger::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-burger::after { top: 0; transform: rotate(-45deg); }
.nav-toggle .nav-toggle-hint { margin-left: auto; font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted); }
/* ---------- origin chip ---------- */
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-body);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
white-space: nowrap;
}
.chip.propio { background: var(--accent-tint); color: var(--accent-strong); }
.chip.recirc { background: var(--gold-tint); color: var(--gold); }
.chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tag {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--accent);
}
/* ---------- hero ---------- */
.hero-section { padding: 40px 0 20px; }
.hero-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 44px;
}
.hero-art {
aspect-ratio: 12 / 7;
border-radius: 5px;
background:
linear-gradient(125deg, var(--accent) 0%, var(--accent) 46%, var(--yellow) 46%, var(--yellow) 54%, var(--accent-strong) 54%, var(--accent-strong) 100%);
position: relative;
margin-bottom: 10px;
overflow: hidden;
}
.hero-art::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(0,0,0,0.16) 0 7px, transparent 8px),
radial-gradient(circle at 72% 22%, rgba(0,0,0,0.14) 0 9px, transparent 10px),
radial-gradient(circle at 85% 68%, rgba(0,0,0,0.14) 0 6px, transparent 7px),
radial-gradient(circle at 38% 78%, rgba(0,0,0,0.12) 0 8px, transparent 9px),
radial-gradient(circle at 55% 50%, rgba(0,0,0,0.10) 0 5px, transparent 6px);
opacity: 0.7;
}
.hero-art::after {
content: 'EL LEOPARDO ECONÓMICO';
position: absolute;
left: 18px; bottom: 14px;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.9);
}
.hero-figure { margin: 0; }
.hero-art-img {
width: 100%;
height: auto;
aspect-ratio: 12 / 7;
object-fit: cover;
border-radius: 5px;
background: var(--bg-sunken);
margin-bottom: 9px;
display: block;
}
.hero-art-credit {
font-size: 11.5px;
line-height: 1.5;
color: var(--text-soft);
}
.hero-art-credit span { color: var(--text-muted); font-style: italic; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hero-headline {
font-size: clamp(28px, 3.8vw, 44px);
line-height: 1.05;
font-weight: 600;
margin-bottom: 14px;
letter-spacing: 0.003em;
}
.hero-headline a { text-decoration: none; }
.hero-headline a:hover { color: var(--accent); }
.hero-dek { font-size: 16.5px; color: var(--text-soft); max-width: 62ch; margin-bottom: 14px; }
.hero-dek a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.hero-dek strong { color: var(--text); font-weight: 700; }
.byline { font-size: 12.5px; color: var(--text-muted); }
.byline b { color: var(--text-soft); font-weight: 600; }
.secondary-list { display: flex; flex-direction: column; gap: 20px; }
.secondary-item { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.secondary-item:last-child { border-bottom: none; }
/* `wrap` porque el chip lo escribe la redacción y puede ser largo: "Fuente:
Cámara de Comercio de Bucaramanga" mide 281 px y no se encoge (lleva
white-space: nowrap). En una fila que no envuelve, empujaba al titular
fuera de la pantalla y hacía que la PORTADA ENTERA se deslizara de lado en
el celular: 12 px medidos a 375 px de ancho. Envolver no cambia nada
cuando sí caben. */
.secondary-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.secondary-item h3 { font-size: 20px; line-height: 1.15; font-weight: 600; }
.secondary-item h3 a { text-decoration: none; }
.secondary-item h3 a:hover { color: var(--accent); }
/* ---------- section grid ---------- */
.section-block { padding: 44px 0; border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
/* h1 y h2 comparten estilo: en /indicadores/ y /multimedia/ el titulo de la
seccion es el H1 de la pagina, porque el del cabezote solo existe en la
portada. Se ven igual, pero la jerarquia queda correcta. */
.section-head h1, .section-head h2 { font-size: 28px; text-transform: uppercase; letter-spacing: 0.01em; position: relative; padding-left: 16px; }
.section-head h1::before, .section-head h2::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; background: var(--yellow); border-radius: 2px; }
.section-head .sub { font-size: 13px; color: var(--text-muted); }
.core-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.core-card {
background: var(--bg-raised);
border: 1px solid var(--line);
border-top: 3px solid var(--accent);
border-radius: 6px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.core-card h3 { font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; }
.core-card .desc { font-size: 13px; color: var(--text-soft); }
.core-card .headlines { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.core-card .headlines a {
font-size: 13px;
text-decoration: none;
color: var(--text);
display: block;
}
.core-card .headlines a:hover { color: var(--accent); }
/* Mismo caso que .secondary-eyebrow: el chip no se encoge y aquí llegó a
medir 281 px en una fila de 297, dejando el titular en 58 px y con su caja
12 px por fuera de la pantalla. */
.core-card .headlines .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.core-card .headlines .row .chip { margin-top: 2px; }
/* Último cortafuegos, para un rótulo de fuente absurdamente largo: el chip no
puede pasar del ancho de su fila. Con los de hoy no se nota —caben en su
propia línea—, pero deja de ser posible que un texto del CMS deslice la
página entera. */
.secondary-eyebrow .chip,
.core-card .headlines .row .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.comp-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.comp-row a {
text-decoration: none;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--text-soft);
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: 3px;
padding: 8px 16px;
}
.comp-row a:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
/* ---------- opinion spotlight ---------- */
.opinion-block {
background: var(--accent);
color: #fff;
padding: 50px 0;
position: relative;
overflow: hidden;
}
.opinion-block::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 5px;
background: repeating-linear-gradient(90deg, var(--yellow) 0 40px, transparent 40px 80px);
}
.opinion-inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; }
.opinion-inner .tag { display: block; margin-bottom: 16px; color: var(--yellow); }
.opinion-quote {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(24px, 3.2vw, 34px);
line-height: 1.18;
color: #fff;
}
.opinion-quote::before { content: '\201C'; color: var(--yellow); }
.opinion-quote::after { content: '\201D'; color: var(--yellow); }
.opinion-attr { margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,0.85); }
.opinion-attr b { color: #fff; }
.opinion-link { display: inline-block; margin-top: 16px; font-family: var(--font-display); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
/* ---------- entrevistas ---------- */
.interview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.interview-card { border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: 5px; padding: 20px; background: var(--bg-raised); }
.interview-org { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.interview-card p { font-size: 17px; font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
/* ---------- evergreen ---------- */
.evergreen-block {
background: var(--verde-tint);
border: 1px solid var(--line);
border-radius: 8px;
padding: 28px 30px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 30px;
align-items: center;
}
.evergreen-block h2 { font-size: 24px; text-transform: uppercase; letter-spacing: 0.01em; color: var(--text); margin-bottom: 8px; }
.evergreen-block .sub { font-size: 13px; color: var(--text-soft); }
.evergreen-list { display: flex; flex-direction: column; gap: 10px; }
.evergreen-list a {
text-decoration: none;
font-size: 14px;
font-weight: 600;
color: var(--text);
background: var(--bg-raised);
border: 1px solid var(--line);
border-radius: 5px;
padding: 11px 14px;
display: flex;
justify-content: space-between;
gap: 10px;
}
.evergreen-list a:hover { border-color: var(--accent); color: var(--accent); }
.evergreen-list a .arrow { color: var(--text-muted); }
/* ---------- tarjetas flip (tasas) ---------- */
.flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.flip-card { perspective: 1400px; min-height: 322px; }
.flip-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 322px;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background: var(--bg-raised);
border: 1px solid var(--line);
border-radius: 8px;
padding: 22px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.flip-front { border-top: 3px solid var(--accent); }
.flip-card.best .flip-front { border-top-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.flip-back {
transform: rotateY(180deg);
border-top: 3px solid var(--yellow);
visibility: hidden;
transition: visibility 0s linear 0.3s;
}
.flip-card.is-flipped .flip-back { visibility: visible; transition-delay: 0.3s; }
.flip-card.is-flipped .flip-front { visibility: hidden; transition: visibility 0s linear 0.3s; }
.flip-term { font-family: var(--font-display); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.flip-rate {
font-family: var(--font-display);
font-size: 42px;
font-weight: 700;
color: var(--accent);
line-height: 1.02;
margin: 8px 0 2px;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 7px;
flex-wrap: wrap;
}
.flip-rate i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.flip-entity { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.flip-note { font-size: 12.5px; color: var(--text-soft); }
.flip-badge {
align-self: flex-start;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--accent-tint);
color: var(--accent-strong);
padding: 3px 8px;
border-radius: 3px;
margin-bottom: 10px;
}
.flip-back-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); margin-bottom: 10px; }
.flip-list {
list-style: none;
margin: 0;
padding: 0 8px 0 0;
display: flex;
flex-direction: column;
gap: 7px;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--accent) transparent;
overscroll-behavior: contain;
}
.flip-list::-webkit-scrollbar { width: 6px; }
.flip-list::-webkit-scrollbar-track { background: transparent; }
.flip-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.flip-list::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.flip-source {
font-size: 10.5px;
line-height: 1.45;
color: var(--text-muted);
border-top: 1px solid var(--line);
margin-top: 10px;
padding-top: 8px;
}
.flip-ast { color: var(--accent); font-weight: 700; }
/* ---------- tablas dentro de una noticia ---------- */
/* La tabla scrollea dentro de su caja para que la página nunca
se desborde de lado en el celular. */
.tabla-wrap {
overflow-x: auto;
margin: 22px 0;
border: 1px solid var(--line);
border-radius: 6px;
-webkit-overflow-scrolling: touch;
}
/* Una tabla del cuerpo lleva min-width: 420px, asi que en un telefono no
cabe. Si va dentro de .tabla-wrap, ese envoltorio le da su propio scroll.
Pero el envoltorio es HTML crudo dentro del markdown y se pierde con
facilidad al reformatear la nota desde el CMS: paso dos veces, y sin el
la tabla empujaba la PAGINA ENTERA fuera del ancho de la pantalla.
Con esto la tabla se defiende sola y da igual si el envoltorio esta o no. */
@media (max-width: 720px) {
.noticia-cuerpo table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
.noticia-cuerpo table, .tabla-wrap table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
min-width: 420px;
}
.noticia-cuerpo th, .tabla-wrap th {
background: var(--bg-sunken);
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text);
text-align: left;
padding: 11px 14px;
border-bottom: 2px solid var(--line);
white-space: nowrap;
}
.noticia-cuerpo td, .tabla-wrap td {
padding: 10px 14px;
border-bottom: 1px solid var(--line);
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.noticia-cuerpo tr:last-child td, .tabla-wrap tr:last-child td { border-bottom: none; }
.noticia-cuerpo tbody tr:hover, .tabla-wrap tbody tr:hover { background: var(--bg-sunken); }
.noticia-cuerpo td:first-child, .tabla-wrap td:first-child { color: var(--text); font-weight: 600; }
/* ---------- pestañas de tasas ---------- */
.tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--line);
margin-bottom: 22px;
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
flex-shrink: 0;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-muted);
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
padding: 10px 16px;
cursor: pointer;
white-space: nowrap;
}
.tab-btn:hover { color: var(--accent); }
.tab-btn[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel[hidden] { display: none; }
.flip-list li {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 13px;
color: var(--text-soft);
border-bottom: 1px dashed var(--line);
padding-bottom: 6px;
}
.flip-list li:last-child { border-bottom: none; }
.flip-list li b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flip-list.plain li { display: block; }
.flip-btn {
margin-top: auto;
align-self: flex-start;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--accent);
background: none;
border: none;
border-bottom: 2px solid var(--yellow);
padding: 6px 0 3px;
cursor: pointer;
}
.flip-btn:hover { color: var(--accent-strong); }
.rate-disclaimer { margin-top: 18px; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
.flip-inner { transition: none; }
}
/* ---------- footer ---------- */
footer { border-top: 4px solid var(--accent); padding: 44px 0 30px; background: var(--bg-sunken); position: relative; }
footer::before {
content: '';
position: absolute;
top: -4px; left: 0; right: 0;
height: 4px;
background: repeating-linear-gradient(90deg, var(--accent) 0 40px, var(--yellow) 40px 80px);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 36px;
margin-bottom: 36px;
}
.author-block h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; margin-bottom: 8px; }
.author-block p { font-size: 13px; color: var(--text-soft); margin-bottom: 10px; line-height: 1.55; }
.author-cabeza { display: flex; gap: 14px; align-items: flex-start; }
/* El plugin de imágenes envuelve cada ![]()
en un . El ítem flex
pasó a ser ese , que no heredaba ni el ancho ni el flex-shrink
—seguían apuntando a la ![]()
—, así que se encogía a su mínimo y la foto,
limitada por el `max-width: 100%` del reset, se iba con él: el retrato
quedaba en 14 px, un punto. Se dimensiona el ENVOLTORIO y la foto lo
llena. El segundo selector cubre el caso sin . */
/* El ancho lo manda SIEMPRE el hijo directo de .author-cabeza, sea cual sea:
el enlace al perfil, el del plugin, o la ![]()
pelada. Tenerlos
los tres listados es lo que evita repetir el fallo del retrato de 14 px
cada vez que algo envuelve la foto. */
.author-cabeza > .author-foto-enlace,
.author-cabeza > picture,
.author-cabeza > .author-foto {
flex: 0 0 auto;
display: block;
width: clamp(92px, 26vw, 124px);
aspect-ratio: 1 / 1;
}
/* Dentro del enlace, el y la foto llenan el hueco por completo. */
.author-foto-enlace picture { display: block; width: 100%; height: 100%; }
.author-foto {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
/* La foto de estudio es vertical: se encuadra hacia el rostro */
object-position: 50% 12%;
border: 2px solid var(--accent);
background: #0d0d0d;
}
/* Señales de que la foto y el nombre llevan a algún lado. Sin esto no hay
forma de adivinar que se puede hacer clic: el cursor cambia, pero solo
cuando ya estás encima. */
.author-foto-enlace .author-foto {
transition: border-color 180ms ease, transform 180ms ease;
}
.author-foto-enlace:hover .author-foto,
.author-foto-enlace:focus-visible .author-foto {
border-color: var(--yellow);
transform: scale(1.04);
}
.author-nombre {
color: inherit;
text-decoration: none;
transition: color 160ms ease;
}
.author-nombre:hover,
.author-nombre:focus-visible {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
@media (prefers-reduced-motion: reduce) {
.author-foto-enlace .author-foto { transition: none; }
.author-foto-enlace:hover .author-foto { transform: none; }
}
/* Dos filas etiquetadas: la etiqueta con ancho fijo alinea las dos filas en
columnas y cada enlace es indivisible — si falta espacio, baja COMPLETO. */
.author-links { display: flex; flex-direction: column; gap: 8px; }
.author-links-fila { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.author-links-etiqueta {
min-width: 68px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.author-links a { font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.author-links a:hover { text-decoration: underline; }
.footer-col h4 { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { font-size: 13px; color: var(--text-soft); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
/* Enlace de regreso al pie de cada noticia */
.volver-portada { font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 860px) {
.hero-grid, .evergreen-block { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* ---------- menú hamburguesa ---------- */
@media (max-width: 780px) {
.nav-toggle { display: flex; }
.nav-inner {
display: none;
flex-direction: column;
overflow: visible;
padding-bottom: 10px;
}
.nav-inner.is-open { display: flex; }
.nav-inner a {
padding: 12px 4px;
border-bottom: 1px solid var(--line);
border-left: 3px solid transparent;
font-size: 16px;
}
.nav-inner a:hover, .nav-inner a:focus-visible { border-bottom-color: var(--line); border-left-color: var(--yellow); }
.nav-inner a.current { border-bottom-color: var(--line); border-left-color: var(--accent); }
nav.primary { position: static; }
/* En el celular el submenú no flota: se despliega dentro de la lista */
.nav-grupo { width: 100%; }
.nav-sub-toggle {
width: 100%;
justify-content: space-between;
font-size: 16px;
padding: 12px 4px;
border-bottom: 1px solid var(--line);
border-left: 3px solid transparent;
}
.nav-sub-toggle:hover, .nav-sub-toggle:focus-visible { border-bottom-color: var(--line); border-left-color: var(--yellow); }
.nav-grupo.abierto .nav-sub-toggle { border-bottom-color: var(--line); border-left-color: var(--accent); }
.nav-sub {
position: static;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: var(--bg-sunken);
}
.nav-inner .nav-sub a {
font-size: 15px;
padding: 11px 4px 11px 22px;
border-radius: 0;
border-bottom: 1px solid var(--line);
border-left: 3px solid transparent;
}
}
@media (max-width: 640px) {
.utility-inner { gap: 4px 14px; padding: 8px 0; }
.utility-date { font-size: 12px; white-space: normal; }
.ticker-track { font-size: 12px; animation-duration: 90s; }
.ticker-item { padding: 8px 14px; }
.pico-inner { gap: 6px 14px; }
.pico-cities { gap: 6px 14px; }
.pico-city { font-size: 12px; }
.pico-time { display: none; }
.section-head h1, .section-head h2 { font-size: 23px; }
.hero-headline { font-size: 27px; }
.flip-card, .flip-inner { min-height: 348px; }
.flip-rate { font-size: 36px; }
.ad-wrap { padding: 20px 0; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; }
.masthead { padding: 12px 0 10px; }
.masthead h1 { font-size: 28px; }
.masthead .tagline { font-size: 12.5px; }
.opinion-block { padding: 36px 0; }
.section-block { padding: 34px 0; }
.evergreen-block { padding: 22px 20px; }
.interview-card, .core-card { padding: 18px; }
}
/* ==========================================================
Bandera y fecha compacta (dd/mmm/yyyy) en la barra superior
========================================================== */
.flag-co {
display: inline-block;
width: 18px;
height: 12px;
border-radius: 2px;
vertical-align: -1px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}
/* ==========================================================
Pico y placa en una sola fila
========================================================== */
.pico-inner { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pico-inner::-webkit-scrollbar { display: none; }
.pico-cities { flex-wrap: nowrap; }
@media (max-width: 640px) {
.pico-inner { gap: 10px; padding-top: 6px; padding-bottom: 6px; }
.pico-title { font-size: 10px; letter-spacing: 0.08em; }
.pico-cities { gap: 10px; }
.pico-city { font-size: 11.5px; gap: 5px; }
.pico-digits { font-size: 11.5px; padding: 1px 6px; }
}
/* ==========================================================
Cinta bursátil: cada valor es un enlace a /indicadores/
========================================================== */
a.ticker-item { text-decoration: none; cursor: pointer; }
a.ticker-item:hover .name, a.ticker-item:focus-visible .name { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================
Anuncios: variante compacta y menos alto en móvil
========================================================== */
.ad-unit.ad-compacto .ad-body { padding: 14px 18px; gap: 12px; }
.ad-unit.ad-compacto .ad-brand { font-size: 11px; }
.ad-unit.ad-compacto .ad-headline { font-size: clamp(17px, 2vw, 22px); margin: 3px 0 4px; }
.ad-unit.ad-compacto .ad-text { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-unit.ad-compacto .ad-actions { margin-top: 8px; gap: 8px; }
.ad-unit.ad-compacto .ad-cta { font-size: 12px; padding: 7px 12px; }
.ad-unit.ad-compacto .ad-coupon { padding: 10px 12px; }
.ad-unit.ad-compacto .ad-coupon img { width: 84px; height: 84px; }
@media (max-width: 640px) {
.ad-wrap { padding: 14px 0; }
.ad-wrap.tight { padding: 0 0 14px; }
.ad-body { padding: 14px 16px; gap: 10px; }
.ad-headline { font-size: 19px; margin: 3px 0 4px; }
.ad-text { font-size: 12.5px; }
.ad-actions { margin-top: 8px; gap: 8px; }
.ad-cta { font-size: 12px; padding: 8px 12px; }
.ad-piro .ad-body { padding: 14px 16px; }
.ad-piro-side .site { font-size: 14px; }
}
/* ==========================================================
Multimedia
========================================================== */
.mm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 22px;
}
.mm-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mm-thumb {
position: relative;
border-radius: 8px;
overflow: hidden;
background: var(--bg-sunken);
aspect-ratio: 16 / 9;
}
/* El plugin de imágenes envuelve cada ![]()
en un . Ese envoltorio
es una caja más entre la foto y su hueco, y con ella el 100% de la foto se
medía contra la nada. `display: contents` lo saca del medio sin tocar la
elección de formato, que la hacen los de dentro. */
.mm-thumb picture { display: contents; }
.mm-thumb > img, .mm-thumb picture img, .mm-thumb .mm-open-galeria img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.mm-open-galeria {
display: block;
width: 100%; height: 100%;
padding: 0; margin: 0;
border: 0; background: none;
cursor: pointer;
}
.mm-play-btn {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 54px; height: 54px;
border-radius: 50%;
background: rgba(11,110,59,0.92);
box-shadow: 0 4px 18px rgba(0,0,0,0.35);
transition: transform 160ms ease, background 160ms ease;
}
.mm-play-btn::after {
content: '';
position: absolute;
left: 55%; top: 50%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px 0 10px 17px;
border-color: transparent transparent transparent #fff;
}
/* Aquí vivían .mm-frame, .mm-video, .mm-spotify y .mm-audio: los
reproductores que la tarjeta montaba dentro de sí misma. Ya no reproduce
nadie en la tarjeta, así que se fueron con ellos. */
.mm-tipo {
position: absolute;
left: 10px; top: 10px;
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: rgba(15,23,18,0.78);
padding: 3px 8px;
border-radius: 3px;
pointer-events: none;
}
.mm-tipo-video { background: rgba(11,110,59,0.9); }
.mm-tipo-podcast { background: rgba(122,74,30,0.9); }
.mm-tipo-galeria, .mm-tipo-foto { background: rgba(151,115,10,0.92); }
.mm-count {
position: absolute;
right: 10px; bottom: 10px;
font-size: 11.5px;
font-weight: 700;
color: #fff;
background: rgba(15,23,18,0.78);
padding: 3px 8px;
border-radius: 3px;
pointer-events: none;
}
.mm-title { font-size: 16.5px; line-height: 1.25; }
.mm-title a { text-decoration: none; }
.mm-desc { font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.mm-fuente { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.mm-ver-todo { color: var(--accent); font-weight: 700; text-decoration: none; }
.mm-ver-todo:hover { text-decoration: underline; }
.mm-vacio { color: var(--text-soft); }
.mm-lightbox {
border: 0;
padding: 0;
background: transparent;
width: min(94vw, 1000px);
}
.mm-lightbox::backdrop { background: rgba(5,9,6,0.88); }
/* Respaldo para navegadores sin