/* ============================================================
   Radio 21 — main.css
   Presupuesto: <= 60 KB. Mobile-first.
   Skills: diseño-sistema, responsive-touch, accesibilidad, performance.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Paleta de marca (actualizada 2026-06-29) */
  --r21-primary: #D04646;          /* Scarlet Rush — rojo corporativo */
  --r21-primary-dark: #B03030;     /* Scarlet Rush oscuro para hovers */
  --r21-primary-soft: #FAEAEA;     /* Tinte Scarlet Rush para alertas/badges */
  --r21-primary-fg: #D04646;       /* Scarlet Rush sobre superficies claras */
  --r21-secondary:      #FF570A;   /* Blaze Orange — acento energético */
  --r21-secondary-dark: #D94200;   /* Blaze Orange oscuro para hovers */
  --r21-secondary-soft: #FFF0E8;   /* Tinte naranja suave para badges/highlights */
  --r21-secondary-fg:   #FF570A;   /* Blaze Orange sobre superficies claras */

  --r21-accent: #131F49;           /* Space Indigo — fondos de cabeceras/footer */
  --r21-violet: #a30000;           /* Inferno — rojo carmín oscuro (igual que MiraVos) */

  /* Footer — paleta fija, no cambia con dark/light */
  --r21-ftr-bg:    #131F49;        /* grid central = header logo */
  --r21-ftr-top:   #A30000;        /* folio superior = --r21-violet */
  --r21-ftr-deep:  #0D1530;        /* barra legal, el más oscuro */
  --r21-ftr-text:  #ededf5;        /* texto principal sobre oscuro */
  --r21-ftr-muted: #a8b4d0;        /* texto secundario / col-titles */
  --r21-ftr-ghost: #7a8aaa;        /* texto muy tenue / legal */

  --r21-bg: #ffffff;
  --r21-bg-alt: #f4f4f7;
  --r21-text: #12121a;
  --r21-text-soft: #5a5a68;
  --r21-border: #e2e2e9;

  --r21-font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r21-font-display: 'Domine', Georgia, 'Times New Roman', serif;
  --r21-fs-base: 1rem;
  --r21-fs-note: 1.125rem;
  --r21-lh-note: 1.7;

  --r21-s1: .25rem;
  --r21-s2: .5rem;
  --r21-s3: .75rem;
  --r21-s4: 1rem;
  --r21-s5: 1.25rem;
  --r21-s6: 1.5rem;
  --r21-s8: 2rem;
  --r21-s12: 3rem;

  --r21-radius: 8px;
  --r21-shadow: 0 2px 12px rgba(18, 18, 26, .06);
  --r21-maxw-note: 720px;
  --r21-maxw-site: 1280px;
  --r21-content-pad: var(--r21-s4);   /* padding horizontal de todos los contenedores de contenido */
  --r21-touch: 44px;               /* Target táctil mínimo */
  --r21-touch-lg: 48px;            /* Target táctil prioritario */
}

[data-theme="dark"] {
  --r21-bg: #0D1530;           /* Space Indigo oscuro — reemplaza negro #12121a */
  --r21-bg-alt: #111d3a;
  --r21-bg-deep: #090f1e;
  --r21-text: #ededf5;
  --r21-text-soft: #9e9eaf;
  --r21-border: #2a2a38;
  --r21-primary-soft: #3a1a1a;     /* Tinte Scarlet Rush sobre fondo oscuro */
  --r21-primary-fg: #f07070;       /* Scarlet Rush claro legible sobre fondo oscuro */
  --r21-secondary-soft: #2a1500;   /* Tinte Blaze Orange sobre fondo oscuro */
  --r21-secondary-fg: #FF8A50;     /* Blaze Orange claro legible sobre fondo oscuro */
  --r21-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}

/* ---------- Fuentes Locales ---------- */

/* Open Sans variable — cuerpo, menús, metadatos */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/OpenSans-Variable-latin-ext.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans/OpenSans-Variable-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  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;
}

/* Domine variable — titulares editoriales */
@font-face {
  font-family: 'Domine';
  src: url('../fonts/domine/Domine-VariableFont_wght-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Domine';
  src: url('../fonts/domine/Domine-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 700;
  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;
}

/* ---------- Reseteo y Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--r21-bg);
  color: var(--r21-text);
  font-family: var(--r21-font);
  font-size: var(--r21-fs-base);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s, color .3s;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Estilos de Gutenberg/WordPress obligatorios */
.alignwide {
  max-width: var(--r21-maxw-site);
  margin-left: auto;
  margin-right: auto;
}
.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

[x-cloak] {
  display: none !important;
}

/* =========================================
   SKIP LINK
   ========================================= */
.r21-skip {
  position: absolute;
  top: -100%;
  left: var(--r21-s4);
  z-index: 9999;
  background: var(--r21-primary);
  color: #fff;
  padding: var(--r21-s2) var(--r21-s4);
  border-radius: var(--r21-radius);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s;
}
.r21-skip:focus { top: var(--r21-s4); }

/* =========================================
   HEADER
   ========================================= */
.r21-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #131F49;
  border-bottom: 3px solid var(--r21-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.r21-header__inner {
  display: flex;
  align-items: center;
  gap: var(--r21-s4);
  max-width: var(--r21-maxw-site);
  margin: 0 auto;
  padding: var(--r21-s2) var(--r21-content-pad);
}

/* Logo */
.r21-logo { flex: 1; min-width: 0; }
.r21-logo a { display: inline-flex; align-items: center; }
.r21-logo img { height: 57px; width: auto; display: block; } /* +10% sobre 52px */
.r21-logo__text {
  font-family: var(--r21-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--r21-primary);
  text-decoration: none;
}
.r21-logo__link { text-decoration: none; }

/* Botones icono (hamburger, search, dark-toggle) */
.r21-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--r21-touch-lg);
  height: var(--r21-touch-lg);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--r21-text);
  border-radius: var(--r21-radius);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.r21-btn-icon:hover,
.r21-btn-icon:focus-visible {
  background: var(--r21-bg-alt);
  color: var(--r21-primary);
  outline: 2px solid var(--r21-primary);
  outline-offset: 2px;
}

/* Hamburger */
.r21-burger,
.r21-burger::before,
.r21-burger::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.r21-burger { position: relative; }
.r21-burger::before,
.r21-burger::after { content: ''; position: absolute; left: 0; }
.r21-burger::before { top: -6px; }
.r21-burger::after  { top:  6px; }

/* Acciones del header */
.r21-header__acciones { display: flex; align-items: center; gap: var(--r21-s1); }

/* Botones dentro del header siempre sobre fondo oscuro */
.r21-header .r21-btn-icon {
  color: #ededf5;
}
.r21-header .r21-btn-icon:hover,
.r21-header .r21-btn-icon:focus-visible {
  background: rgba(255,255,255,.1);
  color: #ffffff;
  outline-color: rgba(255,255,255,.4);
}

/* Panel de búsqueda */
.r21-search-panel {
  border-top: 1px solid rgba(255,255,255,.12);
  background: #1c2d63;
  padding: var(--r21-s3) var(--r21-content-pad);
}
.r21-search-panel__inner {
  display: flex;
  align-items: center;
  gap: var(--r21-s3);
  max-width: var(--r21-maxw-site);
  margin: 0 auto;
}
.r21-search-panel__form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--r21-s2);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r21-radius);
  padding: 0 var(--r21-s3);
}
.r21-search-panel__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.r21-search-panel__input {
  flex: 1;
  border: none;
  background: transparent;
  color: #ededf5;
  font-family: var(--r21-font);
  font-size: var(--r21-fs-base);
  padding: var(--r21-s2) 0;
  outline: none;
}
.r21-search-panel__input::placeholder { color: rgba(237,237,245,.5); }
.r21-search-panel__submit {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  color: rgba(237,237,245,.6);
  cursor: pointer;
  padding: 0;
}
.r21-search-panel__submit:hover { color: var(--r21-primary); }

