/*
Theme Name: Revista Al Límite
Theme URI: https://revistaallimite.com/
Author: Revista Al Límite
Author URI: https://revistaallimite.com/
Description: Tema de revista de noticias hecho a medida para Revista Al Límite, medio de prensa de San José y Ciudad del Plata, Uruguay.
Version: 2.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: al-limite
*/

/* ============================================================
   0. TOKENS
   ============================================================ */
:root{
  /* color */
  --al-blue:        #094580;
  --al-blue-dark:   #062E56;
  --al-blue-tint:   #E9EFF6;
  --al-red:         #B50214;
  --al-red-dark:    #7E0110;
  --al-red-tint:    #F8E7E9;
  --al-ink:         #17223B;
  --al-ink-soft:    #4B5568;
  /* Texto de enlaces y detalles que en modo claro va en azul. En modo
     nocturno pasa a blanco (el azul oscuro no se lee sobre fondo oscuro).
     Usar SIEMPRE esta variable —y no --al-blue— para colorear texto. */
  --al-link:        var(--al-blue);
  --al-paper:       #FAF8F3;
  --al-paper-alt:   #F1ECDF;
  --al-line:        #DAD3C1;
  --al-white:       #FFFFFF;

  /* estilo "glass" (iOS) */
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --glass-bg:        rgba(255,255,255,0.55);
  --glass-bg-strong: rgba(255,255,255,0.72);
  --glass-border:    rgba(255,255,255,0.65);
  --glass-shadow:    0 8px 32px rgba(23,34,59,0.14);
  --glass-dark-bg:     rgba(15,22,40,0.45);
  --glass-dark-border: rgba(255,255,255,0.18);

  /* type */
  --font-display: "Space Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --al-max: 1180px;
  --al-gap: 28px;
}

/* ============================================================
   MODO NOCTURNO
   ============================================================ */
html.al-dark{
  --al-link:        #FFFFFF;
  --al-ink:         #EDEFF5;
  --al-ink-soft:    #A9B0C2;
  --al-paper:       #10141F;
  --al-paper-alt:   #171C29;
  --al-line:        #2B3244;
  --al-white:       #FFFFFF;

  --glass-bg:        rgba(30,36,54,0.55);
  --glass-bg-strong: rgba(30,36,54,0.75);
  --glass-border:    rgba(255,255,255,0.10);
  --glass-shadow:    0 8px 32px rgba(0,0,0,0.35);
  --glass-dark-bg:     rgba(6,9,16,0.55);
  --glass-dark-border: rgba(255,255,255,0.10);
}
html.al-dark body::before{
  background:
    radial-gradient(circle at 12% 8%,  rgba(9,69,128,0.35) 0%, transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(181,2,20,0.28) 0%, transparent 40%),
    radial-gradient(circle at 25% 78%, rgba(181,2,20,0.18) 0%, transparent 38%),
    radial-gradient(circle at 82% 88%, rgba(9,69,128,0.26) 0%, transparent 42%),
    var(--al-paper);
}
html.al-dark img:not(.al-theme-icon){ opacity: 0.92; }
html.al-dark{ color-scheme: dark; }
html{ transition: none; }
body, .al-footer, .al-nav, .al-account-toggle{ transition: background-color 0.35s ease, color 0.35s ease; }


*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
html{ height: 100%; overflow-y: scroll; }
body{
  margin: 0;
  overflow-x: clip; /* red de seguridad ante contenido ajeno más ancho que la pantalla (embeds, tablas); las causas propias ya están corregidas */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--al-paper);
  color: var(--al-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 8%,  rgba(9,69,128,0.30) 0%, transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(181,2,20,0.24) 0%, transparent 40%),
    radial-gradient(circle at 25% 78%, rgba(181,2,20,0.16) 0%, transparent 38%),
    radial-gradient(circle at 82% 88%, rgba(9,69,128,0.22) 0%, transparent 42%),
    var(--al-paper);
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.4em;
  color: var(--al-ink);
}
p{ margin: 0 0 1.1em; }
:focus-visible{ outline: 3px solid var(--al-link); outline-offset: 2px; } /* el aro de foco también se ve en modo nocturno */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.al-container{
  max-width: var(--al-max);
  margin: 0 auto;
  padding: 0 20px;
}
.al-visually-hidden{
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
}
.al-hairline{ border: 0; border-top: 1px solid var(--al-line); margin: 0; }

/* ============================================================
   2. MASTHEAD
   ============================================================ */
.al-topbar{ display: flex; height: 6px; }
.al-topbar span{ flex: 1; }
.al-topbar .a{ background: var(--al-blue); }
.al-topbar .b{ background: var(--al-red); }

.al-notice{
  max-width: var(--al-max);
  margin: 14px auto 0;
  padding: 12px 20px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--al-ink);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.al-masthead{
  padding: 24px 20px 10px;
  text-align: center;
}
.al-masthead-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--al-max);
  margin: 0 auto 30px;
  flex-wrap: wrap;
}
.al-masthead-date{
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--al-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
  text-align: left;
}
.al-masthead-time{ margin-left: 8px; }
.al-masthead-weather{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--al-ink);
  font-size: 13.5px;
  text-align: right;
}
.al-weather-wrap{ position: relative; }
.al-weather-toggle{
  border: 0;
  background: none;
  padding: 4px 6px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.al-weather-toggle:hover{ background: rgba(23,34,59,0.06); }
.al-weather-panel{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 260px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-dark-border);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
  color: var(--al-white);
  background: var(--glass-dark-bg);
  transition: background 0.4s ease;
}
.al-weather-panel[hidden]{ display: none; }
.al-weather-panel-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 12px;
  color: var(--al-white);
}
.al-weather-panel .al-forecast{ margin-top: 0; justify-content: space-between; gap: 14px; }
.al-weather-panel .al-forecast-label{ color: rgba(255,255,255,0.75); }
.al-weather-panel .al-forecast-icon{ color: var(--al-white); }
.al-weather-panel .al-forecast-temps{ color: var(--al-white); }
.al-weather-panel .al-forecast-temps .min{ color: rgba(255,255,255,0.7); }

