/* Señal Memoria — Home v2 (modernizado)
   Editorial Magazine + Bento + Mesh + Glassmorphism + Exaggerated Minimalism.
   Vanilla CSS + Bootstrap 5 utilities. Portable a Drupal.
*/

/* ============ BASE ============ */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--sm-font-body);
  color: var(--sm-ink-700);
  background: var(--sm-paper-050);
  line-height: var(--sm-leading-base);
  font-size: var(--sm-fs-body);
  font-feature-settings: 'ss01', 'cv11';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sm-font-display);
  font-weight: 700;
  color: var(--sm-ink-950);
  line-height: var(--sm-leading-tight);
  letter-spacing: var(--sm-tracking-tight);
}

a { color: var(--bs-link-color); text-decoration: none; transition: color var(--sm-dur-fast) var(--sm-ease-out); }
a:hover, a:focus { color: var(--bs-link-hover-color); }
/* Links dentro de texto corrido: distinguir por subrayado, no solo color (WCAG 1.4.1) */
p a, small a, li > a:only-child:not([class]),
.sm-identity-text a, .sm-newsletter-hint a, .field--name-body a,
.more-link a, .views-element-container .more-link a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* No subrayar enlaces que son botones/CTAs/tags aunque estén en un <p> */
p a.sm-cta-primary, p a.sm-nav-cta, p a.btn, p a.sm-suggestion-tag,
p a.sm-section-link, p a.sm-podcast-cta { text-decoration: none; }

/* ============ FOCUS GLOBAL ============ */
*:focus-visible {
  outline: var(--sm-focus-ring);
  outline-offset: var(--sm-focus-offset);
  border-radius: 4px;
}

/* ============ SKIP LINK ============ */
.skip-link {
  position: absolute; top: -100px; left: 1rem;
  background: var(--sm-ink-950); color: #fff;
  padding: .85rem 1.5rem; z-index: 9999;
  font-weight: 700; border-radius: 0 0 8px 8px;
  font-family: var(--sm-font-body);
}
.skip-link:focus { top: 0; color: #fff; }

/* ============ TYPOGRAPHIC UTILITIES (editorial) ============ */
.sm-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sm-tracking-wider);
  color: var(--sm-ink-500);
}
.sm-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: currentColor;
}
.sm-section-num {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  font-weight: 500;
  color: var(--sm-ink-500);
  letter-spacing: var(--sm-tracking-wider);
}
.sm-display-1 {
  font-size: var(--sm-fs-display-1);
  font-weight: 900;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
  color: var(--sm-ink-950);
}
.sm-display-2 {
  font-size: var(--sm-fs-display-2);
  font-weight: 800;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
  color: var(--sm-ink-950);
}
.sm-display-italic { font-style: italic; font-weight: 400; }

.sm-lead { font-size: var(--sm-fs-lead); line-height: var(--sm-leading-reading); color: var(--sm-ink-700); max-width: 60ch; }

/* Drop cap editorial */
.sm-drop-cap::first-letter {
  font-family: var(--sm-font-display);
  font-weight: 900;
  font-size: 5em;
  line-height: 0.9;
  float: left;
  padding: .15rem .5rem 0 0;
  color: var(--sm-green-300);
  letter-spacing: var(--sm-tracking-tighter);
}

/* ============ HOTBAR (marquee infinito) ============ */
.sm-hotbar {
  background: var(--sm-ink-950);
  color: var(--sm-paper-050);
  font-size: var(--sm-fs-small);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sm-marquee {
  display: flex;
  white-space: nowrap;
  padding: .65rem 0;
  gap: 3rem;
  animation: sm-scroll 40s linear infinite;
}
.sm-marquee:hover, .sm-marquee:focus-within { animation-play-state: paused; }
.sm-marquee-item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sm-font-mono);
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
  font-size: var(--sm-fs-tag);
}
.sm-marquee-item .sm-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sm-amber-500);
}
.sm-marquee-item a { color: var(--sm-amber-500); }
.sm-marquee-item a:hover { color: #fff; }
@keyframes sm-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============ NAV GLASS STICKY ============ */
.sm-nav-wrap {
  position: sticky; top: 0; z-index: 100;
  background: var(--sm-glass-bg);
  -webkit-backdrop-filter: var(--sm-blur-md);
  backdrop-filter: var(--sm-blur-md);
  border-bottom: 1px solid var(--sm-glass-border);
}
@supports not (backdrop-filter: blur(1px)) {
  .sm-nav-wrap { background: var(--sm-paper-050); }
}
.sm-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; gap: 1rem;
}
.sm-brand {
  display: inline-flex; align-items: center;
  background: var(--sm-green-700);
  padding: .65rem 1.25rem;
  border-radius: 12px;
  line-height: 0;
  transition: background var(--sm-dur-base) var(--sm-ease-out);
}
.sm-brand:hover, .sm-brand:focus { background: var(--sm-green-900); }
.sm-brand-logo {
  display: block;
  height: 48px; width: auto;
  max-width: 100%;
}

.sm-nav-links {
  display: flex; gap: .25rem; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.sm-nav-links > li { position: relative; }
.sm-nav-links a,
.sm-nav-toggle {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .65rem 1rem;
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--sm-ink-900);
  background: transparent; border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--sm-dur-fast) var(--sm-ease-out),
              color var(--sm-dur-fast) var(--sm-ease-out);
}
.sm-nav-links a:hover,
.sm-nav-toggle:hover,
.sm-nav-toggle[aria-expanded="true"] {
  background: var(--sm-ink-100);
  color: var(--sm-ink-950);
}
.sm-nav-links a[aria-current="page"],
.sm-nav-toggle.is-active {
  background: var(--sm-green-700);
  color: #fff;
}
/* La hoja activa dentro del dropdown: fondo verde, texto blanco. */
.sm-nav-submenu a[aria-current="page"] {
  background: var(--sm-green-700);
  color: #fff;
  font-weight: 700;
}
.sm-nav-submenu a[aria-current="page"]:hover,
.sm-nav-submenu a[aria-current="page"]:focus {
  background: var(--sm-green-900);
  color: #fff;
}
.sm-nav-toggle .bi-chevron-down {
  transition: transform var(--sm-dur-base) var(--sm-ease-out);
  font-size: .75rem;
}
.sm-nav-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* Dropdown submenu */
.sm-nav-submenu {
  position: absolute; top: calc(100% + .5rem); left: 0;
  min-width: 220px;
  list-style: none; padding: .5rem; margin: 0;
  background: #fff;
  border: 1px solid var(--sm-border);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--sm-shadow-lg);
  z-index: 50;
}
/* Puente invisible sobre el gap botón→submenu: mantiene el hover al cruzar. */
.sm-nav-submenu::before {
  content: '';
  position: absolute;
  top: -.6rem; left: 0; right: 0;
  height: .6rem;
}
.sm-nav-submenu li { display: block; }
.sm-nav-submenu a {
  display: block;
  padding: .65rem .85rem;
  border-radius: 8px;
  font-weight: 500;
  color: var(--sm-ink-900);
  white-space: nowrap;
}
.sm-nav-submenu a:hover, .sm-nav-submenu a:focus {
  background: var(--sm-green-100);
  color: var(--sm-green-900);
}

