/* ==========================================================================
   Radio Colonial — Sistema de diseño "The Modern Archive"
   CSS mobile-first, sin dependencias externas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES — Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Superficies */
  --surface:                  #131313;
  --surface-dim:              #131313;
  --surface-container-lowest: #0e0e0e;
  --surface-container-low:    #1c1b1b;
  --surface-container:        #20201f;
  --surface-container-high:   #2a2a2a;
  --surface-container-highest:#353535;
  --surface-bright:           #393939;
  --surface-variant:          #353535;

  /* Texto sobre superficies */
  --on-surface:               #e5e2e1;
  --on-surface-variant:       #e2bfb9;

  /* Color primario — Garnet */
  --primary:                  #ffb4a8;
  --primary-container:        #800000;
  --on-primary:               #690000;
  --on-primary-container:     #ff8371;

  /* Color secundario */
  --secondary:                #c8c6c5;
  --secondary-container:      #474746;
  --on-secondary:             #313030;

  /* Terciario — Dorado */
  --tertiary:                 #e9c349;
  --tertiary-container:       #cba72f;
  --tertiary-fixed:           #ffe088;
  --tertiary-fixed-dim:       #e9c349;
  --on-tertiary:              #3c2f00;
  --on-tertiary-fixed:        #241a00;
  --on-tertiary-container:    #4e3d00;

  /* Bordes */
  --outline:                  #a98984;
  --outline-variant:          #5a413d;

  /* Error */
  --error:                    #ffb4ab;
  --error-container:          #93000a;

  /* Gradientes */
  --gradient-garnet: linear-gradient(135deg, #800000 0%, #410000 100%);
  --gradient-hero-overlay: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 80%, transparent) 60%, transparent 100%);

  /* Tipografías */
  --font-headline: 'Noto Serif', Georgia, serif;
  --font-body:     'Manrope', system-ui, -apple-system, sans-serif;

  /* Espaciado */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Bordes redondeados */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Alturas */
  --header-h:  80px;
  --player-h:  96px;
  --transition: 200ms ease;
}

/* --------------------------------------------------------------------------
   2. RESET Y BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  /* Espacio para el header fijo y el player fijo */
  padding-top: var(--header-h);
  padding-bottom: var(--player-h);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Anclajes de navegación: compensan la altura del header fijo
   para que el título de la sección no quede oculto al saltar. */
[id="sobre-radio-colonial"],
[id="actualidad-regional"] {
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--primary-container);
  color: var(--on-surface);
  border-radius: var(--radius-md);
  font-weight: 700;
  transition: top var(--transition);
}
.skip-link:focus {
  top: var(--space-4);
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1.25rem;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT — Contenedor y grillas
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: 800px;
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-16); }
}

/* --------------------------------------------------------------------------
   4. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
.font-headline,
h1, h2, h3 {
  font-family: var(--font-headline);
  line-height: 1.15;
  font-weight: 600;
  color: var(--on-surface);
}

h1 { font-size: clamp(2rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1rem; font-weight: 700; font-family: var(--font-body); color: var(--on-surface); }

p { font-family: var(--font-body); }

.label,
.label--primary,
.label--tertiary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}
.label--primary {
  color: var(--primary);
  background: transparent;
}
.label--tertiary {
  color: var(--tertiary);
  background: transparent;
}

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: filter var(--transition), transform var(--transition), background var(--transition);
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--primary-container);
  color: var(--on-surface);
  border: 2px solid transparent;
}
.btn--primary:hover { filter: brightness(1.15); }

.btn--garnet {
  background: var(--gradient-garnet);
  color: var(--on-surface);
  border: 2px solid transparent;
}
.btn--garnet:hover { filter: brightness(1.1); }

.btn--tertiary {
  background: var(--tertiary);
  color: var(--on-tertiary-fixed);
  border: 2px solid transparent;
}
.btn--tertiary:hover { filter: brightness(1.1); }

.btn--outline {
  background: transparent;
  color: var(--on-surface);
  border: 2px solid color-mix(in srgb, var(--outline) 40%, transparent);
}
.btn--outline:hover { background: var(--surface-bright); }

.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.8rem;
}
.btn--lg {
  padding: var(--space-4) var(--space-8);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 15%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .site-header__inner { padding-inline: var(--space-16); }
}

/* Logo */
.site-header__logo-text {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-header__logo-text:hover { color: var(--on-surface); }

.site-header__brand .custom-logo {
  height: 40px;
  width: auto;
}

/* Navegación desktop */
.site-nav { display: none; }

@media (min-width: 768px) {
  .site-nav {
    display: flex;
    flex: 1;
    justify-content: center;
  }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__list a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--outline);
  transition: color var(--transition);
  padding-bottom: 2px;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
  color: var(--on-surface);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
  color: var(--tertiary);
  border-bottom: 2px solid var(--tertiary);
  font-weight: 600;
}

/* Acciones del header */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /* Las acciones nunca se comprimen: si falta espacio, cede la marca. */
  flex-shrink: 0;
}

/* Variantes cortas de marca y botón: ocultas salvo en teléfonos. */
.site-header__brand-short,
.site-header__cta-short { display: none; }

/* --------------------------------------------------------------------------
   Header compacto en teléfonos (< 600px)
   El escritorio no se toca: todo vive dentro de esta media query.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  /* Al redefinir la variable se ajustan a la vez el alto del header, el
     padding superior del body, el desplazamiento de las anclas, la posición
     del menú móvil y el min-height de .site-main. */
  :root { --header-h: 64px; }

  .site-header__inner {
    padding-inline: var(--space-4);
    gap: var(--space-3);
  }

  /* La marca puede encogerse; si aun así no cabe, se recorta con puntos
     suspensivos en lugar de desbordar la página. */
  .site-header__brand { min-width: 0; }

  .site-header__logo-text {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  .site-header__brand-full  { display: none; }
  .site-header__brand-short { display: inline; }

  .site-header__actions { gap: var(--space-2); }

  /* Botón más estrecho, pero manteniendo un objetivo táctil cómodo. */
  .site-header__cta {
    padding-inline: var(--space-3);
    min-height: 44px;
    gap: var(--space-1);
  }

  .site-header__cta-full  { display: none; }
  .site-header__cta-short { display: inline; }
}

/* Hamburguesa (móvil) */
.site-header__menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  gap: 5px;
}

@media (min-width: 768px) {
  .site-header__menu-toggle { display: none; }
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--on-surface);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.site-header__menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}
.site-header__menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menú móvil expandido */
.site-nav.is-open {
  display: flex;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--surface-container-lowest);
  padding: var(--space-6);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 15%, transparent);
}

.site-nav.is-open .site-nav__list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
}

.site-nav.is-open .site-nav__list a {
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(600px, 90vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-inline: var(--space-6);
}

@media (min-width: 768px) {
  .hero { padding-inline: var(--space-16); }
}

/* Fondo */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Fallback gradient cuando no hay imagen configurada.
     Si hay imagen, queda visible debajo del mix-blend-mode. */
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary-container) 35%, var(--surface)) 0%,
    var(--surface-container-low) 50%,
    var(--surface) 100%
  );
}

.hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: luminosity;
}

.hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-overlay);
}

/* Contenido */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-block: var(--space-20);
}

/* Badge EN VIVO */
.hero__live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--primary-container) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  width: fit-content;
}

.hero__live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tertiary);
  flex-shrink: 0;
}

