/* blog.css — The Growth Loop Agency — Insights (v4)
   Hero = carrusel editorial alimentado por los artículos destacados (rail estático +
   featured article dinámico) → Últimos Insights (grid 2×2) → Newsletter → footer global.
   También da estilo al template compartido de artículo (blog-*.html): header, hero image,
   body de lectura larga, pullquote, key-insight, autor, related insights. */

/* ============================================================
   FEATURED INSIGHTS — hero carrusel
   ============================================================ */
.featured-insights {
  display: grid;
  grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
  min-height: clamp(680px, 78vh, 860px);
  background: #0A0C0F;
}

/* ---------- Rail izquierdo — estático, no cambia con el slide ---------- */
.featured-insights__rail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 5vw, 80px) clamp(32px, 4vw, 64px);
}
.featured-insights__rail .eyebrow { color: rgba(255, 255, 255, .78); margin-bottom: clamp(16px, 2vw, 22px); }
.featured-insights__rail h1 {
  color: #FFFFFF;
  font-size: clamp(2.5rem, 3.4vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin-bottom: clamp(18px, 2vw, 24px);
}
.featured-insights__rail p {
  color: rgba(255, 255, 255, .68);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55;
  max-width: 40ch;
  margin-bottom: clamp(28px, 3vw, 36px);
}

/* ---------- Stage derecho — dinámico ---------- */
.featured-insights__stage { position: relative; overflow: hidden; }
.featured-insights__slides { position: relative; width: 100%; height: 100%; min-height: clamp(420px, 60vh, 760px); }

.featured-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 550ms ease;
}
.featured-slide.is-active { opacity: 1; pointer-events: auto; }
.featured-slide__link { display: block; position: absolute; inset: 0; color: inherit; }
.featured-slide__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); background: var(--surface-alt); }
/* Gradiente estratégico SOLO detrás del texto (esquina inferior-izquierda, donde vive
   .featured-slide__copy) — nunca un overlay negro plano que apague toda la fotografía.
   --overlay-strength (por slide, inline en el HTML) escala la intensidad: las fotos más
   claras (SEO, IA) necesitan más para que el texto blanco siga siendo legible; la más
   oscura (funnel) necesita menos para no "quemarla". Default 0.85 si no se especifica. */
