/*
Theme Name:   Alaire (hijo de Hello Elementor)
Theme URI:    https://alairedrones.es
Description:  Tema hijo de Hello Elementor con plantilla propia de artículo y de índice del blog: hero, imagen destacada al inicio del contenido, sidebar pegajosa con índice activo y tarjeta de servicio, ficha de autor y relacionados al pie, y estilos de contenido para que los artículos dejen de llevar CSS en línea.
Author:       Alaire
Template:     hello-elementor
Version:      1.3.0
Text Domain:  alaire
*/

/* ==========================================================================
   1. Tokens de marca
   ========================================================================== */
:root {
  --al-or: #F15A24;
  --al-or-claro: #FF8A5C;
  --al-or-fondo: #FEF0EA;
  --al-graf: #3F3E3F;
  --al-graf-osc: #2A2A2A;
  --al-sage: #B6CCCA;
  --al-sage-fondo: #EEF4F3;
  --al-verde: #1F7A5C;
  --al-verde-fondo: #E9F3EF;
  --al-rojo: #B3261E;
  --al-rojo-fondo: #FBEDEC;
  --al-dim: #6B7280;
  --al-linea: #E1EAE9;
  --al-alt: #F7F8F8;
  --al-fuente: "Helvetica Neue", Helvetica, Arial, "Inter", system-ui, sans-serif;
  --al-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --al-ancho: 1180px;
  --al-sticky: 96px;
}

/* ==========================================================================
   2. Estructura del artículo
   ========================================================================== */
/* El <main> propio evita heredar los rellenos de .site-main del tema padre,
   que son los que abrían banda blanca bajo el header en las páginas. */
.al-main { display: block; margin: 0; padding: 0; }

.al-post {
  font-family: var(--al-fuente);
  color: var(--al-graf);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.al-post * { box-sizing: border-box; }
.al-in { max-width: var(--al-ancho); margin: 0 auto; padding: 0 20px; }

/* --- Hero ---------------------------------------------------------------- */
.al-hero {
  position: relative;
  overflow: hidden;
  background-color: #1F1F1F;
  background-image:
    radial-gradient(85% 130% at 84% 0%, rgba(241, 90, 36, .3) 0%, rgba(241, 90, 36, 0) 58%),
    linear-gradient(150deg, #3A393A 0%, #2A2A2A 48%, #1B1B1B 100%);
  padding: clamp(40px, 5.5vw, 72px) 0 clamp(44px, 6vw, 76px);
}
.al-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(182, 204, 202, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182, 204, 202, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.al-hero .al-in { position: relative; }
/* La imagen destacada ya no vive en el hero: va al principio de la columna de
   contenido, justo antes de «Lo esencial». El hero es una sola columna, sin
   ancho máximo propio: el h1 y la entradilla ya llevan el suyo, y así la
   línea de autoría y fechas cabe entera sin partirse. */
.al-hero-col { max-width: none; }

.al-migas { margin: 0 0 20px; font-size: 12.5px; line-height: 1.6; color: rgba(182, 204, 202, .7); }
.al-migas a { color: rgba(182, 204, 202, .92); text-decoration: none; }
.al-migas a:hover { color: var(--al-or-claro); text-decoration: underline; text-underline-offset: 3px; }
.al-migas .sep { margin: 0 7px; opacity: .5; }

.al-cat {
  display: inline-block;
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--al-or);
  text-decoration: none;
}
.al-cat:hover { color: var(--al-or-claro); }

.al-post h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -.6px;
  color: #fff;
  max-width: 22ch;
}
.al-post h1 strong,
.al-post h1 b { font-weight: 700; }

.al-entradilla {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.9vw, 18.5px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(238, 244, 243, .82);
}

.al-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: clamp(24px, 3.2vw, 32px) 0 0;
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid rgba(182, 204, 202, .16);
  font-size: 13.5px;
  color: rgba(238, 244, 243, .66);
}
.al-meta a { color: rgba(238, 244, 243, .92); text-decoration: none; font-weight: 600; }
.al-meta a:hover { color: var(--al-or-claro); }
.al-meta-autor { display: inline-flex; align-items: center; gap: 10px; }
.al-meta-autor img {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; border: 1px solid rgba(182, 204, 202, .3);
}
.al-meta .sep { opacity: .35; }
.al-revisado { color: var(--al-sage); }

/* --- Cuerpo -------------------------------------------------------------- */
.al-cuerpo { background: #fff; padding: clamp(40px, 5.5vw, 72px) 0 clamp(48px, 6vw, 84px); }
.al-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}

/* ==========================================================================
   3. Tipografía del contenido
   ========================================================================== */