.hero__live-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--tertiary);
  opacity: 0;
  animation: live-ping 1.5s ease-out infinite;
}

@keyframes live-ping {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2);   opacity: 0; }
}

.hero__live-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tertiary);
}

.hero__title {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--outline);
  max-width: 42rem;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   8. SECCIÓN ABOUT
   -------------------------------------------------------------------------- */
.about-section {
  /* Paleta local de la sección: granate/vino muy oscuro, más cálido que el
     carbón del resto del sitio. Centralizada aquí para poder ajustarla
     en un solo punto sin tocar los tokens globales del tema. */
  --about-wine:   #241718; /* vino oscuro — esquina superior izquierda */
  --about-garnet: #1b1415; /* carbón agranatado — centro */
  --about-deep:   #151112; /* tono profundo — cierra hacia la sección siguiente */

  background: linear-gradient(
    135deg,
    var(--about-wine) 0%,
    var(--about-garnet) 55%,
    var(--about-deep) 100%
  );
  padding-block: var(--space-24);
}

.about-section__grid {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 768px) {
  .about-section__grid {
    grid-template-columns: 5fr 7fr;
    align-items: center;
    gap: var(--space-16);
  }
}

.about-section__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-bottom: var(--space-4);
}

/* Filete decorativo: gana presencia con un degradado granate → dorado. */
.about-section__divider {
  width: 5rem;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    var(--tertiary) 100%
  );
  border-radius: 2px;
  margin-bottom: var(--space-6);
}

.about-section__body {
  /* Ligeramente más luminoso que --outline, sin llegar al blanco:
     conserva el matiz rosado cálido de la paleta. */
  color: color-mix(in srgb, var(--outline) 72%, var(--on-surface) 28%);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.about-section__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--tertiary);
  font-weight: 700;
  font-size: 1rem;
  transition: gap var(--transition);
  margin-top: var(--space-4);
}
.about-section__cta:hover { gap: var(--space-4); }

/* Imagen */
.about-section__image-wrap {
  position: relative;
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Sombra ambiental: separa la fotografía del fondo cálido sin ensuciarlo.
     Difusa y con spread negativo, como un halo, no como una mancha dura. */
  box-shadow:
    0 26px 60px -24px rgba(0, 0, 0, 0.65),
    0 4px 16px -8px rgba(0, 0, 0, 0.45);
}

@media (min-width: 768px) {
  .about-section__image-wrap { height: auto; min-height: 480px; }
}

.about-section__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-section__image-placeholder {
  width: 100%;
  height: 100%;
  /* Templado para acompañar el fondo granate de la sección. */
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--primary-container) 18%, #2a2022) 0%,
    #1d1719 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-section__placeholder-icon {
  font-size: 6rem;
  color: color-mix(in srgb, var(--outline) 30%, transparent);
}

/* Filo interior tenue: un rastro dorado, usado con moderación. */
.about-section__image-frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tertiary) 16%, transparent);
}

/* --------------------------------------------------------------------------
   9. FEATURES — Propuesta de valor
   -------------------------------------------------------------------------- */
.features-section {
  /* El padding inferior es menor que el superior a propósito: el hueco hacia
     "Actualidad Regional" resultaba excesivo. El superior no cambia, para no
     alterar el corte con "Una radio con identidad local". */
  padding-block: var(--space-24) var(--space-12);
  background: var(--surface);
}

@media (min-width: 768px) {
  .features-section { padding-bottom: var(--space-16); }
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 480px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .features-grid { grid-template-columns: repeat(4, 1fr); }
}

.feature-card {
  background: var(--surface-container);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border-bottom: 3px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}

.feature-card:hover {
  border-bottom-color: var(--primary);
  background: var(--surface-container-high);
}

.feature-card__icon {
  font-size: 2.25rem;
  color: var(--primary);
  display: block;
  margin-bottom: var(--space-4);
  transition: transform var(--transition);
}

.feature-card:hover .feature-card__icon { transform: scale(1.1); }

.feature-card__title {
  font-size: 1.2rem;
  line-height: 1.3;
  margin-bottom: var(--space-2);
}

.feature-card__text {
  color: var(--outline);
  font-size: 0.96rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   10. PROGRAMACIÓN
   -------------------------------------------------------------------------- */
.schedule-section {
  padding-block: var(--space-24);
  background: var(--surface-container-lowest);
}

.schedule-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

@media (min-width: 600px) {
  .schedule-section__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.schedule-section__header-text { display: flex; flex-direction: column; gap: var(--space-3); }

.schedule-section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); }

.schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid color-mix(in srgb, var(--outline) 10%, transparent);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

@media (min-width: 700px) {
  .schedule-grid { grid-template-columns: repeat(3, 1fr); }
}

.schedule-card {
  position: relative;
  padding: var(--space-10);
  transition: background var(--transition);
}

.schedule-card:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--outline) 10%, transparent);
}

@media (min-width: 700px) {
  .schedule-card:not(:last-child) {
    border-bottom: none;
    border-right: 1px solid color-mix(in srgb, var(--outline) 10%, transparent);
  }
}

.schedule-card:hover { background: var(--surface-container); }

.schedule-card__number {
  position: absolute;
  top: var(--space-4);
  right: var(--space-8);
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--outline) 20%, transparent);
  font-family: var(--font-body);
  user-select: none;
  pointer-events: none;
}

.schedule-card__time {
  display: block;
  margin-bottom: var(--space-3);
}

.schedule-card__title {
  font-size: 1.35rem;
  margin-bottom: var(--space-4);
}

.schedule-card__title a {
  color: var(--on-surface);
  text-decoration: none;
  transition: color var(--transition);
}
.schedule-card__title a:hover { color: var(--tertiary); }

.schedule-card__desc {
  color: var(--outline);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.schedule-card__host {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.schedule-card__host-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.schedule-card__host-avatar--placeholder {
  background: var(--surface-container-highest);
  border-radius: 50%;
}

.schedule-card__host-name {
  font-size: 0.875rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   11. CTA LISTEN
   -------------------------------------------------------------------------- */
.listen-cta {
  background: var(--primary-container);
  padding-block: var(--space-24);
}

.listen-cta__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 768px) {
  .listen-cta__grid { grid-template-columns: 1fr 1fr; }
}

.listen-cta__title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-6);
}

.listen-cta__subtitle {
  color: var(--on-surface-variant);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: var(--space-8);
}

.listen-cta__devices {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.listen-cta__device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.listen-cta__device-icon {
  font-size: 2.25rem;
}

.listen-cta__device-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Lado visual */
.listen-cta__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
}

.listen-cta__glow {
  position: absolute;
  width: 260px;
  height: 260px;
  background: color-mix(in srgb, var(--tertiary) 20%, transparent);
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
}