/* Colores del panel según el clima actual */
.al-weather-panel.al-weather-theme--sun{ background: linear-gradient(135deg, rgba(217,119,6,0.88), rgba(180,83,9,0.9)); }
.al-weather-panel.al-weather-theme--cloud{ background: linear-gradient(135deg, rgba(71,85,105,0.88), rgba(51,65,85,0.9)); }
.al-weather-panel.al-weather-theme--fog{ background: linear-gradient(135deg, rgba(148,163,184,0.88), rgba(100,116,139,0.9)); }
.al-weather-panel.al-weather-theme--rain{ background: linear-gradient(135deg, rgba(37,99,235,0.88), rgba(29,78,216,0.9)); }
.al-weather-panel.al-weather-theme--snow{ background: linear-gradient(135deg, rgba(56,189,248,0.85), rgba(14,116,144,0.9)); }
.al-weather-panel.al-weather-theme--storm{ background: linear-gradient(135deg, rgba(88,28,135,0.9), rgba(49,21,105,0.92)); }
.al-nameplate{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  letter-spacing: 0.01em;
  margin: 0;
}
.al-nameplate a{ color: var(--al-ink); }
.al-nameplate a:hover{ text-decoration: none; }
.al-logo-img{
  max-height: 80px;
  width: auto;
  margin: 0 auto;
}
.al-logo img{ max-height: 140px; width: auto; margin: 0 auto; }
.al-tagline{
  font-family: var(--font-body);
  color: var(--al-ink-soft);
  font-size: 16px;
  margin-top: 6px;
}
.al-weather-icon{ display: flex; width: 18px; height: 18px; color: var(--al-link); }
.al-weather-icon svg{ width: 100%; height: 100%; }
.al-weather-temp{ font-weight: 600; }
.al-weather-desc{ color: var(--al-ink-soft); }
.al-weather-sep{ color: var(--al-ink-soft); }
.al-weather-place{ color: var(--al-ink-soft); }
.al-weather-place:not(:empty)::before{ content: "· "; }