/* =========================================
   NAV CHIPS (secciones horizontales)
   ========================================= */
.r21-nav-chips {
  background: var(--r21-violet);
  overflow-x: auto;
  scrollbar-width: none;
}
.r21-nav-chips::-webkit-scrollbar { display: none; }
.r21-nav-chips .menu,
.r21-nav-chips .r21-chips {
  display: flex;
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--r21-content-pad);
  gap: 0;
  max-width: var(--r21-maxw-site);
}
.r21-nav-chips .menu-item a,
.r21-nav-chips .r21-chips > li > a {
  display: block;
  padding: var(--r21-s2) var(--r21-s3);
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.r21-nav-chips .menu-item a:hover,
.r21-nav-chips .r21-chips > li > a:hover,
.r21-nav-chips .menu-item.current-menu-item a,
.r21-nav-chips .r21-chips > li.current-menu-item > a {
  color: #ffffff;
  border-bottom-color: var(--r21-primary);
}

/* =========================================
   DRAWER
   ========================================= */
.r21-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: rgba(18, 18, 26, .55);
  backdrop-filter: blur(2px);
}
.r21-drawer-overlay[hidden] { display: none; }

.r21-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 300;
  width: min(320px, 85vw);
  background: var(--r21-bg);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.r21-drawer[hidden] { display: none; }

.r21-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--r21-s3) var(--r21-s4);
  border-bottom: 1px solid var(--r21-border);
  min-height: var(--r21-touch-lg);
}
.r21-drawer__brand img { height: 40px; width: auto; }
.r21-drawer__brand-text {
  font-family: var(--r21-font-display);
  font-weight: 700;
  color: var(--r21-primary);
}

.r21-drawer .r21-drawer__menu {
  list-style: none;
  margin: 0;
  padding: var(--r21-s3) 0;
}
.r21-drawer .r21-drawer__menu li a {
  display: block;
  padding: var(--r21-s3) var(--r21-s6);
  font-size: 1rem;
  font-weight: 600;
  color: var(--r21-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
}
.r21-drawer .r21-drawer__menu li a:hover,
.r21-drawer .r21-drawer__menu li.current-menu-item a {
  color: var(--r21-primary);
  border-left-color: var(--r21-primary);
  background: var(--r21-primary-soft);
}

/* =========================================
   MAIN
   ========================================= */
.r21-main {
  min-height: 70vh;
  padding-bottom: 80px; /* espacio para el sticky player (PROY-2026-005) */
}
.r21-container {
  max-width: var(--r21-maxw-site);
  margin: 0 auto;
  padding: var(--r21-s6) var(--r21-content-pad);
}

/* =========================================
   FOOTER — paleta fija via tokens --r21-ftr-*
   ========================================= */
.r21-ftr {
  background: var(--r21-ftr-bg);
  color: var(--r21-ftr-text);
  margin-top: var(--r21-s12);
}

.r21-ftr__wrap {
  max-width: var(--r21-maxw-site);
  margin: 0 auto;
  padding-left: var(--r21-content-pad);
  padding-right: var(--r21-content-pad);
}
.r21-ftr__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--r21-s8);
  padding-top: var(--r21-s8);
  padding-bottom: var(--r21-s8);
}
@media (min-width: 640px) {
  .r21-ftr__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .r21-ftr__grid { grid-template-columns: repeat(3, 1fr); }
}

.r21-ftr__logo-link { display: inline-block; margin-bottom: var(--r21-s4); }
.r21-ftr__logo-link img { height: 48px; width: auto; display: block; }
.r21-ftr__logo-link .custom-logo { height: 48px; width: auto; display: block; }
.r21-ftr__tagline { font-size: .875rem; color: var(--r21-ftr-muted); margin: 0 0 var(--r21-s4); }

.r21-ftr__social { display: flex; gap: var(--r21-s3); flex-wrap: wrap; }
.r21-ftr__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--r21-ftr-text);
  transition: background .15s;
}
.r21-ftr__social a:hover { background: var(--r21-primary); color: #fff; }
.r21-ftr__social svg { width: 18px; height: 18px; }

.r21-ftr__col-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--r21-ftr-muted);
  margin: 0 0 var(--r21-s4);
}
.r21-ftr__col ul { list-style: none; margin: 0; padding: 0; }
.r21-ftr__col ul li + li { margin-top: var(--r21-s2); }
.r21-ftr__col ul a { color: var(--r21-ftr-text); text-decoration: none; font-size: .9rem; }
.r21-ftr__col ul a:hover { color: var(--r21-primary); }

.r21-ftr__legal {
  background: var(--r21-ftr-deep);
  padding-top: var(--r21-s4);
  padding-bottom: var(--r21-s4);
}
.r21-ftr__legal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--r21-s3);
  font-size: .8rem;
  color: var(--r21-ftr-ghost);
}
.r21-ftr__legal-inner p { margin: 0; }
.r21-ftr__legal-links { display: flex; flex-wrap: wrap; gap: var(--r21-s2) var(--r21-s3); }
.r21-ftr__legal-links a { color: var(--r21-ftr-ghost); text-decoration: none; }
.r21-ftr__legal-links a:hover { color: var(--r21-primary); }

.r21-gotop {
  position: fixed;
  bottom: 110px; /* sobre el player flotante de la derecha */
  right: var(--r21-s4);
  z-index: 150;
  width: var(--r21-touch-lg);
  height: var(--r21-touch-lg);
  border-radius: var(--r21-radius);
  border: none;
  background: var(--r21-ftr-top);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: background .15s;
  /* visibilidad manejada por Alpine x-show + x-transition */
}
.r21-gotop:hover { background: var(--r21-primary); }

/* =========================================
   LOGO DUAL — light/dark
   ========================================= */
.r21-logo-light {
  display: block !important;
}
.r21-logo-dark {
  display: none !important;
}

/* Modo oscuro explícito */
[data-theme="dark"] .r21-logo-light {
  display: none !important;
}
[data-theme="dark"] .r21-logo-dark {
  display: block !important;
}

/* El header siempre es oscuro — logo dark forzado independiente del data-theme */
.r21-header .r21-logo-light {
  display: none !important;
}
.r21-header .r21-logo-dark {
  display: block !important;
}

/* Modo oscuro automático (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  :root:has(body[data-theme="auto"]) .r21-logo-light {
    display: none !important;
  }
  :root:has(body[data-theme="auto"]) .r21-logo-dark {
    display: block !important;
  }
}

/* =========================================
   DRAWER — transiciones Alpine
   ========================================= */
.r21-transition-enter,
.r21-transition-leave { transition: transform .2s ease, opacity .2s ease; }
.r21-transition-enter-start,
.r21-transition-leave-end  { transform: translateX(-100%); opacity: 0; }
.r21-transition-enter-end,
.r21-transition-leave-start { transform: translateX(0); opacity: 1; }

/* =========================================
   BARRA SUPERIOR (fecha + indicador live)
   ========================================= */
.r21-barra-superior {
  background: #0d1530;
  color: #a8b4d4;
  font-size: .75rem;
  display: none;
  position: relative;
  z-index: 210; /* > .r21-header (200): el tooltip de clima debe pintarse sobre el header sticky */
}
@media (min-width: 768px) { .r21-barra-superior { display: block; } }