.listen-cta__device-mockup {
  position: relative;
  z-index: 1;
  background: var(--surface-container);
  border: 1px solid color-mix(in srgb, var(--outline) 20%, transparent);
  border-radius: var(--radius-xl);
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listen-cta__mockup-icon {
  font-size: 5rem;
  color: var(--outline);
}

/* --------------------------------------------------------------------------
   12. NOTICIAS — Grid
   -------------------------------------------------------------------------- */
.news-section {
  /* Padding superior reducido: junto con el inferior de .features-section
     define la separación entre los cuatro pilares y esta sección.
     El inferior se mantiene para no alterar el corte con "Conectemos en comunidad". */
  padding-block: var(--space-10) var(--space-24);
  background: var(--surface);
}

@media (min-width: 768px) {
  .news-section { padding-top: var(--space-12); }
}

.news-section__header {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.news-section__title { margin-bottom: var(--space-4); }

.news-section__subtitle {
  color: var(--outline);
  font-size: 1rem;
  line-height: 1.7;
}

.news-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
}

.news-section__footer {
  text-align: center;
  margin-top: var(--space-12);
}

/* Post card (news-grid + archive + search) */
.posts-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) { .posts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card { display: flex; flex-direction: column; }

.post-card__thumbnail-wrap {
  overflow: hidden;
  border-radius: var(--radius-xl);
  height: 240px;
  margin-bottom: var(--space-6);
}

.post-card__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.post-card:hover .post-card__thumbnail { transform: scale(1.06); }

.post-card__body { flex: 1; display: flex; flex-direction: column; }

.post-card__category {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.75rem;
}

.post-card__title {
  font-size: 1.25rem;
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.post-card__title a {
  color: var(--on-surface);
  transition: color var(--transition);
}
.post-card__title a:hover { color: var(--tertiary); }

.post-card__excerpt {
  color: var(--outline);
  font-size: 0.95rem;
  line-height: 1.65;
  flex: 1;
  margin-bottom: var(--space-4);
}

.post-card__meta {
  margin-top: auto;
}

.post-card__date {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--outline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   13. COMUNIDAD  (template-parts/home/social.php)
   Zona de participación: WhatsApp, suscripción y redes.
   -------------------------------------------------------------------------- */
.community-section {
  /* Continúa la línea cálida de "Una radio con identidad local", un punto
     más profunda, para marcar que aquí empieza la zona de participación. */
  background:
    linear-gradient(
      200deg,
      #1d1618 0%,
      #191315 55%,
      #141011 100%
    );
  padding-block: var(--space-20);
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 12%, transparent);
}

.community-section__header {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.community-section__title {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  margin-bottom: var(--space-3);
}

.community-section__subtitle {
  color: var(--outline);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* Aviso tras enviar el formulario */
.community-notice {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
}
.community-notice--success {
  background: color-mix(in srgb, var(--tertiary) 14%, transparent);
  color: var(--tertiary-fixed);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tertiary) 32%, transparent);
}
.community-notice--info {
  background: color-mix(in srgb, var(--outline) 12%, transparent);
  color: var(--on-surface);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline) 26%, transparent);
}
.community-notice--error {
  background: color-mix(in srgb, var(--error-container) 30%, transparent);
  color: var(--primary-fixed);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 28%, transparent);
}

/* Dos tarjetas en escritorio, apiladas en móvil */
.community-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 860px) {
  .community-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.community-card {
  background: var(--surface-container);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: start;
  min-width: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline) 9%, transparent);
}

.community-card--wa {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--primary-container) 16%, var(--surface-container)) 0%,
    var(--surface-container) 72%
  );
}

.community-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin: 0;
}

.community-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--tertiary) 12%, transparent);
  flex-shrink: 0;
}
.community-card__icon svg { width: 1rem; height: 1rem; fill: var(--tertiary); }
.community-card__icon .material-symbols-outlined { font-size: 1.15rem; color: var(--tertiary); }

.community-card__text {
  color: var(--outline);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Botón de WhatsApp: identidad Radio Colonial, no verde de ecommerce */
.community-wa-btn {
  align-self: flex-start;
  background: var(--gradient-garnet);
  color: var(--on-surface);
  padding: var(--space-3) var(--space-6);
  font-size: 0.95rem;
  /* Filo verde apenas insinuado: reconocible sin dominar. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #25d366 38%, transparent);
  transition: filter var(--transition), box-shadow var(--transition), transform var(--transition);
}
.community-wa-btn:hover {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #25d366 62%, transparent);
}
.community-wa-btn:active { transform: scale(0.98); }

.community-wa-btn__icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: #25d366;
  flex-shrink: 0;
}

/* En teléfonos estrechos el texto no cabe en una línea: .btn impone
   white-space: nowrap y el botón se salía de la tarjeta. Aquí se permite
   que el texto fluya. Tablet y escritorio conservan el diseño original. */
@media (max-width: 480px) {
  .community-wa-btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Formulario de suscripción (lo imprime el plugin) */
.community-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Honeypot: fuera de la vista pero presente en el DOM para los bots. */
.community-form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.community-form__input {
  width: 100%;
  background: var(--surface-container-highest);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--on-surface);
  font-size: 0.95rem;
  outline: none;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--transition), background var(--transition);
}
.community-form__input::placeholder { color: var(--outline); }
.community-form__input:focus {
  background: var(--surface-bright);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tertiary) 55%, transparent);
}

.community-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--outline);
  cursor: pointer;
}
.community-form__consent input {
  margin-top: 0.2rem;
  accent-color: var(--primary-container);
  flex-shrink: 0;
}
.community-form__consent a {
  color: var(--tertiary);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.community-form__submit {
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Redes debajo de las tarjetas */
.community-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.community-social__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-container) 70%, transparent);
  color: var(--outline);
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline) 14%, transparent);
  transition: color var(--transition), box-shadow var(--transition), background var(--transition);
}
.community-social__link:hover {
  color: var(--on-surface);
  background: var(--surface-container-high);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tertiary) 42%, transparent);
}

.community-social__icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp (global, en footer.php)
   Se apoya sobre el reproductor persistente sin taparlo.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: var(--space-4);
  /* Siempre por encima del reproductor. */
  bottom: calc(var(--player-h) + var(--space-4));
  z-index: 150;

  /* Oculto en móvil: al ser fixed se superponía al CTA de Comunidad y
     dejaba poco aire sobre el reproductor. En pantallas pequeñas basta
     con el botón "Enviar saludo por WhatsApp" de la propia sección.
     Se revela desde 768px (mismo breakpoint que usa el resto del tema). */
  display: none;

  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-full);

  background: var(--gradient-garnet);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;

  box-shadow:
    0 10px 30px -8px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px color-mix(in srgb, #25d366 45%, transparent);
  transition: filter var(--transition), transform var(--transition);
}
.wa-float:hover { filter: brightness(1.14); transform: translateY(-2px); }
.wa-float:active { transform: translateY(0) scale(0.98); }
.wa-float:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 3px;
}

.wa-float__icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: #25d366;
  flex-shrink: 0;
}

/* Desde tablet: aparece como píldora con texto, abajo a la derecha. */
@media (min-width: 768px) {
  .wa-float {
    display: inline-flex;
    padding: var(--space-3) var(--space-5);
    right: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   14. FOOTER
   Cierre institucional: continúa la línea cálida del sitio, un punto más
   profunda, y termina antes del reproductor persistente.
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  /* Arranca cerca del tono con que cierra "Conectemos en comunidad",
     gana un matiz granate en el centro y se apaga hacia el borde inferior. */
  background:
    linear-gradient(
      180deg,
      #161113 0%,
      #1a1416 42%,
      #100d0e 100%
    );
  padding-top: var(--space-12);
}

/* Acento superior: filete de 1px que marca dónde empieza el footer. */
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--tertiary) 32%, transparent) 28%,
    color-mix(in srgb, var(--primary) 34%, transparent) 62%,
    transparent 100%
  );
  pointer-events: none;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-bottom: var(--space-10);
}

