/* =========================================================================
   custom.css — ÚNICA capa de override sobre el export de Webflow.
   Toda mejora o corrección de la landing va aquí, no en los CSS del export
   (normalize.css, webflow.css, incosec-cl.webflow.css), que se dejan intactos
   para poder re-exportar desde Webflow sin perder cambios.
   ========================================================================= */

/* Ancla del formulario: compensa el navbar fijo al saltar desde los CTA. */
#cotizar { scroll-margin-top: 110px; }

/* =========================================================================
   ESCALA TIPOGRÁFICA
   -------------------------------------------------------------------------
   Las secciones vienen de plantillas de Webflow distintas y cada una traía su
   propia tipografía. En una sola página convivían 26 combinaciones de
   tamaño/peso/interlineado, con 13 tamaños —varios casi idénticos: 16, 17.6 y
   18— y, sobre todo, CINCO interlineados diferentes para el mismo cuerpo de
   17.6px (1.09, 1.18, 1.25, 1.36 y 1.50). Eso es lo que hacía que el texto se
   viera desalineado de una sección a otra.

   Aquí se define una escala única y se le asignan a cada clase del export.
   Tres reglas:
     1. Un tamaño por función, no por sección.
     2. El interlineado depende del ROL: títulos apretados, cuerpo holgado,
        interfaz compacta. Nunca en píxeles fijos, para que acompañe al tamaño.
     3. El tracking va en `em` (proporcional). El export lo tenía en píxeles:
        el mismo -1px apretaba correctamente un título de 56px y estropeaba un
        texto de 24px.
   ========================================================================= */
:root {
  /* Tamaños. Los títulos son fluidos; el cuerpo, fijo para no perder
     legibilidad en pantallas chicas. */
  --ic-display: clamp(2.25rem, 1.35rem + 3.1vw, 3.5rem);   /* 36 → 56 */
  --ic-stat:    clamp(2.25rem, 1.6rem + 2.4vw, 3rem);      /* 36 → 48 */
  --ic-h2:      clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem);   /* 28 → 40 */
  --ic-h3:      clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); /* 22 → 26 */
  --ic-h4:      1.25rem;      /* 20 */
  --ic-h5:      1.0625rem;    /* 17 */
  --ic-lead:    1.1875rem;    /* 19 */
  --ic-body:    1.0625rem;    /* 17 */
  --ic-small:   0.9375rem;    /* 15 */
  --ic-eyebrow: 0.8125rem;    /* 13 */

  /* Interlineado por rol */
  --ic-lh-display: 1.08;
  --ic-lh-title:   1.2;
  --ic-lh-body:    1.6;
  --ic-lh-ui:      1.2;
  --ic-lh-tight:   1.35;   /* sellos, chips de respaldo */
  --ic-lh-compact: 1.5;    /* listas y resúmenes del hero */

  /* Tracking proporcional: sólo aprieta lo grande */
  --ic-track-display: -.022em;
  --ic-track-title:   -.012em;
  --ic-track-eyebrow: .08em;

  /* Pesos: cuatro, no cinco (el export usaba también 300) */
  --ic-w-body:  400;
  --ic-w-ui:    500;
  --ic-w-title: 600;
  --ic-w-stat:  700;
}

/* ---- Display: el título de la página -------------------------------------
   El <h1> traía la clase heading-style-h2 y quedaba en 2.5rem, exactamente el
   mismo tamaño que los <h2> de sección: no se distinguía de un subtítulo. */
.section_hero h1,
h1 {
  font-size: var(--ic-display) !important;
  line-height: var(--ic-lh-display) !important;
  letter-spacing: var(--ic-track-display) !important;
  font-weight: var(--ic-w-title) !important;
}

/* ---- Títulos de sección --------------------------------------------------
   Medían 40px por debajo de 1440 y 44.8px por encima, sin motivo. */
/* `.centrado` NO entra aquí: es una utilidad de alineación que llevan también
   antetítulos y párrafos, no un rol tipográfico. */
h2,
.heading-2 {
  font-size: var(--ic-h2) !important;
  line-height: var(--ic-lh-title) !important;
  letter-spacing: var(--ic-track-title) !important;
  font-weight: var(--ic-w-title) !important;
}

/* ---- Títulos de bloque (cards, formulario) ------------------------------- */
h3,
.heading-style-h3 {
  font-size: var(--ic-h3) !important;
  line-height: var(--ic-lh-title) !important;
  letter-spacing: var(--ic-track-title) !important;
  font-weight: var(--ic-w-title) !important;
}

/* ---- Subtítulos y preguntas del FAQ --------------------------------------
   Las preguntas estaban en 24px, el mismo tamaño que un título de card, y
   competían con él pese a ser un elemento de lista. */
h4,
.heading,
.text-size-large-2 {
  font-size: var(--ic-h4) !important;
  line-height: var(--ic-lh-title) !important;
  letter-spacing: var(--ic-track-title) !important;
  font-weight: var(--ic-w-title) !important;
}

h5,
.heading-style-h5 {
  font-size: var(--ic-h5) !important;
  line-height: var(--ic-lh-ui) !important;
  letter-spacing: normal !important;
  font-weight: var(--ic-w-title) !important;
}

/* ---- Antetítulos ---------------------------------------------------------
   Mismo rol en dos tamaños distintos (16px y 14.4px) según la sección. */
.title-small,
.title-small-2 {
  font-size: var(--ic-eyebrow) !important;
  line-height: var(--ic-lh-ui) !important;
  letter-spacing: var(--ic-track-eyebrow) !important;
  font-weight: var(--ic-w-title) !important;
  text-transform: uppercase !important;
}

/* ---- Cifras --------------------------------------------------------------
   Estaban en 2.5rem, el mismo tamaño que los títulos de sección: se leían
   como título en vez de como dato. */
.counter-title,
.counter-title.white-font {
  font-size: var(--ic-stat) !important;
  line-height: 1.05 !important;
  letter-spacing: var(--ic-track-display) !important;
  font-weight: var(--ic-w-stat) !important;
}
.paragraph-medium-lighter.is-counter {
  font-size: var(--ic-small) !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  font-weight: var(--ic-w-ui) !important;
}

/* ---- Cuerpo --------------------------------------------------------------
   Aquí estaba el desorden más visible: 17.6px con interlineados de 1.09,
   1.18, 1.25, 1.36 y 1.50 según de qué plantilla venía la sección. */
.body_one,
.body_one-dark {
  font-size: var(--ic-lead) !important;
  line-height: var(--ic-lh-body) !important;
  letter-spacing: normal !important;
  font-weight: var(--ic-w-body) !important;
}

p,
.paragraph,
.text-lighter,
.solution_item-para,
.text-color-darkgrey,        /* respuestas del FAQ */
.rt-body-font-color-2 {      /* barra de "¿Necesitas algo más?" */
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-body) !important;
  letter-spacing: normal !important;
  font-weight: var(--ic-w-body) !important;
}

.paragraph-small,
.footer-link {
  font-size: var(--ic-small) !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  font-weight: var(--ic-w-body) !important;   /* los enlaces del footer iban en 300 */
}

/* ---- Interfaz: navegación, botones, etiquetas ---------------------------- */
.nav_menu_link,
.ic-drop-toggle,
.ic-drop-link {
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-ui) !important;
  letter-spacing: normal !important;
  font-weight: var(--ic-w-ui) !important;
}

.button,
.submit-button,
.text-link-dark,
.text-block-2 {
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-ui) !important;
  letter-spacing: normal !important;
  font-weight: var(--ic-w-title) !important;
}

label,
.dark-font label {
  font-size: var(--ic-small) !important;
  line-height: var(--ic-lh-ui) !important;
  letter-spacing: normal !important;
  font-weight: var(--ic-w-ui) !important;
}

/* El sello ISO no es una cifra: se mantiene proporcional a su contenedor */
.ic-seal { letter-spacing: .02em; }

/* =========================================================================
   Entradas ordenadas. Reemplazan a los 407 scroll-reveals de Webflow, que
   entraban sin orden ni jerarquía. El escalonado lo asigna el layout por
   sección; aquí sólo viven el estado y la curva.
   ========================================================================= */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   Carrusel de logos de clientes.
   Su movimiento dependía de una interacción SCROLL_INTO_VIEW de Webflow; al
   desactivar ese grupo el reel quedaba estático. Se mueve ahora por CSS, que
   además es continuo y no depende de que la sección entre en pantalla.
   El contenedor lleva dos copias del set, por eso el recorrido es -50%.
   ========================================================================= */
/* El export dimensiona el reel en porcentajes: `.logos-track` al 200% y cada
   `.logos_grid` al 50%, o sea cada copia ocupa justo el ancho del contenedor.
   Pero dentro van 15 logos de hasta 9.625rem: la copia se desborda casi mil
   píxeles sobre la siguiente y los logos quedan montados unos sobre otros.
   El ancho tiene que salir del contenido, no del contenedor. */
