/* ===== REMEDIA — página: Consultoría de marca y diseño de negocios =====
   Solo secciones de esta página.
   Todo selector prefijado con .page-home o .sec--*
   ===================================== */

/* ===== 01 · HERO ===========================================
   Título + subtítulo + CTA centrados. El video de la sección
   MEDIA va justo debajo, pegado (sin gap extra del .sec base).
   ========================================================== */

.sec--hero {
  padding-top: 60px;    /* pedido explícito, no viene de la escala --sp-* */
  /* ⚠️ CONFIRMAR: separación exacta antes del video; se usa un
     valor menor al padding-block estándar del .sec base. */
  padding-bottom: var(--sp-6);
  text-align: center;
}

/* 10 de 12 columnas (col-lg-10 offset-lg-1), full width antes de lg.
   ⚠️ CONFIRMAR: breakpoint — se usa el lg de Bootstrap, igual que el nav. */
.sec--hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.sec--hero__subtitle {
  text-align: center;
  /* ⚠️ CONFIRMAR contra Figma: tamaño y color exactos del subtítulo */
  font-size: var(--fs-body-xl);
  color: var(--c-text-muted);
  max-width: 600px;
  margin-inline: auto;   /* centrado dentro de .sec--hero__inner, a pedido de Abel */
}

/* ===== 02 · MEDIA ==========================================
   Video full-bleed (intro.mp4), borde a borde, sin padding.
   Autoplay + loop + muted, decorativo (aria-hidden en el HTML).
   ========================================================== */

.sec--media {
  padding-block: 0;
}

.sec--media__video {
  width: 100%;
  /* Proporción real del archivo (1920×1080) */
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ===== 03 · PROBLEMA =======================================
   Dos columnas 50/50 (col-lg-6 + col-lg-6). Izquierda: eyebrow +
   título + CTA, alineados arriba y a la izquierda. Derecha: foto
   (assets/img/home-el-enfoque.jpg, 550×372 real — llena la
   columna borde a borde).

   ⚠️ CONFIRMAR: los gaps eyebrow→título y título→botón se
   midieron de forma aproximada sobre el screenshot de referencia
   (ink a ink, no caja real), y el nivel de heading (h2 vs h3) no
   se pudo verificar contra Figma — se usó h2 por jerarquía.
   ========================================================== */

.sec--problema__row {
  row-gap: var(--sp-6);   /* solo visible si las columnas se apilan en móvil */
}

.sec--problema__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sec--problema__text .eyebrow {
  margin-bottom: var(--sp-3);   /* medido ~9px de tinta, +aire a pedido de Abel — mismo valor en las 3 secciones con eyebrow */
}

.sec--problema__title {
  font-size: var(--fs-h2);      /* ⚠️ CONFIRMAR: podría ser h3 */
  margin-bottom: var(--sp-4);   /* ⚠️ medido ~24-30px de tinta */
}

.sec--problema__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
  color: var(--c-text-muted);   /* le faltaba: heredaba blanco de --c-text */
  margin-bottom: var(--sp-4);   /* le faltaba: el CTA quedaba pegado al párrafo (p{margin:0} en base.css) */
  padding-right: 40px;
}

.sec--problema__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-img);
}

/* ===== 04/06/11 · BANDA (frase sobre el degradado) ==========
   .sec--banda y sus subclases son un componente COMPARTIDO — ver
   main.css. Nació aquí (Banda A/B del home) pero se reutiliza tal
   cual en Cierre (home) y en esto-es-para-ti.html, así que vive en
   main.css como marquee/clientes.

   Las 3 bandas del home ya NO comparten el mismo tono a pedido de Abel:
   Banda A → rojo/naranja de "El Problema" · Banda B → verde (default de
   .grad, sin override) · Cierre → turquesa de "Los Resultados". Mismo
   criterio que el-problema.css: se sobreescriben solo --g1..--g4. */