.sm-nav-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--sm-ink-950); color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--sm-font-body);
  transition: all var(--sm-dur-base) var(--sm-ease-out);
  border: 0;
}
.sm-nav-cta:hover, .sm-nav-cta:focus {
  background: var(--sm-green-700); color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sm-shadow-md);
}

/* Redes sociales en el header (#10) */
.sm-nav-social {
  display: inline-flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.sm-nav-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  color: var(--sm-ink-700); font-size: 1.05rem;
  transition: background .15s ease, color .15s ease;
}
.sm-nav-social a:hover { background: var(--sm-green-100); color: var(--sm-green-700); }
@media (max-width: 1199px) { .sm-nav-social { display: none; } }

.sm-burger {
  display: none;
  background: transparent; border: 0;
  padding: .5rem; font-size: 1.5rem; color: var(--sm-ink-950);
}
@media (max-width: 991px) {
  .sm-burger { display: inline-flex; }
  .sm-nav-links { display: none; }
  .sm-nav-links.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--sm-paper-050);
    padding: 1rem; border-top: 1px solid var(--sm-border);
    gap: .25rem;
    align-items: stretch;
  }
  .sm-nav-links.is-open > li { width: 100%; }
  .sm-nav-links.is-open a,
  .sm-nav-links.is-open .sm-nav-toggle {
    display: flex; width: 100%; padding: .9rem 1rem;
    justify-content: space-between;
    border-radius: 8px;
  }
  .sm-nav-submenu {
    position: static; box-shadow: none; border: 0;
    background: transparent; padding: 0 0 .5rem 1rem;
    min-width: 0;
  }
  .sm-nav-submenu a { padding: .65rem 1rem; }
}

/* ============ BANNER DE IDENTIDAD (bajo el menú) ============ */
.sm-identity {
  background: var(--sm-green-700);
  color: #fff;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.sm-identity-inner {
  display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
}
.sm-identity-logo {
  flex: none; height: clamp(52px, 6vw, 70px); width: auto; display: block;
}
.sm-identity-text { display: flex; flex-direction: column; gap: .35rem; }
.sm-identity-name {
  font-family: var(--sm-font-display); font-weight: 900;
  color: #fff; margin: 0; line-height: 1;
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  letter-spacing: var(--sm-tracking-tight);
}
.sm-identity-text p {
  margin: 0; color: rgba(255,255,255,.92);
  font-size: clamp(.9rem, 1.2vw, 1rem); line-height: 1.5; max-width: 92ch;
}
@media (max-width: 575px) {
  .sm-identity-inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============ HERO MESH + DISPLAY ============ */
.sm-hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 3.25rem);
  background: var(--sm-paper-050);
  overflow: hidden;
}
.sm-hero::before {
  content: ''; position: absolute; inset: 0;
  background: var(--sm-mesh-1);
  filter: blur(0px);
  opacity: 0.9;
  z-index: 0;
  animation: sm-mesh-drift 24s ease-in-out infinite alternate;
}
@keyframes sm-mesh-drift {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.15) translate(-2%, 2%); }
}
.sm-hero > .container { position: relative; z-index: 1; }

.sm-hero-heading {
  font-size: var(--sm-fs-display-1);
  font-weight: 900;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
  color: var(--sm-ink-950);
  margin-bottom: 2rem;
  max-width: 14ch;
}
.sm-hero-heading .sm-display-italic {
  display: inline-block;
  color: var(--sm-green-700);
}
.sm-hero-meta {
  display: flex; flex-wrap: wrap; gap: 2rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sm-ink-300);
}
.sm-hero-stat .sm-stat-num {
  font-family: var(--sm-font-display);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 800;
  display: block; line-height: 1;
  color: var(--sm-ink-950);
}
.sm-hero-stat .sm-stat-label {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  text-transform: uppercase;
  letter-spacing: var(--sm-tracking-wider);
  color: var(--sm-ink-500);
  margin-top: .35rem; display: block;
}