@media (min-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr 1.6fr;
    gap: var(--space-10);
    padding-inline: var(--space-16);
  }

  /* Sin la columna de newsletter el footer usa 3 columnas. */
  .site-footer__inner--compact {
    grid-template-columns: 1.7fr 1fr 1fr;
  }
}

/* --- Columna de marca --- */
.site-footer__brand { max-width: 30rem; }

.site-footer__logo { margin-bottom: var(--space-4); }
.site-footer__logo .custom-logo { height: 44px; width: auto; }

.site-footer__logo-text {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  display: block;
}

.site-footer__tagline {
  color: var(--outline);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* Frase de cierre: el único punto dorado del footer. */
.site-footer__claim {
  margin-top: var(--space-4);
  font-family: var(--font-headline);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--tertiary);
}

/* --- Encabezados de columna --- */
.site-footer__heading {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--on-surface);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 18%, transparent);
}

/* --- Listas de enlaces --- */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav a {
  display: inline-block;
  color: var(--outline);
  font-size: 0.95rem;
  line-height: 1.5;
  text-underline-offset: 4px;
  transition: color var(--transition), transform var(--transition);
}
.site-footer__nav a:hover {
  color: var(--on-surface);
  transform: translateX(3px);
}
.site-footer__nav a:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --- Newsletter (solo si se activa desde el Customizer) --- */
.site-footer__newsletter-text {
  color: var(--outline);
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
}

.newsletter-form__group {
  display: flex;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.newsletter-form__input {
  flex: 1;
  background: var(--surface-container-highest);
  border: none;
  padding: var(--space-3) var(--space-4);
  color: var(--on-surface);
  font-size: 0.875rem;
  outline: none;
  min-width: 0;
}
.newsletter-form__input::placeholder { color: var(--outline); }
.newsletter-form__input:focus { background: var(--surface-bright); }

.newsletter-form__submit {
  background: var(--primary-container);
  color: var(--on-surface);
  padding: var(--space-3) var(--space-4);
  transition: filter var(--transition);
  flex-shrink: 0;
}
.newsletter-form__submit:hover { filter: brightness(1.15); }

/* --- Franja inferior --- */
.site-footer__bottom {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 12%, transparent);
}

@media (min-width: 600px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding-inline: var(--space-16);
  }
}

.site-footer__copy {
  font-size: 0.85rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--outline);
  letter-spacing: 0.01em;
}

.site-footer__place {
  font-size: 0.82rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--outline) 92%, transparent);
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__nav a:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   15. REPRODUCTOR PERSISTENTE
   -------------------------------------------------------------------------- */
.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--player-h);
  background: color-mix(in srgb, var(--surface-container-lowest) 80%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 2px solid var(--tertiary);
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--space-6);
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .player-bar { padding-inline: var(--space-12); }
}

/* Info de pista */
.player-bar__track {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  flex: 1;
  max-width: 300px;
}

.player-bar__cover {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.player-bar__cover-icon {
  font-size: 1.5rem;
  color: var(--outline);
}

.player-bar__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.player-bar__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-bar__subtitle {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Controles */
.player-bar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-shrink: 0;
}

.player-bar__btn--play {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-container);
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  transition: transform var(--transition), filter var(--transition);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-container) 30%, transparent);
}

.player-bar__btn--play:hover { filter: brightness(1.15); transform: scale(1.05); }
.player-bar__btn--play:active { transform: scale(0.95); }

.player-bar__play-icon { font-size: 2rem; color: var(--on-surface); }

/* Badge EN VIVO del player */
.player-bar__live {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 600px) { .player-bar__live { display: flex; } }

.player-bar__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--outline);
  transition: background var(--transition);
}

.player-bar__live-dot.is-live { background: var(--tertiary); animation: live-ping 1.5s ease-out infinite; }

.player-bar__live-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}

/* Volumen */
.player-bar__volume {
  display: none;
  align-items: center;
  gap: var(--space-3);
  min-width: 160px;
  justify-content: flex-end;
}

@media (min-width: 768px) { .player-bar__volume { display: flex; } }

.player-bar__vol-btn {
  color: var(--outline);
  transition: color var(--transition);
  padding: var(--space-1);
  flex-shrink: 0;
}
.player-bar__vol-btn:hover { color: var(--on-surface); }

.player-bar__vol-track {
  position: relative;
  flex: 1;
  height: 4px;
  background: var(--surface-container-highest);
  border-radius: 2px;
  overflow: hidden;
}

.player-bar__vol-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.player-bar__vol-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--tertiary);
  border-radius: 2px;
  pointer-events: none;
  transition: width 50ms linear;
}

/* --------------------------------------------------------------------------
   16. PÁGINAS INTERNAS — Single, Archive, Search, 404
   -------------------------------------------------------------------------- */
.site-main {
  min-height: calc(100vh - var(--header-h) - var(--player-h));
  padding-block: var(--space-16);
}

/* Archive header */
.archive-header {
  margin-bottom: var(--space-12);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
  padding-bottom: var(--space-8);
}

.archive-header .label { margin-bottom: var(--space-4); }

.archive-header__title { margin-bottom: var(--space-4); }

.archive-header__description {
  color: var(--outline);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 48rem;
  margin-top: var(--space-4);
}

/* Single post */
.single-post__header { margin-bottom: var(--space-8); }
.single-post__categories { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.single-post__title { margin-bottom: var(--space-4); }
.single-post__meta { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--outline); font-size: 0.875rem; }
.single-post__thumbnail { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-8); }
.single-post__image { width: 100%; max-height: 500px; object-fit: cover; }

.entry-content {
  color: var(--on-surface-variant);
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 100%;
}
.entry-content h2, .entry-content h3 { margin-block: var(--space-8) var(--space-4); }
.entry-content p  { margin-bottom: var(--space-4); }
.entry-content a  { color: var(--tertiary); text-underline-offset: 3px; }
.entry-content a:hover { text-decoration: underline; }
.entry-content img { border-radius: var(--radius-lg); margin-block: var(--space-6); }
.entry-content ul, .entry-content ol { padding-left: var(--space-6); margin-bottom: var(--space-4); list-style: revert; }
.entry-content blockquote {
  border-left: 3px solid var(--primary-container);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  color: var(--outline);
  font-style: italic;
}

/* Post navigation */
.post-navigation {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 600px) { .post-navigation { flex-direction: row; justify-content: space-between; } }

.post-navigation .nav-previous,
.post-navigation .nav-next { display: flex; flex-direction: column; gap: var(--space-1); }
.post-navigation .nav-next { text-align: right; }

.post-navigation__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.post-navigation__title {
  display: block;
  color: var(--on-surface);
  font-size: 0.95rem;
  font-weight: 600;
  transition: color var(--transition);
}
.post-navigation a:hover .post-navigation__title { color: var(--tertiary); }

/* Page content */
.page-content__header { margin-bottom: var(--space-8); }
.page-content__thumbnail { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-8); }
.page-content__image { width: 100%; max-height: 400px; object-fit: cover; }
.page-content__title { margin-bottom: 0; }

/* Programs / Podcast grids */
.programs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 600px) { .programs-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .programs-grid { grid-template-columns: repeat(3, 1fr); } }

.program-card, .podcast-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-container);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: background var(--transition);
}
.program-card:hover, .podcast-card:hover { background: var(--surface-container-high); }

.program-card__thumbnail-wrap,
.podcast-card__thumbnail {
  height: 200px;
  overflow: hidden;
}
.program-card__thumbnail,
.podcast-card .podcast-card__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.program-card:hover .program-card__thumbnail { transform: scale(1.05); }