.logos-track {
  width: max-content;
  animation: ic-logos-marquee 42s linear infinite;
  will-change: transform;
}
.logos_grid {
  width: max-content;
  min-width: 0;
  flex: none;
  justify-content: flex-start;
  gap: 3.5rem;
  padding-right: 3.5rem;     /* mismo aire entre la última y la primera copia */
}
.logo_grid-logo { flex: none; }

.partners_comp:hover .logos-track { animation-play-state: paused; }

@keyframes ic-logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Los logos reales son PNG con fondo claro: se homogeneízan en gris y toman
   color al pasar el mouse, como en el reel de la landing anterior. */
.logo_grid-logo {
  filter: grayscale(1);
  opacity: .65;
  transition: filter .3s ease, opacity .3s ease;
}
.logo_grid-logo:hover { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}

/* =========================================================================
   Mensajes del formulario. El export los dejaba en texto blanco sobre gris
   (#ddd) y rosa (#ffdede): contraste 1.36:1 y 1.25:1, ilegibles. Se les da
   color de aviso y algo de forma.
   ========================================================================= */
.w-form-done,
.w-form-fail {
  border-radius: 10px;
  padding: 14px 16px;
  font-size: var(--ic-small);
  line-height: var(--ic-lh-compact);
  text-align: left;
}
.w-form-done { background: #e7f5ee !important; color: #0b6b3a !important; border: 1px solid #bfe3d0; }
.w-form-fail { background: #fdecea !important; color: #b3261e !important; border: 1px solid #f5c6c2; }

/* =========================================================================
   Bloque de cifras (después del reel de logos).
   El diseño del export son tarjetas esmeriladas, pero medidas en unidades de
   viewport: `.counter-grid-col._3-columnas` pedía `width: 30vw` y, con las
   cuatro columnas que llevan todas las páginas, sumaban 120vw. Las tarjetas
   se salían de su pista y se encimaban unas con otras, pisando el texto de la
   vecina. El alto era `28vh`, atado a la altura de la ventana en vez de a su
   contenido. Aquí se devuelven a un dimensionado normal.
   ========================================================================= */

/* Cuatro columnas en vez de tres (todas las páginas llevan 4 datos).
   `display: grid` y `max-width: none` van explícitos porque en móvil el export
   cambia el bloque a `display: flex` con `max-width: 17.625rem` (282px): las
   tarjetas quedaban en 228px dentro de un viewport de 390 y el bloque entero
   descentrado respecto de la sección. */
.counter-grid._3-columnas,
.counter-grid {
  display: grid;
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

@media screen and (max-width: 991px) {
  .counter-grid._3-columnas,
  .counter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 479px) {
  .counter-grid._3-columnas,
  .counter-grid { grid-template-columns: 1fr; }
}

/* El velo sobre la foto era de .80/.84 de opacidad: la imagen seguía
   leyéndose a través de las tarjetas —el logo del fondo aparecía cruzando el
   texto— y el conjunto quedaba sucio. Con el velo más denso la foto pasa a
   ser textura y las tarjetas ganan un borde propio que las define. */
.counters { position: relative; }
.counters::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(6, 46, 74, .45);
  pointer-events: none;
}
.counters > * { position: relative; z-index: 1; }
.counter-grid-col,
.counter-grid-col._3-columnas {
  background-color: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 24px rgba(0, 30, 45, .18);
}

/* Las tarjetas se estiran a lo ancho de su pista y a la altura de la más
   alta, para que la fila quede pareja aunque una etiqueta ocupe dos líneas.
   El export traía `place-items: center`, que las dejaba del tamaño de su
   contenido: cada tarjeta salía de un ancho distinto. */
.counter-grid { align-items: stretch; justify-items: stretch; }

.counter-grid-col,
.counter-grid-col._3-columnas {
  width: auto;
  height: auto;
  /* Un item de grid no baja de su contenido si no se le permite */
  min-width: 0;
  min-height: 13rem;
  /* Webflow emite `#w-node-… { place-self: center }` para tres de las cuatro
     columnas. Al ser un selector de id gana al align-items del contenedor, y
     esas tres se quedaban del alto de su contenido mientras la cuarta —la
     única sin id— sí se estiraba: las tarjetas salían de distinta altura y
     las cifras a distinto nivel. Los ids son generados y cambian por página,
     así que la única vía estable es !important. */
  place-self: stretch !important;
  padding: 1.5rem 1.25rem;
  gap: .75rem;
  justify-content: center;
  text-align: center;
}

/* Cifra y descripción ocupan zonas equivalentes dentro de cada tarjeta.
   Las cuatro etiquetas tienen una cadencia breve de dos líneas y se centran
   ópticamente, evitando que una tarjeta concentre todo el peso arriba. */
.counter-grid-col .counter-title,
.counter-grid-col._3-columnas .counter-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  margin: 0;
}

.counter-grid-col .paragraph-medium-lighter.is-counter,
.counter-grid-col._3-columnas .paragraph-medium-lighter.is-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 11.75rem;
  min-height: 3rem;
  margin: 0 auto;
}

/* =========================================================================
   Cifras en móvil: lista de filas, no tarjetas apiladas.
   Cuatro tarjetas translúcidas apiladas ocupaban 794px de scroll para cuatro
   datos cortos, y al ser semitransparentes dejaban leer la foto del fondo por
   detrás del texto. Como filas —cifra a la izquierda, etiqueta a la derecha,
   separadas por una línea fina— la sección baja a 505px, la etiqueta gana el
   ancho completo y deja de partirse, y desaparece el problema del fondo.
   ========================================================================= */