.r21-barra-superior__inner {
  max-width: var(--r21-maxw-site);
  margin: 0 auto;
  padding: var(--r21-s1) var(--r21-content-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.r21-vivo {
  display: inline-flex;
  align-items: center;
  gap: var(--r21-s1);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--r21-primary);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: opacity .15s;
}
.r21-vivo:hover {
  opacity: 0.85;
}
[data-theme="dark"] .r21-vivo { color: var(--r21-primary-fg); }

.r21-vivo__play {
  flex-shrink: 0;
  transition: transform .15s;
}
.r21-vivo:hover .r21-vivo__play { transform: scale(1.15); }

.r21-vivo__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r21-primary);
  animation: r21-pulse 1.4s ease-in-out infinite;
}
@keyframes r21-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* Botón de radio en vivo del header: triángulo por defecto, círculo pulsante mientras suena.
   Escapado a #r21-header-live-btn para no afectar el dot del ticker "AHORA" (misma clase .r21-vivo). */
#r21-header-live-btn .r21-vivo__dot { display: none; }
#r21-header-live-btn.r21-vivo--activo .r21-vivo__play { display: none; }
#r21-header-live-btn.r21-vivo--activo .r21-vivo__dot  { display: block; }

/* CLIMA — barra superior */
.r21-barra-superior__izq { flex: 1; display: inline-flex; align-items: center; gap: var(--r21-s3); }
.r21-clima-container { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: flex-end; }
.r21-barra-superior__der { flex: 1; display: inline-flex; align-items: center; justify-content: flex-end; }
.r21-barra-superior__clima {
  display: inline-flex; align-items: center; gap: .3em;
  color: inherit; white-space: nowrap; flex-shrink: 0; margin-left: auto;
  text-decoration: none; cursor: pointer; transition: color .2s ease;
}
.r21-barra-superior__clima:hover { color: var(--r21-primary-fg); }
.r21-clima__icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
.r21-clima__ciudad { color: #a8b4d4; font-weight: 500; }
.r21-clima__ciudad--short { display: none; }
.r21-clima__temp { color: inherit; font-weight: 700; }
.r21-clima__rango {
  color: #a8b4d4; font-weight: 600; font-size: .7rem; margin-left: .5em;
  display: inline-flex; align-items: center; gap: .15em;
}
.r21-clima__flecha { color: var(--r21-primary); font-size: .85em; line-height: 1; }
.r21-clima__guion { color: #a8b4d4; margin: 0 .35em; line-height: 1; }

.r21-clima-tooltip {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--r21-primary); color: #fff;
  padding: var(--r21-s1) var(--r21-s3); border-radius: 6px;
  font-size: .75rem; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(208,70,70,.25); z-index: 60;
  display: flex; align-items: center; gap: var(--r21-s2); pointer-events: auto;
}
.r21-clima-tooltip::before {
  content: ''; position: absolute; bottom: 100%; right: 24px;
  border: 6px solid transparent; border-bottom-color: var(--r21-primary);
}
.r21-clima-tooltip__text { color: #fff; text-decoration: none; }
.r21-clima-tooltip__close {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: .75rem; cursor: pointer; padding: 2px 4px; line-height: 1;
  display: flex; align-items: center; transition: color .15s;
}
.r21-clima-tooltip__close:hover { color: #fff; }
.r21-transition-enter, .r21-transition-leave {
  opacity: 0; transform: translateY(-5px);
  transition: opacity .2s ease, transform .2s ease;
}
@media (max-width: 599px) { .r21-clima-tooltip { display: none !important; } }
@media (max-width: 768px) { .r21-barra-superior__clima { margin-left: 0; } .r21-clima__ciudad { display: none; } .r21-clima__ciudad--short { display: inline; } .r21-clima__rango { display: none; } }

/* =========================================
   BARRA HEADER (alertas AHORA)
   ========================================= */
.r21-barra-header { display: none; }
@media (min-width: 768px) {
  .r21-barra-header {
    display: block;
    background: #1c2d63;
    border-bottom: none;
  }
}
.r21-barra-header__inner {
  max-width: var(--r21-maxw-site);
  margin: 0 auto;
  padding: var(--r21-s1) var(--r21-content-pad);
  font-size: .8rem;
  color: #8fa0cc;
  display: flex;
  align-items: center;
  gap: var(--r21-s3);
  overflow: hidden;
}
.r21-vivo--header { flex-shrink: 0; }
.r21-barra-header__alertas { overflow: hidden; flex: 1; min-width: 0; }
.r21-barra-header__alertas-scroll {
  display: flex; align-items: center; gap: .5em;
  overflow: hidden; white-space: nowrap;
  mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
.r21-barra-header__alerta {
  color: #8fa0cc; font-size: .8rem; font-weight: 500;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: color .15s;
}
.r21-barra-header__alerta:hover { color: #fff; }
.r21-barra-header__sep { color: #3d4f7a; flex-shrink: 0; }

/* =========================================
   BADGE de sección
   ========================================= */
.r21-badge {
  display: inline-block;
  background: var(--r21-primary-soft);
  color: var(--r21-primary-fg);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px var(--r21-s2);
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.r21-badge:hover { background: var(--r21-primary); color: #fff; }

/* =========================================
   BREADCRUMB
   ========================================= */
.r21-breadcrumb { margin-bottom: var(--r21-s4); }
.r21-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: .8rem;
  color: var(--r21-text-soft);
}
.r21-breadcrumb__item + .r21-breadcrumb__item::before {
  content: '›';
  margin: 0 var(--r21-s1);
  color: var(--r21-border);
}
.r21-breadcrumb__item a { color: var(--r21-text-soft); text-decoration: none; }
.r21-breadcrumb__item a:hover { color: var(--r21-primary); }
.r21-breadcrumb__item--current { color: var(--r21-text); }

/* =========================================
   CARDS — base y variantes
   ========================================= */
.r21-card { position: relative; }

.r21-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.r21-card__titulo .r21-card__link {
  display: inline;
  text-decoration: none;
  color: inherit;
}
.r21-card__link--media {
  display: block;
}
.r21-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  margin: 0 0 var(--r21-s3);
  aspect-ratio: 16 / 9;
  background: var(--r21-bg-alt);
}
.r21-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.r21-card__link:hover .r21-card__media img { transform: scale(1.04); }

.r21-card__tags {
  position: absolute;
  bottom: var(--r21-s2);
  left: var(--r21-s2);
  right: var(--r21-s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--r21-s1);
  pointer-events: none;
}
.r21-card__tag {
  display: inline-block;
  padding: 2px var(--r21-s2);
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
  line-height: 1.5;
}

.r21-card__volanta {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--r21-primary-fg);
  margin-bottom: var(--r21-s1);
}
.r21-card__titulo {
  font-family: var(--r21-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--r21-text);
  margin: 0 0 var(--r21-s2);
  line-height: 1.3;
  transition: color .15s;
}
.r21-card__link:hover .r21-card__titulo { color: var(--r21-primary); }
.r21-card__titulo--hero { font-size: clamp(1.2rem, 3vw, 1.75rem); }

.r21-card__excerpt {
  font-size: .875rem;
  color: var(--r21-text-soft);
  margin: 0 0 var(--r21-s2);
  line-height: var(--r21-lh-note);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.r21-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--r21-s1) var(--r21-s2);
  font-size: .75rem;
  color: var(--r21-text-soft);
}

/* Hero */
.r21-card--hero .r21-card__media {
  margin-bottom: 0;
  border-radius: 0;
}
.r21-card--hero .r21-card__content {
  padding: var(--r21-s4);
  background: var(--r21-bg);
  border: 1px solid var(--r21-border);
  border-top: none;
  border-radius: 0;
}

/* Compact — solo texto, sin imagen */
.r21-card--compact {
  padding: var(--r21-s3) 0;
  border-bottom: 1px solid var(--r21-border);
}
.r21-card--compact:last-child { border-bottom: none; }
.r21-card--compact .r21-card__volanta { margin-bottom: 4px; }
.r21-card--compact .r21-card__titulo { font-size: .9rem; margin-bottom: var(--r21-s1); }
.r21-card--compact .r21-card__excerpt,
.r21-card--compact .r21-card__media { display: none; }

/* =========================================
   SECCIÓN — contenedor genérico con título
   ========================================= */
.r21-seccion {
  max-width: var(--r21-maxw-site);
  margin: var(--r21-s8) auto 0;
  padding: 0 var(--r21-content-pad);
}
.r21-seccion__titulo {
  font-family: var(--r21-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--r21-text);
  margin: 0 0 var(--r21-s4);
  padding-bottom: var(--r21-s2);
  border-bottom: 2px solid var(--r21-primary);
}

/* =========================================
   GRILLA GENÉRICA
   ========================================= */
.r21-grid {
  display: grid;
  gap: var(--r21-s4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .r21-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .r21-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .r21-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================
   BLOQUE UNO — mosaico editorial (reemplaza Apertura + Mosaico)
   ========================================= */
.r21-bloque-uno {
  max-width: var(--r21-maxw-site);
  margin: var(--r21-s6) auto 0;
  padding: 0 var(--r21-content-pad);
}

.r21-mosaico {
  display: grid;
  gap: 1px;
  background: var(--r21-border);
  border-block: 1px solid var(--r21-border);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .r21-mosaico { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .r21-mosaico { grid-template-columns: repeat(4, 1fr); }
  .r21-mosaico .r21-mosaico__destacada {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
}

/* BEM del template card-mosaico.php */
.r21-mosaico__celda {
  position: relative;
  background: var(--r21-bg);
  padding: clamp(1rem, 1.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
}
.r21-mosaico__link  { display: block; text-decoration: none; color: inherit; flex: 1; display: flex; flex-direction: column; }
.r21-mosaico__media {
  overflow: hidden;
  border-radius: 0;
  margin: 0 0 var(--r21-s3);
  aspect-ratio: 16 / 10;
  background: var(--r21-bg-alt);
}
.r21-mosaico__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.r21-mosaico__link:hover .r21-mosaico__media img { transform: scale(1.04); }
.r21-mosaico__destacada .r21-mosaico__media { aspect-ratio: 16 / 9; margin-bottom: var(--r21-s4); }

/* Kicker con color por sección (dentro de los 4 tonos oficiales de marca) */
.r21-mosaico__kicker {
  align-self: flex-start;
  display: inline-block;
  border-left: 3px solid var(--sec, var(--r21-primary));
  padding-left: .55rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sec, var(--r21-primary));
  margin-bottom: var(--r21-s2);
  line-height: 1.1;
}
[data-cat-sec="noticias"],
[data-cat-sec="politica"]     { --sec: var(--r21-accent); }
[data-cat-sec="policiales"],
[data-cat-sec="deportes"]     { --sec: var(--r21-primary); }
[data-cat-sec="economia"],
[data-cat-sec="espectaculos"] { --sec: var(--r21-secondary); }
[data-cat-sec="sociedad"],
[data-cat-sec="cultura"]      { --sec: var(--r21-violet); }

.r21-mosaico__titulo {
  font-family: var(--r21-font-display);
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  font-weight: 700;
  color: var(--r21-text);
  margin: 0 0 var(--r21-s2);
  line-height: 1.25;
  transition: color .15s;
}
.r21-mosaico__link:hover .r21-mosaico__titulo { color: var(--r21-primary); }
.r21-mosaico__destacada .r21-mosaico__titulo { font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.08; letter-spacing: -.01em; }
.r21-mosaico__bajada {
  font-size: 1rem;
  color: var(--r21-text-soft);
  margin: 0 0 var(--r21-s4);
  line-height: 1.55;
  max-width: 46ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.r21-mosaico__meta {
  font-size: .72rem;
  color: var(--r21-text-soft);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: auto;
}

.r21-mosaico__aviso { justify-content: center; }

.r21-ad-box {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--r21-bg-alt);
  border: 1px dashed var(--r21-border);
}
.r21-ad-box__tag { font-size: .7rem; color: var(--r21-text-soft); letter-spacing: .1em; }

/* =========================================
   BLOQUE DOS — mosaico plano, sin publicidad
   ========================================= */
.r21-bloque-dos {
  max-width: var(--r21-maxw-site);
  margin: var(--r21-s8) auto 0;
  padding: 0 var(--r21-content-pad);
}

.r21-mosaico2 {
  display: grid;
  gap: 1px;
  background: var(--r21-border);
  border-block: 1px solid var(--r21-border);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .r21-mosaico2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .r21-mosaico2 { grid-template-columns: repeat(4, 1fr); }
}

.r21-mosaico2__celda {
  position: relative;
  background: var(--r21-bg);
  padding: clamp(1rem, 1.5vw, 1.4rem);
  display: flex;
  flex-direction: column;
}
.r21-mosaico2__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.r21-mosaico2__media {
  overflow: hidden;
  border-radius: 0;
  margin: 0 0 var(--r21-s3);
  aspect-ratio: 16 / 10;
  background: var(--r21-bg-alt);
}
.r21-mosaico2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.r21-mosaico2__link:hover .r21-mosaico2__media img { transform: scale(1.04); }

.r21-mosaico2__titulo {
  font-family: var(--r21-font-display);
  font-size: clamp(1.02rem, 1.2vw, 1.15rem);
  font-weight: 700;
  color: var(--r21-text);
  margin: 0 0 var(--r21-s2);
  line-height: 1.2;
  transition: color .15s;
}
.r21-mosaico2__link:hover .r21-mosaico2__titulo { color: var(--r21-primary); }

/* Reutiliza el mapeo [data-cat-sec] → --sec definido junto a .r21-mosaico__kicker (Bloque Uno) */
.r21-mosaico2__seccion {
  margin-top: auto;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sec, var(--r21-primary));
}

/* =========================================
   INTERÉS — Lo más leído
   ========================================= */
.r21-interes-grid {
  max-width: var(--r21-maxw-site);
  margin: var(--r21-s8) auto 0;
  padding: 0 var(--r21-content-pad);
}

.r21-populares__list { display: flex; flex-direction: column; gap: var(--r21-s4); }

/* .r21-trending-tag (singular): "Temas del momento" se sacó de la portada (2026-07-02),
   pero esta clase por-tag sigue en uso en template-parts/layout/aside.php (widget "Temas"). */
.r21-trending-tag {
  display: inline-block;
  background: var(--r21-bg-alt);
  border: 1px solid var(--r21-border);
  color: var(--r21-text);
  font-size: .8rem;
  font-weight: 600;
  padding: var(--r21-s1) var(--r21-s3);
  border-radius: 20px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.r21-trending-tag:hover {
  background: var(--r21-secondary-soft);
  color: var(--r21-secondary-fg);
  border-color: var(--r21-secondary);
}

/* =========================================
   LOAD MORE
   ========================================= */
.r21-load-more-container { text-align: center; margin-top: var(--r21-s6); }
.r21-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--r21-s2);
  padding: var(--r21-s3) var(--r21-s6);
  background: transparent;
  border: 2px solid var(--r21-primary);
  color: var(--r21-primary);
  font-family: var(--r21-font);
  font-size: .9rem;
  font-weight: 700;
  border-radius: var(--r21-radius);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.r21-load-more-btn:hover { background: var(--r21-primary); color: #fff; }
.r21-load-more-btn:disabled { opacity: .6; cursor: wait; }

/* =========================================
   FOOTER — complementos
   ========================================= */

/* Folio de fecha */
.r21-ftr__folio {
  background: var(--r21-ftr-top);
  border-bottom: 3px solid var(--r21-primary);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.r21-ftr__folio-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--r21-s2);
  padding-top: var(--r21-s2);
  padding-bottom: var(--r21-s2);
  font-size: .75rem;
  color: rgba(255, 255, 255, .85);
}
.r21-ftr__sep { color: rgba(255, 255, 255, .35); }
.r21-ftr__place { margin-left: auto; }

/* Grid footer: corrige a 4 columnas en desktop */
@media (min-width: 1024px) {
  .r21-ftr__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* Menú del footer (wp_nav_menu) */
.r21-ftr__menu { list-style: none; margin: 0; padding: 0; }
.r21-ftr__menu li + li { margin-top: var(--r21-s2); }
.r21-ftr__menu a { color: var(--r21-ftr-text); text-decoration: none; font-size: .9rem; }
.r21-ftr__menu a:hover { color: var(--r21-primary); }

/* Newsletter form */
.r21-ftr__form { display: flex; flex-wrap: wrap; gap: var(--r21-s2); }
.r21-ftr__input {
  flex: 1;
  min-width: 0;
  padding: var(--r21-s2) var(--r21-s3);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r21-radius);
  color: var(--r21-ftr-text);
  font-family: var(--r21-font);
  font-size: .875rem;
}
.r21-ftr__input::placeholder { color: var(--r21-ftr-ghost); }
.r21-ftr__input:focus { outline: 2px solid var(--r21-primary); outline-offset: 2px; }
.r21-ftr__submit {
  padding: var(--r21-s2) var(--r21-s4);
  background: var(--r21-ftr-top);
  border: none;
  border-radius: var(--r21-radius);
  color: #fff;
  font-family: var(--r21-font);
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.r21-ftr__submit:hover { background: var(--r21-primary); }
.r21-ftr__nl-msg { font-size: .8rem; margin: var(--r21-s2) 0 0; color: var(--r21-ftr-muted); }

/* =========================================
   ARCHIVE (archivo genérico y de categoría)
   ========================================= */
.r21-archive__header {
  background: var(--r21-bg);
  color: var(--r21-text);
  padding: var(--r21-s8) var(--r21-content-pad);
  border-bottom: 1px solid var(--r21-border);
}
[data-theme="dark"] .r21-archive__header { background: var(--r21-bg-deep); }

.r21-archive__header-inner {
  max-width: var(--r21-maxw-site);
  margin: 0 auto;
}

.r21-archive__eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--r21-primary);
  margin-bottom: var(--r21-s2);
}

.r21-archive__titulo {
  font-family: var(--r21-font-display);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--r21-accent);
  margin: 0 0 var(--r21-s3);
  line-height: 1.2;
}
[data-theme="dark"] .r21-archive__titulo { color: var(--r21-text); }

.r21-archive__desc {
  font-size: 1rem;
  color: var(--r21-text-soft);
  max-width: 640px;
  line-height: 1.6;
  margin: 0;
}
[data-theme="dark"] .r21-archive__desc { color: var(--r21-text-soft); }

/* Hero de categoría */
.r21-archive__hero {
  margin-bottom: var(--r21-s8);
}

/* Nota vacía */
.r21-archive__empty {
  text-align: center;
  color: var(--r21-text-soft);
  padding: var(--r21-s12) 0;
  font-size: 1.1rem;
}

/* =========================================
   PAGINACIÓN
   ========================================= */
.r21-pagination {
  margin-top: var(--r21-s8);
  display: flex;
  justify-content: center;
}
.r21-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r21-s2);
}
.r21-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--r21-touch);
  height: var(--r21-touch);
  padding: 0 var(--r21-s3);
  border-radius: var(--r21-radius);
  border: 1px solid var(--r21-border);
  background: var(--r21-bg);
  color: var(--r21-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.r21-pagination .page-numbers:hover {
  background: var(--r21-bg-alt);
  border-color: var(--r21-primary);
  color: var(--r21-primary);
}
.r21-pagination .page-numbers.current {
  background: var(--r21-primary);
  border-color: var(--r21-primary);
  color: #fff;
}
.r21-pagination .page-numbers.dots {
  border: none;
  background: transparent;
}

/* =========================================
   NOTA INDIVIDUAL (SINGLE POST)
   ========================================= */
.r21-nota {
  /* El padding y max-width los gestiona .r21-layout */
}

.r21-nota__header {
  margin-bottom: var(--r21-s6);
}

/* .r21-nota__meta-container: sin max-width, ocupa el mismo ancho que la foto (.r21-nota__destacada). */

a.r21-nota__kicker.r21-badge {
  display: inline-block;
  font-size: .75rem;
  margin-bottom: var(--r21-s3);
}

.r21-nota__titulo {
  font-family: var(--r21-font-display);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--r21-text);
  margin: 0 0 var(--r21-s3);
}

.r21-nota__bajada {
  font-family: var(--r21-font);
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--r21-text-soft);
  margin: 0 0 var(--r21-s4);
}

.r21-nota__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r21-s2);
  font-size: .8rem;
  color: var(--r21-text-soft);
  padding-bottom: var(--r21-s4);
  border-bottom: 1px solid var(--r21-border);
}