.program-card__body, .podcast-card__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }

.program-card__time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--outline);
}

.program-card__title { font-size: 1.15rem; }
.program-card__title a { color: var(--on-surface); transition: color var(--transition); }
.program-card__title a:hover { color: var(--tertiary); }

.program-card__excerpt { color: var(--outline); font-size: 0.875rem; line-height: 1.6; flex: 1; }

.program-card__host { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
.program-card__host-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.program-card__host-name { font-size: 0.8rem; font-weight: 700; }

/* Podcast grid */
.podcast-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .podcast-grid { grid-template-columns: 1fr 1fr; } }

.podcast-card { flex-direction: row; }
.podcast-card__thumbnail-link { width: 100px; flex-shrink: 0; }
.podcast-card__thumbnail { width: 100%; height: 100%; object-fit: cover; }
.podcast-card__body { padding: var(--space-4); }
.podcast-card__title { font-size: 1rem; margin-bottom: var(--space-2); }
.podcast-card__title a { color: var(--on-surface); transition: color var(--transition); }
.podcast-card__title a:hover { color: var(--tertiary); }
.podcast-card__excerpt { color: var(--outline); font-size: 0.8rem; line-height: 1.5; }
.podcast-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--tertiary);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: var(--space-3);
}

/* Podcast player individual */
.podcast-player {
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-8);
}
.podcast-player__audio { width: 100%; accent-color: var(--primary-container); }

/* Single programa */
.single-programa__header { margin-bottom: var(--space-8); }
.single-programa__franjas { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.single-programa__schedule { display: flex; align-items: center; gap: var(--space-2); color: var(--outline); margin-bottom: var(--space-2); }
.single-programa__host { color: var(--outline); font-size: 0.95rem; margin-bottom: var(--space-4); }
.single-programa__thumbnail { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-8); }
.single-programa__image { width: 100%; max-height: 500px; object-fit: cover; }

/* Single podcast */
.single-podcast__header { margin-bottom: var(--space-8); }
.single-podcast__meta { color: var(--outline); font-size: 0.875rem; margin-top: var(--space-3); }

/* Búsqueda / no results */
.no-results {
  text-align: center;
  padding-block: var(--space-16);
}
.no-results__title { margin-bottom: var(--space-4); }
.no-results__text { color: var(--outline); margin-bottom: var(--space-8); }

.search-form { display: flex; gap: var(--space-2); max-width: 500px; margin-inline: auto; }
.search-field { flex: 1; background: var(--surface-container-highest); border: none; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); color: var(--on-surface); font-size: 0.9rem; }
.search-field:focus { outline: 2px solid var(--primary-container); }
.search-submit { background: var(--primary-container); color: var(--on-surface); padding: var(--space-3) var(--space-5); border: none; border-radius: var(--radius-lg); font-weight: 700; cursor: pointer; }

/* Posts navigation */
.posts-navigation, .post-navigation { padding-top: var(--space-8); }
.nav-links { display: flex; gap: var(--space-4); }
.nav-links a {
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--outline) 30%, transparent);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--on-surface);
  transition: border-color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nav-links a:hover { border-color: var(--primary); background: var(--surface-container); }

/* Error 404 */
.error-404 { text-align: center; padding-block: var(--space-24); }
.error-404__code {
  display: block;
  font-size: clamp(5rem, 15vw, 10rem);
  font-family: var(--font-headline);
  font-weight: 700;
  color: color-mix(in srgb, var(--outline) 20%, transparent);
  line-height: 1;
  margin-bottom: var(--space-4);
}
.error-404__title { margin-bottom: var(--space-4); }
.error-404__text { color: var(--outline); max-width: 42rem; margin-inline: auto; margin-bottom: var(--space-8); }
.error-404__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-8); }

/* Widget sidebar */
.widget { margin-bottom: var(--space-8); }
.widget__title { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); color: var(--on-surface); }

/* Estado is-playing en body */
body.is-playing .player-bar__live-dot { background: var(--tertiary); }
body.is-playing .js-play-icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ==========================================================================
   19. "HOY EN LA REGIÓN"  (template-parts/home/today-region.php)
   Prefijo .today- / .weather- / .events- . No afecta a otras secciones.
   ========================================================================== */

.today-region {
  /* Degradado muy sutil: carbón → granate apagado → carbón. */
  background:
    linear-gradient(
      170deg,
      var(--surface-container-low) 0%,
      color-mix(in srgb, var(--primary-container) 7%, var(--surface-container-low)) 45%,
      var(--surface-container-low) 100%
    );
  padding-block: var(--space-16);
}

.today-region__header {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.today-region__title {
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  margin-bottom: var(--space-2);
}

.today-region__subtitle {
  color: var(--outline);
  font-size: 1rem;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Layout: una columna en móvil; en escritorio, clima a la izquierda y
   santoral + efemérides apilados a la derecha.

   Los wrappers .today-col existen para que cada columna se dimensione por
   separado: al abrir el detalle del clima, la columna derecha no se estira
   ni deja huecos. Por eso NO se usa grid-row: span, que acoplaría las filas.
   -------------------------------------------------------------------------- */
.today-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

.today-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-content: start;
  min-width: 0; /* impide desbordes horizontales */
}

@media (min-width: 1000px) {
  .today-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: var(--space-6);
  }
}

/* Tarjeta base.
   Sin height:100% ni stretch: cada tarjeta termina donde termina su contenido
   y la de Clima puede crecer sola al desplegar las comunas. */
.today-card {
  background: var(--surface-container);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: start;
  min-width: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline) 8%, transparent);
}

/* Variaciones tonales muy leves: siguen siendo el mismo módulo. */
.today-card--santoral {
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--primary-container) 12%, var(--surface-container)) 0%,
    var(--surface-container) 70%
  );
}

.today-card--events {
  background: color-mix(in srgb, var(--surface-container-high) 45%, var(--surface-container));
}

.today-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin: 0;
}
.today-card__title .material-symbols-outlined { font-size: 1.2rem; }

.today-card__meta {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--outline);
}

.today-card__source {
  font-size: 0.82rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--outline) 92%, transparent);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 14%, transparent);
}
.today-card__source a {
  color: var(--outline);
  text-underline-offset: 2px;
}
.today-card__source a:hover { color: var(--tertiary); text-decoration: underline; }

.today-card__empty {
  color: var(--outline);
  font-size: 0.9rem;
  line-height: 1.6;
  padding-block: var(--space-4);
}

/* 19.1 Clima — lista destacada -------------------------------------------- */
.weather-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.weather-row {
  display: grid;
  grid-template-columns: 1fr auto minmax(0, 9.5rem);
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 10%, transparent);
}
.weather-row:last-child { border-bottom: none; }

.weather-row__place {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--on-surface);
}

.weather-row__temp {
  font-family: var(--font-headline);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

.weather-row__state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
  color: var(--outline);
  font-size: 0.9rem;
  min-width: 0;
}

.weather-row__icon { font-size: 1.25rem; color: var(--tertiary); }

.weather-row__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Móvil: el estado baja a una segunda línea */
@media (max-width: 420px) {
  .weather-row {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-1);
  }
  .weather-row__state {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* 19.2 Detalle de todas las comunas --------------------------------------- */
.weather-details {
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-container-lowest) 60%, transparent);
}