.sec--banda--rojo {
  --g1: #0B0B0B;
  --g2: #2B140F;
  --g3: #8F3A1F;
  --g4: var(--p-naranja);
}

.sec--banda--turquesa {
  --g1: #0B0B0B;
  --g2: #0F2B29;
  --g3: #1F8F82;
  --g4: var(--p-turquesa);
}

/* ===== 05 · FIRMA (16 años + datos) =========================
   Eyebrow + título + subtítulo alineados a la izquierda, ancho de
   lectura acotado (mismo criterio que .sec--banda__text). Debajo,
   una fila de datos — antes 3 en la referencia, ahora 4 a pedido
   del cliente (+400 marcas / 11 países / ∞ Industrias / 2009 Año
   de fundación), cada uno con su párrafo de descripción, y el CTA
   centrado.

   ⚠️ PENDIENTE: el dato "∞ Industrias" es nuevo (no estaba en la
   referencia de 3 datos), así que su descripción es un placeholder
   "Lorem ipsum" a pedido explícito — reemplazar con el texto real
   de Abel.

   ⚠️ CONFIRMAR: en el screenshot de referencia la fila de datos
   arranca indentada (~1 col) respecto al eyebrow/título, y el
   ritmo entre columnas no calza limpio en la grilla de 12
   columnas / contenedor 1120px — el hueco de una 4ta columna ahí
   coincidía casi exacto con el borde derecho del contenedor, lo
   que sugiere que el diseño ya reservaba ese espacio (por eso el
   cambio de 3 a 4 datos no debería romper nada). Mientras se
   confirma la grilla real, se implementó como 4 columnas iguales
   a ancho completo, sin indentación.
   ========================================================== */

.sec--firma__text {
  max-width: 750px;   /* ⚠️ CONFIRMAR: ancho de lectura aproximado, medido sobre el wrap real del título */
}

.sec--firma__text .eyebrow {
  margin-bottom: var(--sp-3);   /* medido ~10px de tinta, +aire a pedido de Abel — mismo valor en las 3 secciones con eyebrow */
}

.sec--firma__title {
  font-size: var(--fs-h2);      /* ⚠️ CONFIRMAR: podría ser h3, ver nota en 03 · PROBLEMA */
  margin-bottom: var(--sp-3);   /* ⚠️ medido ~14px de tinta */
}

.sec--firma__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
}

.sec--firma__stats {
  margin-top: var(--sp-6);   /* ⚠️ medido ~62px de tinta, calza con --sp-6 (64px) */
}

.sec--firma__stat-num {
  font-family: var(--f-display);
  font-size: var(--fs-h2);   /* mismo criterio que el título: dato corto, jerarquía alta */
  line-height: 1.25;
  margin-bottom: var(--sp-4);   /* ⚠️ medido ~21px de tinta entre la etiqueta y la descripción */
}

/* El glifo ∞ dibuja mucho más chico que un número a la misma font-size —
   se agranda para que pese visualmente igual que "+400", "11", "2009".
   Se usa transform:scale (no font-size) a propósito: escalar por font-size
   agranda la caja de línea y desalinea los <p> de abajo entre columnas;
   scale es puramente visual, no mueve nada del layout. */
.sec--firma__stat-num-inf {
  display: inline-block;
  transform: scale(1.4);
  transform-origin: left center;
}

.sec--firma__stat-desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);   /* ⚠️ medido ~14px de tinta por línea */
}

.sec--firma__cta-wrap {
  margin-top: var(--sp-5);   /* ⚠️ medido ~40px de tinta, calza con --sp-5 */
  text-align: center;        /* el CTA queda centrado sobre el ancho completo del contenedor */
}

/* ===== 07 · PUBLICO (4 perfiles) =============================
   Eyebrow + título + subtítulo arriba, cada uno en una sola línea
   (no hace falta acotar ancho). Debajo, 4 columnas iguales con
   línea divisoria vertical entre ellas — número, nombre del
   perfil, descripción y el diagrama SVG del cliente. CTA centrado.

   ⚠️ CONFIRMAR: tamaños de número/nombre/descripción aproximados
   sobre el screenshot de referencia (número y descripción en
   body-m, nombre del perfil en h4) — sin verificar contra Figma.
   ========================================================== */

