@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; }
.secondary-eyebrow { display: flex; 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); }
.core-card .headlines .row { display: flex; align-items: flex-start; gap: 8px; }
.core-card .headlines .row .chip { margin-top: 2px; }
.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;
}
.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;
}
.mm-thumb > img, .mm-thumb .mm-play img, .mm-thumb .mm-open-galeria img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.mm-play, .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;
}
.mm-play:hover .mm-play-btn, .mm-play:focus-visible .mm-play-btn { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-strong, #084f2a); }
.mm-frame { width: 100%; height: 100%; border: 0; display: block; }
.mm-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.mm-spotify { width: 100%; height: 100%; border: 0; display: block; border-radius: 8px; }
.mm-audio { display: flex; align-items: center; justify-content: center; height: 100%; padding: 16px; }
.mm-audio audio { width: 100%; }
.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