.weather-details__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-3);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tertiary);
  list-style: none;
  border-radius: var(--radius-md);
  /* Área táctil cómoda en móvil */
  min-height: 44px;
}
.weather-details__summary::-webkit-details-marker { display: none; }
.weather-details__summary:hover { background: var(--surface-container-high); }
.weather-details__summary:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

.weather-details[open] .weather-details__summary .material-symbols-outlined {
  transform: rotate(180deg);
}
.weather-details__summary .material-symbols-outlined {
  transition: transform var(--transition);
}

.weather-all {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  padding-top: 0;
}

@media (min-width: 420px) {
  .weather-all { grid-template-columns: repeat(2, 1fr); }
}

.weather-mini {
  background: var(--surface-container-high);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.weather-mini__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.weather-mini__place {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--on-surface);
}

.weather-mini__temp {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.weather-mini__state {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--outline);
  margin-bottom: var(--space-2);
}
.weather-mini__state .material-symbols-outlined { font-size: 1rem; color: var(--tertiary); }

.weather-mini__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.weather-mini__item { display: flex; gap: var(--space-1); align-items: baseline; }

.weather-mini__item dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--outline) 90%, transparent);
}

.weather-mini__item dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

/* 19.3 Santoral ----------------------------------------------------------- */
.santoral__intro {
  color: var(--outline);
  font-size: 0.95rem;
}

.santoral__names {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 600;
  line-height: 1.28;
  color: var(--on-surface);
  padding-block: var(--space-2);
}

/* Descripción del santo: secundaria respecto del nombre. */
.santoral__role {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--on-surface-variant);
  margin-top: calc(var(--space-1) * -1);
}

.santoral__greeting {
  color: var(--outline);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}

/* Pie del santoral: saludo y fuente comparten línea si hay ancho. */
.santoral__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 14%, transparent);
}

/* La fuente ya no dibuja su propio borde dentro del pie. */
.santoral__footer .today-card__source {
  padding-top: 0;
  border-top: none;
  white-space: nowrap;
}

@media (min-width: 560px) {
  .santoral__footer {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .santoral__greeting { flex: 1; }
}

/* 19.4 Un día como hoy ---------------------------------------------------- */
.events-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dos columnas solo cuando hay ancho real para no comprimir el texto. */
@media (min-width: 1150px) {
  .events-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-6);
  }

  /* Con un número impar de efemérides, la última ocupa el ancho completo
     en lugar de dejar media fila vacía. Con 5 queda 2 + 2 + 1. */
  .event-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.event-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 12%, transparent);
  min-width: 0;
}
.event-item:last-child { border-bottom: none; padding-bottom: 0; }

/* En dos columnas el borde inferior sobra: separa la rejilla, no las filas. */
@media (min-width: 1150px) {
  .event-item {
    border-bottom: none;
    padding-bottom: 0;
    padding-left: var(--space-4);
    border-left: 2px solid color-mix(in srgb, var(--tertiary) 22%, transparent);
  }
}

.event-item__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Etiqueta de procedencia: mismo dorado del sistema, sin banderas. */
.event-item__origin {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-sm);
}

.event-item__origin--cl {
  color: var(--on-tertiary-fixed);
  background: var(--tertiary);
}

.event-item__origin--world {
  color: var(--tertiary);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tertiary) 45%, transparent);
}

.event-item__year {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tertiary);
  font-variant-numeric: tabular-nums;
}

.event-item__text {
  color: var(--on-surface-variant);
  font-size: 1rem;
  line-height: 1.7;
}

.event-item__source {
  font-size: 0.82rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--outline) 92%, transparent);
}
.event-item__source a {
  color: var(--outline);
  text-underline-offset: 2px;
}
.event-item__source a:hover { color: var(--tertiary); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .weather-details__summary .material-symbols-outlined { transition: none; }
}

/* ==========================================================================
   18. PÁGINA "CONÓCENOS"  (page-conocenos.php)
   Prefijo .ap- (about page). No afecta a ninguna otra plantilla.
   ========================================================================== */

.about-page {
  /* El header fijo ya se compensa con el padding-top del body. */
  padding-bottom: var(--space-8);
}

/* Elementos compartidos entre secciones ---------------------------------- */
.ap-section-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

.ap-rule {
  width: 3.5rem;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin-bottom: var(--space-6);
}

.ap-prose {
  color: var(--outline);
  font-size: 1.05rem;
  line-height: 1.85;
}
.ap-prose p { margin-bottom: var(--space-4); }
.ap-prose p:last-child { margin-bottom: 0; }

.ap-prose--center {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

/* Marcador visual reutilizable para figuras sin imagen */
.ap-figure-placeholder,
.ap-hero__placeholder,
.ap-beto__placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--surface-container-high) 0%,
    color-mix(in srgb, var(--primary-container) 18%, var(--surface-container)) 100%
  );
}
.ap-figure-placeholder .material-symbols-outlined,
.ap-hero__placeholder .material-symbols-outlined,
.ap-beto__placeholder .material-symbols-outlined {
  font-size: 4.5rem;
  color: color-mix(in srgb, var(--outline) 32%, transparent);
}

/* 18.1 Hero editorial ---------------------------------------------------- */
.ap-hero {
  background: var(--surface);
  padding-block: var(--space-16) var(--space-12);
}

.ap-hero__intro {
  max-width: 52rem;
  margin-bottom: var(--space-12);
}

.ap-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin-bottom: var(--space-4);
}

.ap-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.ap-hero__rule {
  width: 5rem;
  height: 3px;
  background: var(--gradient-garnet);
  border-radius: 2px;
  margin-block: var(--space-6);
}

.ap-hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.7;
  color: var(--outline);
  max-width: 44rem;
}

/* Banner de imagen */
.ap-hero__figure {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--surface-container);
}

.ap-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ap-hero__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 10%, transparent);
  pointer-events: none;
}

/* En teléfonos el banner manda sobre la caja.
   La proporción fija estaba pensada para fotografías; este hero contiene
   texto y diseño gráfico, así que se muestra completo y es la propia imagen
   la que define la altura. Así desaparece la franja vacía y no se recorta. */
@media (max-width: 599px) {
  .ap-hero__figure {
    aspect-ratio: auto;
    height: auto;
  }

  .ap-hero__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/* 18.2 Nuestra historia -------------------------------------------------- */
.ap-history {
  background: var(--surface-container-low);
  padding-block: var(--space-24);
}

.ap-history__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 768px) {
  .ap-history__grid {
    grid-template-columns: 6fr 5fr;
    gap: var(--space-16);
  }
}

.ap-history__figure {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-container);
}

.ap-history__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 18.3 Alberto "Beto" Barraza -------------------------------------------- */
.ap-beto {
  background: var(--surface-container-lowest);
  padding-block: var(--space-24);
}

.ap-beto__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 768px) {
  .ap-beto__grid {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-16);
  }
}

.ap-beto__figure {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-container);
}

.ap-beto__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Filo dorado sutil: acento de "locución" sin recargar */
.ap-beto__frame {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tertiary) 28%, transparent),
    inset 0 -80px 90px -60px color-mix(in srgb, var(--surface) 85%, transparent);
  pointer-events: none;
}

.ap-beto__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tertiary);
  margin-bottom: var(--space-4);
}
.ap-beto__eyebrow .material-symbols-outlined { font-size: 1.1rem; }

.ap-beto__name {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.ap-beto__role {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-5);
}