.al-contenido { max-width: 74ch; font-size: 17px; line-height: 1.75; color: #454445; }
.al-contenido > *:first-child { margin-top: 0; }

/* Imagen destacada, al principio de la columna de contenido */
.al-destacada { margin: 0 0 30px; }
.al-destacada img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--al-linea);
}
.al-destacada figcaption {
  margin-top: 11px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--al-dim);
}
.al-contenido p { margin: 0 0 22px; }
.al-contenido h2 {
  margin: clamp(42px, 5vw, 60px) 0 16px;
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.4px;
  color: var(--al-graf-osc);
  scroll-margin-top: var(--al-sticky);
}
.al-contenido h3 {
  margin: clamp(30px, 3.6vw, 40px) 0 12px;
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--al-graf-osc);
  scroll-margin-top: var(--al-sticky);
}
.al-contenido h4 {
  margin: 26px 0 10px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--al-graf-osc);
}
.al-contenido a {
  color: var(--al-or);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.al-contenido a:hover { text-decoration-thickness: 2px; }
.al-contenido strong { font-weight: 700; color: var(--al-graf-osc); }
.al-contenido ul,
.al-contenido ol { margin: 0 0 22px; padding: 0 0 0 4px; list-style: none; }
.al-contenido ul li,
.al-contenido ol li { position: relative; padding: 0 0 11px 26px; }
.al-contenido ul li::before {
  content: "";
  position: absolute; left: 4px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--al-or); opacity: .65;
}
.al-contenido ol { counter-reset: al-ol; }
.al-contenido ol li { counter-increment: al-ol; }
.al-contenido ol li::before {
  content: counter(al-ol) ".";
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--al-or); font-size: 15px;
}
.al-contenido li > ul,
.al-contenido li > ol { margin-top: 11px; }
.al-contenido blockquote {
  margin: 0 0 24px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--al-or);
  font-size: 18.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--al-graf-osc);
}
.al-contenido blockquote p:last-child { margin-bottom: 0; }
.al-contenido code {
  font-family: var(--al-mono);
  font-size: .85em;
  color: var(--al-graf-osc);
  background: var(--al-sage-fondo);
  border: 1px solid var(--al-linea);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}
.al-contenido figure { margin: 0 0 26px; }
.al-contenido figure img { width: 100%; height: auto; display: block; border-radius: 14px; }
.al-contenido figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--al-dim);
}
.al-contenido hr { display: none; }

/* Tablas: siempre con scroll propio, nunca desbordan la página */
.al-contenido table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14.8px; }
.al-tabla,
.al-contenido .wp-block-table {
  margin: 0 0 28px;
  overflow-x: auto;
  border: 1px solid var(--al-linea);
  border-radius: 14px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.al-contenido thead th {
  text-align: left;
  padding: 14px 18px;
  background: #F7FAFA;
  border-bottom: 1px solid var(--al-linea);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--al-or);
  white-space: nowrap;
}
.al-contenido tbody td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--al-linea);
  vertical-align: top;
  line-height: 1.65;
  color: #4A494A;
}
.al-contenido tbody tr:last-child td { border-bottom: 0; }
.al-contenido tbody td:first-child { font-weight: 700; color: var(--al-graf-osc); }

/* ==========================================================================
   4. Componentes de contenido (los que usa el agente escritor)

   Todo va anclado a .al-contenido a propósito: las reglas base de ul/ol/li
   de la sección 3 tienen más especificidad que un selector de clase suelto
   y se comían el paso a paso.
   ========================================================================== */

/* --- Cajas --------------------------------------------------------------- */
.al-contenido .al-esencial,
.al-contenido .al-nota,
.al-contenido .al-limite,
.al-contenido .al-positivo {
  margin: 0 0 26px;
  padding: 22px 26px;
  border: 1px solid var(--al-sage);
  border-left: 3px solid var(--al-or);
  border-radius: 0 14px 14px 0;
  background: var(--al-sage-fondo);
}
.al-contenido .al-esencial > *:last-child,
.al-contenido .al-nota > *:last-child,
.al-contenido .al-limite > *:last-child,
.al-contenido .al-positivo > *:last-child { margin-bottom: 0; }

.al-contenido .al-esencial > h2,
.al-contenido .al-esencial > h3,
.al-contenido .al-nota > h3,
.al-contenido .al-limite > h3,
.al-contenido .al-positivo > h3 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--al-or);
}
.al-contenido .al-esencial p,
.al-contenido .al-nota p,
.al-contenido .al-limite p,
.al-contenido .al-positivo p { margin-bottom: 12px; }

.al-contenido .al-limite {
  background: var(--al-rojo-fondo);
  border-color: rgba(179, 38, 30, .3);
  border-left-color: var(--al-rojo);
}
.al-contenido .al-limite > h3 { color: var(--al-rojo); }
.al-contenido .al-limite ul li::before { border-radius: 1px; background: var(--al-rojo); opacity: .75; }

.al-contenido .al-positivo {
  background: var(--al-verde-fondo);
  border-color: rgba(31, 122, 92, .3);
  border-left-color: var(--al-verde);
}
.al-contenido .al-positivo > h3 { color: var(--al-verde); }
.al-contenido .al-positivo ul li::before { background: var(--al-verde); }