.r21-nota__meta-sep {
  color: var(--r21-border);
  margin: 0 var(--r21-s1);
}

.r21-nota__destacada {
  margin: var(--r21-s6) auto;
  max-width: var(--r21-maxw-site);
  border-radius: 0;
  overflow: hidden;
}

.r21-nota__destacada img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.r21-nota__caption {
  font-size: .8rem;
  color: var(--r21-text-soft);
  padding: var(--r21-s2) var(--r21-s4);
  background: var(--r21-bg-alt);
  border-left: 3px solid var(--r21-primary);
}

.r21-nota__contenido {
  /* Sin max-width: ocupa el mismo ancho que la foto (.r21-nota__destacada). */
  font-family: var(--r21-font);
  font-size: var(--r21-fs-note);
  line-height: var(--r21-lh-note);
  color: var(--r21-text);
}

/* Tipografía de contenido */
.r21-nota__contenido p {
  margin: 0 0 var(--r21-s4);
}

.r21-nota__contenido h2,
.r21-nota__contenido h3,
.r21-nota__contenido h4 {
  font-family: var(--r21-font-display);
  font-weight: 700;
  color: var(--r21-text);
  margin: var(--r21-s8) 0 var(--r21-s3);
  line-height: 1.3;
}

.r21-nota__contenido h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); }
.r21-nota__contenido h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); }