.featured-slide__overlay {
  position: absolute; inset: 0;
  opacity: var(--overlay-strength, 0.85);
  background:
    linear-gradient(0deg, rgba(7, 8, 10, .88) 0%, rgba(7, 8, 10, .5) 42%, transparent 72%),
    linear-gradient(90deg, rgba(7, 8, 10, .55) 0%, transparent 55%);
}
.featured-slide__copy {
  position: absolute;
  left: clamp(24px, 3vw, 48px);
  right: clamp(24px, 3vw, 48px);
  bottom: clamp(80px, 9vw, 108px);
  z-index: 1;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.featured-slide.is-active .featured-slide__copy { opacity: 1; transform: translateY(0); }
.featured-slide__meta { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; }
.featured-slide__category { color: var(--accent); font-family: 'Heebo', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.featured-slide__meta time { color: rgba(255, 255, 255, .6); font-size: .8125rem; }
.featured-slide__copy h2 { color: #FFFFFF; font-size: clamp(2.1rem, 3.5vw, 4rem); line-height: 1.02; letter-spacing: -.02em; max-width: min(760px, 92%); margin-bottom: .75rem; }
.featured-slide__excerpt { color: rgba(255, 255, 255, .75); font-size: clamp(.9375rem, 1.05vw, 1.0625rem); max-width: 46ch; margin-bottom: 1rem; }
.featured-slide__footer { display: flex; align-items: center; gap: 1.25rem; font-size: .875rem; }
.featured-slide__author { color: rgba(255, 255, 255, .55); }
.featured-slide__cta { color: #FFFFFF; font-weight: 600; }

/* ---------- Controles ---------- */
.featured-insights__controls {
  position: absolute;
  left: clamp(24px, 3vw, 48px);
  right: clamp(24px, 3vw, 48px);
  bottom: clamp(28px, 3vw, 40px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.featured-insights__arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(10, 12, 15, .4);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
  transition: border-color .2s ease, background .2s ease;
}
.featured-insights__arrow:hover { border-color: var(--accent); background: rgba(139, 92, 246, .25); }
.featured-insights__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Navegación editorial "01 / 04 ━━━━━ ← →" en vez de una fila de dots (brief §24): un
   contador de texto + una única barra de progreso. Decorativo (aria-hidden): la posición
   real ya la llevan los propios botones ← → y el aria-label de cada slide; no hace falta
   una segunda fuente de esa información para lectores de pantalla. */
.featured-insights__progress { display: flex; align-items: center; gap: .875rem; flex: 1 1 auto; min-width: 0; }
.featured-insights__counter { flex-shrink: 0; font-family: 'Heebo', sans-serif; font-weight: 700; font-size: .8125rem; letter-spacing: .04em; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.featured-insights__track { flex: 1 1 auto; height: 2px; border-radius: 999px; background: rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
.featured-insights__track-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
/* @keyframes + animation-play-state (no transition): así el pausado real (hover/focus/tab
   oculta) detiene la barra exactamente donde iba, en vez de "no poder pausarse" como
   pasaría con una transition — y al reanudar continúa desde ahí, no desde 0. Reiniciar
   el conteo en cada slide es cosa del JS (quitar/reponer la clase que dispara la
   animation, forzando reflow entre medias). */
@keyframes featuredTrackFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.featured-insights__track-fill.is-filling { animation: featuredTrackFill 4500ms linear forwards; }
.featured-insights.is-paused .featured-insights__track-fill.is-filling { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .featured-insights__track-fill.is-filling { animation: none; }
}

/* ============================================================
   ÚLTIMOS INSIGHTS — grid 2×2
   ============================================================ */
.insights-listing { padding-block: clamp(88px, 10vw, 140px); }
.insights-listing__header { max-width: 640px; margin-bottom: clamp(48px, 5vw, 72px); }
.insights-listing__header h2 { font-size: clamp(2.25rem, 3.4vw, 3.25rem); letter-spacing: -.02em; margin-bottom: clamp(12px, 1.4vw, 16px); }
.insights-listing__header p { color: var(--text-secondary); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }

.insights-listing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3.4vw, 48px); }

/* ---------- "Ver más" (4 iniciales + revelar el resto) ----------
   Colapsado: display:none — cero hueco en el grid (brief: "no huecos" es requisito de
   aceptación). Revelado (.is-open): display:contents — las dos <article> pasan a ser
   items DIRECTOS de .insights-listing__grid, mismo grid de 2 columnas, nunca un segundo
   layout. La animación (opacity/translateY) vive en las propias .insights-article
   porque display:contents no admite transform/opacity propios. */
.insights-listing__additional { display: none; }
.insights-listing__additional.is-open { display: contents; }
.insights-listing__additional .insights-article {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.insights-listing__additional.is-revealed .insights-article {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .insights-listing__additional .insights-article { transition: none; }
}

/* Fuera del grid a propósito (ver comentario en el HTML): botón a ancho completo,
   nunca compite por celda con las cards reveladas. */
.insights-listing__actions { display: flex; justify-content: center; margin-top: clamp(48px, 5vw, 64px); }
.insights-show-more {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .9375rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.insights-show-more:hover { background: var(--surface-hover); border-color: var(--accent); }
.insights-show-more svg { transition: transform .25s ease; }
.insights-show-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.insights-show-more[hidden] { display: none; }

.insights-article__link { display: block; color: inherit; }
.insights-article__media { aspect-ratio: 16/10; overflow: hidden; background: var(--surface-alt); }
.insights-article__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  display: block; transition: transform .35s ease;
}
.insights-article__link:hover .insights-article__media img,
.insights-article__link:focus-visible .insights-article__media img { transform: scale(1.02); }
.insights-article__body { padding-top: clamp(20px, 2.2vw, 28px); }
/* Meta en dos líneas (categoría arriba, fecha · reading time debajo) — sin autor: se
   repetía igual en las 6 cards y no aportaba discovery (brief §33/§34). El autor sigue
   viviendo en el artículo individual (.article-author). */
.insights-article__meta { display: flex; flex-direction: column; gap: .3rem; font-family: 'Heebo', sans-serif; font-size: .8125rem; color: var(--text-tertiary); margin-bottom: clamp(10px, 1.2vw, 14px); }
.insights-article__category { color: var(--accent); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .75rem; }
.insights-article__meta-line { display: flex; align-items: center; gap: .4rem; }
.insights-article h3 { font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.25; margin-bottom: .625rem; transition: color .2s ease; }
.insights-article__link:hover h3, .insights-article__link:focus-visible h3 { color: var(--accent); }
.insights-article p { color: var(--text-secondary); font-size: .9375rem; line-height: 1.55; margin-bottom: clamp(14px, 1.6vw, 18px); }
.insights-article__footer { display: flex; align-items: center; font-size: .875rem; }
.insights-article__cta { color: var(--text); font-weight: 600; transition: transform .2s ease; display: inline-block; }
.insights-article__link:hover .insights-article__cta,
.insights-article__link:focus-visible .insights-article__cta { transform: translateX(4px); }
.insights-article__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Related insights (fondo del artículo, compactas, sin excerpt) */
.insights-related { padding-block: clamp(72px, 8vw, 100px); border-top: 1px solid var(--border); }
.insights-related h2 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); margin-bottom: clamp(32px, 3.4vw, 44px); }
.insights-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.6vw, 36px); }
.insights-article--compact .insights-article__media { aspect-ratio: 16/10; }
.insights-article--compact .insights-article__body { padding-top: 1rem; }
.insights-article--compact h3 { font-size: 1.0625rem; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.insights-newsletter {
  padding-block: clamp(96px, 11vw, 144px);
  background:
    radial-gradient(900px circle at 15% 0%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(160deg, #8B5CF6 0%, #6D28D9 100%);
}
.insights-newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(48px, 6vw, 80px); }
.insights-newsletter__copy { max-width: 480px; }
.insights-newsletter__copy .eyebrow { color: rgba(255, 255, 255, .78); margin-bottom: clamp(12px, 1.4vw, 16px); }
.insights-newsletter__copy h2 { color: #FFFFFF; font-size: clamp(2rem, 2.6vw, 2.625rem); letter-spacing: -.02em; margin-bottom: clamp(12px, 1.4vw, 16px); white-space: nowrap; }
.insights-newsletter__copy p { color: rgba(255, 255, 255, .82); }

.insights-newsletter__form-wrap { flex: 1 1 380px; max-width: 440px; }
.newsletter-form { display: flex; gap: .625rem; }
.newsletter-form input {
  flex: 1 1 auto; min-width: 0; padding: .875rem 1.125rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08);
  color: #FFFFFF; font-size: .9375rem;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, .55); }
.newsletter-form input:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.insights-newsletter .btn-light-outline { color: #0A0C0F; flex-shrink: 0; }
.insights-newsletter .btn-light-outline:hover { color: var(--accent); }
.newsletter-status { margin-top: .875rem; font-size: .875rem; color: #FFFFFF; }
.newsletter-privacy { margin-top: .875rem; font-size: .8125rem; color: rgba(255, 255, 255, .68); max-width: 42ch; }
.newsletter-privacy a { color: rgba(255, 255, 255, .9); text-decoration: underline; }

/* ============================================================
   ARTICLE TEMPLATE (blog-*.html)
   ============================================================ */
.article-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 200; background: transparent; }
.article-progress__bar { height: 100%; width: 0%; background: var(--accent); transition: width 80ms linear; }

.article-breadcrumb { font-size: .8125rem; color: var(--text-tertiary); margin-bottom: clamp(24px, 3vw, 36px); }
.article-breadcrumb a { color: var(--text-tertiary); }
.article-breadcrumb a:hover { color: var(--accent); }

.article-header { padding-block: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 48px); }
.article-header__inner { max-width: 1250px; }
.article-header .eyebrow { margin-bottom: clamp(18px, 2vw, 24px); }
.article-header h1 {
  font-size: clamp(3.3rem, 5.4vw, 6.2rem);
  line-height: .98;
  letter-spacing: -.03em;
  max-width: 1100px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}
/* Claim superior (dek): tesis/opinión editorial, nunca resumen tipo meta description.
   max-width 900px es más ancho que el article-body (800px) a propósito — el dek respira
   más que el cuerpo de lectura, mismo ritmo "wide → narrow" que la hero image. */
.article-dek { max-width: 900px; margin-top: 26px; font-size: clamp(1.25rem, 1.8vw, 1.65rem); line-height: 1.42; color: var(--text-secondary); margin-bottom: clamp(24px, 2.6vw, 32px); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; font-size: .875rem; color: var(--text-tertiary); }
.article-meta__author { display: inline-flex; align-items: center; gap: .5rem; }
.article-meta__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.article-hero-figure { max-width: 1600px; margin: 0 auto clamp(48px, 6vw, 72px); padding-inline: clamp(20px, 4vw, 48px); }
.article-hero-image { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); display: block; background: var(--surface-alt); }

/* Claim/thesis inferior: la segunda tesis del artículo, no un pie de foto. Alineado a la
   izquierda a propósito (nunca centrado — un claim centrado con pocas palabras por línea
   se lee mal, sobre todo en mobile). max-width 980px > article-body (800px): mismo ritmo
   editorial "imagen ancha → columna de lectura estrecha" que el dek de arriba. */
.article-opening-thesis {
  max-width: 980px;
  margin: clamp(48px, 6vw, 84px) auto;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: clamp(1.55rem, 2.5vw, 2.3rem);
  line-height: 1.28;
  letter-spacing: -.025em;
  color: var(--text);
}

.article-body { max-width: 800px; font-size: clamp(1.125rem, 1.15vw, 1.3125rem); line-height: 1.72; color: var(--text-secondary); }
.article-lede { font-size: clamp(1.25rem, 1.5vw, 1.5rem); line-height: 1.55; color: var(--text); margin-bottom: 1.5rem; }
.article-body h2 { color: var(--text); font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.015em; margin: clamp(56px, 7vw, 96px) 0 1.25rem; }
.article-body h3 { color: var(--text); font-size: clamp(1.25rem, 1.6vw, 1.5rem); font-weight: 700; margin: 2.25rem 0 1rem; }
.article-body p { margin-bottom: 1.25rem; }

.article-pullquote {
  max-width: 900px;
  margin: clamp(40px, 5vw, 64px) auto;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.2vw, 2.125rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding-left: clamp(20px, 2.4vw, 32px);
}

.article-key-insight {
  max-width: 800px;
  margin: clamp(40px, 5vw, 56px) 0;
  padding: clamp(24px, 2.6vw, 32px);
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgb), .06);
}
.article-key-insight__label { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: .625rem; }
.article-key-insight p { color: var(--text); font-size: 1.0625rem; margin-bottom: 0; }

.article-related-service { max-width: 800px; margin-top: clamp(48px, 5vw, 64px); }

.article-author {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 22px);
  max-width: 800px;
  margin-top: clamp(40px, 4.4vw, 56px);
  padding-top: clamp(32px, 3.4vw, 40px);
  border-top: 1px solid var(--border);
  padding-bottom: clamp(56px, 6vw, 80px);
}
.article-author__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); }
.article-author__label { font-family: 'Heebo', sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: .5rem; }
.article-author__name { font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 1.0625rem; color: var(--text); }
.article-author__role { color: var(--text-secondary); font-size: .9375rem; margin: .25rem 0 .75rem; }
.article-author__link { font-size: .9375rem; font-weight: 600; color: var(--accent); }