/* ============ HERO FEATURE (slider modernizado) ============ */
.sm-hero-feature {
  margin-top: 5rem;
  background: var(--sm-ink-950);
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  min-height: clamp(380px, 50vh, 560px);
  color: #fff;
}
@media (max-width: 767px) {
  .sm-hero-feature { grid-template-columns: 1fr; }
}
.sm-hero-feature-img {
  background-size: cover; background-position: center;
  position: relative;
  transition: transform 8s ease;
}
.sm-hero-feature:hover .sm-hero-feature-img { transform: scale(1.03); }
.sm-hero-feature-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(9,9,11,.15) 0%, rgba(9,9,11,.6) 100%);
}
.sm-hero-feature-body {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--sm-ink-950);
}
.sm-hero-feature-body h2 {
  color: #fff;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  margin: 1rem 0 2rem;
}
.sm-hero-feature-controls { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.sm-hero-feature-counter {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  text-transform: uppercase;
  letter-spacing: var(--sm-tracking-wider);
  color: rgba(255,255,255,.6);
}
.sm-hero-feature-counter strong { color: var(--sm-amber-500); }
.sm-hero-feature-nav {
  display: flex; gap: .5rem;
}
.sm-hero-feature-nav button {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  display: grid; place-items: center;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-hero-feature-nav button:hover {
  background: var(--sm-amber-500); border-color: var(--sm-amber-500);
  color: var(--sm-ink-950); transform: scale(1.05);
}
.sm-hero-feature-link {
  display: inline-flex; align-items: center; gap: .65rem;
  color: var(--sm-amber-500); font-weight: 600;
}
.sm-hero-feature-link:hover { color: #fff; gap: 1rem; transition: gap var(--sm-dur-base) var(--sm-ease-out); }

/* ============ BANNER (cinta diagonal sutil) ============ */
.sm-banner {
  padding: 1.5rem 0;
  background: var(--sm-green-700); color: #fff;
  position: relative; overflow: hidden;
}
.sm-banner-text {
  font-family: var(--sm-font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  text-align: center;
}
.sm-banner-text a { color: var(--sm-amber-500); text-decoration: underline; text-underline-offset: 4px; }
.sm-banner-text a:hover { color: #fff; }

/* ============ SEARCH (editorial) ============ */
.sm-search {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
  background: var(--sm-paper-050);
  border-bottom: 1px solid var(--sm-border);
}
.sm-search-title {
  font-size: var(--sm-fs-display-2);
  font-weight: 900;
  letter-spacing: var(--sm-tracking-tighter);
  line-height: var(--sm-leading-display);
  margin-bottom: 1rem;
  color: var(--sm-ink-950);
}
.sm-search-form {
  margin-top: 2.5rem;
  border-bottom: 2px solid var(--sm-ink-950);
  display: flex; align-items: center;
  transition: border-color var(--sm-dur-base) var(--sm-ease-out);
}
.sm-search-form:focus-within { border-color: var(--sm-green-700); }
.sm-search-form input {
  flex: 1;
  border: 0; outline: 0; background: transparent;
  font-family: var(--sm-font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  padding: 1rem 0;
  color: var(--sm-ink-950);
  font-weight: 500;
}
.sm-search-form input::placeholder { color: var(--sm-ink-300); font-style: italic; }
.sm-search-form button {
  background: var(--sm-ink-950); color: #fff;
  border: 0; border-radius: 999px;
  padding: 1rem 1.75rem;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-search-form button:hover { background: var(--sm-green-700); gap: 1rem; }
.sm-search-suggestions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sm-search-suggestions .sm-eyebrow::before { display: none; }
.sm-suggestion-tag {
  font-family: var(--sm-font-mono); font-size: var(--sm-fs-tag);
  padding: .35rem .85rem;
  border: 1px solid var(--sm-border);
  border-radius: 999px;
  color: var(--sm-ink-700); background: #fff;
  transition: all var(--sm-dur-fast) var(--sm-ease-out);
}
.sm-suggestion-tag:hover { background: var(--sm-ink-950); color: #fff; border-color: var(--sm-ink-950); }

/* ============ SECTION OPENER (editorial number) ============ */
.sm-section { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; }
.sm-section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--sm-ink-300);
}
.sm-section-head h2 {
  font-size: var(--sm-fs-display-2);
  font-weight: 900;
  margin: 0;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
}
.sm-section-head .sm-section-num { align-self: start; padding-top: .5rem; }
.sm-section-head .sm-section-link {
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  text-transform: uppercase;
  letter-spacing: var(--sm-tracking-wider);
  color: var(--sm-ink-950);
  display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.sm-section-head .sm-section-link:hover { color: var(--sm-green-700); gap: 1rem; transition: gap var(--sm-dur-base); }

/* ============ TABS — sliding pill indicator ============ */
.sm-tabs {
  position: relative;
  display: inline-flex; flex-wrap: wrap;
  background: var(--sm-ink-100);
  padding: .35rem; border-radius: 999px;
  margin-bottom: 2.5rem;
  gap: 0;
}
.sm-tabs .sm-tab {
  position: relative; z-index: 1;
  background: transparent; border: 0;
  padding: .65rem 1.25rem;
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: var(--sm-fs-small);
  color: var(--sm-ink-700);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color var(--sm-dur-fast) var(--sm-ease-out);
}
.sm-tabs .sm-tab[aria-selected="true"] { color: var(--sm-ink-950); font-weight: 600; }
.sm-tabs .sm-tab-pill {
  position: absolute;
  top: .35rem; bottom: .35rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--sm-shadow-sm);
  transition: transform var(--sm-dur-base) var(--sm-ease-spring),
              width var(--sm-dur-base) var(--sm-ease-spring);
  z-index: 0;
  will-change: transform, width;
}

/* ============ BENTO GRID ============ */
.sm-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 1.25rem;
}
.sm-bento-item {
  position: relative;
  cursor: pointer;
  background: #fff;
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sm-border);
  display: flex; flex-direction: column;
  transition: transform var(--sm-dur-base) var(--sm-ease-out),
              box-shadow var(--sm-dur-base) var(--sm-ease-out);
}
.sm-bento-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sm-shadow-hover);
  border-color: var(--sm-ink-950);
}

/* Bento span variants */
.sm-bento-feature  { grid-column: span 8; grid-row: span 2; }
.sm-bento-tall     { grid-column: span 4; grid-row: span 2; }
.sm-bento-wide     { grid-column: span 8; }
.sm-bento-small    { grid-column: span 4; }
.sm-bento-medium   { grid-column: span 6; }

@media (max-width: 991px) {
  .sm-bento { grid-template-columns: repeat(6, 1fr); }
  .sm-bento-feature, .sm-bento-wide { grid-column: span 6; grid-row: auto; }
  .sm-bento-tall    { grid-column: span 6; grid-row: auto; }
  .sm-bento-small   { grid-column: span 3; }
  .sm-bento-medium  { grid-column: span 6; }
}
@media (max-width: 575px) {
  .sm-bento { grid-template-columns: 1fr; }
  .sm-bento-item { grid-column: 1 / -1; grid-row: auto; }
}

/* Magazine card composition */
.sm-bento-item .sm-bento-media {
  position: relative;
  flex: 1; min-height: 200px;
  background: var(--sm-ink-100) center/cover no-repeat;
  overflow: hidden;
}
.sm-bento-feature .sm-bento-media { min-height: 320px; }
.sm-bento-item .sm-bento-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(9,9,11,.7) 100%);
  opacity: 0; transition: opacity var(--sm-dur-base) var(--sm-ease-out);
}
.sm-bento-item:hover .sm-bento-media::after { opacity: 1; }

.sm-bento-item .sm-bento-tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--sm-ink-950);
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  font-weight: 500;
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
  padding: .35rem .75rem;
  border-radius: 4px;
  /* Cap de ancho: categorías largas no deben tapar la imagen (parity mockup). */
  max-width: calc(100% - 2rem);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sm-bento-item .sm-bento-kind {
  position: absolute; bottom: 1rem; left: 1rem; z-index: 2;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  font-weight: 500;
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
  color: #fff;
  display: inline-flex; align-items: center; gap: .5rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.sm-bento-item .sm-bento-body {
  padding: 1.5rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.sm-bento-feature .sm-bento-body { padding: 2rem; }

.sm-bento-item h3 {
  font-family: var(--sm-font-display);
  font-size: var(--sm-fs-h3);
  margin: 0;
  line-height: var(--sm-leading-tight);
  letter-spacing: var(--sm-tracking-tight);
}
.sm-bento-feature h3 {
  font-size: var(--sm-fs-display-3);
  font-weight: 800;
}
.sm-bento-item h3 a {
  color: var(--sm-ink-950);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-size: 0% 1px;
  background-repeat: no-repeat;
  transition: background-size var(--sm-dur-base) var(--sm-ease-out);
}
.sm-bento-item:hover h3 a { background-size: 100% 1px; }

.sm-bento-item .sm-bento-meta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  color: var(--sm-ink-500);
  letter-spacing: var(--sm-tracking-wider);
  text-transform: uppercase;
}
.sm-bento-item .sm-bento-meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* Magazine numero grande (01 02) en feature card */
.sm-bento-feature::before { content: none; }

/* ============ DESTACADOS MES (editorial split) ============ */
.sm-mes {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 767px) { .sm-mes { grid-template-columns: 1fr; gap: 2rem; } }
.sm-mes-side h2 {
  font-size: var(--sm-fs-display-2);
  font-weight: 900;
  line-height: var(--sm-leading-display);
  letter-spacing: var(--sm-tracking-tighter);
}
.sm-mes-side p { font-size: var(--sm-fs-lead); margin-top: 1.5rem; color: var(--sm-ink-700); }
.sm-mes-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.sm-mes-card {
  display: grid;
  grid-template-columns: 80px 1fr 140px;
  gap: 1.5rem; align-items: center;
  padding: 1.5rem 0;
  border-top: 1px solid var(--sm-ink-300);
  transition: padding var(--sm-dur-base) var(--sm-ease-out);
}
.sm-mes-card:hover { padding-left: 1rem; padding-right: 1rem; background: var(--sm-paper-050); }
.sm-mes-card:last-child { border-bottom: 1px solid var(--sm-ink-300); }
.sm-mes-num {
  font-family: var(--sm-font-display);
  font-style: italic; font-weight: 500;
  font-size: 3rem; line-height: 1;
  color: var(--sm-ink-300);
}
.sm-mes-card:hover .sm-mes-num { color: var(--sm-green-700); }
.sm-mes-info h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 700; margin: 0 0 .25rem;
}
.sm-mes-info h3 a { color: var(--sm-ink-950); }
.sm-mes-info .sm-eyebrow { color: var(--sm-ink-500); margin-bottom: .5rem; }
.sm-mes-info .sm-eyebrow::before { display: none; }
.sm-mes-thumb {
  width: 140px; height: 90px;
  background: var(--sm-ink-100) center/cover no-repeat;
  border-radius: 8px;
}
@media (max-width: 575px) {
  .sm-mes-card { grid-template-columns: 60px 1fr; }
  .sm-mes-thumb { display: none; }
  .sm-mes-num { font-size: 2rem; }
}