/* --- Cifra destacada ----------------------------------------------------- */
.al-contenido .al-cifra {
  margin: 0 0 26px;
  padding: 26px 28px;
  border: 1px solid var(--al-linea);
  border-radius: 16px;
  background: var(--al-alt);
  text-align: center;
}
.al-contenido .al-cifra b {
  display: block;
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--al-or);
}
.al-contenido .al-cifra span {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--al-dim);
}

/* --- Paso a paso de metodología ------------------------------------------ */
.al-contenido ol.al-pasos {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  counter-reset: al-paso;
}
.al-contenido ol.al-pasos > li {
  counter-increment: al-paso;
  position: relative;
  padding: 0 0 26px 66px;
}
.al-contenido ol.al-pasos > li::before {
  content: counter(al-paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-image: linear-gradient(140deg, var(--al-or) 0%, var(--al-or-claro) 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.al-contenido ol.al-pasos > li::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 52px;
  bottom: 6px;
  width: 1px;
  background-image: linear-gradient(180deg, rgba(241, 90, 36, .45) 0%, rgba(182, 204, 202, .2) 100%);
}
.al-contenido ol.al-pasos > li:last-child { padding-bottom: 0; }
.al-contenido ol.al-pasos > li:last-child::after { display: none; }
.al-contenido ol.al-pasos > li > b {
  display: block;
  margin: 9px 0 8px;
  font-size: 17.5px;
  line-height: 1.3;
  color: var(--al-graf-osc);
}

/* --- FAQ ----------------------------------------------------------------- */
.al-contenido .al-faq { margin: 0 0 28px; }
.al-contenido .al-faq details {
  border: 1px solid var(--al-linea);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.al-contenido .al-faq details[open] {
  border-color: rgba(241, 90, 36, .45);
  box-shadow: 0 18px 40px -30px rgba(42, 42, 42, .6);
}
.al-contenido .al-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--al-graf-osc);
}
.al-contenido .al-faq summary::-webkit-details-marker { display: none; }
.al-contenido .al-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 300;
  color: var(--al-sage);
  transition: transform .3s ease, color .3s ease;
}
.al-contenido .al-faq details[open] summary::after { transform: rotate(45deg); color: var(--al-or); }
.al-contenido .al-faq details > div { padding: 0 22px 20px; }
.al-contenido .al-faq details > div > *:last-child { margin-bottom: 0; }

/* --- CTA dentro del contenido -------------------------------------------- */
.al-contenido .al-cta {
  margin: 0 0 28px;
  padding: clamp(26px, 3.4vw, 36px);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background-color: #1F1F1F;
  background-image:
    radial-gradient(90% 140% at 12% 0%, rgba(241, 90, 36, .3) 0%, rgba(241, 90, 36, 0) 62%),
    linear-gradient(160deg, #3A393A 0%, #2A2A2A 48%, #1C1C1C 100%);
}
.al-contenido .al-cta h3 {
  margin: 0 0 10px;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.al-contenido .al-cta p {
  margin: 0 0 20px;
  color: rgba(238, 244, 243, .74);
  font-size: 15px;
  max-width: 56ch;
}
.al-contenido .al-cta p:last-child { margin-bottom: 0; }

/* --- Botón (se usa también fuera del contenido) -------------------------- */
.al-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 8px;
  background-image: linear-gradient(135deg, var(--al-or) 0%, #FF7A45 100%);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 15.5px;
  font-weight: 600;
  box-shadow: 0 14px 30px -16px rgba(241, 90, 36, .9);
  transition: transform .25s ease;
}
.al-btn:hover { transform: translateY(-2px); }
.al-btn span { transition: transform .25s ease; }
.al-btn:hover span { transform: translateX(4px); }

/* --- Fuentes y nota legal ------------------------------------------------ */
.al-contenido .al-fuentes {
  margin: clamp(38px, 4.5vw, 52px) 0 0;
  padding: 24px 26px;
  border: 1px solid var(--al-linea);
  border-radius: 14px;
  background: var(--al-alt);
  font-size: 14px;
  line-height: 1.7;
  color: var(--al-dim);
}
.al-contenido .al-fuentes h2,
.al-contenido .al-fuentes h3 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--al-or);
}
.al-contenido .al-fuentes ul { margin-bottom: 14px; }
.al-contenido .al-fuentes ul li { padding-bottom: 8px; }
.al-contenido .al-fuentes ul li::before { top: 9px; opacity: .5; }
.al-contenido .al-fuentes p:last-child { margin-bottom: 0; }
.al-contenido .al-fuentes a { color: var(--al-graf-osc); }

/* ==========================================================================
   4b. Bloques de conversión

   Los seis tipos de guides/conversion-blocks.md. Van dentro del contenido del
   artículo, así que también se anclan a .al-contenido.
   ========================================================================== */

/* --- Tipo 1: card de servicio -------------------------------------------- */
.al-contenido .al-serv-card {
  margin: 0 0 30px;
  border: 2px solid var(--al-or);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 46px -32px rgba(42, 42, 42, .6);
}
.al-contenido .al-serv-card > b {
  display: block;
  padding: 9px 22px;
  background: var(--al-or);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.al-contenido .al-serv-cuerpo { padding: 24px 26px 26px; }
.al-contenido .al-serv-card h3 {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--al-graf-osc);
}
.al-contenido .al-serv-card .al-serv-sub {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--al-dim);
}
.al-contenido .al-serv-card p { font-size: 15px; }
.al-contenido .al-serv-card > .al-serv-cuerpo > p:last-of-type { margin-bottom: 20px; }