/* ---------- Compartir (discreto) ---------- */
.article-share { display: flex; align-items: center; gap: .875rem; margin-top: clamp(28px, 3vw, 36px); }
.article-share__label { font-size: .8125rem; color: var(--text-tertiary); }
.article-share a, .article-share button { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--text-secondary); }
.article-share a:hover, .article-share button:hover { color: var(--accent); }
.article-share svg { width: 16px; height: 16px; }

/* ============ Reservado para fase futura (filtro por categoría, >= 8-10 artículos) ---- */
.insights-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.insights-filter button { border-radius: 999px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .featured-insights { grid-template-columns: 1fr; min-height: auto; }
  .featured-insights__rail { padding-block: clamp(56px, 8vw, 80px) clamp(32px, 5vw, 48px); }
  .featured-insights__stage { min-height: clamp(420px, 62vw, 560px); }
  .featured-insights__slides { min-height: clamp(420px, 62vw, 560px); }

  .insights-listing__grid { grid-template-columns: 1fr; }
  .insights-related__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  .featured-insights__rail h1 { font-size: clamp(2.25rem, 8vw, 2.75rem); }
  .featured-slide__copy { left: 20px; right: 20px; bottom: 64px; }
  .featured-slide__copy h2 { font-size: 1.375rem; max-width: none; }
  .featured-insights__controls { left: 20px; right: 20px; }

  .insights-listing { padding-block: clamp(64px, 12vw, 80px); }
  .insights-related__grid { grid-template-columns: 1fr; }

  .article-header h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .article-body { font-size: 1.0625rem; }
  .article-body h2 { margin-top: clamp(40px, 12vw, 56px); }

  .insights-newsletter { padding-block: clamp(64px, 12vw, 88px); }
  .insights-newsletter__inner { flex-direction: column; align-items: stretch; }
  .insights-newsletter__copy { max-width: none; }
  .insights-newsletter__copy h2 { white-space: normal; }
  .insights-newsletter__form-wrap { max-width: none; }
  .newsletter-form { flex-direction: column; }
  .insights-newsletter .btn-light-outline { width: 100%; }
}

/* Reduced motion: la regla global *,*::before,*::after{animation-duration:.01ms} ya cubre
   cualquier animación CSS con @keyframes, pero el crossfade de aquí usa `transition`, no
   animation — hace falta neutralizarla explícitamente, y el propio JS del carrusel detiene
   el autoplay y fija el slide 01 (ver app.js). */
@media (prefers-reduced-motion: reduce) {
  .featured-slide, .featured-slide__copy, .insights-article__media img { transition: none !important; }
}