/* ============ LA VOZ DEL PODER (editorial dark) ============ */
.sm-lvp {
  background: var(--sm-ink-950); color: #fff;
  padding: clamp(2.75rem, 5vw, 4.25rem) 0;
  position: relative; overflow: hidden;
}
.sm-lvp::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(at 90% 10%, rgba(249,176,45,0.15) 0px, transparent 50%),
    radial-gradient(at 10% 90%, rgba(107,33,168,0.2) 0px, transparent 50%);
  z-index: 0;
}
.sm-lvp > .container { position: relative; z-index: 1; }
.sm-lvp h2 { color: #fff; font-size: var(--sm-fs-display-1); font-weight: 900; letter-spacing: var(--sm-tracking-tighter); line-height: var(--sm-leading-display); }
.sm-lvp h2 em { color: var(--sm-amber-500); font-style: italic; font-weight: 500; }
.sm-lvp .sm-lead { color: rgba(255,255,255,.7); }
.sm-lvp .sm-eyebrow { color: var(--sm-amber-500); }

.sm-lvp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  margin-top: 4rem;
}
@media (max-width: 991px) { .sm-lvp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .sm-lvp-grid { grid-template-columns: repeat(2, 1fr); } }

.sm-lvp-card {
  text-align: left;
  transition: transform var(--sm-dur-base) var(--sm-ease-out);
}
.sm-lvp-card:hover { transform: translateY(-6px); }
.sm-lvp-portrait {
  aspect-ratio: 3/4;
  background: var(--sm-ink-900) center/cover no-repeat;
  border-radius: var(--bs-border-radius);
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  filter: grayscale(0.4) contrast(1.05);
  transition: filter var(--sm-dur-slow) var(--sm-ease-out);
}
.sm-lvp-card:hover .sm-lvp-portrait { filter: grayscale(0) contrast(1); }
.sm-lvp-portrait::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(9,9,11,.8) 100%);
}
.sm-lvp-num {
  position: absolute; top: .75rem; left: .75rem; z-index: 1;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag);
  color: var(--sm-amber-500);
  background: rgba(9,9,11,.6);
  padding: .25rem .5rem; border-radius: 4px;
  letter-spacing: var(--sm-tracking-wider);
}
.sm-lvp-card h3 {
  color: #fff; font-size: 1.1rem; line-height: 1.25;
  margin: 0 0 .35rem;
}
.sm-lvp-card h3 a { color: #fff; }
.sm-lvp-card h3 a:hover { color: var(--sm-amber-500); }
.sm-lvp-period { font-family: var(--sm-font-mono); font-size: var(--sm-fs-tag); color: var(--sm-amber-500); letter-spacing: var(--sm-tracking-wider); }

/* ============ PODCAST ============ */
.sm-podcast {
  background: linear-gradient(135deg, var(--sm-purple-900) 0%, var(--sm-purple-700) 70%, var(--sm-ink-950) 100%);
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
  color: #fff;
  position: relative; overflow: hidden;
}
.sm-podcast::before {
  content: '01'; position: absolute;
  top: -2rem; right: -2rem;
  font-family: var(--sm-font-display); font-weight: 900; font-style: italic;
  font-size: clamp(10rem, 30vw, 26rem);
  color: rgba(255,255,255,.05);
  line-height: 1; z-index: 0;
  user-select: none;
}
.sm-podcast > .container { position: relative; z-index: 1; }
.sm-podcast-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: center; }
@media (max-width: 767px) { .sm-podcast-grid { grid-template-columns: 1fr; gap: 2rem; } }
.sm-podcast-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--sm-shadow-lg);
}
.sm-podcast h2 { color: #fff; font-size: var(--sm-fs-display-1); font-weight: 900; letter-spacing: var(--sm-tracking-tighter); line-height: var(--sm-leading-display); margin: 1rem 0 1.5rem; }
.sm-podcast .sm-lead { color: rgba(255,255,255,.85); }
.sm-podcast .sm-eyebrow { color: var(--sm-amber-500); }
.sm-podcast-cta {
  display: inline-flex; align-items: center; gap: .75rem;
  margin-top: 2rem;
  background: var(--sm-amber-500); color: var(--sm-ink-950);
  padding: 1rem 1.75rem; border-radius: 999px;
  font-weight: 700;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-podcast-cta:hover { background: #fff; color: var(--sm-ink-950); gap: 1.25rem; transform: translateY(-2px); }

/* ============ ESPECIALES (cards editorial) ============ */
.sm-especiales { background: var(--sm-paper-050); }
.sm-especial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 991px) { .sm-especial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sm-especial-grid { grid-template-columns: 1fr; } }
.sm-especial-card {
  background: #fff;
  border: 1px solid var(--sm-border);
  border-radius: var(--bs-border-radius-lg);
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
  position: relative; overflow: hidden;
}
.sm-especial-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--sm-green-700);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--sm-dur-base) var(--sm-ease-out);
}
.sm-especial-card:hover {
  border-color: var(--sm-ink-950);
  transform: translateY(-4px); box-shadow: var(--sm-shadow-md);
}
.sm-especial-card:hover::before { transform: scaleX(1); }
.sm-especial-card h3 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  margin: 0; line-height: 1.15;
}
.sm-especial-card h3 a { color: var(--sm-ink-950); }
.sm-especial-card .sm-arrow {
  margin-top: auto; align-self: flex-end;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--sm-ink-100);
  display: grid; place-items: center;
  color: var(--sm-ink-950);
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-especial-card:hover .sm-arrow { background: var(--sm-green-700); color: #fff; transform: translateX(4px); }

/* ============ CTA GRID (timeline + mapa) ============ */
.sm-cta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 767px) { .sm-cta-grid { grid-template-columns: 1fr; } }
.sm-cta-card {
  position: relative;
  min-height: 360px;
  border-radius: var(--bs-border-radius-xl);
  overflow: hidden;
  background: var(--sm-ink-950) center/cover no-repeat;
  color: #fff;
  padding: 2.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform var(--sm-dur-base) var(--sm-ease-out);
}
.sm-cta-card:hover { transform: translateY(-6px); }
.sm-cta-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(9,9,11,.92));
}
.sm-cta-card > * { position: relative; z-index: 1; }
.sm-cta-card h3 {
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: var(--sm-tracking-tighter);
  margin: 1rem 0;
}
.sm-cta-card p { color: rgba(255,255,255,.85); margin-bottom: 1.5rem; }
.sm-cta-card .sm-eyebrow { color: var(--sm-amber-500); }
.sm-cta-card .sm-cta-btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .75rem;
  background: #fff; color: var(--sm-ink-950);
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 700;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-cta-card .sm-cta-btn:hover { background: var(--sm-amber-500); gap: 1rem; }