.al-contenido .al-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.al-contenido .al-chips span {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 20px;
  background: var(--al-sage-fondo);
  color: var(--al-graf-osc);
  font-size: 12.5px;
  font-weight: 600;
}
.al-contenido .al-chips span.destacado { background: var(--al-verde-fondo); color: var(--al-verde); }

.al-contenido .al-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
.al-contenido .al-kpis > div {
  padding: 13px 14px;
  border-radius: 10px;
  background: var(--al-alt);
  text-align: center;
}
.al-contenido .al-kpis b {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--al-dim);
}
.al-contenido .al-kpis span {
  display: block;
  margin-top: 5px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--al-graf-osc);
  line-height: 1.25;
}
.al-contenido .al-serv-pie { text-align: center; }
.al-contenido .al-serv-pie small {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--al-dim);
}

/* --- Tipo 2: card de entregables ----------------------------------------- */
.al-contenido .al-entregables {
  margin: 0 0 28px;
  padding: 22px 24px;
  border: 1px solid var(--al-linea);
  border-radius: 14px;
  background: #fff;
}
.al-contenido .al-entregables h3 {
  margin: 0 0 4px;
  font-size: 17.5px;
  font-weight: 700;
  color: var(--al-graf-osc);
}
.al-contenido .al-entregables .al-serv-sub {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--al-graf-osc);
}
.al-contenido .al-entregables ul { margin: 0 0 18px; }
.al-contenido .al-entregables ul li { padding-bottom: 9px; font-size: 14.5px; }
.al-contenido .al-entregables .al-cierre-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--al-linea);
}
.al-contenido .al-entregables .al-cierre-fila p {
  margin: 0;
  max-width: 46ch;
  font-size: 13px;
  color: var(--al-dim);
}

/* --- Tipo 3: card compacta ----------------------------------------------- */
.al-contenido .al-serv-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 12px;
  padding: 15px 20px;
  border: 1px solid var(--al-linea);
  border-left: 4px solid var(--al-or);
  border-radius: 10px;
  background: #fff;
}
.al-contenido .al-serv-inline b { display: block; font-size: 15.5px; color: var(--al-graf-osc); }
.al-contenido .al-serv-inline span { display: block; margin-top: 3px; font-size: 13px; color: var(--al-dim); }
.al-contenido .al-serv-inline a {
  flex: 0 0 auto;
  padding: 9px 20px;
  border-radius: 8px;
  background: var(--al-graf-osc);
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
}
.al-contenido .al-serv-inline a:hover { background: var(--al-or); }

/* --- Tipo 4: servicio recurrente ----------------------------------------- */
.al-contenido .al-recurrente {
  margin: 0 0 28px;
  border: 1px solid var(--al-sage);
  border-radius: 14px;
  overflow: hidden;
}
.al-contenido .al-recurrente > b {
  display: block;
  padding: 17px 24px 15px;
  background-image: linear-gradient(135deg, #3F3E3F 0%, #2A2A2A 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.al-contenido .al-recurrente > b span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 400;
  color: var(--al-sage);
}
.al-contenido .al-recurrente-cuerpo { padding: 20px 24px 22px; background: var(--al-sage-fondo); }
.al-contenido .al-recurrente ul { margin: 0 0 18px; }
.al-contenido .al-recurrente ul li { padding-bottom: 9px; font-size: 15px; }
.al-contenido .al-recurrente ul li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--al-verde);
  opacity: 1;
  top: 10px;
}

/* --- Tipo 5: CTA final (extiende .al-cta) -------------------------------- */
.al-contenido .al-cta.al-cta-final { text-align: center; margin-top: clamp(38px, 4.6vw, 52px); }
.al-contenido .al-cta.al-cta-final p { margin-left: auto; margin-right: auto; }
.al-contenido .al-cta-checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.al-contenido .al-cta-checks li {
  padding: 0 0 0 20px;
  position: relative;
  font-size: 13.5px;
  color: rgba(238, 244, 243, .82);
}
.al-contenido .al-cta-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--al-sage);
  opacity: 1;
}

/* --- Tipo 6: CTA de texto suave ------------------------------------------ */
.al-contenido .al-cta-suave {
  margin: 0 0 28px;
  padding: 18px 22px;
  border-left: 4px solid var(--al-or);
  border-radius: 0 10px 10px 0;
  background: var(--al-or-fondo);
}
.al-contenido .al-cta-suave p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--al-graf); }