@media screen and (max-width: 767px) {
  .counter-grid,
  .counter-grid._3-columnas {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .counter-grid-col,
  .counter-grid-col._3-columnas {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    align-items: center;
    gap: 1rem;
    min-height: 0;
    padding: 1.05rem .25rem;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .counter-grid-col:last-child,
  .counter-grid-col._3-columnas:last-child { border-bottom: 0; }

  .counter-grid-col .counter-title,
  .counter-grid-col._3-columnas .counter-title {
    justify-content: flex-start;
    text-align: left;
  }
  .counter-grid-col .paragraph-medium-lighter.is-counter,
  .counter-grid-col._3-columnas .paragraph-medium-lighter.is-counter {
    justify-content: flex-start;
    text-align: left;
    max-width: none;
    min-height: 0;
    margin: 0;
  }

  /* Sin tarjetas que separen del fondo, el velo carga un poco más */
  .counters::before { background: rgba(6, 46, 74, .62); }

}

/* =========================================================================
   Footer en pantallas angostas.
   El export ya tiene la regla para apilar las columnas
   —@media (max-width:767px) .footer-content { grid-template-columns: 1fr }—
   pero pierde contra `.footer-content.original`, que fija tres columnas y
   tiene más especificidad. El resultado era que las tres columnas seguían en
   fila y el bloque se salía del viewport. Se repite con la misma clase.
   ========================================================================= */
@media screen and (max-width: 767px) {
  .footer-content,
  .footer-content.original { grid-template-columns: 1fr; }
  /* La fila que contiene logo y enlaces tampoco bajaba de línea */
  .div-block-6 { flex-wrap: wrap; }

  /* `.footer-wrapper` es el envoltorio de todo el footer. El export intenta
     apilarlo con `flex-direction: column`, pero el elemento es `display: grid`
     y esa propiedad ahí no hace nada: seguía en dos columnas (.7fr .9fr) y en
     un móvil de 390px las pistas sumaban 344 dentro de un contenedor de 320,
     desbordando la página entera —el bloque contenedor inicial se estiraba a
     427px y con él el navbar fijo—. */
  .footer-wrapper {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  /* "Empresas relacionadas" y "Certificaciones" quedaban en dos columnas de
     160px, y dentro los logos se reducían a 51x13 px —ilegibles, siendo que
     los archivos son de 400x100—. Una columna y tamaño legible. */
  .div-block-4 { grid-template-columns: 1fr; row-gap: 2rem; }
  .div-block-4 .image-4 { width: auto; height: 26px; }
  .div-block-4 .grid img:not(.image-4) { height: 34px; width: auto; }

  /* Los bloques del footer heredaban el centrado del texto pero no el de su
     caja: el logo quedaba a 131px del centro y la columna de empresas
     relacionadas a 61, así que la columna se veía desalineada consigo misma. */
  .div-block-4 .grid {
    width: 100%;
    justify-self: center;
    align-items: center;
  }
  .footer-dark .div-block-5 a.w-inline-block,
  .footer-dark .div-block-5 img { margin-inline: auto; }
}

/* La fila de sellos del CTA final no bajaba de línea y vive dentro de un
   `.container-large` con overflow oculto: en móvil medía 359px contra un
   contenedor de 262 y se recortaba por los dos lados —se leía "…antía de
   reposición" y "Sin c… de cotiza…"—. */
@media screen and (max-width: 767px) {
  .cta_comp .div-block.opacity-60 {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .625rem;
    column-gap: .5rem;
    margin-top: .5rem;
  }

  /* El bloque lleva tres capas de fondo y la de arriba —`graficas-incosec`,
     una gráfica decorativa— va con `background-size: cover`. En la tarjeta de
     294px del móvil se amplía tanto que una de sus líneas cruza en diagonal
     por encima de los sellos y del botón. Se deja sólo el velo y la foto. */
  .cta_comp.padding-section-large-xx {
    background-image:
      linear-gradient(#171d2ff0, #171d2ff0),
      url("../images/Img-7_1Img (7).avif");
    background-position: 0 0, 50% 0;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin: 1.5rem;          /* eran 3rem: en un móvil se comía el ancho */
    border-radius: 28px;
  }

  /* El CTA principal quedaba en 99px de ancho dentro de una tarjeta de 294 */
  .cta_comp .button.is-medium {
    width: 100%;
    max-width: 17rem;
  }
}

/* =========================================================================
   Adaptación a móvil
   -------------------------------------------------------------------------
   El export conserva en el teléfono el espaciado y las medidas pensadas para
   escritorio: secciones con 120px de aire arriba y abajo, y veinte elementos
   táctiles por debajo de los 44px recomendados.
   ========================================================================= */
@media screen and (max-width: 767px) {
  /* --- Aire vertical ---------------------------------------------------
     Sólo la sección de etapas: el resto ya tiene ajuste móvil propio en los
     bloques de hero y "por qué elegir", y sobreescribirlo aquí sería pelear
     con decisiones deliberadas. */
  section.section { padding-top: 3.5rem; padding-bottom: 3.5rem; }   /* eran 120/120 */

  /* --- Áreas de toque --------------------------------------------------
     (ver también el bloque de 991px más abajo: las tablets también son
     táctiles y necesitan el mismo mínimo) */
  .button.is-medium {
    min-height: 48px;
    padding-top: .875rem;
    padding-bottom: .875rem;
  }
  .text-link-dark {
    display: inline-block;
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
  .rt-home-one-creative-agency-tag-line-mark {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-link {
    display: block;
    padding-top: .75rem;
    padding-bottom: .75rem;
  }
  .footer-dark a.w-inline-block { display: inline-flex; align-items: center; min-height: 44px; }

  /* --- Pares de botones -------------------------------------------------
     Quedaban en fila: uno se partía en tres líneas y el otro salía al doble
     de ancho. Apilados y a ancho completo se leen como dos acciones iguales. */
  .div-block-2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .div-block-2 .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    text-align: center;
  }
}

/* =========================================================================
   Reel de logos: la velocidad se percibe según cuánto tarda un logo en
   cruzar la pantalla, no en píxeles por segundo. A 42s un logo cruza los
   1440px del escritorio en 19s, pero los 390px de un teléfono en 5.9s: la
   misma animación se siente el triple de rápida. La duración sube en las
   pantallas chicas para mantener una lectura parecida.
   ========================================================================= */
@media screen and (max-width: 991px) {
  .logos-track { animation-duration: 64s; }
}
@media screen and (max-width: 767px) {
  .logos-track { animation-duration: 88s; }
}

/* Menos aire: eran 160px arriba y abajo para cuatro datos cortos */
.counters.padding-section-medium { padding-top: 6.25rem; padding-bottom: 6.25rem; }
@media screen and (max-width: 767px) {
  /* En móvil el bloque es una lista de filas, que ya trae su propio ritmo:
     con 4rem quedaban 128px de franja azul vacía al final. */
  .counters.padding-section-medium { padding-top: 2rem; padding-bottom: 2rem; }
}

/* La certificación no es una cifra: se muestra como sello y deja de competir
   con los números del resto de la fila. */
.ic-seal {
  display: inline-block;
  /* En la escala, no proporcional a la cifra: con `em` caía en 23px, un
     tamaño que no existe en ningún otro punto de la página. */
  font-size: var(--ic-h4);
  line-height: var(--ic-lh-ui);
  letter-spacing: .02em;
  padding: .55em 1em;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  white-space: nowrap;
}

/* En móvil el sello comparte la columna de las cifras. A 20px medía 136px de
   ancho contra una columna de 96 y se montaba sobre la etiqueta de al lado.
   Va aquí, después de la regla general, para no perder la cascada. */
@media screen and (max-width: 767px) {
  .ic-seal {
    font-size: var(--ic-small);
    padding: .4em .7em;
    border-width: 1.5px;
  }
}

/* El número tabular evita que el ancho salte mientras cuenta */
.ic-num { font-variant-numeric: tabular-nums; }

/* Etapas del servicio: el "1" es más angosto que el resto de las cifras, así
   que "01." ocupaba menos que "02." y el título de la primera etapa arrancaba
   unos píxeles corrido respecto de los demás. */
.solution_item-heading { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Cards de "Encuentra al candidato adecuado desde el inicio".
   El hover lo definía una interacción de Webflow que recibía el evento pero
   no llegaba a aplicar sus estilos: la card quedaba muerta al pasar el mouse.
   Se le retira a IX2 y se resuelve aquí, que además responde al foco de
   teclado y no depende del runtime.
   ========================================================================= */
.card-regular {
  position: relative;                 /* .card-background es absolute inset:0 */
  /* En reposo la card es blanca sobre una sección blanca, así que se leía
     como tres bloques de texto sueltos y el fondo azul del hover entraba de
     la nada. Un borde tenue las define como tarjeta y hace que el hover se
     entienda como respuesta. */
  border: 1px solid rgba(16, 42, 67, .10);
  box-shadow: 0 2px 10px rgba(16, 42, 67, .05);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1),
              box-shadow .35s cubic-bezier(.22, .61, .36, 1),
              border-color .35s ease;
}
.card-regular:hover,
.card-regular:focus-within { border-color: transparent; }
.card-regular:hover,
.card-regular:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(16, 42, 67, .18);
}

/* El fondo es un hijo cuadrado: sin esto asoma en las esquinas redondeadas */
.card-background {
  border-radius: inherit;
  transition: opacity .35s ease;
}
.card-regular:hover .card-background,
.card-regular:focus-within .card-background { opacity: 1; }

/* Intercambio de iconos: el de hover está superpuesto al de reposo */
.card_icon-default,
.card_icon-hover { transition: opacity .35s ease; }
.card-regular:hover .card_icon-default,
.card-regular:focus-within .card_icon-default { opacity: 0; }
.card-regular:hover .card_icon-hover,
.card-regular:focus-within .card_icon-hover { opacity: 1; }

/* Fotografías institucionales para la landing de Reclutamiento. */
.recruitment-benefits .card-regular:nth-child(1) .card-background {
  background-image:
    linear-gradient(rgba(7, 76, 111, .88), rgba(0, 119, 108, .84)),
    url('/images/incosec/encuentra-card-1.webp');
  background-position: center, 50% 45%;
  background-size: auto, cover;
}

.recruitment-benefits .card-regular:nth-child(2) .card-background {
  background-image:
    linear-gradient(rgba(7, 76, 111, .88), rgba(0, 119, 108, .84)),
    url('/images/incosec/encuentra-card-2.webp');
  background-position: center, center;
  background-size: auto, cover;
}

.recruitment-benefits .card-regular:nth-child(3) .card-background {
  background-image:
    linear-gradient(rgba(7, 76, 111, .88), rgba(0, 119, 108, .84)),
    url('/images/incosec/encuentra-card-3.webp');
  background-position: center, 50% 42%;
  background-size: auto, cover;
}

.counters.padding-section-medium.recruitment-stats {
  background-image:
    linear-gradient(rgba(8, 55, 86, .8), rgba(5, 78, 105, .84)),
    url('/images/incosec/stat-counter.webp');
  background-position: center, center;
  background-size: cover, cover;
}

/* Sobre el fondo azul el texto oscuro no se lee.
   Lleva !important porque Webflow inicializa IX2 con todos sus datos antes de
   que este sitio lo reinicie filtrado, y en esa primera pasada deja un
   `color` en línea sobre el <h3>. El estilo en línea gana a cualquier regla,
   así que sin esto el título se quedaba oscuro sobre el azul. */
.card-regular:hover .heading-style-h3,
.card-regular:hover .text-lighter,
.card-regular:focus-within .heading-style-h3,
.card-regular:focus-within .text-lighter {
  color: var(--zc-base-color-neutral--zc-white) !important;
  transition: color .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .card-regular,
  .card-background,
  .card_icon-default,
  .card_icon-hover { transition: none; }
  .card-regular:hover,
  .card-regular:focus-within { transform: none; }
}

/* La grilla de las cards se queda en tres columnas a cualquier ancho: el
   export define `.padding-bottom.padding-medium { grid-template-columns:
   1fr 1fr 1fr }` sin ninguna variante responsive. En un móvil de 500px cada
   card quedaba en 143px de ancho por 625 de alto. Se usa sólo aquí (las
   cuatro landings, siempre envolviendo .card-regular). */
@media screen and (max-width: 991px) {
  .padding-bottom.padding-medium { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) {
  .padding-bottom.padding-medium { grid-template-columns: 1fr; }
}

/* =========================================================================
   Acordeón del FAQ.
   El del export venía mal configurado (abría recién al segundo clic y no
   volvía a cerrar); se le retira la interacción a Webflow y se anima aquí.
   La altura la fija el script; esto sólo define la curva y el estado.
   ========================================================================= */
.faq_content { cursor: pointer; }
.faq_answer {
  overflow: hidden;
  transition: height .45s cubic-bezier(.22, .61, .36, 1);
}

/* El chevron ya apunta hacia abajo en reposo ("desplegar"); sólo hay que
   girarlo al abrir. */
.faq_button {
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.faq_content.is-open .faq_button { transform: rotate(180deg); }

/* Foco visible: el item es operable por teclado */
.faq_content:focus-visible {
  outline: 2px solid #198375;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .faq_answer, .faq_button { transition: none; }
}

/* =========================================================================
   Desplegable de servicios en el navbar.
   Se apoya en el módulo de dropdown de webflow.js (clases w-dropdown*), así
   que abre por clic y por teclado sin script propio. Lo que va aquí es sólo
   la apariencia, para que el disparador se lea igual que el resto del menú.
   El export no incluye la fuente de iconos de Webflow, por eso el caret es
   un SVG en línea en vez de .w-icon-dropdown-toggle.
   ========================================================================= */
.ic-drop { position: relative; }

.ic-drop-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  /* .nav_menu_link es un <a> con padding propio; aquí el toggle es un div */
  padding: .5rem 1rem;
}
/* Webflow marca w--open en el disparador y en la lista, no en el envoltorio */
.ic-drop-caret { transition: transform .3s ease; flex: none; }
.ic-drop-toggle.w--open .ic-drop-caret { transform: rotate(180deg); }

.ic-drop-list.w-dropdown-list {
  min-width: 264px;
  padding: .5rem;
  background-color: #fff;
  border: 1px solid rgba(16, 42, 67, .1);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16, 42, 67, .14);
}
.ic-drop-list.w-dropdown-list.w--open { display: block; }

.ic-drop-link {
  display: block;
  padding: .6rem .75rem;
  border-radius: 8px;
  color: var(--zc-base-color-brand--azul-incosec);
  font-size: var(--ic-body);
  line-height: var(--ic-lh-tight);
  transition: background-color .2s ease, color .2s ease;
}
.ic-drop-link:hover,
.ic-drop-link:focus-visible {
  background-color: rgba(25, 131, 117, .09);
  color: var(--zc-base-color-brand--verde-incosec);
}
.ic-drop-link.w--current { color: var(--zc-base-color-brand--verde-incosec); font-weight: var(--ic-w-title); }

/* Separa el enlace al listado completo del sitio oficial */
.ic-drop-link.is-todos {
  margin-top: .35rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(16, 42, 67, .1);
  font-size: var(--ic-small);
}

/* En móvil el menú es un panel oscuro a pantalla completa: el desplegable
   se muestra en línea, centrado y sin tarjeta flotante. */
@media screen and (max-width: 991px) {
  .nav_fixed {
    height: 4.75rem;
    background: rgba(12, 43, 59, .98);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 8px 24px rgba(4, 31, 48, .12);
  }

  .nav_component {
    height: 4.75rem;
    padding: 0 1.25rem;
    background: transparent;
  }

  .nav_container {
    height: 100%;
    max-width: none;
    padding: 0;
  }

  .nav_brand,
  .nav_brand.w--current {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    padding: 0;
  }

  .nav_logo {
    width: 8.75rem;
    filter: brightness(0) invert(1);
  }

  .nav_button {
    width: 2.875rem;
    height: 2.875rem;
    padding: 0;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: .75rem;
  }

  .nav_button.w--open {
    background: rgba(255, 255, 255, .12);
  }

  .nav_menu {
    height: calc(100dvh - 4.75rem);
    inset: 4.75rem 0 0;
  }

  .nav_menu-lines {
    width: 1.25rem;
    height: 1rem;
    gap: .25rem;
  }

  .nav_lines-one,
  .nav_lines-two,
  .nav_lines-three {
    width: 1.25rem;
    height: 2px;
    margin: 0;
    padding: 0;
    border-radius: 999px;
  }

  .ic-drop { width: 100%; }
  .ic-drop-toggle {
    justify-content: center;
    width: 100%;
    color: var(--zc-base-color-neutral--zc-white);
    margin-bottom: .5rem;
    font-size: var(--ic-lead);
  }
  .ic-drop-list.w-dropdown-list {
    position: static;
    min-width: 0;
    background-color: rgba(255, 255, 255, .07);
    border: 0;
    box-shadow: none;
    margin-bottom: .75rem;
  }
  .ic-drop-link {
    color: var(--zc-base-color-neutral--zc-white);
    text-align: center;
    font-size: var(--ic-body);
  }
  .ic-drop-link:hover,
  .ic-drop-link:focus-visible { background-color: rgba(255, 255, 255, .12); color: #fff; }
  .ic-drop-link.is-todos { border-top-color: rgba(255, 255, 255, .18); }

  /* =======================================================================
     Menú móvil: el panel a pantalla completa y el CTA visible.
     ======================================================================= */

  /* El panel medía 768px de alto en un viewport de 844 y dejaba asomando una
     franja del hero por abajo.
     No se resuelve con `inset: 0`: la interacción del navbar deja un transform
     sobre `.nav_component`, y un ancestro transformado pasa a ser el bloque
     contenedor de sus descendientes `fixed`, así que `bottom: 0` resolvía
     contra el navbar y el panel quedaba de 76px. La altura tiene que ser
     relativa al viewport. `dvh` además acompaña a la barra del navegador
     cuando aparece y desaparece. */
  .nav_menu.w-nav-menu {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
  }

  /* El contenedor traía 10vh de padding arriba y 15vh abajo: 211px perdidos
     en una pantalla de teléfono. */
  .nav_menu_container {
    justify-content: flex-start;
    padding-top: 5.5rem;
    padding-bottom: 2rem;
  }

  /* La columna interna estaba al 60% del ancho: enlaces y botón quedaban en
     198px, por debajo del área de toque cómoda. */
  .nav-menu-inner {
    max-width: 100%;
    padding-inline: 1.5rem;
  }

  /* El subrayado de página activa ocupaba el ancho completo del enlace.
     Con inline-block se ajusta al texto. */
  .nav_menu_link.w-nav-link {
    width: auto;
    display: inline-block;
    margin-bottom: .25rem;
  }

  /* EL BUG: `.button.is-nav` fija `color: yankees-blue`, que sobre el navbar
     blanco de escritorio se lee bien, pero el panel del móvil es de ese mismo
     color exacto —rgb(23,29,47)— así que el texto desaparecía y quedaba una
     píldora vacía. Siendo la acción principal, aquí va sólido.
     Va acotado a `.nav_menu`: la clase se usa también en el par de botones
     del final de la sección de etapas, y sin acotar les descuadraba el ancho. */
  .nav_menu .button.is-nav {
    width: 100%;
    max-width: 20rem;
    margin-top: 1.25rem;
    padding: 1rem 1.5rem;
    color: var(--zc-base-color-neutral--zc-white);
    background-color: var(--zc-base-color-brand--verde-incosec);
    border-color: var(--zc-base-color-brand--verde-incosec);
    text-align: center;
  }
}

/* =========================================================================
   Hero de Reclutamiento y Selección.
   Jerarquía editorial, formulario sin estirar y flujo móvil orientado a la
   propuesta de valor antes de la conversión.
   ========================================================================= */
.recruitment-hero.background-video {
  height: auto;
  min-height: 100svh;
}

.recruitment-hero .section_hero.hero-banner {
  height: auto;
  min-height: 100svh;
  padding: clamp(8.5rem, 14vh, 10rem) clamp(2rem, 4.5vw, 4.5rem) clamp(4.5rem, 8vh, 6rem);
}

.recruitment-hero .padding-global.padding-horizontal-m-0 {
  padding-right: 0;
  padding-left: 0;
}

.recruitment-hero .container-large {
  max-width: 80rem;
  overflow: visible;
}

.recruitment-hero .hero_grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(26rem, .92fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 5rem);
}

.recruitment-hero .hero_content {
  width: 100%;
  max-width: 40rem;
  padding: 0;
}

.recruitment-hero .hero-copy {
  display: grid;
  gap: 1.25rem;
}

.recruitment-hero .hero-copy h1,
.recruitment-hero .hero-question,
.recruitment-hero .hero-summary,
.recruitment-hero .hero-coverage {
  margin: 0;
}

.recruitment-hero .hero-copy h1 {
  max-width: 39rem;
  font-size: var(--ic-display) !important;
}

.recruitment-hero .hero-intro {
  display: grid;
  max-width: 36rem;
  gap: .5rem;
}

.recruitment-hero .hero-question {
  color: #fff;
  font-size: var(--ic-lead);
  font-weight: var(--ic-w-title);
  line-height: var(--ic-lh-compact);
}

.recruitment-hero .hero-summary {
  color: rgba(255, 255, 255, .88);
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-compact) !important;
}

.recruitment-hero .hero-benefits {
  display: grid;
  gap: .55rem;
  max-width: 36rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recruitment-hero .hero-benefits li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .65rem;
  color: #fff;
  font-size: var(--ic-body);
  line-height: var(--ic-lh-compact);
}

.recruitment-hero .hero-benefits li::before {
  content: "✓";
  color: var(--zc-base-color-brand--zc-citrus-green);
  font-weight: var(--ic-w-stat);
}

.recruitment-hero .hero-trust {
  display: grid;
  max-width: 38rem;
  gap: .75rem;
  padding-top: 1.125rem;
  border-top: 1px solid rgba(255, 255, 255, .28);
}

.recruitment-hero .hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 0;
}

.recruitment-hero .hero-proof span {
  color: #fff;
  font-size: var(--ic-small);
  font-weight: var(--ic-w-title);
  line-height: var(--ic-lh-tight);
}

.recruitment-hero .hero-proof span + span {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, .35);
}

.recruitment-hero .hero-coverage {
  color: rgba(255, 255, 255, .82);
  font-size: var(--ic-small) !important;
  line-height: var(--ic-lh-compact) !important;
}

.recruitment-hero .hero-coverage strong {
  color: #fff;
  font-weight: var(--ic-w-title);
}

.recruitment-hero .form-landing-page {
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 32rem;
  height: auto;
  padding: 2rem;
  border: 1px solid rgba(16, 42, 67, .1);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(10, 38, 64, .2);
}

.recruitment-hero .form-landing-page > h3 {
  margin: 0 0 .4rem;
}

.recruitment-hero .form-landing-page > .body_one {
  max-width: 28rem;
  margin: 0;
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-compact) !important;
}

