/* ==========================================================================
   landing/_stats.css
   Bloque de estadísticas (landing-stats.php).
   Styles: default | dark | cards | inline | impact
   ========================================================================== */

.landing-stats-block { padding: var(--landing-section-py) 0; }

.landing-stats-block.style-dark {
  background: var(--landing-accent);
  color: #fff;
}

.stats-item { text-align: center; padding: 1.5rem 1rem; }

.stats-icon {
  font-size: 2.2rem;
  color: var(--landing-primary);
  margin-bottom: .85rem;
}

.style-dark .stats-icon { color: var(--landing-secondary); }

.stats-number {
  font-family: "Bebas Neue", var(--lf-headline);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--landing-primary);
  margin-bottom: .4rem;
}

.style-dark .stats-number { color: var(--landing-secondary); }

.stats-suffix {
  font-family: var(--lf-headline);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  opacity: .7;
}

.stats-label {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: var(--nero-mid, #666);
  line-height: 1.4;
}

.style-dark .stats-label { color: rgba(255,255,255,.65); }

/* ── Style: cards ───────────────────────────────────────────────────────── */

.style-cards .stats-item {
  background: #fff;
  border-radius: var(--landing-radius-sm);
  box-shadow: var(--landing-shadow-sm));
  transition: box-shadow var(--lf-transition-base);
}

.style-cards .stats-item:hover {
  box-shadow: var(--landing-shadow-md));
}

/* ── Style: inline — números en fila horizontal compacta ────────────────── */
/*
 * Usado para presentar 2-3 cifras clave en una sola línea,
 * ideal para landing de investigación sobre una barra de color.
 */

.landing-stats-block.style-inline .stats-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

.landing-stats-block.style-inline .stats-item {
  padding: 1rem 2rem;
  border-right: 1px solid rgba(255,255,255,.18);
  flex: 1;
}

.landing-stats-block.style-inline .stats-item:last-child {
  border-right: none;
}

.landing-stats-block.style-inline .stats-number {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

/* ── Style: impact — un solo número protagonista ────────────────────────── */
/*
 * Un stat gigante centrado con contexto. Máximo impacto visual.
 * JSON: { "style": "impact", "items": [{ "number": 36271, "label": "..." }] }
 */

.landing-stats-block.style-impact {
  text-align: center;
  padding: var(--space-xl, 6rem) 0;
}

.landing-stats-block.style-impact .stats-number {
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--landing-primary);
  display: block;
}

.landing-stats-block.style-impact .stats-suffix {
  font-size: clamp(2.5rem, 6vw, 5rem);
  vertical-align: super;
}

.landing-stats-block.style-impact .stats-label {
  font-size: clamp(1rem, 2vw, 1.5rem);
  margin-top: 1rem;
  opacity: .75;
}

.landing-stats-block.style-impact .stats-context {
  max-width: 540px;
  margin: 1.5rem auto 0;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--nero-mid, #555);
}

/* ── Style: counter — panel protagonista de firmas (ex "thl-counter") ────── */
/*
 * El fondo es 100% configurable vía "bg" del bloque en el JSON (lo pinta el
 * <section> exterior, ver _buildSectionWrapper). Si el JSON no especifica
 * "bg", se aplica aquí un fondo oscuro por defecto — vía la clase "lb-thl_counter",
 * que SIEMPRE está presente en el <section> (a diferencia de "style-counter",
 * que solo se añade cuando el JSON declara "style" explícito; ver blockClass()).
 * Al ser un selector de clase, el "bg" del JSON (inline) lo sobreescribe sin
 * conflicto: un style="background-color:...;" inline siempre gana sobre una
 * regla de clase externa.
 */
.landing-section.lb-thl_counter {
  background: #1D252C;
  color: #fff;
}

.landing-stats-block.style-counter {
  padding: 2.5rem 0;
  text-align: center;
}

.counter-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.count-display {
  font-family: var(--lf-headline);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900;
  line-height: 1;
}

.count-monospace em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

.counter-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255,255,255,.8);
  margin-top: .5rem;
  line-height: 1.5;
}

.counter-cta {
  display: inline-block;
  margin-top: 1.5rem;
}

/* Chevron de transición inferior (simétrico a .thl-chevron-top de _block-content.css) */
.thl-chevron-bottom {
  width: 100%;
  height: 40px;
  background: inherit;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  margin-bottom: -1px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .landing-stats-block .stats-item { padding: 1rem .5rem; }
  .landing-stats-block.style-inline .stats-row { flex-wrap: wrap; }
  .landing-stats-block.style-inline .stats-item { border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); }
  .landing-stats-block.style-counter { padding: 1.75rem 0; }
}


/* ==========================================================================
   landing/_quote.css
   Bloque de cita (landing-quote.php).
   Styles: default | large | highlighted | carousel
   ========================================================================== */

.landing-quote-block { padding: var(--landing-section-py) 0; }

.landing-quote {
  max-width: 840px;
  margin: 0 auto;
  position: relative;
}

.quote-mark {
  font-family: Georgia, serif;
  font-size: 9rem;
  line-height: .55;
  color: var(--landing-primary);
  opacity: .2;
  position: absolute;
  top: -.5rem; left: -1rem;
  pointer-events: none;
  user-select: none;
}

.quote-body { position: relative; padding-left: 1.25rem; }

/* ── Style: large ───────────────────────────────────────────────────────── */

.style-large .quote-text {
  font-family: var(--lf-italic);
  font-size: clamp(1.3rem, 2.5vw, 2.1rem);
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  color: var(--gray-ink, #1a1a1a);
}

/* ── Style: highlighted ──────────────────────────────────────────────────── */

.style-highlighted {
  background: var(--landing-accent);
  color: #fff;
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--landing-radius-sm);
}

.style-highlighted .quote-text { color: #fff; font-size: clamp(1.2rem, 2vw, 1.8rem); }
.style-highlighted .quote-mark { color: rgba(255,255,255,.2); }

/* ── Quote footer (autor) ───────────────────────────────────────────────── */

.quote-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: .75rem;
}

.quote-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.quote-author { font-style: normal; }
.quote-author strong { display: block; font-size: 1rem; font-weight: 700; }
.quote-role { font-size: .83rem; color: #888; }
.style-highlighted .quote-role { color: rgba(255,255,255,.65); }

/* ── Style: carousel — rotación de citas ───────────────────────────────── */
/*
 * Usa Swiper.js (ya incluido en main.css/_swiper.css).
 * JSON: { "style": "carousel", "items": [{ "text": "...", "author": "..." }] }
 */

.landing-quote-block.style-carousel .quote-swiper {
  padding-bottom: 3rem;
}

.landing-quote-block.style-carousel .swiper-pagination-bullet {
  background: var(--landing-primary);
}

.landing-quote-block.style-carousel .quote-slide {
  text-align: center;
  padding: 0 clamp(1rem, 5vw, 4rem);
}

.landing-quote-block.style-carousel .quote-text {
  font-family: var(--lf-italic);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
  margin: 0 auto 1.5rem;
  max-width: 700px;
  color: var(--gray-ink, #1a1a1a);
}

.landing-quote-block.style-carousel .quote-author-name {
  font-weight: 700;
  font-family: var(--lf-headline);
  text-transform: uppercase;
  font-size: .9rem;
  color: var(--landing-primary);
}

.landing-quote-block.style-carousel .quote-author-role {
  font-size: .8rem;
  color: #888;
}