@media (max-width: 560px) {
  .al-contenido .al-serv-inline a,
  .al-contenido .al-entregables .al-cierre-fila .al-btn { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================================
   5. Sidebar
   ========================================================================== */
.al-side {
  position: sticky;
  top: var(--al-sticky);
  display: grid;
  gap: 18px;
  align-content: start;
  /* Red de seguridad para índices muy largos: la columna se desplaza sin
     enseñar barra, en lugar de cortarse por abajo. */
  max-height: calc(100vh - var(--al-sticky) - 24px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.al-side::-webkit-scrollbar { width: 0; height: 0; display: none; }
.al-widget {
  border: 1px solid var(--al-linea);
  border-radius: 16px;
  background: #fff;
  padding: 22px 24px;
}
.al-widget > h2 {
  margin: 0 0 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--al-or);
}

/* --- Índice ------------------------------------------------------------- */
.al-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: al-toc; }
.al-toc li { counter-increment: al-toc; }
.al-toc a {
  display: block;
  padding: 7px 10px 7px 22px;
  margin-left: -10px;
  position: relative;
  font-size: 13.8px;
  line-height: 1.5;
  color: #5A595A;
  text-decoration: none;
  border-radius: 0 8px 8px 0;
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
/* La barra activa se dibuja con un pseudoelemento para poder animar su alto */
.al-toc a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--al-or);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: height .28s cubic-bezier(.4, 0, .2, 1);
}
.al-toc a::before {
  content: counter(al-toc);
  position: absolute; left: 10px; top: 7px;
  font-size: 11px; font-weight: 700; color: var(--al-sage);
  transition: color .25s ease;
}
.al-toc a:hover { color: var(--al-or); }
.al-toc a.activo {
  color: var(--al-or);
  font-weight: 600;
  background: var(--al-or-fondo);
  transform: translateX(3px);
}
.al-toc a.activo::after { height: calc(100% - 10px); }
.al-toc a.activo::before { color: var(--al-or); }
.al-toc .nivel-3 a { padding-left: 34px; font-size: 13px; color: #6E6D6E; }
.al-toc .nivel-3 a::before { left: 22px; content: "·"; font-size: 14px; }

/* --- Credenciales (se usan también en la caja de autor del pie) ---------- */
.al-credenciales {
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--al-linea);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.al-credenciales span {
  font-family: var(--al-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--al-sage-fondo);
  color: var(--al-graf-osc);
  border: 1px solid var(--al-linea);
}

/* --- Card de servicio, al final de la columna --------------------------- */
.al-servicio-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(182, 204, 202, .15);
  background-image:
    radial-gradient(95% 130% at 100% 0%, rgba(241, 90, 36, .18) 0%, rgba(241, 90, 36, 0) 60%),
    linear-gradient(160deg, #494849 0%, #3A393A 55%, #2C2C2C 100%);
}
.al-servicio-card > h2 { color: var(--al-or-claro); }
.al-servicio-card b { display: block; margin-bottom: 10px; font-size: 16.5px; color: #fff; line-height: 1.3; }
.al-servicio-card p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.65; color: rgba(182, 204, 202, .85); }
.al-servicio-card .al-formatos { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 16px; }
.al-servicio-card .al-formatos code {
  font-family: var(--al-mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(182, 204, 202, .18);
  color: rgba(238, 244, 243, .9);
}
.al-servicio-card .al-btn { width: 100%; justify-content: center; }

/* Índice plegable, solo en pantallas donde la sidebar cae debajo del texto */
.al-toc-movil {
  display: none;
  margin: 0 0 30px;
  border: 1px solid var(--al-linea);
  border-radius: 14px;
  background: var(--al-alt);
}
.al-toc-movil summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--al-or);
}
.al-toc-movil summary::-webkit-details-marker { display: none; }
.al-toc-movil summary::after { content: " +"; font-size: 14px; }
.al-toc-movil[open] summary::after { content: " −"; }
.al-toc-movil ol { margin: 0; padding: 0 20px 16px; list-style: none; counter-reset: al-tocm; }
.al-toc-movil li { counter-increment: al-tocm; }
.al-toc-movil a {
  display: block;
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.5;
  color: #4A494A;
  text-decoration: none;
  border-top: 1px solid var(--al-linea);
}
.al-toc-movil li:first-child a { border-top: 0; }
.al-toc-movil a::before {
  content: counter(al-tocm);
  position: absolute; left: 4px; top: 8px;
  font-size: 11px; font-weight: 700; color: var(--al-sage);
}
.al-toc-movil .nivel-3 a { padding-left: 40px; font-size: 13.5px; color: #6E6D6E; }
.al-toc-movil .nivel-3 a::before { left: 20px; content: "·"; }

/* ==========================================================================
   6. Pie del artículo
   ========================================================================== */
.al-autor-box {
  margin: clamp(44px, 5.5vw, 64px) 0 0;
  padding: clamp(26px, 3.4vw, 34px);
  border: 1px solid var(--al-linea);
  border-radius: 18px;
  background: var(--al-alt);
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.al-autor-box img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; }
.al-autor-box h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--al-graf-osc); }
.al-autor-box .al-rol { display: block; margin-bottom: 12px; font-size: 13.5px; color: var(--al-or); font-weight: 600; }
.al-autor-box p { margin: 0 0 14px; font-size: 14.8px; line-height: 1.7; color: #4A494A; }
.al-autor-box p:last-child { margin-bottom: 0; }
.al-autor-box .al-credenciales { justify-content: flex-start; }

.al-relacionados { margin: clamp(48px, 6vw, 72px) 0 0; }
.al-relacionados > h2 {
  margin: 0 0 6px;
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 700;
  color: var(--al-graf-osc);
  letter-spacing: -.3px;
}
.al-relacionados > p { margin: 0 0 24px; font-size: 15px; color: var(--al-dim); }
.al-rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.al-rel-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--al-linea);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.al-rel-card:hover { transform: translateY(-3px); border-color: rgba(241, 90, 36, .45); box-shadow: 0 26px 50px -34px rgba(42, 42, 42, .7); }
.al-rel-card .al-rel-img { display: block; aspect-ratio: 1200 / 630; background: var(--al-sage-fondo); overflow: hidden; }
.al-rel-card .al-rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-rel-card .al-rel-cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.al-rel-card .al-rel-cat { font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--al-or); margin-bottom: 8px; }
.al-rel-card h3 { margin: 0 0 10px; font-size: 16.5px; line-height: 1.35; color: var(--al-graf-osc); font-weight: 700; }
.al-rel-card p { margin: 0 0 14px; font-size: 13.8px; line-height: 1.6; color: #5A595A; }
.al-rel-card .al-rel-mas { margin-top: auto; font-size: 13.5px; font-weight: 600; color: var(--al-or); }

.al-cierre {
  position: relative;
  overflow: hidden;
  background-color: #1F1F1F;
  background-image:
    radial-gradient(90% 130% at 50% 120%, rgba(241, 90, 36, .4) 0%, rgba(241, 90, 36, .1) 42%, rgba(31, 31, 31, 0) 72%),
    linear-gradient(160deg, #3A393A 0%, #2A2A2A 45%, #1C1C1C 100%);
  text-align: center;
  padding: clamp(52px, 7vw, 92px) 0;
}
.al-cierre h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 300;
  color: #fff;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.2;
}
.al-cierre h2 strong { font-weight: 700; }
/* Cada párrafo se centra por sí mismo. El max-width solo lo lleva la entradilla:
   aplicárselo a todos dejaba la caja del botón y el correo pegados a la
   izquierda, con su texto centrado dentro de una columna estrecha. */
.al-cierre p { margin-left: auto; margin-right: auto; color: rgba(238, 244, 243, .76); font-size: 15.5px; }
.al-cierre .al-cierre-lead { margin: 0 auto 30px; max-width: 56ch; }
.al-cierre .al-cierre-boton { margin: 0 auto; }
.al-cierre .al-mail { margin: 22px auto 0; font-size: 14.5px; color: rgba(238, 244, 243, .66); }
.al-cierre .al-mail a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(241, 90, 36, .8); }