/* 18.4 Nuestra esencia --------------------------------------------------- */
.ap-essence {
  background: var(--surface);
  padding-block: var(--space-24);
}

.ap-essence__intro {
  text-align: center;
  margin-bottom: var(--space-12);
}
.ap-essence__intro .ap-section-title { margin-bottom: var(--space-6); }

.ap-concepts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 900px) {
  .ap-concepts {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

.ap-concept {
  background: var(--surface-container);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  transition: background var(--transition);
}
.ap-concept:hover { background: var(--surface-container-high); }

.ap-concept__icon {
  display: block;
  font-size: 2.25rem;
  color: var(--primary);
  margin-bottom: var(--space-3);
}

.ap-concept__label {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--on-surface);
}

/* 18.5 Galería de recuerdos ---------------------------------------------- */
.ap-gallery {
  background: var(--surface-container-low);
  padding-block: var(--space-24);
}

.ap-gallery__intro {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}

.ap-gallery__text {
  color: var(--outline);
  font-size: 1rem;
  line-height: 1.7;
}

.ap-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 600px) {
  .ap-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

@media (min-width: 900px) {
  .ap-gallery__grid { grid-template-columns: repeat(3, 1fr); }

  /* Con pocas imágenes se evita una fila desbalanceada. */
  .ap-gallery__grid--1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
  .ap-gallery__grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ap-gallery__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.ap-gallery__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-container);
}

.ap-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.ap-gallery__item:hover .ap-gallery__image { transform: scale(1.04); }

/* 18.6 Cierre / CTA ------------------------------------------------------ */
.ap-cta {
  background: var(--gradient-garnet);
  padding-block: var(--space-24);
}

.ap-cta__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.ap-cta__title {
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-5);
}

.ap-cta__text {
  color: var(--on-surface-variant);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: var(--space-8);
}

.ap-cta__button {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

/* .btn impone white-space: nowrap y .btn--lg añade 2rem de padding lateral:
   juntos hacían que "Escuchar Radio Colonial" se saliera de la pantalla en
   teléfonos. Aquí se permite que el texto fluya y se ajusta el padding. */
@media (max-width: 599px) {
  .ap-cta__button {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    padding-inline: var(--space-5);
    min-height: 44px;
  }
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .ap-gallery__item:hover .ap-gallery__image { transform: none; }
}

/* --------------------------------------------------------------------------
   17. UTILIDADES VARIAS
   -------------------------------------------------------------------------- */
/* Estado vacío de Actualidad Regional */
.news-empty {
  text-align: center;
  padding-block: var(--space-16);
  color: var(--outline);
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.news-empty__icon {
  font-size: 3rem;
  color: color-mix(in srgb, var(--outline) 40%, transparent);
}
.news-empty__text {
  max-width: 36rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Tarjeta de enlace regional externo
   -------------------------------------------------------------------------- */

/* Placeholder cuando el enlace no trae imagen (o están desactivadas) */
.post-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--surface-container-high) 0%,
    color-mix(in srgb, var(--primary-container) 12%, var(--surface-container)) 100%
  );
}
.post-card__thumb-placeholder .material-symbols-outlined {
  font-size: 3rem;
  color: color-mix(in srgb, var(--outline) 35%, transparent);
}

/* Línea de fuente externa */
.regional-card__source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--outline);
  margin-bottom: var(--space-3);
}
.regional-card__source .material-symbols-outlined {
  font-size: 1rem;
  color: var(--tertiary);
}
.regional-card__source strong {
  color: var(--on-surface);
  font-weight: 700;
}

/* Meta con fecha + CTA */
.regional-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.regional-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.88rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--tertiary);
  transition: gap var(--transition), color var(--transition);
}
.regional-card__cta:hover { gap: var(--space-2); color: var(--tertiary-fixed); }
.regional-card__cta .material-symbols-outlined { font-size: 1rem; }

/* --------------------------------------------------------------------------
   20. PUBLICIDAD  (template-parts/home/advertising.php)

   Se apoya en el aire que ya existe entre "Actualidad Regional" (6rem de
   padding inferior) y "Conectemos en comunidad" (5rem superior): por eso la
   sección no añade padding propio. Así el Home solo crece la altura del
   banner, sin sumar vacíos nuevos, y al desactivarla las dos secciones
   vecinas vuelven a quedar juntas exactamente como estaban.
   -------------------------------------------------------------------------- */
.ad-slot {
  /* Mismo fondo que Actualidad Regional: el contenedor debe ser sobrio y
     dejar que el banner sea lo único con presencia visual. */
  background: var(--surface);
  padding-block: 0;
}

.ad-slot__label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tertiary) 78%, transparent);
  margin-bottom: var(--space-3);
}

/* El enlace envuelve la pieza completa. */
.ad-slot__link {
  display: block;
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Filo interior en lugar de marco: coherente con el resto del sitio. */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline) 12%, transparent);
  transition: filter var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

/* Reacción muy leve, solo donde el hover existe de verdad. */
@media (hover: hover) {
  .ad-slot__link:not(.ad-slot__link--static):hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tertiary) 34%, transparent);
  }
}

.ad-slot__link:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 3px;
}

.ad-slot__picture {
  display: block;
}

/* El banner se muestra completo: nunca se recorta ni se deforma.
   Es la propia imagen la que define la altura. */
.ad-slot__image {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .ad-slot__link:hover { transform: none; }
}

/* --- Rotación (V2) ------------------------------------------------------
   Los slides se apilan en la MISMA celda de un grid. El contenedor toma la
   altura del banner más alto y no la cambia al alternar: cero salto de
   maquetación. No se usa position:absolute porque haría colapsar la altura,
   ni object-fit, para que los banners se sigan viendo completos. */
.ad-slot__viewport {
  display: grid;
}

.ad-slot__slide {
  grid-area: 1 / 1;
  min-width: 0;

  opacity: 0;
  /* visibility (y no solo opacity) saca el slide oculto del orden de
     tabulación y del árbol de accesibilidad. */
  visibility: hidden;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}

.ad-slot__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms ease, visibility 0s linear 0s;
}

/* Sin JavaScript solo se ve el primero, que ya llega marcado desde PHP. */

/* --- Indicadores --- */
.ad-slot__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.ad-slot__dot {
  /* Área táctil cómoda alrededor de un punto pequeño. */
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.ad-slot__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--outline) 45%, transparent);
  transition: background var(--transition), transform var(--transition);
}

.ad-slot__dot:hover::before {
  background: color-mix(in srgb, var(--outline) 75%, transparent);
}

.ad-slot__dot.is-active::before {
  background: var(--tertiary);
  transform: scale(1.15);
}