.r21-nota__contenido a {
  color: var(--r21-primary-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s;
}

.r21-nota__contenido a:hover {
  color: var(--r21-primary-fg);
}

.r21-nota__contenido blockquote {
  border-left: 4px solid var(--r21-primary);
  margin: var(--r21-s6) 0;
  padding: var(--r21-s2) 0 var(--r21-s2) var(--r21-s4);
  font-family: var(--r21-font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--r21-text-soft);
}

.r21-nota__contenido ul,
.r21-nota__contenido ol {
  margin: 0 0 var(--r21-s4);
  padding-left: var(--r21-s6);
}

.r21-nota__contenido li {
  margin-bottom: var(--r21-s2);
}

.r21-nota__contenido figure {
  margin: var(--r21-s6) 0;
}

.r21-nota__contenido figure img {
  border-radius: 0;
  max-width: 100%;
  height: auto;
}

.r21-nota__contenido figcaption {
  font-size: .8rem;
  color: var(--r21-text-soft);
  text-align: center;
  margin-top: var(--r21-s2);
}

.r21-nota__footer {
  margin-top: var(--r21-s8);
  padding-top: var(--r21-s4);
  border-top: 1px solid var(--r21-border);
}

.r21-nota__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--r21-s2);
}

.r21-nota__tags-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--r21-text);
  margin-right: var(--r21-s1);
}

.r21-nota__tags a {
  font-size: .8rem;
  background: var(--r21-bg-alt);
  color: var(--r21-text-soft);
  text-decoration: none;
  padding: var(--r21-s1) var(--r21-s2);
  border-radius: 4px;
  transition: background .15s, color .15s;
}