/* ============ RTVC EN CONTENIDOS (sister channels) ============ */
.sm-rtvc { background: var(--sm-paper-050); }
.sm-rtvc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 991px) { .sm-rtvc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sm-rtvc-grid { grid-template-columns: 1fr; } }
.sm-rtvc-card {
  position: relative;
  display: block;
  background: var(--sm-ink-950); color: #fff;
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
  min-height: 320px;
  text-decoration: none;
  transition: transform var(--sm-dur-base) var(--sm-ease-out);
}
.sm-rtvc-card:hover { transform: translateY(-6px); color: #fff; }
.sm-rtvc-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 6s ease;
}
.sm-rtvc-card:hover .sm-rtvc-bg { transform: scale(1.06); }
.sm-rtvc-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,9,11,.25) 0%, rgba(9,9,11,.92) 75%);
}
.sm-rtvc-logo {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  height: 32px; width: auto;
  background: rgba(9,9,11,.6);
  padding: .4rem .6rem;
  border-radius: 6px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sm-rtvc-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 1.5rem;
}
.sm-rtvc-info h3 {
  color: #fff; font-size: 1.15rem; font-weight: 700;
  line-height: 1.25; margin: 0 0 .5rem;
  letter-spacing: var(--sm-tracking-tight);
}
.sm-rtvc-info p {
  color: rgba(255,255,255,.85);
  font-size: var(--sm-fs-small); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.sm-banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;       /* celdas de igual alto */
  gap: 1rem;
}
@media (max-width: 767px) { .sm-banners { grid-template-columns: 1fr; grid-auto-rows: auto; } }
.sm-banner-pq {
  display: block;
  height: 100%;            /* referencia de altura para que la img llene la celda */
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  box-shadow: var(--sm-shadow-sm);
  transition: transform var(--sm-dur-base) var(--sm-ease-out), box-shadow var(--sm-dur-base) var(--sm-ease-out);
}
@media (max-width: 767px) { .sm-banner-pq { height: auto; } }
/* Llena toda la altura de la celda (banners de distinto ratio quedan parejos).
   object-fit: cover recorta lo mínimo y centra. */
.sm-banner-pq img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .sm-banner-pq img { height: auto; } }
.sm-banner-pq:hover { transform: translateY(-2px); box-shadow: var(--sm-shadow-md); }

/* ============ STATS (display gigante) ============ */
.sm-stats { background: var(--sm-ink-950); color: #fff; padding: clamp(2.25rem, 4.5vw, 3.25rem) 0; }
.sm-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 767px) { .sm-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.sm-stats h2 { color: #fff; font-size: var(--sm-fs-display-2); font-weight: 900; letter-spacing: var(--sm-tracking-tighter); margin-bottom: 3rem; }
.sm-stats h2 em { color: var(--sm-amber-500); font-style: italic; font-weight: 500; }
.sm-stat-block { border-top: 2px solid rgba(255,255,255,.15); padding-top: 1.5rem; }
.sm-stat-block .sm-stat-num {
  font-family: var(--sm-font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  display: block; line-height: 1;
  color: var(--sm-amber-500);
  letter-spacing: var(--sm-tracking-tighter);
}
.sm-stat-block .sm-stat-label {
  font-family: var(--sm-font-mono); font-size: var(--sm-fs-tag);
  text-transform: uppercase; letter-spacing: var(--sm-tracking-wider);
  color: rgba(255,255,255,.7);
  margin-top: .75rem; display: block;
}

/* ============ NEWSLETTER ============ */
.sm-newsletter {
  background: var(--sm-paper-100);
  padding: clamp(2.25rem, 4.5vw, 3.25rem) 0;
}
.sm-newsletter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; }
@media (max-width: 767px) { .sm-newsletter-grid { grid-template-columns: 1fr; gap: 2rem; } }
.sm-newsletter h2 { font-size: var(--sm-fs-display-2); font-weight: 900; letter-spacing: var(--sm-tracking-tighter); line-height: var(--sm-leading-display); }
.sm-newsletter h2 em { font-style: italic; font-weight: 500; color: var(--sm-green-700); }
.sm-newsletter .sm-lead { margin-top: 1rem; }
.sm-newsletter-form {
  border-bottom: 2px solid var(--sm-ink-950);
  display: flex; align-items: center;
}
.sm-newsletter-form:focus-within { border-color: var(--sm-green-700); }
.sm-newsletter-form input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--sm-font-body);
  font-size: 1.25rem; padding: 1rem 0;
  color: var(--sm-ink-950);
}
.sm-newsletter-form input::placeholder { color: var(--sm-ink-500); }
.sm-newsletter-form button {
  background: var(--sm-ink-950); color: #fff;
  border: 0; border-radius: 999px;
  padding: .85rem 1.5rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: all var(--sm-dur-base) var(--sm-ease-out);
}
.sm-newsletter-form button:hover { background: var(--sm-green-700); gap: 1rem; }
.sm-newsletter-hint { margin-top: .75rem; font-size: var(--sm-fs-small); color: var(--sm-ink-500); }