.recruitment-hero .form {
  gap: .75rem;
  padding-top: 1.25rem;
}

.recruitment-hero .form label {
  display: block;
  margin-bottom: .4rem;
}

.recruitment-hero .text-field {
  min-height: 2.75rem;
  margin-bottom: 0;
  padding: .65rem .8rem;
  font-size: var(--ic-small);
  line-height: var(--ic-lh-ui);
}

.recruitment-hero .submit-button {
  min-height: 2.875rem;
  margin-top: .125rem;
}

@media screen and (max-width: 1100px) {
  .recruitment-hero .section_hero.hero-banner {
    padding-right: clamp(2rem, 4vw, 3rem);
    padding-left: clamp(2rem, 4vw, 3rem);
  }

  .recruitment-hero .hero_grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, .95fr);
    gap: 3rem;
  }

  .recruitment-hero .form-landing-page {
    padding: 1.75rem;
  }
}

@media screen and (max-width: 991px) {
  .recruitment-hero .section_hero.hero-banner {
    min-height: 0;
    padding: 7.5rem 2rem 4rem;
  }

  .recruitment-hero .hero_grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .recruitment-hero .hero_content {
    order: 0 !important;
    max-width: 44rem;
  }

  .recruitment-hero .form-landing-page {
    order: 1;
    justify-self: start;
    max-width: 44rem;
  }

  .recruitment-hero .hero-copy h1,
  .recruitment-hero .hero-intro,
  .recruitment-hero .hero-benefits,
  .recruitment-hero .hero-trust {
    max-width: 42rem;
  }
}