.r21-nota__tags a:hover {
  background: var(--r21-primary-soft);
  color: var(--r21-primary-fg);
}

.r21-nota__relacionadas {
  margin-top: var(--r21-s12);
  margin-bottom: var(--r21-s8);
}

/* Sin etiquetas superpuestas a la foto en las tarjetas de "Noticias Relacionadas" */
.r21-nota__relacionadas .r21-card__tags {
  display: none;
}
/* =========================================
   QUICKBAR — Compartir / Seguir en Google News
   (entre la foto y el cuerpo de la nota)
   ========================================= */
.r21-nota-quickbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--r21-s3);
	margin: 0 0 var(--r21-s6);
	padding-bottom: var(--r21-s4);
	border-bottom: 1px solid var(--r21-border);
}

.r21-nota-quickbar__share {
	display: inline-flex;
	align-items: center;
	gap: var(--r21-s2);
	padding: var(--r21-s2) var(--r21-s3);
	border: 1px solid var(--r21-border);
	border-radius: var(--r21-radius);
	background: transparent;
	color: var(--r21-text);
	font-family: var(--r21-font);
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: color .15s, background-color .15s, border-color .15s;
}
.r21-nota-quickbar__share:hover {
	background-color: var(--r21-violet);
	border-color: var(--r21-violet);
	color: #fff;
}

.r21-nota-quickbar__gnews {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: var(--r21-s2) var(--r21-s4);
	border: 1px solid var(--r21-border);
	border-radius: 999px; /* Pill de Google News */
	background-color: var(--r21-bg);
	color: var(--r21-text);
	text-decoration: none;
	font-size: .85rem;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color .15s, background-color .15s, color .15s;
}
.r21-nota-quickbar__gnews:hover {
	border-color: #4285F4;
	background-color: rgba(66, 133, 244, 0.04);
	color: var(--r21-text);
}
[data-theme="dark"] .r21-nota-quickbar__gnews {
	background-color: var(--r21-bg-alt);
}
@media (max-width: 400px) {
	.r21-nota-quickbar__gnews span { display: none; }
}

/* =========================================
   ACCIONES DE NOTA (COMPARTIR / SEGUIR)
   ========================================= */
.r21-nota-actions {
	display: flex;
	flex-direction: column;
	gap: var(--r21-s6);
	margin-top: var(--r21-s8);
	padding-top: var(--r21-s6);
	border-top: 1px solid var(--r21-border);
}
@media (min-width: 640px) {
	.r21-nota-actions {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}

.r21-nota-actions__titulo {
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--r21-text-soft);
	margin: 0 0 var(--r21-s3);
}

.r21-nota-actions__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r21-s2);
}
.r21-nota-actions__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--r21-touch);
	height: var(--r21-touch);
	border: 1px solid var(--r21-border);
	border-radius: 50%;
	color: var(--r21-text-soft);
	transition: color .15s, background-color .15s, border-color .15s;
}
.r21-nota-actions__links a:hover {
	background-color: var(--r21-violet);
	border-color: var(--r21-violet);
	color: #fff;
}
.r21-nota-actions__links svg {
	width: 20px;
	height: 20px;
}
.r21-nota-actions__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--r21-s1);
	height: var(--r21-touch);
	padding: 0 var(--r21-s3);
	border: 1px solid var(--r21-border);
	border-radius: var(--r21-radius);
	background: transparent;
	color: var(--r21-text-soft);
	font-family: var(--r21-font);
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	transition: color .15s, background-color .15s, border-color .15s;
}
.r21-nota-actions__copy:hover {
	background-color: var(--r21-violet);
	border-color: var(--r21-violet);
	color: #fff;
}
.r21-nota-actions__copy.is-copied {
	background-color: var(--r21-violet);
	border-color: var(--r21-violet);
	color: #fff;
	cursor: default;
}
.r21-nota-actions__copy-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* =========================================
   CONTACTO
   ========================================= */
.r21-contacto {
  padding-top: var(--r21-s8);
  padding-bottom: var(--r21-s8);
}
.r21-contacto__wrap {
  max-width: 680px;
  margin: 0 auto;
}
.r21-contacto__header { margin-bottom: var(--r21-s8); }
.r21-contacto__titulo {
  font-family: var(--r21-font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--r21-text);
  margin: 0 0 var(--r21-s4);
}
.r21-contacto__intro {
  font-size: 1rem;
  color: var(--r21-text-soft);
  line-height: 1.7;
}

.r21-contacto__alerta {
  padding: var(--r21-s3) var(--r21-s4);
  border-radius: var(--r21-radius);
  margin-bottom: var(--r21-s6);
  font-weight: 600;
  font-size: .95rem;
}
.r21-contacto__alerta--ok {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}
[data-theme="dark"] .r21-contacto__alerta--ok {
  background: #022c22;
  color: #6ee7b7;
  border-color: #065f46;
}
.r21-contacto__alerta--error {
  background: var(--r21-primary-soft);
  color: var(--r21-primary-fg);
  border: 1px solid var(--r21-primary);
}

.r21-contacto__form { display: flex; flex-direction: column; gap: var(--r21-s5); }
.r21-contacto__row--2col {
  display: grid;
  gap: var(--r21-s5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .r21-contacto__row--2col { grid-template-columns: 1fr 1fr; }
}

.r21-contacto__field { display: flex; flex-direction: column; gap: var(--r21-s1); }
.r21-contacto__label {
  font-size: .875rem;
  font-weight: 700;
  color: var(--r21-text);
}
.r21-contacto__req { color: var(--r21-primary); margin-left: 2px; }
.r21-contacto__input {
  background: var(--r21-bg-alt);
  border: 1px solid var(--r21-border);
  border-radius: var(--r21-radius);
  color: var(--r21-text);
  font-family: var(--r21-font);
  font-size: 1rem;
  padding: var(--r21-s3) var(--r21-s4);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.r21-contacto__input:focus {
  outline: none;
  border-color: var(--r21-primary);
  box-shadow: 0 0 0 3px rgba(208, 70, 70, .15);
}
.r21-contacto__textarea { resize: vertical; min-height: 140px; }
.r21-contacto__req-note {
  font-size: .8rem;
  color: var(--r21-text-soft);
  margin: 0;
}
.r21-contacto__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--r21-s3) var(--r21-s8);
  background: var(--r21-primary);
  border: none;
  border-radius: var(--r21-radius);
  color: #fff;
  font-family: var(--r21-font);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
  transition: background .15s;
  min-height: var(--r21-touch-lg);
}
.r21-contacto__submit:hover { background: var(--r21-primary-dark); }
.r21-contacto__submit:focus-visible {
  outline: 2px solid var(--r21-primary);
  outline-offset: 3px;
}

/* Transición AJAX para fade en el cambio de contenido */
.r21-main {
  transition: opacity .25s ease-in-out;
}
.r21-main.r21-loading {
  opacity: 0.35;
  pointer-events: none;
}

/* =========================================
   LAYOUT CON ASIDE (single, category, archive)
   ========================================= */
.r21-layout {
  max-width: var(--r21-maxw-site);
  margin: 0 auto;
  padding: var(--r21-s6) var(--r21-content-pad);
  display: grid;
  gap: var(--r21-s8);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .r21-layout { grid-template-columns: 1fr 300px; }
}

.r21-layout__main { min-width: 0; }

/* Aside */
.r21-aside { display: flex; flex-direction: column; gap: var(--r21-s6); }

@media (min-width: 1024px) {
  .r21-aside {
    position: sticky;
    top: 88px; /* debajo de .r21-header sticky (~71px) + margen */
    align-self: start;
  }
}