/* ============ FOOTER ============ */
.sm-footer { background: var(--sm-ink-950); color: #d4d4d8; padding: clamp(2.75rem, 5vw, 4rem) 0 0; }
.sm-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem; padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 991px) { .sm-footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 575px) { .sm-footer-top { grid-template-columns: 1fr; } }
.sm-footer-logo {
  display: block;
  height: 56px; width: auto;
  max-width: 100%;
  margin-bottom: 1rem;
}
.sm-footer p { color: rgba(255,255,255,.6); margin-top: 1rem; max-width: 30ch; }
.sm-footer h2 {
  color: #fff; font-family: var(--sm-font-mono);
  font-size: var(--sm-fs-tag); text-transform: uppercase;
  letter-spacing: var(--sm-tracking-wider);
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.sm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.sm-footer a { color: #d4d4d8; }
.sm-footer a:hover { color: var(--sm-amber-500); }
.sm-footer-logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 2rem;
  padding: 2.5rem 1.5rem;
  background: #fff;
  border-radius: var(--bs-border-radius-lg);
  margin-top: 2.5rem;
}
.sm-footer-logos img {
  max-height: 56px;
  width: auto;
  filter: grayscale(0.2);
  opacity: 0.85;
  transition: filter var(--sm-dur-base) var(--sm-ease-out), opacity var(--sm-dur-base) var(--sm-ease-out);
}
.sm-footer-logos img:hover { filter: grayscale(0); opacity: 1; }

.sm-footer-bottom {
  padding: 1.5rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  font-size: var(--sm-fs-small);
  color: rgba(255,255,255,.5);
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 2rem;
}
.sm-footer-bottom a { color: rgba(255,255,255,.7); }
.sm-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ============ BACK TO TOP ============ */
.sm-back-to-top {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--sm-ink-950); color: #fff;
  border: 0; border-radius: 50%;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  box-shadow: var(--sm-shadow-md);
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transform: translateY(20px);
  transition: opacity var(--sm-dur-base) var(--sm-ease-out),
              transform var(--sm-dur-base) var(--sm-ease-out),
              background var(--sm-dur-base) var(--sm-ease-out);
}
.sm-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sm-back-to-top:hover { background: var(--sm-green-700); transform: translateY(-4px); }

/* ============ SCROLL-DRIVEN ANIMATIONS (CSS nativo, progressive enhancement) ============ */
@supports (animation-timeline: view()) {
  .sm-reveal {
    animation: sm-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes sm-reveal-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Scroll progress bar */
  .sm-scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: var(--sm-green-700);
    transform-origin: 0 50%;
    z-index: 9998;
    animation: sm-progress linear;
    animation-timeline: scroll(root);
  }
  @keyframes sm-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}
@supports not (animation-timeline: view()) {
  .sm-scroll-progress { display: none; }
}

/* ============ TEXT RESIZE A11Y CONTROLS ============ */
.sm-a11y {
  position: fixed; bottom: 1.5rem; left: 1.5rem;
  background: var(--sm-paper-000);
  border: 1px solid var(--sm-border);
  border-radius: 999px;
  padding: .35rem;
  display: flex; gap: .25rem;
  box-shadow: var(--sm-shadow-sm);
  z-index: 999;
}
.sm-a11y button {
  background: transparent; border: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-family: var(--sm-font-body);
  font-weight: 700; color: var(--sm-ink-700);
  cursor: pointer;
  transition: all var(--sm-dur-fast) var(--sm-ease-out);
}
.sm-a11y button:hover { background: var(--sm-ink-100); color: var(--sm-ink-950); }

/* ============================================================
   OBSERVACIONES RONDA 2 — HOME
   ============================================================ */

/* Botón Catálogo más grande (obs #2) */
.sm-nav-cta-lg { padding: 1rem 1.75rem; font-size: 1.0625rem; font-weight: 700; }
.sm-nav-cta-lg .bi-search { font-size: 1.15rem; }

/* Tooltip Lengua de Señas (patrón rtvc10, paleta SM) */
.sign-language-tooltip {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); z-index: 10000;
  width: 180px; background: #fff;
  border: 2px solid var(--sm-green-700, #2e7632);
  border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.2);
  padding: 10px; margin-top: 12px;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