.ad-slot__dot:focus-visible {
  outline: 2px solid var(--tertiary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ad-slot__slide {
    transition: opacity 0s, visibility 0s;
  }
  .ad-slot__dot::before { transition: none; }
  .ad-slot__dot.is-active::before { transform: none; }
}

/* --------------------------------------------------------------------------
   21. FONDOS OPCIONALES DE SECCIÓN

   Sistema activable desde: Personalizar → Radio Colonial → Fondos de secciones.

   TODO vive bajo .has-section-bg, que PHP solo añade cuando hay una imagen
   válida. Con los fondos desactivados no se aplica ni una sola regla de este
   bloque y las secciones se comportan exactamente como antes.

   Las custom properties (--rc-bg-*) llegan en el atributo style de cada
   <section>, generadas por rc_section_background_style().
   -------------------------------------------------------------------------- */
.has-section-bg {
  position: relative;
  /* Crea contexto de apilamiento propio: los z-index negativos de las capas
     no se escapan por debajo de otras secciones. */
  isolation: isolate;
  /* Recorta el sobreancho de la capa difuminada (ver ::before). */
  overflow: hidden;
}

/* Capa 1: la fotografía. Va en un pseudo-elemento y no en la sección,
   para que el desenfoque NO afecte a textos ni tarjetas. */
.has-section-bg::before {
  content: "";
  position: absolute;
  /* Se extiende 40px por cada lado: al difuminar, el blur arrastra
     transparencia desde los bordes y aparecería un halo claro. Con el
     sobreancho, esos bordes quedan fuera y overflow:hidden los recorta.
     40px cubre con margen el desenfoque máximo permitido (20px). */
  inset: -40px;
  background-image: var(--rc-bg-image);
  background-size: cover;
  background-position: var(--rc-bg-position, center center);
  background-repeat: no-repeat;
  filter: blur(var(--rc-bg-blur, 6px));
  z-index: -2;
  pointer-events: none;
}

/* Capa 2: velo de color. No es negro puro: usa el granate y el carbón del
   sitio para que la fotografía se integre en la identidad. El porcentaje
   del Customizer controla su opacidad. */
.has-section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--primary-container) 32%, var(--surface-container-lowest)) 0%,
    var(--surface-container-lowest) 100%
  );
  opacity: var(--rc-bg-overlay, 0.7);
  z-index: -1;
  pointer-events: none;
}

/* "Mostrar fondo en móvil" desactivado: en teléfonos se retiran ambas capas
   y vuelve a verse el fondo sólido original. El contenido y los espaciados
   no cambian. */
@media (max-width: 599px) {
  .has-section-bg--desktop::before,
  .has-section-bg--desktop::after {
    content: none;
  }
}

/* --------------------------------------------------------------------------
   22. AJUSTES DE LECTURA

   Cierre del pulido tipográfico. Solo afecta a la presentación del texto:
   no cambia estructura, colores de fondo ni contenido.
   -------------------------------------------------------------------------- */

/* Las tarjetas de Actualidad Regional reciben el extracto sin recortar desde
   el feed (regional-link-card.php usa get_the_excerpt() completo), así que su
   largo es dispar. Se limita la ALTURA visible a 4 líneas para que las
   tarjetas queden parejas, sin tocar el texto importado ni el plugin. */
.regional-card .post-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* En teléfonos, 3 líneas mantienen la tarjeta compacta. */
@media (max-width: 599px) {
  .regional-card .post-card__excerpt {
    -webkit-line-clamp: 3;
  }

  /* El extracto y el enlace de la fuente son los textos que más se leen
     en móvil: se dejan en un tamaño cómodo aunque el espacio apriete. */
  .post-card__excerpt { font-size: 0.95rem; }
  .regional-card__source { font-size: 0.82rem; }
  .regional-card__cta { font-size: 0.9rem; }
}

/* --------------------------------------------------------------------------
   23. EFEMÉRIDES COMPACTAS EN MÓVIL

   "Un día como hoy" se renderiza en dos listas y solo una es visible:
   la de escritorio queda intacta y la compacta usa <details>/<summary>
   nativo. Sin JavaScript.
   -------------------------------------------------------------------------- */

/* Fuera del móvil, la lista compacta no existe. */
.events-list--compact { display: none; }

@media (max-width: 599px) {

  /* Se intercambian: en teléfonos manda el acordeón. */
  .events-list.events-list--full { display: none; }

  .events-list--compact {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .event-disclosure {
    background: color-mix(in srgb, var(--surface-container-high) 50%, transparent);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline) 12%, transparent);
  }

  /* --- Cabecera clicable --- */
  .event-disclosure__summary {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    /* Objetivo táctil cómodo. */
    min-height: 44px;
    align-content: center;
    cursor: pointer;
    /* Se oculta el triángulo nativo; el indicador es el chevron de abajo. */
    list-style: none;
  }
  .event-disclosure__summary::-webkit-details-marker { display: none; }
  .event-disclosure__summary::marker { content: ""; }

  .event-disclosure__summary:focus-visible {
    outline: 2px solid var(--tertiary);
    outline-offset: 2px;
    border-radius: var(--radius-md);
  }

  /* --- Resumen: 2 líneas cerrado, completo abierto --- */
  .event-disclosure__preview {
    color: var(--on-surface-variant);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .event-disclosure:not([open]) .event-disclosure__preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- Ver historia / Ocultar historia --- */
  .event-disclosure__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    color: var(--tertiary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
  }

  /* El texto cambia solo con CSS, según el atributo [open]. */
  .event-disclosure__label--close { display: none; }
  .event-disclosure[open] .event-disclosure__label--open { display: none; }
  .event-disclosure[open] .event-disclosure__label--close { display: inline; }

  /* Chevron dibujado con bordes: sin iconos ni imágenes. */
  .event-disclosure__toggle::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform var(--transition);
  }
  .event-disclosure[open] .event-disclosure__toggle::after {
    transform: translateY(0.05em) rotate(-135deg);
  }

  /* --- Contenido revelado: solo la fuente --- */
  .event-disclosure__body {
    padding: 0 var(--space-4) var(--space-3);
  }

  @media (prefers-reduced-motion: reduce) {
    .event-disclosure__toggle::after { transition: none; }
  }
}

/* --------------------------------------------------------------------------
   24. CLIMA COMPACTO EN MÓVIL

   En teléfonos el clima arranca con tres comunas y el resto queda tras un
   <details> nativo. Escritorio sin cambios: la lista completa se conserva.
   Sin JavaScript.
   -------------------------------------------------------------------------- */

/* Fuera del móvil, la variante compacta no existe. */
.weather-compact { display: none; }

@media (max-width: 599px) {

  /* Se intercambian las variantes. */
  .weather-list.weather-list--full { display: none; }
  .weather-compact { display: block; }

  /* --- Control "Ver más comunas" --- */
  .weather-more {
    margin-top: var(--space-2);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-container-lowest) 55%, transparent);
  }

  .weather-more__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    /* Objetivo táctil cómodo; todo el summary es clicable. */
    min-height: 44px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tertiary);
    border-radius: var(--radius-md);
    /* Se oculta el triángulo nativo: el indicador es el chevron. */
    list-style: none;
  }
  .weather-more__summary::-webkit-details-marker { display: none; }
  .weather-more__summary::marker { content: ""; }

  .weather-more__summary:focus-visible {
    outline: 2px solid var(--tertiary);
    outline-offset: 2px;
  }

  /* El texto alterna solo con CSS, según [open]. */
  .weather-more__label--close { display: none; }
  .weather-more[open] .weather-more__label--open { display: none; }
  .weather-more[open] .weather-more__label--close { display: inline; }

  /* Chevron dibujado con bordes: sin iconos ni imágenes. */
  .weather-more__summary::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15em) rotate(45deg);
    transition: transform var(--transition);
  }
  .weather-more[open] .weather-more__summary::after {
    transform: translateY(0.05em) rotate(-135deg);
  }

  /* Las comunas reveladas mantienen el estilo de fila de siempre. */
  .weather-list--rest {
    padding: 0 var(--space-3) var(--space-2);
  }

  @media (prefers-reduced-motion: reduce) {
    .weather-more__summary::after { transition: none; }
  }
}