.al-navegacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding-top: clamp(28px, 3.4vw, 36px);
  border-top: 1px solid var(--al-linea);
}
.al-navegacion a { text-decoration: none; display: block; }
.al-navegacion .al-nav-dir { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--al-or); }
.al-navegacion .al-nav-tit { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: var(--al-graf-osc); font-weight: 600; }
.al-navegacion a:hover .al-nav-tit { color: var(--al-or); }
.al-navegacion .al-siguiente { text-align: right; }

/* ==========================================================================
   6b. Índice del blog (home.php)

   Reutiliza las tarjetas de artículo relacionado del pie del single, así que
   aquí solo va lo propio del hub: destacado, disciplinas, franja de conversión,
   paginación y estado vacío.
   ========================================================================== */
.al-blog-eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--al-or);
}
.al-blog h2 {
  margin: 0 0 12px;
  font-size: clamp(23px, 3.2vw, 33px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.4px;
  color: var(--al-graf-osc);
}
.al-blog-lead { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.75; color: var(--al-dim); }
/* El rótulo de categoría se usa también fuera de .al-rel-card (en el
   destacado), así que necesita una regla propia: dentro de un <a> sin color
   declarado heredaba el azul del navegador. */
.al-rel-cat {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--al-or);
}
.al-blog-contador {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(182, 204, 202, .16);
  font-size: 13.5px;
  color: rgba(238, 244, 243, .62);
}
.al-blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--al-dim);
}
.al-blog-meta .sep { opacity: .45; }