/* Flecha apuntando hacia arriba (tooltip debajo del item, evita corte en el borde superior) */
.sign-language-tooltip::after {
  content: ''; position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-bottom: 10px solid #fff; filter: drop-shadow(0 -2px 1px rgba(0,0,0,.1));
}
.sign-language-tooltip::before {
  content: ''; position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-bottom: 12px solid var(--sm-green-700, #2e7632);
}
/* En el submenú (dropdown vertical): tooltip al lado derecho para no tapar items */
.sm-nav-submenu li { position: relative; }
.sm-nav-submenu .sign-language-tooltip {
  top: 50%; left: 100%; bottom: auto;
  transform: translateY(-50%);
  margin: 0 0 0 14px;
}
.sm-nav-submenu .sign-language-tooltip::after {
  top: 50%; left: -10px; bottom: auto;
  transform: translateY(-50%);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  border-right: 10px solid #fff; border-left: 0;
  filter: drop-shadow(-2px 0 1px rgba(0,0,0,.1));
}
.sm-nav-submenu .sign-language-tooltip::before {
  top: 50%; left: -13px; bottom: auto;
  transform: translateY(-50%);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  border-right: 12px solid var(--sm-green-700, #2e7632); border-left: 0;
}

.sign-language-tooltip.is-visible { opacity: 1; }
.sign-language-tooltip__img { display: block; width: 100%; height: auto; border-radius: 6px; }
.sign-language-tooltip__spinner {
  width: 34px; height: 34px; margin: 36px auto;
  border: 4px solid #e6e6e6; border-top-color: var(--sm-green-700, #2e7632);
  border-radius: 50%; animation: sl-tooltip-spin .8s linear infinite;
}
@keyframes sl-tooltip-spin { to { transform: rotate(360deg); } }

/* Lo más reciente al inicio: separación bajo nav + título reducido + piezas más pequeñas (obs #3) */
.sm-reciente-top { padding-top: 2.5rem; }
.sm-reciente-title { font-size: var(--sm-fs-h2, 2rem) !important; }
.sm-reciente-top .sm-bento-item h3 { font-size: 1.0625rem; }
.sm-reciente-top .sm-bento-feature { grid-row: span 1; }
.sm-reciente-top .sm-bento { gap: 1rem; }

/* Voces en Resonancia (obs #6a) */
.sm-voces { padding: clamp(2.5rem, 4.5vw, 3.75rem) 0; }
.sm-voces-card {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch;
  border-radius: 20px; overflow: hidden; text-decoration: none; color: #fff;
  background: var(--sm-ink-950, #09090b); min-height: 340px;
  box-shadow: 0 14px 50px rgba(0,0,0,.25); transition: transform .3s ease, box-shadow .3s ease;
}
.sm-voces-card:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(0,0,0,.32); }
.sm-voces-bg { background-size: cover; background-position: center; min-height: 240px; }
.sm-voces-body { padding: 2.75rem; display: flex; flex-direction: column; justify-content: center; }
.sm-voces-body .sm-eyebrow { color: var(--sm-amber-500, #f9b02d); }
.sm-voces-body h2 { font-family: var(--sm-font-display); font-weight: 900; font-size: clamp(2rem,3.5vw,3rem); margin: .5rem 0 1rem; color: #fff; }
.sm-voces-body h2 em { color: var(--sm-amber-500, #f9b02d); font-style: italic; font-weight: 400; }
.sm-voces-body .sm-lead { color: rgba(255,255,255,.85); }
@media (max-width: 767px) { .sm-voces-card { grid-template-columns: 1fr; } .sm-voces-body { padding: 1.75rem; } }

/* Colombia al Día (obs #6b) */
.sm-cad { position: relative; overflow: hidden; color: #fff; padding: clamp(2.5rem,4.5vw,3.5rem) 0;
  background-color: var(--sm-green-900, #1f5023); /* Fallback oscuro tras la imagen: contraste real del texto blanco + si la imagen no carga */ }
.sm-cad-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.sm-cad::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(9,9,11,.92) 0%, rgba(9,9,11,.78) 45%, rgba(9,9,11,.35) 100%); }
.sm-cad-inner { position: relative; z-index: 2; }
.sm-cad-body { max-width: 56ch; }
.sm-cad-body .sm-eyebrow { color: var(--sm-amber-500, #f9b02d); }
.sm-cad-body h2 { font-family: var(--sm-font-display); font-weight: 900; font-size: clamp(2.4rem,5vw,4rem); margin: .5rem 0 1rem; color: #fff; line-height: 1; }
.sm-cad-body h2 em { color: var(--sm-amber-500, #f9b02d); font-style: italic; font-weight: 400; }
.sm-cad-body .sm-lead { color: rgba(255,255,255,.88); }
.sm-cad-actions { margin-top: 1.75rem; }
/* CTA sólido del bloque CAD (home no carga el .sm-cta-primary de las páginas interiores).
   Amber + texto oscuro = contraste AA (~11:1) y consistente con la marca. */
.sm-cad .sm-cta-primary {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--sm-amber-500); color: var(--sm-ink-950);
  font-family: var(--sm-font-body); font-weight: 700;
  padding: .85rem 1.6rem; border-radius: 999px; text-decoration: none;
  transition: background var(--sm-dur-base) var(--sm-ease-out),
              transform var(--sm-dur-base) var(--sm-ease-out), gap var(--sm-dur-base) var(--sm-ease-out);
}
.sm-cad .sm-cta-primary:hover { background: #fff; color: var(--sm-ink-950); transform: translateY(-2px); gap: 1rem; }

/* Nuestros Libros (obs #8) */
.sm-libros-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
@media (max-width: 991px) { .sm-libros-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .sm-libros-grid { grid-template-columns: 1fr; } }
.sm-libro-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.10); transition: transform .3s ease, box-shadow .3s ease;
}
.sm-libro-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.sm-libro-cover { aspect-ratio: 1 / 1; overflow: hidden; background: #ececec; }
.sm-libro-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.sm-libro-card:hover .sm-libro-cover img { transform: scale(1.04); }
.sm-libro-info { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.sm-libro-info h3 { font-family: var(--sm-font-display); font-weight: 800; font-size: 1.0625rem; margin: 0; line-height: 1.25; }
.sm-libro-sub { font-size: .875rem; color: var(--sm-ink-600, #57534e); flex: 1; }
.sm-libro-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-weight: 700; color: var(--sm-green-700, #2e7632); }
.sm-libro-card:hover .sm-libro-cta { text-decoration: underline; }

/* Encuesta (obs #10) */
.sm-encuesta-action { display: flex; flex-direction: column; gap: .85rem; align-items: flex-start; justify-content: center; }

/* ============================================================
   ACCESIBILIDAD — botones extra (alto contraste, lector) + modo alto contraste
   ============================================================ */

/* Estado activo de los botones de la barra a11y */
.sm-a11y button[aria-pressed="true"],
.sm-a11y button.active {
  background: var(--sm-green-700, #2e7632);
  color: #fff;
}
.sm-a11y button[disabled] { opacity: .45; cursor: not-allowed; }

/* ===== MODO ALTO CONTRASTE (negro / amarillo, técnica :where para baja especificidad) ===== */
body.high-contrast { background: #000 !important; }
body.high-contrast :where(*:not(.sm-a11y):not(.sm-a11y *):not(img)) {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #6b6b6b !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* Quitar gradientes/fondos CSS (ej. morado del podcast); conservar imágenes inline para filtrarlas */
body.high-contrast :where(*:not(.sm-a11y):not(.sm-a11y *):not([style*="background-image"])) {
  background-image: none !important;
}
/* Enlaces y acentos en amarillo */
body.high-contrast :where(a, a *, .sm-eyebrow, .sm-section-num, .sm-display-italic, em, .sm-suggestion-tag) {
  color: #ffe600 !important;
}
/* Subrayar enlaces para no depender solo del color */
body.high-contrast :where(main a, footer a) { text-decoration: underline !important; }
/* Botones / CTAs destacados: amarillo sobre negro */
body.high-contrast :where(.sm-cta-primary, .sm-nav-cta, .sm-podcast-cta, .sm-cta-btn,
  .sm-search-form button, .sm-tab[aria-selected="true"], .sm-libro-cta, .sm-section-link) {
  background-color: #ffe600 !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}
body.high-contrast :where(.sm-cta-primary *, .sm-nav-cta *, .sm-podcast-cta *,
  .sm-cta-btn *, .sm-search-form button *, .sm-libro-cta *, .sm-section-link *) { color: #000 !important; }
/* Imágenes y fondos con imagen: escala de grises + contraste */
body.high-contrast img,
body.high-contrast :where([style*="background-image"]) { filter: grayscale(1) contrast(1.2) brightness(.85) !important; }
/* Foco muy visible */
body.high-contrast :where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid #ffe600 !important; outline-offset: 2px !important;
}
/* Barra de accesibilidad: alta visibilidad, excluida de la inversión */
body.high-contrast .sm-a11y { background: #ffe600 !important; border: 2px solid #000 !important; }
body.high-contrast .sm-a11y button { background: #000 !important; color: #ffe600 !important; border: 1px solid #000 !important; }
body.high-contrast .sm-a11y button[aria-pressed="true"],
body.high-contrast .sm-a11y button.active { background: #fff !important; color: #000 !important; }
/* Tooltip señas legible en alto contraste */
body.high-contrast .sign-language-tooltip { background: #000 !important; border-color: #ffe600 !important; }
/* Los enlaces-overlay (stretched-link) cubren la tarjeta con position:absolute;inset:0.
   En alto contraste la regla de inversión les pone fondo negro opaco y tapan la imagen.
   Mantenerlos transparentes: son superposiciones de clic invisibles, nunca llevan fondo. */
body.high-contrast :where(.stretched-link, .sm-bento-link, .sm-card-link) { background-color: transparent !important; }

/* ============ FASE 4 — imagen de campo dentro del bento (vista lo_mas_reciente) ============ */
.sm-bento-media > .field,
.sm-bento-media > .field .field__item { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-bento-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Enlace que cubre toda la card (clic en cualquier parte) */
.sm-bento-link.stretched-link { position: absolute; inset: 0; z-index: 3; }
.sm-bento-link.stretched-link::after { content: ""; position: absolute; inset: 0; }
/* Las vistas de Drupal pueden envolver el bento en .view; que no rompa el grid */
.sm-section .view .sm-bento { margin: 0; }

/* Ocultar formulario expuesto/cabecera de la vista en "Lo más reciente" (la maqueta usa sus tabs) */
.sm-reciente-top .views-exposed-form,
.sm-reciente-top .view-filters,
.sm-reciente-top .view-header { display: none !important; }

/* ============ EU Cookie Compliance — evitar solape con controles flotantes ============ */
/* Mientras el banner de cookies está visible (status-null), subir barra a11y y back-to-top */
body.eu-cookie-compliance-status-null .sm-a11y,
body.eu-cookie-compliance-status-null .sm-back-to-top { bottom: 9rem; }
@media (max-width: 767px) {
  body.eu-cookie-compliance-status-null .sm-a11y,
  body.eu-cookie-compliance-status-null .sm-back-to-top { bottom: 12rem; }
}
/* Asegurar que los controles queden por encima del banner si coinciden */
.sm-a11y { z-index: 100000; }
.sm-back-to-top { z-index: 100000; }

/* Ocultar el back-to-top duplicado del módulo contrib back_to_top
   (el tema 2026 ya provee el suyo, .sm-back-to-top). */
#backtotop,
nav[aria-label]:has(> #backtotop) { display: none !important; }

/* Ocultar el bloque text_resize (A-/A/A+) duplicado: la barra de
   accesibilidad del tema (.sm-a11y) ya provee redimensionado de texto. */
.block-text-resize-block { display: none !important; }

/* ---- Estilo del banner (tema 2026: verde marca + píldora) ---- */
body #sliding-popup,
body #sliding-popup .eu-cookie-compliance-banner {
  background: var(--sm-green-900);
  color: var(--sm-paper-000);
  width: 100%;
  left: 0;
  margin: 0;
  z-index: 99999;
}
body #sliding-popup {
  position: fixed;
  bottom: 0;
  border-top: 4px solid var(--sm-amber-500);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
}
body #sliding-popup .popup-content.eu-cookie-compliance-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sm-sp-3);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sm-sp-3) var(--sm-sp-4);
}
body #sliding-popup #popup-text {
  flex: 1 1 24rem;
  margin: 0;
  max-width: none;
}
body #sliding-popup #popup-text p {
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-small);
  line-height: var(--sm-leading-base);
  color: var(--sm-paper-000);
  margin: 0;
  display: inline;
}
body #sliding-popup #popup-text .find-more-button {
  display: inline;
  margin: 0 0 0 .35em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sm-paper-000);
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
body #sliding-popup #popup-text .find-more-button:hover { color: var(--sm-amber-500); }
body #sliding-popup #popup-buttons {
  display: flex;
  gap: var(--sm-sp-2);
  margin: 0;
  max-width: none;
  flex: 0 0 auto;
}
body #sliding-popup #popup-buttons .agree-button {
  font-family: var(--sm-font-display);
  font-size: var(--sm-fs-body);
  font-weight: 700;
  letter-spacing: var(--sm-tracking-wide);
  text-transform: uppercase;
  border: 0;
  background: var(--sm-paper-000);
  color: var(--sm-green-900);
  padding: .6rem 1.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
body #sliding-popup #popup-buttons .agree-button:hover {
  background: var(--sm-amber-500);
  color: var(--sm-ink-950);
}
body #sliding-popup #popup-buttons .decline-button { display: none; }
/* Focus visible accesible sobre fondo verde */
body #sliding-popup .find-more-button:focus-visible,
body #sliding-popup .agree-button:focus-visible {
  outline: var(--sm-focus-ring);
  outline-offset: var(--sm-focus-offset);
}
@media (max-width: 575px) {
  body #sliding-popup .popup-content.eu-cookie-compliance-content {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  body #sliding-popup #popup-buttons { width: 100%; }
  body #sliding-popup #popup-buttons .agree-button { width: 100%; }
}

/* Ocultar pager en "Lo más reciente" del home (maqueta sin paginación) */
.sm-reciente-top nav.pager, .sm-reciente-top .pager, .sm-reciente-top ul.js-pager__items,
.sm-reciente-top .view-footer { display: none !important; }

/* ============================================================
   WCAG AA — Indicador de foco por teclado (recuadro tipo rtvc10)
   Caja visible SOLO al navegar con Tab (:focus-visible); con clic de
   mouse no aparece. Halo oscuro para contraste sobre cualquier fondo.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--sm-focus-ring, 3px solid #ffbf47);
  outline-offset: var(--sm-focus-offset, 3px);
  box-shadow: 0 0 0 6px rgba(9, 9, 11, .55);
  border-radius: 3px;
  position: relative;
  z-index: 2;
}
/* Resetear en click (mouse); mantener solo en teclado */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ============================================================
   #32 — Ocultar el label "Image"/"Imagen" del campo imagen en
   CUALQUIER listado/card del portal (artículos, piezas, audios,
   podcast, etc.). Algunos componentes ya lo ocultaban localmente
   (.sm-mc-media, .sm-pod-card-img); esto lo generaliza a todo.
   ============================================================ */
.field--name-field-image > .field__label,
.field--name-field-imagen > .field__label {
  display: none;
}

/* ============================================================
   #17 — Foco de teclado visible en las CARDS de los listados.
   Las cards usan overflow:hidden y recortan el anillo (box-shadow)
   del link interno, por eso al tabular "no se resaltaba" el artículo.
   Solución: el anillo va en la card vía :has(:focus-visible) — el
   outline de la card no lo recorta el grid contenedor — y se silencia
   el anillo del link de adentro para no duplicar/recortar.
   ============================================================ */
[class*="-card"]:has(a:focus-visible),
[class*="-card"]:has(button:focus-visible) {
  outline: var(--sm-focus-ring, 3px solid #ffbf47);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(9, 9, 11, .35);
  border-radius: var(--bs-border-radius-lg, .75rem);
  position: relative;
  z-index: 3;
}
[class*="-card"] a:focus-visible,
[class*="-card"] button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Cards del bento "Lo más reciente": no matchean [class*="-card"] y su
   stretched-link (inset:0) queda con el anillo recortado por overflow:hidden.
   Llevar el recuadro al contenedor y silenciar el del enlace interno. */
.sm-bento-item:has(.sm-bento-link:focus-visible) {
  outline: var(--sm-focus-ring, 3px solid #ffbf47);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(9, 9, 11, .35);
  z-index: 3;
}
.sm-bento-link:focus-visible {
  outline: none;
  box-shadow: none;
}