.r21-aside__widget {
  background: var(--r21-bg-alt);
  border-top: 3px solid var(--r21-primary);
  padding: var(--r21-s4);
}

.r21-aside__titulo {
  font-family: var(--r21-font-display);
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--r21-text);
  margin: 0 0 var(--r21-s4);
}

/* Lista de notas recientes en aside */
.r21-aside__lista { list-style: none; margin: 0; padding: 0; }
.r21-aside__item {
  padding: var(--r21-s3) 0;
  border-bottom: 1px solid var(--r21-border);
}
.r21-aside__item:last-child { border-bottom: none; }
.r21-aside__item a {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--r21-s3);
  text-decoration: none;
  color: inherit;
}
.r21-aside__item a:hover .r21-aside__item-titulo { color: var(--r21-primary); }
.r21-aside__item-img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--r21-border);
}
.r21-aside__item-titulo {
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--r21-text);
  transition: color .15s;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.r21-aside__item-meta {
  font-size: .75rem;
  color: var(--r21-text-soft);
  margin-top: var(--r21-s1);
}

/* Tags en aside */
.r21-aside__tags { display: flex; flex-wrap: wrap; gap: var(--r21-s2); }

/* =========================================
   PAGE GENÉRICA
   ========================================= */
.r21-page__header {
  margin-bottom: var(--r21-s6);
}
.r21-page__titulo {
  font-family: var(--r21-font-display);
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--r21-text);
  margin: 0 0 var(--r21-s3);
}
.r21-page__destacada {
  margin: var(--r21-s6) 0;
  overflow: hidden;
}
.r21-page__destacada img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* =========================================
   404
   ========================================= */
.r21-404 {
  padding-top: var(--r21-s12);
  padding-bottom: var(--r21-s12);
}

/* Hero centrado */
.r21-404__inner {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--r21-s4);
  padding-bottom: var(--r21-s12);
}
.r21-404__face {
  width: clamp(100px, 20vw, 140px);
  height: auto;
}
.r21-404__code {
  font-family: var(--r21-font-display);
  font-size: clamp(3.5rem, 14vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--r21-primary);
  opacity: .18;
  user-select: none;
  margin: 0;
}
.r21-404__titulo {
  font-family: var(--r21-font-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--r21-text);
  margin: 0;
}
.r21-404__bajada {
  color: var(--r21-text-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.r21-404__busqueda {
  display: flex;
  gap: var(--r21-s2);
  width: 100%;
}
.r21-404__input {
  flex: 1;
  min-width: 0;
  padding: var(--r21-s3) var(--r21-s4);
  background: var(--r21-bg-alt);
  border: 1px solid var(--r21-border);
  border-radius: var(--r21-radius);
  color: var(--r21-text);
  font-family: var(--r21-font);
  font-size: 1rem;
}
.r21-404__input:focus { outline: 2px solid var(--r21-primary); outline-offset: 2px; }
.r21-404__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--r21-touch-lg);
  height: var(--r21-touch-lg);
  flex-shrink: 0;
  background: var(--r21-primary);
  border: none;
  border-radius: var(--r21-radius);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}
.r21-404__submit:hover { background: var(--r21-primary-dark); }
.r21-404__home {
  color: var(--r21-text-soft);
  text-decoration: none;
  font-size: .9rem;
  transition: color .15s;
}
.r21-404__home:hover { color: var(--r21-primary); }

/* Sección últimas noticias */
.r21-404__recientes {
  border-top: 2px solid var(--r21-border);
  padding-top: var(--r21-s8);
}
.r21-404__recientes-titulo {
  font-family: var(--r21-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--r21-text);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 var(--r21-s6);
}
.r21-404__mas-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--r21-s8);
}
.r21-404__mas {
  padding: var(--r21-s3) var(--r21-s8);
  background: transparent;
  border: 2px solid var(--r21-primary);
  border-radius: var(--r21-radius);
  color: var(--r21-primary);
  font-family: var(--r21-font);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.r21-404__mas:hover:not(:disabled) { background: var(--r21-primary); color: #fff; }
.r21-404__mas:disabled { opacity: .6; cursor: wait; }

/* =========================================
   BÚSQUEDA (resultados)
   ========================================= */
.r21-search__header .r21-archive__eyebrow {
  color: var(--r21-secondary-fg);
}
.r21-search__empty {
  display: flex;
  flex-direction: column;
  gap: var(--r21-s6);
  align-items: center;
  padding: var(--r21-s8) 0;
}
.r21-search__form {
  display: flex;
  gap: var(--r21-s2);
  width: 100%;
  max-width: 480px;
}
.r21-search__input {
  flex: 1;
  min-width: 0;
  padding: var(--r21-s3) var(--r21-s4);
  background: var(--r21-bg-alt);
  border: 1px solid var(--r21-border);
  border-radius: var(--r21-radius);
  color: var(--r21-text);
  font-family: var(--r21-font);
  font-size: 1rem;
}
.r21-search__input:focus {
  outline: 2px solid var(--r21-primary);
  outline-offset: 2px;
}
.r21-search__submit {
  padding: var(--r21-s3) var(--r21-s5);
  background: var(--r21-primary);
  border: none;
  border-radius: var(--r21-radius);
  color: #fff;
  font-family: var(--r21-font);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.r21-search__submit:hover { background: var(--r21-primary-dark); }

/* =========================================
   ÚLTIMO MOMENTO
   Reutiliza: .r21-archive__header/eyebrow/titulo/empty, .r21-card__volanta/titulo/link/excerpt,
   .r21-trending-tag, .r21-pagination. CSS nuevo: solo estructura cronológica.
   ========================================= */
.r21-ultimo__dia-sep {
  display: flex;
  align-items: center;
  gap: var(--r21-s4);
  padding: var(--r21-s5) 0 var(--r21-s3);
  color: var(--r21-text-soft);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.r21-ultimo__dia-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--r21-border);
}
.r21-ultimo__item {
  display: flex;
  gap: var(--r21-s4);
  padding: var(--r21-s4) 0;
  border-bottom: 1px solid var(--r21-border);
}
.r21-ultimo__item:last-child { border-bottom: none; }
.r21-ultimo__hora-wrap {
  flex-shrink: 0;
  width: 48px;
  padding-top: 3px;
  text-align: right;
}
.r21-ultimo__hora {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--r21-primary);
  font-variant-numeric: tabular-nums;
}
.r21-ultimo__contenido {
  display: flex;
  gap: var(--r21-s4);
  flex: 1;
  min-width: 0;
}
.r21-ultimo__texto {
  flex: 1;
  min-width: 0;
}
.r21-ultimo__imagen {
  flex-shrink: 0;
  width: 100px;
  align-self: flex-start;
}
.r21-ultimo__imagen a { display: block; }
.r21-ultimo__imagen img { width: 100%; height: 70px; object-fit: cover; display: block; }
@media (max-width: 400px) {
  .r21-ultimo__imagen { display: none; }
  .r21-ultimo__hora-wrap { width: 38px; }
}

/* =========================================
   AUTOR
   ========================================= */
.r21-author-header {
  display: flex;
  align-items: flex-start;
  gap: var(--r21-s6);
  flex-wrap: wrap;
}
.r21-author-header__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--r21-primary);
  flex-shrink: 0;
  object-fit: cover;
}
.r21-author-header__info { flex: 1; min-width: 0; }

/* Utilitario */
.r21-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =========================================
   BARRA DE PROGRESO DE LECTURA
   ========================================= */
.r21-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  z-index: 201; /* sobre el header sticky (200) */
  background: linear-gradient(
    to right,
    var(--r21-primary),
    var(--r21-secondary)
  );
  transition: width .1s linear;
  pointer-events: none;
}

/* ── PÁGINA CLIMA EXTENDIDO ──────────────────────────────── */