@media screen and (max-width: 767px) {
  .recruitment-hero .section_hero.hero-banner {
    padding: 7rem 1.25rem 3rem;
  }

  .recruitment-hero .hero_grid {
    gap: 2rem;
  }

  .recruitment-hero .hero-copy {
    gap: 1.125rem;
  }

  .recruitment-hero .hero-copy h1 {
    font-size: var(--ic-display) !important;
  }

  .recruitment-hero .hero-question {
    font-size: var(--ic-body);
  }

  .recruitment-hero .form-landing-page {
    padding: 1.5rem;
    border-radius: 18px;
  }
}

@media screen and (max-width: 560px) {
  .recruitment-hero .section_hero.hero-banner {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .recruitment-hero .hero-proof {
    display: grid;
  }

  .recruitment-hero .hero-proof span + span {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .recruitment-hero .form {
    grid-template-columns: 1fr;
  }

  .recruitment-hero .form > * {
    grid-column: 1 / -1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruitment-hero > video {
    display: none;
  }
}

/* =========================================================================
   Hero de Servicios Transitorios.
   Variante operativa: fondo azul continuo y escenarios numerados para
   diferenciarla sin alterar la arquitectura de captación.
   ========================================================================= */
.transitory-hero.background-video {
  height: auto;
  min-height: 100svh;
}

.transitory-hero > video {
  object-position: 68% 50%;
  filter: saturate(.62) contrast(1.08);
}

.transitory-hero .section_hero.hero-banner {
  height: auto;
  min-height: 100svh;
  padding: clamp(8.5rem, 14vh, 10rem) clamp(2rem, 4.5vw, 4.5rem) clamp(4.5rem, 8vh, 6rem);
  background-image:
    radial-gradient(circle at 76% 26%, rgba(32, 154, 193, .2), transparent 31%),
    linear-gradient(118deg, rgba(5, 42, 70, .99) 0%, rgba(7, 65, 100, .96) 58%, rgba(8, 91, 132, .91) 100%);
}

.transitory-hero .padding-global.padding-horizontal-m-0 {
  padding-right: 0;
  padding-left: 0;
}

.transitory-hero .container-large {
  max-width: 82rem;
  overflow: visible;
}

.transitory-hero .hero_grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(27rem, .88fr);
  align-items: center;
  gap: clamp(3rem, 6.5vw, 5.5rem);
}

.transitory-hero .hero_content {
  width: 100%;
  max-width: 42rem;
  padding: 0;
}

.transitory-hero .transitory-copy {
  display: grid;
  gap: 1.35rem;
}

.transitory-hero .transitory-copy h1,
.transitory-hero .transitory-summary {
  margin: 0;
}

.transitory-hero .transitory-copy h1 {
  max-width: 42rem;
  font-size: var(--ic-display) !important;
}

.transitory-hero .transitory-copy h1 .text-span-2 {
  white-space: nowrap;
}

.transitory-hero .transitory-summary {
  max-width: 38rem;
  color: rgba(255, 255, 255, .88);
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-compact) !important;
}

.transitory-hero .transitory-scenarios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 38rem;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: scenario;
}

.transitory-hero .transitory-scenarios li {
  counter-increment: scenario;
  display: block;
  padding: .8rem .75rem .35rem 0;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .24);
  font-size: var(--ic-small);
  font-weight: var(--ic-w-ui);
  line-height: var(--ic-lh-compact);
}

.transitory-hero .transitory-scenarios li::before {
  content: "0" counter(scenario);
  color: var(--zc-base-color-brand--zc-citrus-green);
  font-size: var(--ic-eyebrow);
  font-weight: var(--ic-w-stat);
  line-height: var(--ic-lh-tight);
  letter-spacing: var(--ic-track-eyebrow);
  display: block;
  margin-bottom: .4rem;
}

.transitory-hero .transitory-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 38rem;
  gap: .65rem 0;
  padding-top: .15rem;
}

.transitory-hero .transitory-proof span {
  color: rgba(255, 255, 255, .9);
  font-size: var(--ic-eyebrow);
  font-weight: var(--ic-w-title);
  line-height: var(--ic-lh-tight);
}

.transitory-hero .transitory-proof span + span {
  margin-left: .9rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(255, 255, 255, .34);
}

.transitory-hero .form-landing-page {
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 31.5rem;
  height: auto;
  padding: 1.75rem 1.75rem 1.5rem;
  border: 1px solid rgba(16, 42, 67, .1);
  border-radius: 20px;
  box-shadow: 0 26px 64px rgba(5, 35, 58, .24);
}

.transitory-hero .form-landing-page > h3 {
  margin: 0 0 .4rem;
}

.transitory-hero .form-landing-page > .body_one {
  max-width: 27rem;
  margin: 0;
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-compact) !important;
}

.transitory-hero .form {
  gap: .65rem .75rem;
  padding-top: 1.1rem;
}

.transitory-hero .form label {
  display: block;
  margin-bottom: .35rem;
}

.transitory-hero .text-field {
  min-height: 2.65rem;
  margin-bottom: 0;
  padding: .6rem .8rem;
  font-size: var(--ic-small);
  line-height: var(--ic-lh-ui);
}

.transitory-hero .submit-button {
  min-height: 2.875rem;
  margin-top: .125rem;
}

.transitory-hero .form .body_one.dark-font.centrado {
  margin: 0;
  font-size: var(--ic-eyebrow) !important;
  line-height: var(--ic-lh-tight) !important;
}