/* --- Artículo destacado -------------------------------------------------- */
.al-blog-portada { padding-bottom: clamp(28px, 3.4vw, 40px); }
.al-portada {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
  margin-top: clamp(20px, 2.6vw, 28px);
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--al-linea);
  border-radius: 20px;
  background: #fff;
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.al-portada:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 90, 36, .45);
  box-shadow: 0 30px 60px -38px rgba(42, 42, 42, .75);
}
.al-portada-img {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: var(--al-sage-fondo);
  aspect-ratio: 1200 / 630;
}
.al-portada-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-portada-txt { display: block; }
.al-portada-tit {
  display: block;
  margin: 10px 0 12px;
  font-size: clamp(21px, 2.8vw, 29px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.4px;
  color: var(--al-graf-osc);
}
.al-portada:hover .al-portada-tit { color: var(--al-or); }
.al-portada-desc {
  display: block;
  margin-bottom: 16px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #4A494A;
}
.al-portada .al-blog-meta { margin-bottom: 16px; }
.al-portada .al-rel-mas { display: block; font-size: 14.5px; font-weight: 600; color: var(--al-or); }

/* --- Disciplinas --------------------------------------------------------- */
.al-blog-disciplinas {
  background-color: #EEF4F3;
  background-image: radial-gradient(110% 120% at 88% 0%, #FFFFFF 0%, #F3F8F7 42%, #E2EDEC 100%);
  padding: clamp(44px, 5.5vw, 76px) 0;
}
/* Tres columnas a propósito: son cinco disciplinas, y con cuatro por fila
   quedaba una suelta al final. Con tres, la segunda fila lleva dos. */
.al-disc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 2vw, 18px);
  margin-top: clamp(26px, 3.4vw, 36px);
}
.al-disc {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  border: 1px solid rgba(182, 204, 202, .8);
  border-radius: 16px;
  background: #fff;
  text-decoration: none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.al-disc:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 90, 36, .5);
  box-shadow: 0 24px 46px -34px rgba(42, 42, 42, .7);
}
.al-disc-nombre {
  display: block;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--al-graf-osc);
}
.al-disc:hover .al-disc-nombre { color: var(--al-or); }
.al-disc-desc { display: block; font-size: 14px; line-height: 1.65; color: #5A595A; }
.al-disc-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--al-linea);
}
.al-disc-num { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--al-or); }
.al-disc-num.al-disc-vacia { color: var(--al-dim); font-weight: 600; letter-spacing: .6px; }
.al-disc-flecha { font-size: 17px; color: var(--al-sage); transition: transform .25s ease, color .25s ease; }
.al-disc:hover .al-disc-flecha { transform: translateX(4px); color: var(--al-or); }

/* --- Rejilla de artículos ------------------------------------------------ */
.al-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 24px);
  margin-top: clamp(24px, 3.2vw, 34px);
}
.al-blog-grid .al-rel-card .al-blog-meta { margin: 0 0 14px; }
.al-blog-grid .al-rel-card .al-rel-mas { margin-top: auto; }

/* Franja de conversión, ocupa la fila entera de la rejilla */
.al-blog-franja {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(26px, 3.4vw, 36px);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background-color: #1F1F1F;
  background-image:
    radial-gradient(80% 150% at 10% 0%, rgba(241, 90, 36, .3) 0%, rgba(241, 90, 36, 0) 62%),
    linear-gradient(160deg, #3A393A 0%, #2A2A2A 48%, #1C1C1C 100%);
}
.al-blog-franja b {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.al-blog-franja span {
  display: block;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(238, 244, 243, .74);
}
.al-blog-franja .al-btn { flex: 0 0 auto; }

/* --- Paginación ---------------------------------------------------------- */
.al-blog .navigation.pagination { margin-top: clamp(34px, 4.4vw, 48px); }
.al-blog .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.al-blog .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--al-linea);
  border-radius: 10px;
  background: #fff;
  color: #5A595A;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.al-blog .page-numbers:hover { border-color: rgba(241, 90, 36, .5); color: var(--al-or); }
.al-blog .page-numbers.current {
  background-image: linear-gradient(135deg, var(--al-or) 0%, #FF7A45 100%);
  border-color: transparent;
  color: #fff;
}
.al-blog .page-numbers.dots { border-color: transparent; background: transparent; }
.al-blog .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Estado vacío -------------------------------------------------------- */
.al-vacio-caja {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(32px, 4.4vw, 52px);
  border: 1px dashed rgba(182, 204, 202, .9);
  border-radius: 20px;
  background: var(--al-alt);
  text-align: center;
}
.al-vacio-caja p { margin: 0 auto 16px; max-width: 58ch; font-size: 16px; line-height: 1.8; color: #4A494A; }
.al-vacio-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 26px !important;
  margin-bottom: 0 !important;
}
.al-vacio-link { font-size: 15px; font-weight: 600; color: var(--al-or); text-decoration: none; }
.al-vacio-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   6c. Listado de artículos de las categorías-landing

   Las cinco categorías se pintan con una plantilla de archivo de Elementor:
   un widget HTML con la landing y, debajo, el widget de listado de entradas.
   Ese widget trae su propio aspecto por defecto, que no se parece en nada al
   resto del sitio, así que aquí se le da el de las tarjetas del blog.

   Se toca solo dentro de .elementor-widget-archive-posts para no pisar ningún
   otro listado de Elementor que se use en el futuro.
   ========================================================================== */
/* El ancho NO se le pone al widget: Elementor lo fuerza a 100% con reglas
   propias y ganarle exige !important. Se centra su contenido, que son divs
   normales y no dan pelea. Los 1160 px con 20 de relleno son los de .ct-in de
   la landing, así el listado alinea exactamente con el texto de arriba. */
.elementor-widget-archive-posts {
  font-family: var(--al-fuente);
  padding-bottom: clamp(56px, 7vw, 92px);
  background: #fff;
}
.elementor-widget-archive-posts .elementor-posts-container,
.elementor-widget-archive-posts .elementor-pagination,
.elementor-widget-archive-posts .elementor-posts-nothing-found {
  box-sizing: border-box;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.elementor-widget-archive-posts .elementor-posts-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(18px, 2.4vw, 24px);
}

/* --- Tarjeta ------------------------------------------------------------- */
.elementor-widget-archive-posts .elementor-post {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--al-linea);
  border-radius: 16px;
  background: #fff;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.elementor-widget-archive-posts .elementor-post:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 90, 36, .45);
  box-shadow: 0 26px 50px -34px rgba(42, 42, 42, .7);
}
.elementor-widget-archive-posts .elementor-post__thumbnail__link {
  display: block;
  margin: 0;
  width: 100%;
}
.elementor-widget-archive-posts .elementor-post__thumbnail {
  display: block;
  padding: 0;
  aspect-ratio: 1200 / 630;
  background: var(--al-sage-fondo);
}
.elementor-widget-archive-posts .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: none;
}
.elementor-widget-archive-posts .elementor-post__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
  padding: 18px 20px 20px;
}
.elementor-widget-archive-posts .elementor-post__title {
  margin: 0 0 10px;
  font-size: 16.5px;
  line-height: 1.35;
  font-weight: 700;
}
.elementor-widget-archive-posts .elementor-post__title a {
  color: var(--al-graf-osc);
  text-decoration: none;
}
.elementor-widget-archive-posts .elementor-post:hover .elementor-post__title a { color: var(--al-or); }
.elementor-widget-archive-posts .elementor-post__meta-data {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  font-size: 12.5px;
  color: var(--al-dim);
}
.elementor-widget-archive-posts .elementor-post__excerpt { margin: 0 0 14px; }
.elementor-widget-archive-posts .elementor-post__excerpt p {
  margin: 0;
  font-size: 13.8px;
  line-height: 1.6;
  color: #5A595A;
}
.elementor-widget-archive-posts .elementor-post__read-more {
  margin-top: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--al-or);
  text-decoration: none;
}
.elementor-widget-archive-posts .elementor-post__read-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Sin artículos todavía ---------------------------------------------- */
/* El mensaje va dentro de la rejilla, así que sin esto se queda encajado en la
   primera columna en vez de centrado. */