.r21-clima-page {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--r21-s8) var(--r21-content-pad);
}
.r21-clima-page__breadcrumb { margin-bottom: var(--r21-s6); }

/* Hero */
.r21-clima-hero {
  background: var(--r21-accent);
  color: #fff;
  border-radius: var(--r21-radius);
  padding: var(--r21-s8) var(--r21-s6);
  text-align: center;
  margin-bottom: var(--r21-s6);
}
.r21-clima-hero__ciudad {
  display: inline-flex;
  align-items: center;
  gap: var(--r21-s2);
  font-size: .85rem;
  font-weight: 600;
  color: #a8b4d4;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--r21-s4);
}
.r21-clima-hero__pin { flex-shrink: 0; }
.r21-clima-hero__principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--r21-s6);
  flex-wrap: wrap;
}
.r21-clima-hero__icon { width: 120px; height: 120px; }
.r21-clima-hero__datos { text-align: left; }
.r21-clima-hero__temp {
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.r21-clima-hero__desc {
  font-size: 1.1rem;
  font-weight: 500;
  color: #c8d4ef;
  margin-top: var(--r21-s2);
  text-transform: capitalize;
}
.r21-clima-hero__sensacion {
  font-size: .85rem;
  color: #8a9abf;
  margin-top: var(--r21-s1);
}
.r21-clima-hero__actualizado {
  font-size: .75rem;
  color: #6a7aaf;
  margin-top: var(--r21-s4);
  margin-bottom: 0;
}

/* Detalles: grid de métricas */
.r21-clima-detalles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--r21-s4);
  margin-bottom: var(--r21-s8);
}
.r21-clima-detalle {
  background: var(--r21-bg-alt);
  border: 1px solid var(--r21-border);
  border-radius: var(--r21-radius);
  padding: var(--r21-s4) var(--r21-s5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--r21-s2);
  text-align: center;
}
.r21-clima-detalle__icono { font-size: 1.5rem; line-height: 1; }
.r21-clima-detalle__label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--r21-text-soft);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.r21-clima-detalle__valor {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--r21-text);
}

/* Pronóstico 5 días */
.r21-clima-pronostico__titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--r21-text-soft);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--r21-s4);
}
.r21-clima-pronostico__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--r21-s3);
}
.r21-clima-dia {
  background: var(--r21-bg-alt);
  border: 1px solid var(--r21-border);
  border-radius: var(--r21-radius);
  padding: var(--r21-s4) var(--r21-s3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--r21-s2);
  text-align: center;
  transition: border-color .15s;
}
.r21-clima-dia--hoy {
  border-color: var(--r21-primary);
  background: var(--r21-primary-soft);
}
.r21-clima-dia__nombre {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--r21-text-soft);
}
.r21-clima-dia--hoy .r21-clima-dia__nombre { color: var(--r21-primary-fg); }
.r21-clima-dia__icon { width: 56px; height: 56px; }
.r21-clima-dia__rango { display: flex; align-items: baseline; gap: .2em; }
.r21-clima-dia__max { font-size: 1rem; font-weight: 700; color: var(--r21-text); }
.r21-clima-dia__sep { color: var(--r21-border); font-size: .85rem; }
.r21-clima-dia__min { font-size: .85rem; color: var(--r21-text-soft); }
.r21-clima-dia__lluvia { font-size: .75rem; color: #4a90d9; font-weight: 600; }

.r21-clima-page__empty { text-align: center; padding: var(--r21-s12) 0; color: var(--r21-text-soft); }

@media (max-width: 599px) {
  .r21-clima-pronostico__grid { grid-template-columns: repeat(3, 1fr); }
  .r21-clima-pronostico__grid .r21-clima-dia:nth-child(n+4) { display: none; }
  .r21-clima-hero__icon { width: 80px; height: 80px; }
  .r21-clima-hero__datos { text-align: center; }
  .r21-clima-hero__principal { flex-direction: column; gap: var(--r21-s4); }
}

/* ---------- Badges de Formato (Video / Galería / Audio) ---------- */
.r21-card__media,
.r21-mosaico__media {
  position: relative;
}
.r21-format-badge {
  position: absolute;
  bottom: var(--r21-s2);
  left: var(--r21-s2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 10;
  transition: transform 0.2s ease;
}
.r21-format-badge svg {
  display: block;
}
.r21-format-badge--video {
  width: auto;
  height: auto;
  border-radius: 4px;
  padding: 4px 8px 4px 6px;
  background: var(--r21-primary);
  gap: 5px;
  font-size: 0;
}
.r21-format-badge--video .r21-format-badge__text {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  font-family: var(--r21-font-display);
}
.r21-format-badge--gallery {
  background: rgba(0, 0, 0, .62);
}
.r21-format-badge--audio {
  background: rgba(0, 80, 60, .75);
}

/* ---------- Componente Playlist de Video ---------- */
.r21-video-playlist {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--r21-bg-alt);
  border: 1px solid var(--r21-border);
  border-radius: var(--r21-radius);
  overflow: hidden;
  box-shadow: var(--r21-shadow);
  margin-bottom: var(--r21-s6);
}

@media (min-width: 768px) {
  .r21-video-playlist {
    grid-template-columns: 2fr 1fr;
  }
}

.r21-video-playlist__player-container {
  display: flex;
  flex-direction: column;
  background: #000;
}

.r21-video-playlist__player-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.r21-video-playlist__player-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.r21-video-playlist__current-info {
  background: rgba(13, 21, 48, 0.95);
  color: #fff;
  padding: var(--r21-s3) var(--r21-s4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.r21-video-playlist__current-label {
  font-size: 0.75rem;
  color: var(--r21-primary-fg);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.r21-video-playlist__current-title {
  margin: 2px 0 0 0;
  font-family: var(--r21-font);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.r21-video-playlist__sidebar {
  display: flex;
  flex-direction: column;
  max-height: 450px;
  background: #111d3a;
  color: #fff;
}

[data-theme="light"] .r21-video-playlist__sidebar {
  background: #fff;
  color: var(--r21-text);
  border-left: 1px solid var(--r21-border);
}

.r21-video-playlist__title {
  font-family: var(--r21-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  padding: var(--r21-s4);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .r21-video-playlist__title {
  border-bottom: 1px solid var(--r21-border);
  background: var(--r21-bg-alt);
}

.r21-video-playlist__list {
  overflow-y: auto;
  flex: 1;
}

/* Scrollbar styling */
.r21-video-playlist__list::-webkit-scrollbar {
  width: 6px;
}
.r21-video-playlist__list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.r21-video-playlist__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
[data-theme="light"] .r21-video-playlist__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.r21-video-playlist__item {
  display: flex;
  align-items: center;
  gap: var(--r21-s3);
  width: 100%;
  padding: var(--r21-s3) var(--r21-s4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

[data-theme="light"] .r21-video-playlist__item {
  border-bottom: 1px solid var(--r21-border);
}

.r21-video-playlist__item:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .r21-video-playlist__item:hover {
  background: var(--r21-bg-alt);
}

.r21-video-playlist__item--active {
  background: rgba(208, 70, 70, 0.15) !important;
  border-left: 3px solid var(--r21-primary);
}

.r21-video-playlist__item-thumb {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 45px;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}

.r21-video-playlist__item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.r21-video-playlist__item--active .r21-video-playlist__item-thumb img {
  opacity: 1;
}

.r21-video-playlist__item-number {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 0.65rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0px 4px;
  border-radius: 2px;
  font-weight: 700;
}

.r21-video-playlist__item-details {
  flex: 1;
}

.r21-video-playlist__item-title {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.r21-video-playlist__item--active .r21-video-playlist__item-title {
  color: var(--r21-primary-fg);
  font-weight: 700;
}