.al-forecast{
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.al-forecast-day{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.al-forecast-label{
  font-size: 12px;
  color: var(--al-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.al-forecast-icon{ width: 24px; height: 24px; color: var(--al-link); }
.al-forecast-icon svg{ width: 100%; height: 100%; }
.al-forecast-temps{ font-size: 13.5px; color: var(--al-ink); }
.al-forecast-temps .max{ font-weight: 600; }
.al-forecast-temps .min{ color: var(--al-ink-soft); }

@media (max-width: 560px){
  .al-masthead-top{ justify-content: center; text-align: center; gap: 8px 20px; }
  .al-masthead-date{ text-align: center; }
  .al-masthead-weather{ text-align: center; font-size: 13px; }
  .al-forecast{ gap: 18px; }
}

/* ------------------------------------------------------------
   Barra de navegación: Portada | Podcast Al Límite | Noticias | Buscar,
   más el botón hamburguesa. Las categorías viven en el menú hamburguesa.

   Todo el responsive de la barra está en este único bloque. Los
   tamaños se ajustan solos con clamp() según el ancho disponible; y
   cuando ya no entra todo en una fila (celulares), el buscador pasa a
   su propia fila dentro de la misma píldora en lugar de quedar
   cortado. La píldora NO tiene scroll interno: nada se corta.
   ------------------------------------------------------------ */
.al-nav-wrap{
  --al-nav-top: 14px;
  position: sticky;
  top: calc(var(--al-nav-top) + var(--al-adminbar-height, 0px)); /* suma la barra de WordPress si está visible (ver header.php) */
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  margin-bottom: 10px;
}
.al-nav{
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  background: linear-gradient(135deg, rgba(9,69,128,0.55), rgba(181,2,20,0.45));
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  padding: 4px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 30px rgba(23,34,59,0.25), inset 0 1px 0 rgba(255,255,255,0.28);
}
.al-nav ul{ display: flex; flex-wrap: nowrap; justify-content: center; min-width: 0; }
.al-nav a{
  display: block;
  padding: 10px clamp(8px, 2.4vw, 16px);
  color: var(--al-white);
  font-family: var(--font-body);
  font-size: clamp(11.5px, 2.9vw, 14.5px);
  line-height: 1.3;
  border-radius: 999px;
  white-space: nowrap;
}
.al-nav a:hover{ background: linear-gradient(135deg, rgba(9,69,128,0.88), rgba(181,2,20,0.82)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.32); text-decoration: none; }

.al-nav-search{
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  height: 32px;
  margin-left: 6px;
  padding-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.28);
}
.al-nav-search input[type="search"]{
  width: 110px;
  border: 0;
  background: none;
  color: var(--al-white);
  font-family: var(--font-body);
  font-size: 13.5px;
}
.al-nav-search input[type="search"]::placeholder{ color: rgba(255,255,255,0.7); }
.al-nav-search button{
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--al-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.al-nav-search button:hover{ background: rgba(255,255,255,0.16); }
.al-nav-search button svg{ width: 15px; height: 15px; }

.al-menu-toggle{ display: none; }

/* Celulares (y tablets chicas): dos filas dentro de la píldora. Fila 1:
   los tres enlaces repartidos en todo el ancho. Fila 2: el buscador,
   con el placeholder y la lupa siempre visibles. */
@media (max-width: 600px){
  .al-nav-wrap{ --al-nav-top: 8px; align-items: flex-start; gap: 6px; padding: 0 8px; }
  .al-nav{ flex: 1 1 0; flex-wrap: wrap; border-radius: 26px; }
  .al-nav ul{ flex: 1 1 100%; flex-wrap: wrap; }
  .al-nav li{ flex: 1 1 auto; }
  .al-nav a{ padding: 9px clamp(6px, 2.4vw, 12px); text-align: center; }
  .al-nav-search{
    flex: 1 1 100%;
    min-width: 0; /* sin esto el formulario no puede ser más angosto que el ancho "natural" del input y se pasa del borde a 320px */
    height: auto;
    margin: 3px 0 0;
    padding: 3px 4px 3px 14px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.24);
  }
  .al-nav-search input[type="search"]{ flex: 1 1 auto; width: auto; min-width: 0; padding: 6px 0; font-size: 16px; } /* 16px: evita el zoom automático de iOS al enfocar */
  .al-nav-search button{ width: 34px; height: 34px; }
  .al-nav-search button svg{ width: 17px; height: 17px; }
}

/* ============================================================
   3. CATEGORY BADGES (color as information, not decoration)
   ============================================================ */
.al-badge{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--al-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.al-badge--local{ background: rgba(181,2,20,0.72); }
.al-badge--national{ background: rgba(9,69,128,0.72); }
.al-badge--default{ background: rgba(23,34,59,0.72); }

.al-kicker{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.al-kicker--local{ color: var(--al-red-dark); background: rgba(181,2,20,0.12); }
.al-kicker--national{ color: var(--al-blue-dark); background: rgba(9,69,128,0.12); }
.al-kicker--default{ color: var(--al-ink-soft); background: rgba(23,34,59,0.08); }
.al-kicker:hover{ text-decoration: none; }

/* Modo nocturno: --al-red-dark/--al-blue-dark no cambian de valor entre
   temas (a propósito, se usan también en modo claro), así que sobre el
   fondo oscuro quedan sin contraste. Se sube el brillo del texto y la
   opacidad del fondo solo para el modo nocturno; el modo claro no se toca. */
html.al-dark .al-kicker--local{ color: #FF95A3; background: rgba(181,2,20,0.32); }
html.al-dark .al-kicker--national{ color: #8FBBF0; background: rgba(9,69,128,0.34); }

/* ============================================================
   4. HOME — CARRUSEL (últimas 3 entradas)
   ============================================================ */
.al-carousel{
  position: relative;
  margin: 26px auto 0;
  max-width: var(--al-max);
  padding: 0 clamp(12px, 4vw, 20px);
}
/* PC: 460px de alto, como siempre. En tablet y celular la altura sale de
   una proporción (más horizontal, menos "retrato"), ver los @media de abajo. */
.al-carousel-viewport{
  position: relative;
  overflow: hidden;
  height: 460px;
  background: var(--al-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
}
/* La pista se estira con position:absolute (no con height:100%), así sigue
   el alto del marco tanto si es fijo (PC) como si sale de aspect-ratio. */
.al-carousel-track{
  position: absolute;
  inset: 0;
  display: flex;
}
.al-carousel-slide{
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.al-carousel-slide-link{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.al-carousel-slide img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.al-carousel-slide::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(9,15,28,0.35) 0%, transparent 55%);
}
.al-carousel-content{
  position: relative;
  z-index: 1;
  margin: 0 20px 20px;
  padding: 18px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  column-gap: 32px;
  align-items: center;
  max-height: calc(100% - 40px);
  overflow: hidden;
  background: rgba(15,22,40,0.28);
  border: 1px solid var(--glass-dark-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.al-carousel-content .al-kicker{ background: rgba(255,255,255,0.18); color: var(--al-white); }
.al-carousel-meta{
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.al-carousel-date{
  font-family: var(--font-body);
  font-size: 12.5px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  order: -1; /* la fecha se muestra arriba de la categoría, dentro de la columna 2 */
}
.al-carousel-content h2{
  grid-column: 1;
  grid-row: 1;
  color: var(--al-white);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.al-carousel-content p{
  grid-column: 1;
  grid-row: 2;
  color: rgba(255,255,255,0.85);
  font-size: 14.5px;
  max-width: none;
  margin: 6px 0 0;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* Tablet: información en una sola columna y marco 16:10. */
@media (max-width: 900px){
  .al-carousel-viewport{ height: auto; aspect-ratio: 16 / 10; max-height: 460px; }
  .al-carousel-content{ grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .al-carousel-meta{
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
  }
  .al-carousel-date{ order: 0; }
  .al-carousel-content h2{ grid-column: 1; grid-row: 2; }
  .al-carousel-content p{ grid-column: 1; grid-row: 3; margin-top: 0; }
}
/* Celular: tarjeta casi cuadrada (4:3) en vez de un retrato altísimo, y
   marco glass compacto para no tapar la foto. Se mantienen categoría,
   fecha, título y descripción; lo que no entra se recorta con "…". */
@media (max-width: 600px){
  .al-carousel-viewport{ aspect-ratio: 4 / 3; }
  .al-carousel-content{
    margin: 0 10px 10px;
    padding: 8px 11px;
    row-gap: 3px;
    max-height: calc(100% - 20px);
  }
  .al-carousel-meta{ gap: 8px; }
  .al-carousel-content .al-kicker{ font-size: 10.5px; line-height: 1.4; padding: 1px 8px; }
  .al-carousel-date{ font-size: 10.5px; }
  .al-carousel-content h2{ font-size: clamp(0.88rem, 3.8vw, 1.05rem); line-height: 1.18; }
  .al-carousel-content p{ font-size: 11.5px; line-height: 1.3; margin: 0; -webkit-line-clamp: 1; }
  .al-carousel-dots{ top: 10px; right: 12px; gap: 6px; }
}

.al-carousel-dots{
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.al-carousel-dots button{
  width: 8px; height: 8px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
}
.al-carousel-dots button.is-active{ background: var(--al-white); }

/* ============================================================
   4b. HOME — SERVICIOS CIUDAD DEL PLATA (entradas ancladas a mano)
   ============================================================ */
.al-section--servicios{
  border: 0;
  background: transparent;
}
.al-servicios-grid{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 6px 4px 10px;
}
.al-servicio-card{
  position: relative;
  flex: 1 1 220px;
  max-width: 260px;
  min-width: 170px;
  height: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--al-paper);
  box-shadow: var(--glass-shadow);
}
.al-servicio-link{ display: block; position: relative; width: 100%; height: 100%; }
.al-servicio-link img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
}
.al-servicio-overlay{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(15,22,40,0.28);
  border: 1px solid var(--glass-dark-border);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.al-servicio-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--al-white);
}
@media (max-width: 700px){
  .al-servicio-card{ flex: 0 0 45%; }
}

/* ============================================================
   5. HOME — ÚLTIMAS NOTICIAS (excluye lo que ya está en el carrusel)
   ============================================================ */
.al-section{ padding: 46px 0; }

/* Banner publicitario horizontal (activar/desactivar desde el Personalizador) */
.al-ad-banner{ padding: 30px 0 0; }
.al-ad-banner a{ display: block; }
.al-ad-banner-img{
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}

/* En categorías, no dejar que la publicidad suba por encima del título */
.archive .al-ad-sticky-wrap,
.search .al-ad-sticky-wrap{
  margin-top: 80px;
}


.al-sponsor-column{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: auto;
}
.al-content-wrap .al-ad-sticky-wrap .al-sponsor-column{
  position: static;
}
.al-ad-banner-vertical--sidebar{
  position: relative;
}
.al-ad-banner-vertical--sidebar a{ display: block; }
.al-ad-banner-vertical--sidebar img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}

.al-latest-layout{ display: block; }
/* PC / tablet: noticias a la izquierda; a la derecha, la suscripción
   arriba y las publicidades debajo. */
.al-latest-layout.has-banner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: auto 1fr;
  gap: 24px;
  align-items: start;
}
.al-latest-main{ grid-column: 1; grid-row: 1 / 3; min-width: 0; }
.al-latest-newsletter{ grid-column: 2; grid-row: 1; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.al-latest-layout.has-banner > .al-sponsor-column{ grid-column: 2; grid-row: 2; min-width: 0; }

@media (max-width: 900px){
  .al-latest-layout.has-banner{ grid-template-columns: minmax(0, 1fr) 210px; gap: 16px; }
}
/* Móvil: NO hay columna lateral. Todo se apila a todo el ancho y en
   este orden: noticias → publicidades → suscripción. Se usa flex + order
   (y no una grilla con filas fijas) para que, si no hay publicidades
   activas, no quede ningún hueco en el medio. Las imágenes de los
   anuncios mantienen su proporción (width:100%; height:auto). */
@media (max-width: 767px){
  .al-latest-layout.has-banner{ display: flex; flex-direction: column; gap: 20px; }
  .al-latest-main{ order: 1; width: 100%; }
  .al-latest-layout.has-banner > .al-sponsor-column{ order: 2; width: 100%; max-width: 460px; margin-inline: auto; }
  .al-latest-newsletter{ order: 3; width: 100%; }
  /* En celular "Últimas noticias" muestra solo 3: las entradas 4 a 10 (que
     PHP deja marcadas) se ocultan acá y aparecen en la página Noticias. */
  .al-latest-list .al-list-item.al-list-item--pc{ display: none; }
}

.al-section-head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}
.al-section-tab{
  position: relative;
  margin: 0;
  padding: 12px 24px;
  font-size: 1.4rem;
  white-space: nowrap;
  color: var(--al-white);
  background: linear-gradient(135deg, rgba(9,69,128,0.55), rgba(181,2,20,0.45));
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.al-section-line{
  flex: 1;
  height: 2px;
  background: var(--al-ink);
}
.al-section-note{
  font-family: var(--font-body);
  color: var(--al-ink-soft);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.al-section--servicios .al-section-line{ background: var(--al-red); }
.al-section--local .al-section-line{ background: var(--al-red); }
.al-section--national .al-section-line{ background: var(--al-blue); }
.al-section--editor .al-section-line{ background: var(--al-red); }
@media (max-width: 560px){
  .al-section-tab{ font-size: 1.1rem; padding: 9px 18px; white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .al-section-line{ min-width: 16px; }
  .al-section-note{ display: none; }
}

.al-latest-list{ display: flex; flex-direction: column; gap: 14px; }

.al-latest-list .al-list-item{
  display: grid;
  grid-template-columns: clamp(120px, 28%, 180px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(14px, 3vw, 28px);
  padding: clamp(12px, 2.6vw, 18px);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
}
.al-latest-list .al-list-item > div{ min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.al-latest-list .al-figure{ position: relative; height: 150px; width: 100%; overflow: hidden; border-radius: var(--radius-sm); background: var(--al-paper-alt); align-self: center; }
.al-latest-list .al-figure img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.al-latest-list h3{
  font-size: 1.15rem;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.al-latest-list p{
  color: var(--al-ink-soft);
  font-size: 15px;
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.al-list-meta{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.al-list-date{
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--al-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Celular: imagen arriba (proporción fija, sin deformarse) y texto abajo,
   ocupando todo el ancho de la tarjeta. */
@media (max-width: 560px){
  .al-latest-list .al-list-item{ grid-template-columns: minmax(0, 1fr); }
  .al-latest-list .al-list-item > div{ justify-content: flex-start; }
  .al-latest-list .al-list-item .al-figure{ height: auto; aspect-ratio: 16 / 10; align-self: start; }
}

/* ============================================================
   6. LOCAL SECTION (Ciudad del Plata + San José) — tinted band
   ============================================================ */
.al-section--local{
  border: 0;
}

.al-local-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.al-story{
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 14px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
}
.al-story h2,
.al-story h3{
  font-size: 1.2rem;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.al-story p{
  color: var(--al-ink-soft);
  font-size: 15.5px;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.al-story .al-figure{ margin-bottom: 10px; height: 190px; overflow: hidden; border-radius: var(--radius-sm); background: var(--al-paper-alt); }
.al-story .al-figure img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.al-local-grid > .al-story:first-child .al-figure{ height: 280px; }

@media (max-width: 900px){
  .al-local-grid{ grid-template-columns: 1fr 1fr; }
  .al-local-grid > .al-story:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 600px){
  .al-local-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   7. NATIONAL SECTION (Uruguay) — thin blue rule
   ============================================================ */
.al-national-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.al-national-grid .al-story{ padding: 16px; min-width: 0; }
.al-national-grid .al-story h4{
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
  max-height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.al-national-grid .al-story p{
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.35;
  max-height: calc(1.35em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --- Modo "overlay": imagen de fondo completa + marco glass centrado
   encima (Lo más leído / Selección del editor), mismo lenguaje visual
   que el carrusel de la portada --- */
.al-national-grid .al-story.al-story--overlay{
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--al-paper-alt);
}
.al-story--overlay .al-figure{
  position: absolute;
  inset: 0;
  margin: 0;
  height: 100%;
  border-radius: 0;
}
.al-story--overlay .al-figure img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.al-story--overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(9,15,28,0.45) 0%, transparent 55%);
}
.al-story-overlay{
  position: relative;
  z-index: 1;
  margin: 8px;
  padding: 5px 10px;
  max-height: 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
  overflow: hidden;
  background: rgba(15,22,40,0.28);
  border: 1px solid var(--glass-dark-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.al-story--overlay .al-kicker{
  background: rgba(255,255,255,0.18);
  color: var(--al-white);
  font-size: 10px;
  padding: 2px 9px;
}
.al-national-grid .al-story--overlay h4{
  color: var(--al-white);
  font-size: 0.75rem;
  line-height: 1.2;
  margin: 0;
  max-height: 1.2em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.al-story--overlay h4 a{ color: inherit; }
.al-national-grid .al-story--overlay p{
  color: rgba(255,255,255,0.85);
  font-size: 11px;
  line-height: 1.25;
  margin: 0;
  max-height: 1.25em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 560px){
  .al-national-grid .al-story.al-story--overlay{ min-height: 200px; }
}
@media (max-width: 900px){ .al-national-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .al-national-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   8. ARCHIVE / BLOG LIST
   ============================================================ */
.al-list-item{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 20px;
  margin-bottom: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
}
.al-list-item .al-figure{ aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); }
.al-list-item .al-figure img{ width: 100%; height: 100%; object-fit: cover; }
.al-list-item h2,
.al-list-item h3{ font-size: 1.4rem; margin-top: 6px; overflow-wrap: anywhere; word-break: break-word; }
.al-list-item p{ color: var(--al-ink-soft); overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 640px){
  .al-list-item{ grid-template-columns: 1fr; }
}

.al-archive-head{ padding: 40px 0 18px; }
.al-archive-head p{ color: var(--al-ink-soft); margin-top: 14px; }

.al-archive-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.al-archive-grid .al-story .al-figure{ height: 280px; }

.pagination{
  margin: 30px 0 10px;
  padding-top: 26px;
  border-top: 1px solid var(--al-line);
}
.pagination .nav-links{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pagination .page-numbers{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--al-ink);
  background: rgba(255,255,255,0.35);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  cursor: pointer;
}
.pagination .page-numbers:hover{ text-decoration: none; border-color: var(--al-ink); }
.pagination .page-numbers.current{
  color: var(--al-white);
  background: linear-gradient(135deg, var(--al-blue), var(--al-red));
  border-color: transparent;
  font-weight: 600;
}
.pagination .page-numbers.dots{ background: none; border: 0; }
.pagination .prev.page-numbers, .pagination .next.page-numbers{ padding: 0 16px; }

/* ============================================================
   9. SINGLE ARTICLE
   ============================================================ */
.al-article{
  max-width: 780px;
  margin: 0 auto 20px;
  padding: 40px clamp(20px, 4vw, 52px);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--glass-shadow);
}
.al-article-head{ margin-bottom: 22px; }
.al-article-head h1{
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  margin: 10px 0 14px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.al-article-meta{
  color: var(--al-ink-soft);
  font-size: 15px;
  border-top: 1px solid var(--al-line);
  border-bottom: 1px solid var(--al-line);
  padding: 10px 0;
}
.al-article-figure{ margin: 26px 0; }
.al-article-figure img{ border-radius: var(--radius-md); }
.al-article-figure figcaption{
  font-size: 14px;
  color: var(--al-ink-soft);
  margin-top: 8px;
}
.al-article-body{ font-size: 19px; line-height: 1.7; overflow-wrap: anywhere; word-break: break-word; }
.al-article-body p{ margin: 0 0 1.3em; }
.al-article-body h2{
  font-size: 1.7em;
  line-height: 1.25;
  font-weight: 700;
  margin: 1.4em 0 0.6em;
  color: var(--al-ink);
}
.al-article-body h3{
  font-size: 1.35em;
  line-height: 1.3;
  font-weight: 700;
  margin: 1.3em 0 0.5em;
  color: var(--al-ink);
}
.al-article-body h4{
  font-size: 1.15em;
  line-height: 1.35;
  font-weight: 700;
  margin: 1.1em 0 0.4em;
  color: var(--al-ink);
}
.al-article-body blockquote{
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--al-red);
  font-family: var(--font-display);
  font-size: 1.2em;
  color: var(--al-ink);
}
.al-article-tags{ margin: 30px 0; }
.al-article-tags a{
  display: inline-block;
  font-size: 14px;
  padding: 5px 14px;
  margin: 0 8px 8px 0;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--al-ink-soft);
}
.al-article-tags a:hover{ border-color: var(--al-ink); text-decoration: none; }

.al-post-nav{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--al-gap);
  padding: 26px 0;
  margin-top: 20px;
  border-top: 1px solid var(--al-line);
}
.al-post-nav .prev,
.al-post-nav .next{ min-width: 0; }
.al-post-nav a{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.al-post-nav .al-post-nav-label{
  display: block;
  font-size: 12px;
  color: var(--al-ink-soft);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.al-post-nav .next{ text-align: right; }
@media (max-width: 560px){ .al-post-nav{ grid-template-columns: minmax(0, 1fr); } .al-post-nav .next{ text-align: left; } }

/* ============================================================
   10. SIDEBAR / WIDGETS
   ============================================================ */
.al-content-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 44px;
  row-gap: 16px;
  max-width: var(--al-max);
  margin: 0 auto;
  padding: 26px 20px 0;
  align-items: start;
}
.al-content-wrap .al-main{ grid-column: 1; grid-row: 1 / 3; min-width: 0; }
.al-content-wrap .al-sidebar{ grid-column: 2; grid-row: 1; }
.al-content-wrap .al-ad-sticky-wrap{ grid-column: 2; grid-row: 2; position: relative; }
@media (max-width: 900px){
  .al-content-wrap{ grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 24px; }
  .al-content-wrap .al-main{ grid-column: 1; grid-row: 1; }
  .al-content-wrap .al-sidebar{ grid-column: 1; grid-row: 2; }
  .al-content-wrap .al-ad-sticky-wrap{ grid-column: 1; grid-row: 3; position: relative; }
  .al-ad-banner-vertical--sidebar img{ border-radius: 10px; }
}

.al-widget{
  padding: 22px;
  margin-bottom: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
}
.al-widget h2, .al-widget h3{ font-size: 1.15rem; }
.al-widget ul li{ padding: 8px 0; border-top: 1px solid rgba(23,34,59,0.08); }
.al-widget ul li:first-child{ border-top: 0; }

.al-newsletter{
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--al-white);
  padding: 24px;
}
.al-newsletter h3{ color: var(--al-white); }
.al-newsletter p{ color: rgba(255,255,255,0.85); font-size: 15px; }
.al-newsletter input[type="email"]{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.12);
  color: var(--al-white);
  font-family: var(--font-body);
}
.al-newsletter input[type="email"]::placeholder{ color: rgba(255,255,255,0.6); }
.al-newsletter-msg{
  min-height: 18px;
  margin: 10px 0 0;
  font-size: 13.5px;
}
.al-newsletter-msg.is-ok{ color: #8ee6a1; }
.al-newsletter-msg.is-error{ color: #ffb4b4; }
.al-btn{
  display: inline-block;
  background: var(--al-red);
  color: var(--al-white);
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  cursor: pointer;
}
.al-btn:hover{ background: var(--al-red-dark); text-decoration: none; }

/* ============================================================
   11. SEARCH FORM
   ============================================================ */
.al-search-form{ display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.al-search-form input[type="search"]{
  flex: 1 1 140px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-body);
}
.al-search-form button{
  flex: 0 0 auto;
  border: 0;
  background: var(--al-ink);
  color: var(--al-white);
  border-radius: 999px;
  padding: 0 20px;
  cursor: pointer;
}

/* ============================================================
   12. FOOTER
   ============================================================ */
.al-footer{
  background: linear-gradient(135deg, rgba(9,69,128,0.7), rgba(181,2,20,0.6));
  border: 1px solid rgba(255,255,255,0.22);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  color: rgba(255,255,255,0.85);
  margin: auto 20px 0;
  flex-shrink: 0;
  font-size: 15px; /* editable desde Personalizar → Pie de página */
  line-height: 1.6;
}
.al-footer-cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 44px 24px;
  max-width: var(--al-max);
  margin: 0 auto;
}
.al-footer-cols > div{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.al-footer h3{ color: var(--al-white); font-size: 1em; margin: 0; letter-spacing: 0.02em; overflow-wrap: anywhere; word-break: break-word; }
.al-footer p{ margin: 0; overflow-wrap: anywhere; word-break: break-word; }
.al-footer a:hover{ color: var(--al-white); }
.al-footer ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.al-footer ul li{ padding: 4px 0; }
@media (max-width: 900px){
  .al-footer-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 720px){
  .al-footer-cols{ grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .al-footer-cols > div{ align-items: center; }
}

.al-footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.22);
  padding: 14px 20px;
  text-align: center;
  font-size: 0.85em; /* relativo al tamaño del footer, escala junto con el control de Personalizar */
}
.al-footer-bottom .al-container{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px){
  .al-footer-bottom .al-container{ justify-content: center; text-align: center; }
}

/* ============================================================
   13. 404
   ============================================================ */
.al-404{ max-width: 640px; margin: 0 auto; padding: 80px 20px; text-align: center; }
.al-404 h1{ font-size: 4rem; color: var(--al-red); }

/* ============================================================
   15. ELEMENTOS FLOTANTES (cuenta / volver arriba)
   ============================================================ */
.al-account-toggle{
  flex-shrink: 0;
  width: clamp(38px, 11vw, 48px);
  height: clamp(38px, 11vw, 48px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(135deg, rgba(9,69,128,0.55), rgba(181,2,20,0.45));
  color: var(--al-white);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 30px rgba(23,34,59,0.25), inset 0 1px 0 rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.al-account-toggle:hover{ transform: translateY(-2px); background: linear-gradient(135deg, rgba(9,69,128,0.88), rgba(181,2,20,0.82)); }
.al-account-toggle svg{ width: clamp(16px, 4.6vw, 20px); height: clamp(16px, 4.6vw, 20px); }

.al-float-stack{
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.al-float-stack--left{ right: auto; left: 20px; }
.al-float-btn{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--glass-dark-border);
  background: var(--glass-dark-bg);
  color: var(--al-white);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--glass-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.al-float-btn:hover{ transform: translateY(-2px); background: rgba(15,22,40,0.65); }
.al-float-btn svg{ width: 22px; height: 22px; }

/* ============================================================
   BOTÓN DE MODO NOCTURNO (sol / luna)
   ============================================================ */
.al-theme-toggle{
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: linear-gradient(135deg, rgba(9,69,128,0.55), rgba(181,2,20,0.45));
  color: var(--al-white);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 30px rgba(23,34,59,0.25), inset 0 1px 0 rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.al-theme-toggle:hover{ transform: translateY(-2px); background: linear-gradient(135deg, rgba(9,69,128,0.88), rgba(181,2,20,0.82)); }

.al-theme-icon{
  width: 22px;
  height: 22px;
  transition: transform 0.5s ease;
}
.al-theme-toggle[aria-pressed="true"] .al-theme-icon{ transform: rotate(45deg); }

.al-theme-sun{ fill: currentColor; }

.al-theme-moon-mask{ transition: transform 0.4s ease; transform: translate(0, 0); }
.al-theme-toggle[aria-pressed="true"] .al-theme-moon-mask{ transform: translate(-9px, -3px); }

.al-theme-rays{
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 12px 12px;
  transition: opacity 0.3s ease, transform 0.5s ease;
}
.al-theme-toggle[aria-pressed="true"] .al-theme-rays{ opacity: 0; transform: scale(1.5); }
.al-back-to-top[hidden]{ display: none; }

.al-panel-overlay{
  position: fixed;
  inset: 0;
  z-index: 997;
  background: rgba(15,22,40,0.28);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.al-panel-overlay.is-open{ opacity: 1; pointer-events: auto; }
body.al-panel-open{ overflow: hidden; }

.al-login-panel{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(380px, 100vw);
  z-index: 998;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  pointer-events: none;
}
.al-login-panel.is-open{ transform: translateX(0); pointer-events: auto; }
.al-login-panel-inner{
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 90px 28px 40px;
  background: var(--glass-bg);
  border-left: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: -12px 0 40px rgba(23,34,59,0.18);
}
.al-login-panel-inner h3{ margin-bottom: 16px; font-size: 1.15rem; }
.al-account-menu-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 6px;
}
.al-account-menu{ display: flex; flex-direction: column; }
.al-account-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-top: 1px solid rgba(23,34,59,0.1);
  color: var(--al-ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
}
.al-account-row:hover{ color: var(--al-red); text-decoration: none; }
.al-account-row svg{ width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; }
.al-account-row::-webkit-details-marker{ display: none; }
.al-account-row--expand{ border-top: 1px solid rgba(23,34,59,0.1); padding: 0; display: block; }
.al-account-row--expand summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
}
.al-account-row--expand summary::-webkit-details-marker{ display: none; }
.al-account-row--expand[open] summary svg{ transform: rotate(90deg); }
.al-account-row-content{ padding: 4px 4px 16px; }
.al-categorias-dropdown,
.al-revista-dropdown{ margin-top: 18px; border-top: 2px solid rgba(23,34,59,0.15); }
.al-categorias-dropdown summary,
.al-revista-dropdown summary{ font-weight: 700; }
.al-revista-years{ display: flex; flex-direction: column; }
.al-revista-year{ border-top: 1px solid rgba(23,34,59,0.1); }
.al-revista-year:first-child{ border-top: 0; }
.al-revista-year summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px 10px 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--al-ink);
  cursor: pointer;
  list-style: none;
}
.al-revista-year summary::-webkit-details-marker{ display: none; }
.al-revista-year summary svg{ width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; }
.al-revista-year[open] summary svg{ transform: rotate(90deg); }
.al-revista-year .al-revista-empty{ padding-left: 14px; }
.al-revista-year .al-revista-links{ padding-left: 14px; }

.al-categorias-links,
.al-revista-links{ display: flex; flex-direction: column; }
.al-categorias-links li,
.al-revista-links li{ border-top: 1px solid rgba(23,34,59,0.1); }
.al-categorias-links li:first-child,
.al-revista-links li:first-child{ border-top: 0; }
.al-categorias-links a,
.al-revista-links a{
  display: block;
  padding: 10px 2px;
  color: var(--al-link);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
}
.al-categorias-links a:hover,
.al-revista-links a:hover{ color: var(--al-red); text-decoration: underline; }
.al-revista-empty{ font-family: var(--font-body); color: var(--al-ink-soft); font-size: 14px; margin: 6px 2px 0; }

/* ---- Guía Comercial: categorías dentro del panel de cuenta ---- */
.al-guia-dropdown{ margin-top: 18px; border-top: 2px solid rgba(23,34,59,0.15); }
.al-guia-dropdown summary{ font-weight: 700; }
.al-guia-categories{ display: flex; flex-direction: column; }
.al-guia-categories li{ border-top: 1px solid rgba(23,34,59,0.1); }
.al-guia-categories li:first-child{ border-top: 0; }
.al-guia-cat-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  background: none;
  color: var(--al-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  text-align: left;
}
.al-guia-cat-btn:hover{ color: var(--al-red); }
.al-guia-cat-btn svg{ width: 14px; height: 14px; flex-shrink: 0; }

/* ---- Guía Comercial: popup con los comercios de una categoría ---- */
.al-guia-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15,22,40,0.4);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.al-guia-modal-overlay.is-open{ opacity: 1; pointer-events: auto; }

.al-guia-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  width: min(480px, 92vw);
  max-height: 82vh;
  transform: translate(-50%, -48%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.al-guia-modal.is-open{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.al-guia-modal-inner{
  position: relative;
  max-height: 82vh;
  overflow-y: auto;
  padding: 30px 26px 26px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 24px 60px rgba(23,34,59,0.35);
}
.al-guia-modal-close{
  position: absolute;
  top: 14px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--al-ink);
  cursor: pointer;
}
.al-guia-modal-close:hover{ color: var(--al-red); }
.al-guia-modal-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 16px;
  padding-right: 30px;
}

.al-guia-list{ display: flex; flex-direction: column; gap: 12px; }
.al-guia-item{
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(23,34,59,0.08);
}
.al-guia-item-name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 4px;
  color: var(--al-ink);
}
.al-guia-item-line{
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--al-ink-soft);
  margin: 2px 0;
}
.al-guia-item-line a{ color: var(--al-link); }
.al-guia-item-line a:hover{ color: var(--al-red); }

.al-guia-item--premium{
  background: linear-gradient(135deg, rgba(9,69,128,0.10), rgba(181,2,20,0.08));
  border: 1px solid rgba(9,69,128,0.25);
}
.al-guia-item-badge{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--al-blue), var(--al-red));
}
.al-guia-item-social{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.al-guia-item-social a{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--al-blue), var(--al-red));
}
.al-guia-item-social a:hover{ opacity: 0.85; }
.al-login-close{
  position: absolute;
  top: 24px;
  right: 24px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--al-ink);
  cursor: pointer;
}
.al-login-close:hover{ color: var(--al-red); }
#al-loginform p{ margin: 0 0 12px; }
#al-loginform label{ display: block; font-size: 14px; margin-bottom: 4px; color: var(--al-ink-soft); }
#al-loginform input[type="text"],
#al-loginform input[type="password"]{
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.6);
  font-family: var(--font-body);
}
#al-loginform .forgetmenot{ display: flex; align-items: center; gap: 8px; font-size: 14px; }
#al-loginform .forgetmenot input{ width: auto; }
#al-loginform .login-submit input[type="submit"]{
  display: inline-block;
  background: var(--al-red);
  color: var(--al-white);
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  cursor: pointer;
  width: 100%;
}
#al-loginform .login-submit input[type="submit"]:hover{ background: var(--al-red-dark); }
.al-login-links li{ padding: 8px 0; border-top: 1px solid rgba(23,34,59,0.1); }
.al-login-links li:first-child{ border-top: 0; }
.al-login-extra{ display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 14px; }
.al-login-extra a{ color: var(--al-link); }
@media (max-width: 480px){
  .al-login-panel{ width: 100vw; }
}

/* Compatibilidad con la barra de administración de WordPress. El empuje
   automático de WordPress está desactivado (functions.php); acá se hace
   ese empuje con la altura REAL de la barra, medida por JavaScript
   (--al-adminbar-height, ver header.php) — nunca un número fijo —, así
   que da igual cuántos plugins agreguen íconos a la barra. La variable
   solo existe si hay sesión iniciada: para los visitantes vale 0px y
   este bloque no cambia nada. El menú sticky la suma en su propia
   regla (.al-nav-wrap). */
body.admin-bar{ padding-top: var(--al-adminbar-height, 0px); }
body.admin-bar .al-panel-overlay{ top: var(--al-adminbar-height, 0px); }
body.admin-bar .al-login-panel{
  top: var(--al-adminbar-height, 0px);
  height: calc(100vh - var(--al-adminbar-height, 0px));
  height: calc(100dvh - var(--al-adminbar-height, 0px));
}
.al-comments{ max-width: 780px; margin: 40px auto; padding: 0 20px; }
.al-comments h2{ border-bottom: 2px solid var(--al-ink); padding-bottom: 10px; }
.al-comment{
  padding: 18px;
  margin-top: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.al-comment-meta{ font-size: 14px; color: var(--al-ink-soft); margin-bottom: 6px; }
.comment-form input, .comment-form textarea{
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  font-family: var(--font-body);
  margin-bottom: 12px;
}

/* ============================================================
   14. PODCAST AL LÍMITE (videos de YouTube)
   ============================================================ */
.al-video-filtros{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 30px;
}
.al-video-filtro{
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--al-ink);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.al-video-filtro:hover{ text-decoration: none; border-color: var(--al-ink); }
.al-video-filtro.is-active{
  background: linear-gradient(135deg, var(--al-blue), var(--al-red));
  color: var(--al-white);
  border-color: transparent;
}

.al-video-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin: 20px 0 10px;
}
.al-video-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.al-video-thumb{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--al-paper-alt);
  cursor: pointer;
  overflow: hidden;
}
.al-video-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.al-video-card:hover .al-video-thumb img{ transform: scale(1.05); }
.al-video-play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.al-video-play svg{
  width: 22px;
  height: 22px;
  padding: 17px;
  box-sizing: content-box;
  fill: var(--al-white);
  color: var(--al-white);
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 10px 24px rgba(15,22,40,0.35);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.al-video-card:hover .al-video-play svg{ background: rgba(181,2,20,0.6); border-color: rgba(255,255,255,0.55); transform: scale(1.08); }
.al-video-info{
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.al-video-info h3{
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 560px){
  .al-video-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 420px){
  .al-video-grid{ grid-template-columns: 1fr; }
}

/* ---- Popup del video (mismo lenguaje que el popup de Guía Comercial) ---- */
.al-video-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15,22,40,0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.al-video-modal-overlay.is-open{ opacity: 1; pointer-events: auto; }

.al-video-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  width: min(920px, 92vw);
  transform: translate(-50%, -48%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.al-video-modal.is-open{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.al-video-modal-inner{
  position: relative;
  padding: 20px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  box-shadow: 0 24px 60px rgba(23,34,59,0.35);
}
.al-video-modal-close{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--al-ink);
  cursor: pointer;
  box-shadow: var(--glass-shadow);
}
.al-video-modal-close:hover{ color: var(--al-red); }
.al-video-modal-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}
.al-video-modal-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px){
  .al-video-modal-inner{ padding: 14px; }
  .al-video-modal-close{ top: -10px; right: -10px; width: 32px; height: 32px; font-size: 18px; }
}

/* ============================================================
   16. PÁGINA "NOTICIAS" (entradas que ya no están en la portada)
   Misma estructura que Podcast Al Límite: título con línea, grilla de
   tarjetas glass y paginación. La tarjeta es `.al-story` (ver arriba),
   que ya recorta títulos y descripciones y tiene min-width:0.
   ============================================================ */
.al-noticias-grid{
  display: grid;
  /* min(100%, 260px): en pantallas muy angostas la columna nunca es más
     ancha que la pantalla. Celular 1 columna, tablet 2-3, PC 3-4. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 24px;
  margin: 20px 0 10px;
}
.al-noticia-card .al-figure{ position: relative; }
.al-noticia-card .al-figure img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.al-noticia-card .al-list-meta{ margin: 2px 0 6px; }
.al-noticia-card p{ margin-top: 6px; }
.al-noticias-pagination{ margin: 26px 0 10px; }
.al-noticias-vacio{ color: var(--al-ink-soft); margin: 20px 0; }

/* Entradas 4 a 10 de "Últimas noticias": en PC ya están en la portada, así
   que acá solo se muestran en celular (si no, se repetirían). */
@media (min-width: 768px){
  .al-noticias-grid .al-noticia-card--solo-movil{ display: none; }
}
@media (max-width: 767px){
  .al-noticias-vacio--solo-pc{ display: none; }
}