.sec--publico__text .eyebrow {
  margin-bottom: var(--sp-3);   /* le faltaba esta regla — mismo valor en las 3 secciones con eyebrow */
}

.sec--publico__title {
  margin-bottom: var(--sp-2);   /* ⚠️ medido a ojo */
}

.sec--publico__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
}

.sec--publico__row {
  margin-top: var(--sp-6);   /* ⚠️ CONFIRMAR: aproximado */
  row-gap: var(--sp-5);      /* solo visible si las columnas se apilan (2×2) en móvil */
}

/* Línea divisoria entre columnas. En móvil son 2 columnas por fila
   (col-6): la 1ª y 3ª empiezan fila nueva y no deben llevar línea.
   Desde lg (4 columnas en una sola fila) solo la 1ª va sin línea. */
.sec--publico__col {
  border-left: 1px solid var(--c-line);
  padding-left: var(--sp-4);   /* ⚠️ CONFIRMAR: separación desde la línea divisoria */
}

.sec--publico__col:nth-child(odd) {
  border-left: none;
}

@media (min-width: 992px) {
  .sec--publico__col:nth-child(odd) {
    border-left: 1px solid var(--c-line);
  }
  .sec--publico__col:first-child {
    border-left: none;
  }
}

.sec--publico__num {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  margin-bottom: var(--sp-4);   /* ⚠️ medido a ojo */
}

/* Reserva el alto de 2 líneas SIEMPRE, aunque el texto ("Pymes",
   "Organizaciones") solo ocupe 1 — así las 4 descripciones (<p>
   de abajo) arrancan alineadas entre columnas sin importar cuántas
   líneas use cada nombre. line-height fijo (no "normal") porque
   min-height necesita un múltiplo exacto para calcular 2 líneas. */
.sec--publico__name {
  font-size: var(--fs-h3);
  line-height: 1.3;
  min-height: calc(1.3em * 2);
  margin-bottom: var(--sp-2);   /* ⚠️ medido a ojo */
  font-style: italic;
}

.sec--publico__desc {
  font-family: var(--f-ui);
  font-size: var(--fs-body-m);
  margin-bottom: var(--sp-4);   /* ⚠️ medido a ojo, separación hacia el diagrama */
}

.sec--publico__diagram {
  width: 100%;
  height: auto;
}

.sec--publico__cta-wrap {
  margin-top: var(--sp-6);   /* ⚠️ CONFIRMAR */
  text-align: center;
}

/* ===== 08 · ADAPTABILIDAD + marquee de industrias ============
   Título + subtítulo dentro del .container (1120px), como el
   resto de las secciones. El marquee en sí (.marquee) es un
   componente compartido — ver main.css. Aquí solo queda lo propio
   de esta sección (el texto de arriba). */

.sec--adapta__title {
  margin-bottom: var(--sp-2);   /* ⚠️ medido a ojo, mismo criterio que el resto de títulos */
}

.sec--adapta__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
}

/* ===== 09 · CLIENTES (grid de logos) =========================
   Título + subtítulo propios de esta sección. El bloque de logos
   (.clientes__logos / .clientes__note) es compartido — ver main.css. */

.sec--clientes__title {
  margin-bottom: var(--sp-2);   /* ⚠️ medido a ojo, mismo criterio que el resto de títulos */
}

.sec--clientes__subtitle {
  font-family: var(--f-ui);
  font-size: var(--fs-body-l);
}

/* ===== 11 · CIERRE ==========================================
   Reutiliza el componente .sec--banda completo (mismo look que
   Banda A/B: texto centrado + video de fondo) — no necesita CSS
   propio. .sec--cierre queda solo como gancho por si hiciera
   falta algo específico más adelante.
   ========================================================== */