@media screen and (max-width: 1100px) {
  .transitory-hero .section_hero.hero-banner {
    padding-right: clamp(2rem, 4vw, 3rem);
    padding-left: clamp(2rem, 4vw, 3rem);
  }

  .transitory-hero .hero_grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, .95fr);
    gap: 3rem;
  }

  .transitory-hero .transitory-scenarios {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .transitory-hero .transitory-scenarios li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    align-items: start;
    gap: .75rem;
    padding: .65rem 0;
  }

  .transitory-hero .transitory-scenarios li::before {
    margin-bottom: 0;
    line-height: 1.8;
  }

  .transitory-hero .form-landing-page {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media screen and (max-width: 991px) {
  .transitory-hero .section_hero.hero-banner {
    min-height: 0;
    padding: 7.5rem 2rem 4rem;
    background-image:
      radial-gradient(circle at 80% 18%, rgba(32, 154, 193, .2), transparent 32%),
      linear-gradient(155deg, rgba(5, 42, 70, .99) 0%, rgba(7, 65, 100, .96) 62%, rgba(8, 91, 132, .92) 100%);
  }

  .transitory-hero .hero_grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .transitory-hero .hero_content {
    order: 0 !important;
    max-width: 44rem;
  }

  .transitory-hero .form-landing-page {
    order: 1;
    justify-self: start;
    max-width: 44rem;
  }

  .transitory-hero .transitory-copy h1,
  .transitory-hero .transitory-summary,
  .transitory-hero .transitory-scenarios,
  .transitory-hero .transitory-proof {
    max-width: 42rem;
  }
}

@media screen and (max-width: 767px) {
  .transitory-hero .section_hero.hero-banner {
    padding: 7rem 1.25rem 3rem;
  }

  .transitory-hero .hero_grid {
    gap: 2rem;
  }

  .transitory-hero .transitory-copy {
    gap: 1.125rem;
  }

  .transitory-hero .transitory-copy h1 {
    font-size: var(--ic-display) !important;
  }

  .transitory-hero .form-landing-page {
    padding: 1.5rem;
  }
}

@media screen and (max-width: 560px) {
  .transitory-hero .section_hero.hero-banner {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .transitory-hero .transitory-proof {
    display: grid;
  }

  .transitory-hero .transitory-proof span + span {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .transitory-hero .form {
    grid-template-columns: 1fr;
  }

  .transitory-hero .form > * {
    grid-column: 1 / -1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transitory-hero > video {
    display: none;
  }
}

/* =========================================================================
   Héroes de Evaluaciones Psicolaborales y Outsourcing.
   Comparten jerarquía y conversión, con composiciones distintas por servicio.
   ========================================================================= */
.service-hero.background-video {
  height: auto;
  min-height: 100svh;
}

.service-hero > video {
  object-position: 66% 50%;
  filter: saturate(.6) contrast(1.08);
}

.service-hero .section_hero.hero-banner {
  height: auto;
  min-height: 100svh;
  padding: clamp(8.5rem, 14vh, 10rem) clamp(2rem, 4.5vw, 4.5rem) clamp(4.5rem, 8vh, 6rem);
}

.assessment-hero .section_hero.hero-banner {
  background-image:
    radial-gradient(circle at 72% 20%, rgba(189, 225, 98, .18), transparent 34%),
    linear-gradient(122deg, rgba(7, 75, 69, .98) 0%, rgba(25, 131, 117, .95) 62%, rgba(12, 108, 159, .88) 100%);
}

.outsourcing-hero .section_hero.hero-banner {
  background-image:
    radial-gradient(circle at 72% 20%, rgba(43, 146, 195, .2), transparent 32%),
    linear-gradient(118deg, rgba(6, 39, 70, .99) 0%, rgba(8, 58, 96, .96) 60%, rgba(7, 104, 118, .91) 100%);
}

.service-hero .padding-global.padding-horizontal-m-0 {
  padding-right: 0;
  padding-left: 0;
}

.service-hero .container-large {
  max-width: 82rem;
  overflow: visible;
}

.service-hero .hero_grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(27rem, .9fr);
  align-items: center;
  gap: clamp(3rem, 6vw, 5rem);
}

.service-hero .hero_content {
  width: 100%;
  max-width: 42rem;
  padding: 0;
}

.service-hero .service-hero-copy {
  display: grid;
  gap: 1.3rem;
}

.service-hero .service-hero-copy h1,
.service-hero .service-hero-summary {
  margin: 0;
}

.service-hero .service-hero-copy h1 {
  max-width: 42rem;
  font-size: var(--ic-display) !important;
}

.service-hero .service-hero-summary {
  max-width: 38rem;
  color: rgba(255, 255, 255, .88);
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-compact) !important;
}

.service-hero .service-hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 0;
  max-width: 38rem;
  padding-top: .1rem;
}

.service-hero .service-hero-proof span {
  color: rgba(255, 255, 255, .9);
  font-size: var(--ic-eyebrow);
  font-weight: var(--ic-w-title);
  line-height: var(--ic-lh-tight);
}

.service-hero .service-hero-proof span + span {
  margin-left: .9rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(255, 255, 255, .34);
}

.assessment-hero .assessment-benefits {
  display: grid;
  gap: .55rem;
  max-width: 38rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.assessment-hero .assessment-benefits li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: .65rem;
  color: #fff;
  font-size: var(--ic-body);
  line-height: var(--ic-lh-compact);
}

.assessment-hero .assessment-benefits li::before {
  content: "✓";
  color: var(--zc-base-color-brand--zc-citrus-green);
  font-weight: var(--ic-w-stat);
}

.outsourcing-hero .outsourcing-pillars {
  display: grid;
  max-width: 39rem;
  border-top: 1px solid rgba(255, 255, 255, .24);
}

.outsourcing-hero .outsourcing-pillar {
  display: grid;
  grid-template-columns: minmax(8.75rem, .75fr) minmax(0, 1.25fr);
  gap: 1.25rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.outsourcing-hero .outsourcing-pillar strong {
  color: #fff;
  font-size: var(--ic-small);
  line-height: var(--ic-lh-tight);
}

.outsourcing-hero .outsourcing-pillar span {
  color: rgba(255, 255, 255, .78);
  font-size: var(--ic-small);
  line-height: var(--ic-lh-compact);
}

.service-hero .form-landing-page {
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 32rem;
  height: auto;
  padding: 1.75rem;
  border: 1px solid rgba(16, 42, 67, .1);
  border-radius: 20px;
  box-shadow: 0 26px 64px rgba(5, 35, 58, .24);
}

.service-hero .form-landing-page > h3 {
  margin: 0 0 .4rem;
}

.service-hero .form-landing-page > .body_one {
  max-width: 28rem;
  margin: 0;
  font-size: var(--ic-body) !important;
  line-height: var(--ic-lh-compact) !important;
}

.service-hero .form {
  gap: .65rem .75rem;
  padding-top: 1.1rem;
}

.service-hero .form label {
  display: block;
  margin-bottom: .35rem;
}

.service-hero .text-field {
  min-height: 2.65rem;
  margin-bottom: 0;
  padding: .6rem .8rem;
  font-size: var(--ic-small);
  line-height: var(--ic-lh-ui);
}

.service-hero .submit-button {
  min-height: 2.875rem;
  margin-top: .125rem;
}

@media screen and (max-width: 1100px) {
  .service-hero .section_hero.hero-banner {
    padding-right: clamp(2rem, 4vw, 3rem);
    padding-left: clamp(2rem, 4vw, 3rem);
  }

  .service-hero .hero_grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(24rem, .95fr);
    gap: 3rem;
  }

  .service-hero .form-landing-page {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media screen and (max-width: 991px) {
  .service-hero .section_hero.hero-banner {
    min-height: 0;
    padding: 7.5rem 2rem 4rem;
  }

  .service-hero .hero_grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .service-hero .hero_content {
    order: 0 !important;
    max-width: 44rem;
  }

  .service-hero .form-landing-page {
    order: 1;
    justify-self: start;
    max-width: 44rem;
  }

  .service-hero .service-hero-copy h1,
  .service-hero .service-hero-summary,
  .service-hero .service-hero-proof,
  .assessment-hero .assessment-benefits,
  .outsourcing-hero .outsourcing-pillars {
    max-width: 42rem;
  }
}

@media screen and (max-width: 767px) {
  .service-hero .section_hero.hero-banner {
    padding: 7rem 1.25rem 3rem;
  }

  .service-hero .hero_grid {
    gap: 2rem;
  }

  .service-hero .service-hero-copy {
    gap: 1.125rem;
  }

  .service-hero .service-hero-copy h1 {
    font-size: var(--ic-display) !important;
  }

  .service-hero .form-landing-page {
    padding: 1.5rem;
    border-radius: 18px;
  }
}

@media screen and (max-width: 560px) {
  .service-hero .section_hero.hero-banner {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .service-hero .service-hero-proof {
    display: grid;
  }

  .service-hero .service-hero-proof span + span {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .outsourcing-hero .outsourcing-pillar {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  .service-hero .form {
    grid-template-columns: 1fr;
  }

  .service-hero .form > * {
    grid-column: 1 / -1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-hero > video {
    display: none;
  }
}

/* =========================================================================
   "Por qué elegir Incosec": sistema compartido entre landings.
   Conserva las fotografías institucionales y convierte el bloque escalonado
   del export en una grilla editorial uniforme.
   ========================================================================= */
.helping_business_block.why-us-enterprise {
  background: #f4f7f7;
  padding: 0;
}

.why-us-enterprise .div-block-9 {
  background: transparent;
  padding: clamp(4.5rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4rem);
}

.why-us-enterprise .container-large.margen-2-5rem {
  max-width: 80rem;
  margin-bottom: 0;
  overflow: visible;
}

.why-us-enterprise .center_title_block {
  max-width: 62rem;
  text-align: left;
}

.why-us-enterprise .center_title_block .title-small {
  color: var(--zc-base-color-brand--verde-incosec);
}

.why-us-enterprise .center_title_block .heading-3 {
  max-width: 58rem;
  margin-top: .75rem;
}

.why-us-enterprise .padding-bottom.padding-large {
  height: 0;
  padding-bottom: 0 !important;
}

.why-us-enterprise .details_card_wr.sin-padding {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.5rem;
  margin-top: 3.25rem;
}

.why-us-enterprise .detail_card.fondo-blanco {
  align-self: stretch !important;
  display: flex;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(16, 42, 67, .12);
  border-radius: 18px;
  box-shadow:
    0 2px 6px rgba(16, 42, 67, .04),
    0 12px 28px rgba(16, 42, 67, .07);
}

.why-us-enterprise .detail_card .mitad-foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
  filter: saturate(.9) contrast(1.03);
}

.why-us-enterprise .detail_card .mitad-blanca {
  position: relative;
  flex: 1;
  align-items: flex-start;
  gap: 0;
  padding: 4.25rem 2rem 2rem;
  text-align: left;
  border: 0;
  border-radius: 0;
}

.why-us-enterprise .detail_card .mitad-blanca::before {
  position: absolute;
  top: 1.75rem;
  left: 2rem;
  color: var(--zc-base-color-brand--verde-incosec);
  font-size: var(--ic-eyebrow);
  font-weight: var(--ic-w-stat);
  line-height: 1;
  letter-spacing: var(--ic-track-eyebrow);
}

.why-us-enterprise .detail_card:nth-child(1) .mitad-blanca::before { content: "01"; }
.why-us-enterprise .detail_card:nth-child(2) .mitad-blanca::before { content: "02"; }
.why-us-enterprise .detail_card:nth-child(3) .mitad-blanca::before { content: "03"; }

.why-us-enterprise .detail_card .heading {
  width: 100%;
  min-height: 2.4em;
  margin: 0;
  color: var(--zc-base-color-brand--zc-yankees-blue);
  text-transform: none;
}

.why-us-enterprise .detail_card .div-block-8 {
  width: 2.75rem;
  height: 3px;
  margin: 1.25rem 0;
  background: var(--zc-base-color-brand--verde-incosec);
}

.why-us-enterprise .detail_card .paragraph {
  margin: 0;
  color: #5d6672;
}

.why-us-enterprise .rt-home-one-creative-agency-tag-line.rt-color-change {
  justify-content: flex-start;
  max-width: 80rem;
  margin: 2.25rem auto 0;
  padding: 1.5rem 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(16, 42, 67, .14);
  border-radius: 0;
  color: var(--zc-base-color-brand--zc-yankees-blue);
}

.why-us-enterprise .rt-body-font-color-2.white-font {
  margin-right: .5rem;
  color: var(--zc-base-color-brand--zc-yankees-blue);
  font-size: var(--ic-small) !important;
  font-weight: var(--ic-w-title) !important;
}

.why-us-enterprise .rt-home-one-creative-agency-tag-line-mark,
.why-us-enterprise .rt-home-one-creative-agency-tag-line-mark.v2,
.why-us-enterprise .rt-home-one-creative-agency-tag-line-mark.v3 {
  display: inline-flex !important;
  align-items: center;
  padding: .35rem .15rem;
  color: var(--zc-base-color-brand--azul-incosec);
  background: transparent;
  border-radius: 0;
}

.why-us-enterprise .rt-home-one-creative-agency-tag-line-mark::after {
  content: "\2197";
  margin-left: .4rem;
  font-size: var(--ic-small);
}

.why-us-enterprise .text-block-2 {
  font-size: var(--ic-small) !important;
  font-weight: var(--ic-w-ui) !important;
}

@media (hover: hover) and (pointer: fine) {
  .why-us-enterprise .detail_card.fondo-blanco {
    transition:
      transform .4s cubic-bezier(.22, 1, .36, 1),
      border-color .3s ease,
      box-shadow .4s ease;
  }

  .why-us-enterprise .detail_card .mitad-foto {
    transition:
      transform .55s cubic-bezier(.22, 1, .36, 1),
      filter .4s ease;
  }

  .why-us-enterprise .detail_card .mitad-blanca::before {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  }

  .why-us-enterprise .detail_card.fondo-blanco:hover {
    transform: translateY(-7px);
    border-color: rgba(25, 131, 117, .32);
    box-shadow:
      0 4px 10px rgba(16, 42, 67, .06),
      0 18px 36px rgba(16, 42, 67, .11);
  }

  .why-us-enterprise .detail_card:hover .mitad-foto {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.04);
  }

  .why-us-enterprise .detail_card:hover .mitad-blanca::before {
    transform: translateX(.3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-us-enterprise .detail_card.fondo-blanco,
  .why-us-enterprise .detail_card .mitad-foto,
  .why-us-enterprise .detail_card .mitad-blanca::before {
    transition: none;
  }

  .why-us-enterprise .detail_card.fondo-blanco:hover,
  .why-us-enterprise .detail_card:hover .mitad-foto,
  .why-us-enterprise .detail_card:hover .mitad-blanca::before {
    transform: none;
  }
}

@media screen and (max-width: 991px) {
  .why-us-enterprise .details_card_wr.sin-padding {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .why-us-enterprise .detail_card.fondo-blanco:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .why-us-enterprise .detail_card:last-child .mitad-foto {
    height: 100%;
    aspect-ratio: auto;
  }

  .why-us-enterprise .rt-home-one-creative-agency-tag-line.rt-color-change {
    flex-wrap: wrap;
    padding-top: 1.25rem;
  }
}

@media screen and (max-width: 767px) {
  .why-us-enterprise .div-block-9 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .why-us-enterprise .details_card_wr.sin-padding {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
  }

  .why-us-enterprise .detail_card.fondo-blanco:last-child {
    grid-column: auto;
    display: flex;
  }

  .why-us-enterprise .detail_card:last-child .mitad-foto {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .why-us-enterprise .detail_card .mitad-blanca {
    padding: 4rem 1.5rem 1.75rem;
  }

  .why-us-enterprise .detail_card .mitad-blanca::before {
    top: 1.5rem;
    left: 1.5rem;
  }

  .why-us-enterprise .detail_card .heading {
    min-height: 0;
  }

  .why-us-enterprise .rt-body-font-color-2.white-font {
    flex-basis: 100%;
    margin: 0 0 .25rem;
  }
}

/* =========================================================================
   Las seis causales (Servicios Transitorios)
   -------------------------------------------------------------------------
   Contenido legal: artículo 183-Ñ del Código del Trabajo. Se apoya en el
   vocabulario que ya usa la página —antetítulo `is-neon`, `h2.centrado` y el
   botón `is-medium`— para que no se lea como un bloque pegado, y suma un
   icono por causal: seis tarjetas de puro texto quedaban planas.
   Los tamaños salen de la escala tipográfica (--ic-*).
   ========================================================================= */
.ic-causales-sec {
  text-align: center;
  /* Las secciones vecinas son blancas: un tinte apenas perceptible separa el
     bloque sin romper el ritmo de la página. */
  background:
    radial-gradient(60rem 30rem at 50% -10%, rgba(25, 131, 117, .07), transparent 70%),
    var(--zc-background-color--zc-background-secondary, #f7f9fb);
}

.ic-causales-intro {
  max-width: 46rem;
  margin: 1rem auto 0;
  color: var(--zc-base-color-brand--zc-yankees-blue);
  opacity: .78;
}

.ic-causales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.ic-causal {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: start;
  gap: 1.125rem;
  padding: 1.625rem 1.5rem;
  background-color: #fff;
  border: 1px solid rgba(16, 42, 67, .1);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(16, 42, 67, .05);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1),
              box-shadow .35s cubic-bezier(.22, .61, .36, 1),
              border-color .35s ease;
}
.ic-causal:hover {
  transform: translateY(-4px);
  border-color: rgba(25, 131, 117, .35);
  box-shadow: 0 18px 36px rgba(16, 42, 67, .12);
}

/* Azulejo del icono: mismo verde de marca que los acentos de la landing */
.ic-causal-tile {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  background-color: rgba(25, 131, 117, .1);
  color: var(--zc-base-color-brand--verde-incosec);
  transition: background-color .35s ease, color .35s ease;
}
.ic-causal:hover .ic-causal-tile {
  background-color: var(--zc-base-color-brand--verde-incosec);
  color: #fff;
}
.ic-causal-icono { width: 1.625rem; height: 1.625rem; display: block; }

/* La letra del artículo conserva su valor legal, pero como dato, no como
   protagonista: pasa de círculo grande a etiqueta sobre el título. */
.ic-causal-etiqueta {
  display: block;
  margin-bottom: .2rem;
  color: var(--zc-base-color-brand--verde-incosec);
  font-size: var(--ic-eyebrow);
  font-weight: var(--ic-w-title);
  letter-spacing: var(--ic-track-eyebrow);
  line-height: var(--ic-lh-ui);
  text-transform: uppercase;
}

.ic-causal-titulo {
  margin: 0 0 .35rem;
  color: var(--zc-base-color-brand--azul-incosec);
}

.ic-causal-texto {
  margin: 0;
  color: var(--zc-base-color-brand--zc-yankees-blue);
  opacity: .74;
}

.ic-causales-pie { margin-top: 2.5rem; }

@media screen and (max-width: 991px) {
  .ic-causales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .ic-causales {
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-top: 2rem;
  }
  .ic-causal {
    grid-template-columns: 2.75rem 1fr;
    gap: .875rem;
    padding: 1.125rem 1rem;
    border-radius: 16px;
  }
  .ic-causal-tile { width: 2.75rem; height: 2.75rem; border-radius: 12px; }
  .ic-causal-icono { width: 1.375rem; height: 1.375rem; }
  .ic-causales-pie { margin-top: 1.75rem; }
  .ic-causales-pie .button { width: 100%; max-width: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-causal, .ic-causal-tile { transition: none; }
  .ic-causal:hover { transform: none; }
}

/* =========================================================================
   Adaptación a móvil — tarjetas
   -------------------------------------------------------------------------
   Las tarjetas conservaban medidas de escritorio en el teléfono: 40px de
   padding, 30px entre el icono y el título, y el contenedor de "por qué
   elegir" venía con `max-width: 17.13rem` del export —el mismo patrón que
   tenía el bloque de cifras—, así que esas tarjetas se quedaban en 274px
   dentro de un contenedor de 350 y no llenaban el ancho.
   ========================================================================= */
@media screen and (max-width: 767px) {
  .card-regular { padding: 1.5rem 1.25rem; }
  .card-header { grid-column-gap: 1rem; grid-row-gap: 1rem; margin-bottom: .75rem; }
  .card_icon_wr { width: 3rem; max-width: 3rem; height: 3rem; }

  .details_card_wr,
  .details_card_wr.sin-padding {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  /* El número de la tarjeta es un pseudo-elemento absoluto: el padding
     superior es lo que le reserva sitio. Con 2rem quedaba encima del título,
     así que van juntos —número más arriba y padding justo por debajo—. */
  .why-us-enterprise .detail_card .mitad-blanca { padding: 2.75rem 1.25rem 1.5rem; }
  .why-us-enterprise .detail_card .mitad-blanca::before { top: 1.125rem; left: 1.25rem; }
}

/* La fila de respaldo del hero (ISO · holding · cobertura) es un grid de una
   columna en móvil: cada dato ocupaba el ancho completo y se apilaba en tres
   líneas. Como fila envolvente entran dos por línea y el bloque baja de 76 a
   ~50px en las cuatro landings. */
@media screen and (max-width: 767px) {
  .recruitment-hero .hero-proof,
  .transitory-hero .transitory-proof,
  .service-hero .service-hero-proof {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    row-gap: .5rem;
  }
  .recruitment-hero .hero-proof > *,
  .transitory-hero .transitory-proof > *,
  .service-hero .service-hero-proof > * { width: auto; }
}

/* Horarios y sucursales del footer venían como `<a href="#">` desde la
   plantilla: un lector de pantalla los anunciaba como enlaces que no llevan a
   ninguna parte. Son datos, así que pasan a <div> y sólo conservan el aspecto. */
.footer-link.is-dato { cursor: default; }

/* Las tablets son táctiles igual que los teléfonos, y el navbar de Webflow
   colapsa recién a 991px: hasta ahí hace falta el mínimo de 44x44. Debajo de
   767px estas medidas ya se aplican junto al resto del ajuste móvil. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .button.is-medium { min-height: 48px; padding-top: .875rem; padding-bottom: .875rem; }
  .text-link-dark { display: inline-block; padding-top: .75rem; padding-bottom: .75rem; }
  .rt-home-one-creative-agency-tag-line-mark { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-link { display: block; padding-top: .75rem; padding-bottom: .75rem; }
  .footer-dark a.w-inline-block { display: inline-flex; align-items: center; min-height: 44px; }
}

/* =========================================================================
   CANAL LATERAL ÚNICO (móvil y tablet)
   -------------------------------------------------------------------------
   Cada sección venía de una plantilla distinta y con su propio margen: los
   títulos arrancaban en 16, 20, 24 y 45px, y el contenido de las tarjetas en
   36, 37, 40 y 41. Al hacer scroll el borde izquierdo se veía dentado.
   Se unifica en un solo canal para que todo caiga sobre la misma vertical.
   ========================================================================= */
:root { --ic-canal: 1.25rem; }   /* 20px */

@media screen and (max-width: 991px) {
  /* Contenedores de sección */
  .recruitment-hero .section_hero.hero-banner,
  .transitory-hero .section_hero.hero-banner,
  .service-hero .section_hero.hero-banner {
    padding-left: var(--ic-canal);
    padding-right: var(--ic-canal);
  }
  section.section { padding-left: var(--ic-canal); padding-right: var(--ic-canal); }
  .container { padding-left: var(--ic-canal); padding-right: var(--ic-canal); }
  .padding-global-2 { padding-left: var(--ic-canal); padding-right: var(--ic-canal); }

  /* El bloque de cifras flotaba con 32px de margen y encima sumaba su propio
     padding: el número quedaba a 36px del borde mientras los títulos de las
     otras secciones arrancaban en 20. A borde completo, con el canal por
     dentro, la cifra cae sobre la misma vertical que todo lo demás. */
  .counters.padding-section-medium {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
  .padding-global { padding-left: var(--ic-canal); padding-right: var(--ic-canal); }
  .counter-grid-col,
  .counter-grid-col._3-columnas { padding-left: var(--ic-canal); padding-right: var(--ic-canal); }

  /* El bloque de cierre sí es una tarjeta a propósito, pero su margen se
     alinea con el canal en vez de usar uno propio. */
  .cta_comp.padding-section-large-xx { margin-left: var(--ic-canal); margin-right: var(--ic-canal); }
}


/* =========================================================================
   Cifras en móvil — rejilla 2x2
   -------------------------------------------------------------------------
   Como filas, la cifra y la etiqueta comparten línea y hace falta una columna
   fija para que las etiquetas se alineen. Pero "+40" mide 100px y "4" mide 25:
   cualquier ancho fijo deja un hueco muerto en las cifras cortas, se alinee a
   izquierda o a derecha. Apiladas en dos columnas no hay columna que igualar,
   así que desaparece el hueco, todo queda alineado y el bloque sigue siendo
   corto.
   ========================================================================= */
@media screen and (max-width: 767px) {
  .counter-grid,
  .counter-grid._3-columnas {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .counter-grid-col,
  .counter-grid-col._3-columnas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .35rem;
    padding: 1.5rem var(--ic-canal);
    text-align: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Rejilla de dos columnas: línea entre filas y entre columnas, sin bordes
     colgando en los extremos. */
  .counter-grid-col:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .counter-grid-col:nth-child(odd)  { border-right: 1px solid rgba(255, 255, 255, .18); }

  .counter-grid-col .counter-title,
  .counter-grid-col._3-columnas .counter-title {
    justify-content: center;
    text-align: center;
  }
  .counter-grid-col .paragraph-medium-lighter.is-counter,
  .counter-grid-col._3-columnas .paragraph-medium-lighter.is-counter {
    justify-content: center;
    text-align: center;
    max-width: none;
    min-height: 0;
    margin: 0;
  }
}

/* =========================================================================
   MODO EMBEBIDO (iframe dentro de WordPress)
   -------------------------------------------------------------------------
   El navbar y el pie los provee WordPress: dentro del iframe va sólo el
   cuerpo. La clase `.is-embedded` la aplica el layout cuando detecta que la
   página no es la ventana superior.
   ========================================================================= */

/* El navbar propio quedaría debajo del de WordPress: dos barras. Y el hero
   reserva arriba entre 8.5 y 10rem de aire para compensar el navbar fijo que
   ya no está. */
.is-embedded .nav_fixed { display: none; }
.is-embedded .recruitment-hero .section_hero.hero-banner,
.is-embedded .transitory-hero .section_hero.hero-banner,
.is-embedded .service-hero .section_hero.hero-banner {
  padding-top: 3rem;
}

/* Las alturas de viewport no sirven dentro de un iframe de altura automática:
   `100svh` se resuelve contra la altura del iframe, y esa altura la define el
   contenido. Es un bucle —ya ocurrió antes, con el iframe creciendo hasta
   148.870px—. Embebido, la altura la manda el contenido. */
.is-embedded .section_hero.hero-banner,
.is-embedded .recruitment-hero .section_hero.hero-banner,
.is-embedded .transitory-hero .section_hero.hero-banner,
.is-embedded .service-hero .section_hero.hero-banner,
/* El contenedor del video de fondo es el que más crecía: el export le pone
   `height: 100vh` y encima lleva `min-height: 100svh` por landing. Es el que
   disparaba el iframe a 188.000px en la prueba. */
.is-embedded .background-video,
.is-embedded .recruitment-hero.background-video,
.is-embedded .transitory-hero.background-video,
.is-embedded .service-hero.background-video {
  min-height: 0;
  height: auto;
}

/* El pie también lo pone WordPress */
.is-embedded .footer-dark { display: none; }