.elementor-widget-archive-posts .elementor-posts-nothing-found {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 60ch;
  margin: 0 auto;
  padding: clamp(28px, 3.6vw, 40px);
  border: 1px dashed rgba(182, 204, 202, .9);
  border-radius: 18px;
  background: var(--al-alt);
  text-align: center;
  font-size: 15.5px;
  line-height: 1.75;
  color: #4A494A;
}

/* --- Paginación ---------------------------------------------------------- */
.elementor-widget-archive-posts .elementor-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(30px, 4vw, 44px);
}
.elementor-widget-archive-posts .elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--al-linea);
  border-radius: 10px;
  background: #fff;
  color: #5A595A;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.elementor-widget-archive-posts .elementor-pagination .page-numbers:hover {
  border-color: rgba(241, 90, 36, .5);
  color: var(--al-or);
}
.elementor-widget-archive-posts .elementor-pagination .page-numbers.current {
  background-image: linear-gradient(135deg, var(--al-or) 0%, #FF7A45 100%);
  border-color: transparent;
  color: #fff;
}
.elementor-widget-archive-posts .elementor-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-widget-archive-posts .elementor-post { transition: none !important; }
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .al-hero-col { max-width: none; }
  .al-cols { grid-template-columns: minmax(0, 1fr); }
  .al-side {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 36px;
  }
  .al-toc { display: none; }
  .al-toc-movil { display: block; }
  .al-contenido { max-width: none; }
}
@media (max-width: 860px) {
  .al-portada { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .al-blog-franja { flex-direction: column; align-items: flex-start; }
  .al-blog-franja .al-btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .al-contenido { font-size: 16.5px; }
  .al-vacio-acciones { flex-direction: column; }
  .al-vacio-acciones .al-btn { width: 100%; justify-content: center; }
  .al-autor-box { grid-template-columns: 1fr; text-align: center; }
  .al-autor-box img { margin: 0 auto; }
  .al-autor-box .al-credenciales { justify-content: center; }
  .al-navegacion { grid-template-columns: 1fr; }
  .al-navegacion .al-siguiente { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .al-post * { transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   8. Impresión: que un informe impreso siga siendo legible
   ========================================================================== */
@media print {
  .al-side, .al-cierre, .al-navegacion, .al-relacionados, .al-cta { display: none !important; }
  .al-hero { background: none !important; color: #000; padding: 0 0 20px; }
  .al-post h1, .al-entradilla, .al-meta { color: #000 !important; }
  .al-contenido { max-width: none; font-size: 11pt; }
  .al-contenido a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}