/* ============================================================
   custom.css — overrides propios de MagicHack.
   Se carga DESPUES del CSS exportado por Webflow, asi que las
   reglas de aqui ganan sin tener que editar el archivo generado.
   ============================================================ */

/* ------------------------------------------------------------
   company.html — hero, pilares y Magic Squad.
   Reusa las utilidades de Webflow y hereda la paleta del sitio.
   ------------------------------------------------------------ */

.section_company-hero {
  background-color: var(--_primitives---colors--spring-green-darkest);
  color: var(--_primitives---colors--white);
  position: relative;
  overflow: hidden;
}

/* Marca de agua con el icono de MagicHack. El PNG viene verde sobre fondo
   blanco: grayscale+invert lo deja claro sobre negro y screen elimina ese
   negro, asi queda solo la silueta. El mask lo disuelve hacia los bordes.
   Va como hijo directo de la seccion (sin ancestros con transform) porque
   un transform aislaria el mix-blend-mode y volveria a aparecer la caja. */
.company-hero_mark {
  z-index: 0;
  background-image: url("../images/webclip.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: grayscale(1) invert(1);
  mix-blend-mode: screen;
  opacity: 0;
  width: 30rem;
  height: 30rem;
  position: absolute;
  top: 50%;
  right: -6rem;
  transform: translateY(-50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, #0006 55%, #0000 78%);
  mask-image: radial-gradient(closest-side, #000 25%, #0006 55%, #0000 78%);
  animation: markFadeIn 1.6s cubic-bezier(.22, .61, .36, 1) .25s forwards;
  pointer-events: none;
}

@keyframes markFadeIn {
  from { opacity: 0; transform: translateY(-50%) scale(1.08); }
  to   { opacity: .14; transform: translateY(-50%) scale(1); }
}

.section_company-hero .padding-global {
  z-index: 1;
  position: relative;
}

.section_company-pillars .padding-section-large,
.section_squad .padding-section-large {
  background-color: #0000;
}

/* Banner, no hero: titular y bajada en paralelo, metricas en una franja
   compacta abajo. Pasa de ~764px a ~265px de alto. */
.section_company-hero .padding-section-large {
  background-color: #0000;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.company-hero_top {
  grid-column-gap: 4rem;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  display: grid;
}

.section_company-hero .text-style-tagline {
  color: var(--_primitives---colors--spring-green);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .75rem;
  font-size: .8125rem;
  display: block;
}

.section_company-hero .heading-style-h1 {
  color: var(--_primitives---colors--white);
  font-size: 2.75rem;
}

.section_company-hero .heading-style-h1 .is-accent {
  color: var(--_primitives---colors--spring-green);
}

.section_company-hero .text-size-medium {
  color: rgba(255, 255, 255, .82);
  padding-bottom: .375rem;
  font-size: 1.0625rem;
}

/* Numero arriba, texto debajo y alineados a la misma linea base: antes iban
   uno al lado del otro y las etiquetas de dos lineas descuadraban la fila. */
.company-hero_stats {
  grid-column-gap: 0rem;
  grid-row-gap: 1.5rem;
  border-top: 1px solid var(--_primitives---opacity--white-20);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  display: grid;
}

.stat_item {
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
}

.stat_item:first-child {
  padding-left: 0;
}

.stat_item:last-child {
  padding-right: 0;
}

/* Filete entre columnas, no alrededor: separa sin encajonar. */
.stat_item + .stat_item:before {
  content: "";
  background-color: var(--_primitives---opacity--white-15);
  width: 1px;
  position: absolute;
  top: .25rem;
  bottom: .25rem;
  left: 0;
}

.stat_value {
  color: var(--_primitives---colors--spring-green);
  font-family: var(--_typography---font-styles--heading);
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Mientras cuenta, el numero brilla; al terminar, se asienta. */
.stat_value [data-count-to] {
  transition: text-shadow .5s;
  display: inline-block;
}

.stat_value [data-count-to].is-counting {
  text-shadow: 0 0 24px rgba(0, 255, 102, .55);
}

.stat_label {
  color: rgba(255, 255, 255, .78);
  max-width: 24ch;
  margin-top: .625rem;
  font-size: .9375rem;
  line-height: 1.35;
}

.stat_note {
  grid-column-gap: .5rem;
  grid-row-gap: .375rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  display: flex;
}

.stat_note span {
  color: rgba(255, 255, 255, .72);
  border: 1px solid var(--_primitives---opacity--white-20);
  border-radius: 99px;
  padding: .1875rem .5625rem;
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Pilares: bloque oscuro, mismo charcoal que Method */
.section_company-pillars {
  background-color: var(--_primitives---colors--neutral-darker);
  color: var(--_primitives---colors--white);
}

.section_company-pillars .heading-style-h2 {
  color: var(--_primitives---colors--spring-green);
}

.section_company-pillars .text-size-medium {
  color: rgba(255, 255, 255, .84);
}

.section_company-pillars .text-style-tagline,
.section_squad .text-style-tagline {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8125rem;
}

.pillar_list {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
}

.pillar_index {
  color: var(--_primitives---colors--spring-green);
  border-bottom: 1px solid var(--_primitives---opacity--white-20);
  padding-bottom: 1rem;
  font-family: var(--_typography---font-styles--heading);
  font-size: 1.125rem;
  font-weight: 700;
}

.pillar_title {
  margin-top: 1.5rem;
  font-size: 1.75rem;
}

.pillar_text {
  color: rgba(255, 255, 255, .78);
  margin-top: .75rem;
}

/* Magic Squad: avatar cuadrado con iniciales, nombre y cargo debajo */
.section_squad {
  background-color: var(--_primitives---colors--spring-green-darkest);
  color: var(--_primitives---colors--white);
}

.section_squad .heading-style-h2 {
  color: var(--_primitives---colors--spring-green);
}

.section_squad .text-size-medium {
  color: rgba(255, 255, 255, .84);
}

.squad_list {
  grid-column-gap: 2rem;
  grid-row-gap: 2.5rem;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}

.squad_item {
  text-align: center;
}

/* Las fotos llegan en formatos y encuadres distintos (cuadradas, verticales
   y una horizontal de 350px). aspect-ratio 1 + cover las normaliza a la
   misma caja; el 30% vertical deja la cara centrada en los retratos. */
.squad_photo {
  aspect-ratio: 1;
  background-color: var(--_primitives---colors--neutral-darker);
  border: 1px solid var(--_primitives---opacity--white-15);
  border-radius: var(--_ui-styles---radius--medium);
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
}

.squad_image {
  object-fit: cover;
  object-position: 50% 30%;
  width: 100%;
  height: 100%;
  filter: grayscale(1) contrast(1.02);
  transition: filter .3s, transform .3s;
  display: block;
}

.squad_item:hover .squad_image {
  filter: grayscale(0) contrast(1);
  transform: scale(1.04);
}

.squad_name {
  font-size: 1.25rem;
}

.squad_role {
  color: rgba(255, 255, 255, .66);
  margin-top: .375rem;
  font-size: .9375rem;
}

@media screen and (max-width: 991px) {
  .squad_list {
    grid-column-gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
  }

  .pillar_list,
  .company-hero_stats {
    grid-template-columns: 1fr;
  }

  .stat_label {
    max-width: none;
  }
}

@media screen and (max-width: 767px) {
  .squad_list {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat_value {
    font-size: 2.75rem;
  }
}

/* ------------------------------------------------------------
   Navbar: dropdown de Services (dos columnas de links) y dropdown
   de Case Studies (tres casos reales en vez de seis placeholders).
   ------------------------------------------------------------ */

/* Botones del navbar. Antes los dos iban en verde solido y competian entre
   si; ahora Contact manda (relleno verde, letra negra) y Menu acompana en
   modo contorno con letra blanca. El hover solo baja un tono, no cambia el
   color: la jerarquia se mantiene al pasar el mouse. */
.navbar10_menu-right .button.is-small {
  border-color: var(--_primitives---colors--spring-green);
  background-color: var(--_primitives---colors--spring-green);
  color: var(--_primitives---colors--neutral-darkest);
  border-radius: 99px;
  padding: .4375rem 1.125rem;
  font-weight: 600;
  transition: background-color .18s, border-color .18s, color .18s;
}

.navbar10_menu-right .button.is-small:hover {
  border-color: var(--_primitives---colors--spring-green-dark);
  background-color: var(--_primitives---colors--spring-green-dark);
}

.navbar10_menu-right .button.is-secondary.is-small.is-alternate {
  border-color: rgba(0, 255, 102, .45);
  background-color: #0000;
  color: var(--_primitives---colors--white);
}

.navbar10_menu-right .button.is-secondary.is-small.is-alternate:hover {
  border-color: rgba(0, 255, 102, .7);
  background-color: rgba(0, 255, 102, .12);
  color: var(--_primitives---colors--white);
}

/* Webflow marca el link de la pagina actual con .w--current y le pone
   color neutral-darkest (#0d0a00), que sobre el navbar oscuro queda
   ilegible. Se marca en verde de marca. */
.navbar10_component.color-scheme-2 .navbar10_link.w--current {
  color: var(--_primitives---colors--spring-green);
}

/* OJO: .navbar10_dropdown-content-left declara grid-template-columns pero
   Webflow nunca le puso display:grid. Con una sola columna no se notaba;
   con dos hay que declararlo o se apilan. Ademas trae max-width 15rem
   porque en el dropdown original comparte panel con las tarjetas: el menu
   de Services no lleva tarjetas, asi que las columnas ocupan el panel. */
.navbar10_dropdown-content.is-menu-columns {
  grid-column-gap: 4rem;
  align-items: stretch;
}

.navbar10_dropdown-content.is-menu-columns .navbar10_dropdown-content-left {
  grid-column-gap: 4rem;
  flex: 1;
  max-width: none;
  padding-right: 0;
  display: grid;
}

/* Encabezado de columna: eyebrow verde con filete, no un h4 blanco que
   competia con los propios links. */
.menu-eyebrow {
  color: var(--_primitives---colors--spring-green);
  border-bottom: 1px solid var(--_primitives---opacity--white-15);
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.is-menu-columns .navbar10_dropdown-link-list {
  grid-row-gap: .25rem;
  grid-template-rows: auto;
}

/* Cada link es una fila con area de click propia y respuesta al hover:
   antes no existia ninguna regla :hover y se sentian muertos. */
.is-menu-columns .navbar10_dropdown-link {
  border-radius: 10px;
  grid-template-columns: 1fr;
  padding: .5rem .75rem;
  transition: background-color .18s, transform .18s;
  display: block;
  position: relative;
}

.is-menu-columns .navbar10_dropdown-link:hover {
  background-color: var(--_primitives---opacity--white-5);
  transform: translateX(3px);
}

.menu-link_label {
  color: var(--_primitives---colors--white);
  font-weight: 500;
  transition: color .18s;
}

.is-menu-columns .navbar10_dropdown-link:hover .menu-link_label {
  color: var(--_primitives---colors--spring-green);
}

.menu-link_desc {
  color: rgba(255, 255, 255, .55);
  margin-top: .125rem;
  font-size: .8125rem;
  line-height: 1.35;
}

/* Tarjeta destacada: la mitad derecha del panel estaba vacia (51% del ancho
   sin usar). Ancla la vista y le da un destino al menu. */
.menu-feature {
  flex: none;
  width: 20rem;
}

.menu-feature_card {
  border: 1px solid var(--_primitives---opacity--white-15);
  border-radius: var(--_ui-styles---radius--medium);
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition: border-color .18s, background-color .18s;
  display: flex;
  overflow: hidden;
}

.menu-feature_card:hover {
  border-color: rgba(0, 255, 102, .45);
  background-color: var(--_primitives---opacity--white-5);
}

.menu-feature_image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  filter: grayscale(1) brightness(.85);
  transition: filter .25s;
}

.menu-feature_card:hover .menu-feature_image {
  filter: grayscale(0) brightness(1);
}

.menu-feature_body {
  padding: 1rem 1.125rem 1.125rem;
}

.menu-feature_eyebrow {
  color: var(--_primitives---colors--spring-green);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .6875rem;
  font-weight: 600;
}

.menu-feature_title {
  color: var(--_primitives---colors--white);
  margin-top: .5rem;
  font-family: var(--_typography---font-styles--heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.menu-feature_cta {
  color: rgba(255, 255, 255, .66);
  margin-top: .75rem;
  font-size: .8125rem;
  transition: color .18s;
}

.menu-feature_card:hover .menu-feature_cta {
  color: var(--_primitives---colors--spring-green);
}

/* ---- Dropdown de Case Studies: lateral por industria + grid 4 en linea ---- */

.navbar10_dropdown-content.is-cases-menu {
  grid-column-gap: 3rem;
}

.navbar10_dropdown-content.is-cases-menu .navbar10_dropdown-content-left {
  flex: none;
  width: 14rem;
  max-width: none;
  padding-right: 0;
}

.case-side_list {
  grid-row-gap: 1.125rem;
  flex-direction: column;
  display: flex;
}

.case-side_industry {
  color: var(--_primitives---colors--white);
  margin-bottom: .375rem;
  font-family: var(--_typography---font-styles--heading);
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
}

.case-side_company {
  color: rgba(255, 255, 255, .62);
  padding: .1875rem 0;
  font-size: .8125rem;
  transition: color .18s, transform .18s;
  display: block;
}

.case-side_company:hover {
  color: var(--_primitives---colors--spring-green);
  transform: translateX(3px);
}

.case-side_all {
  color: var(--_primitives---colors--spring-green);
  border-top: 1px solid var(--_primitives---opacity--white-15);
  margin-top: 1.25rem;
  padding-top: .875rem;
  font-size: .8125rem;
  font-weight: 500;
  display: block;
}

.case-side_all:hover {
  text-decoration: underline;
}

/* Cuatro tarjetas por fila con ancho fijo de 202px. Si algun dia son 16, la
   lista hace scroll en vez de empujar el panel fuera de la pantalla. */
.navbar10_blog-list.is-four-up {
  grid-column-gap: 1.125rem;
  grid-row-gap: 1.5rem;
  grid-template-columns: repeat(4, 12.625rem);
  justify-content: start;
  max-height: 66vh;
  overflow-y: auto;
}

.navbar10_blog-item.is-compact {
  grid-row-gap: .625rem;
  border-radius: 12px;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 .625rem;
  transition: background-color .18s, transform .18s;
}

.navbar10_blog-item.is-compact:hover {
  background-color: var(--_primitives---opacity--white-5);
  transform: translateY(-2px);
}

.navbar10_blog-item.is-compact .navbar10_blog-item-image-wrapper {
  border-radius: 10px;
  flex: none;
  width: 100%;
}

.navbar10_blog-item.is-compact .navbar10_blog-item-content {
  padding-left: .5rem;
  padding-right: .5rem;
}

.case-card_company {
  color: var(--_primitives---colors--spring-green);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .625rem;
  font-weight: 600;
}

.case-card_title {
  color: var(--_primitives---colors--white);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: .25rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}

.case-card_desc {
  color: rgba(255, 255, 255, .55);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: .25rem;
  margin-bottom: 0;
  font-size: .75rem;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.case-card_tag {
  color: rgba(255, 255, 255, .7);
  margin-top: .4375rem;
  font-size: .6875rem;
  text-decoration: underline;
}

@media screen and (max-width: 991px) {
  .navbar10_dropdown-content.is-menu-columns .navbar10_dropdown-content-left {
    grid-column-gap: 2rem;
    max-width: none;
  }

  /* En el menu movil la tarjeta destacada solo alarga el scroll. */
  .menu-feature {
    display: none;
  }

  .navbar10_blog-list.is-four-up {
    grid-template-columns: 1fr 1fr;
    max-height: none;
    overflow: visible;
  }

  .navbar10_dropdown-content.is-cases-menu .navbar10_dropdown-content-left {
    width: 100%;
  }

  .company-hero_top {
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  .company-hero_stats {
    grid-template-columns: 1fr;
  }

  .stat_item,
  .stat_item:first-child,
  .stat_item:last-child {
    padding-left: 0;
    padding-right: 0;
  }

  /* En una sola columna el filete pasa de vertical a horizontal. */
  .stat_item + .stat_item:before {
    width: 100%;
    height: 1px;
    top: -.75rem;
    bottom: auto;
  }

  .stat_value {
    font-size: 2.75rem;
  }

  .company-hero_mark {
    width: 20rem;
    height: 20rem;
    right: -7rem;
  }
}

/* ------------------------------------------------------------
   Hero (header36): imagen full-bleed con velo verde difuminado
   ------------------------------------------------------------ */

.section_header36.is-hero-media {
  background-color: var(--_primitives---colors--spring-green-darkest);
  align-items: center;
  height: calc(100vh - 4.5rem); /* 4.5rem = alto minimo del navbar */
  min-height: 40rem;
  max-height: 54rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* Capa 1: la foto, cubriendo todo el hero */
.section_header36.is-hero-media .header36_bg-image {
  z-index: 0;
  object-fit: cover;
  object-position: 60% 38%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transform: scale(1.04); /* evita bordes claros al desenfocar */
}

/* Capa 1b: el video, encima de la foto. La foto queda de respaldo: se ve
   mientras el video carga, y se queda si el navegador bloquea el autoplay
   o si el sistema pide menos movimiento. */
.section_header36.is-hero-media .header36_bg-video {
  z-index: 0;
  object-fit: cover;
  object-position: 60% 34%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
  transform: scale(1.04);
  pointer-events: none;
}

.section_header36.is-hero-media .header36_bg-video.is-ready {
  opacity: 1;
}

@media screen and (max-width: 991px) {
  .section_header36.is-hero-media .header36_bg-video {
    object-position: 50% 28%;
  }
}

/* Capa 2: desenfoque solo bajo el texto, se disuelve hacia la derecha */
.section_header36.is-hero-media .header36_blur {
  z-index: 1;
  -webkit-backdrop-filter: blur(20px) saturate(.85);
  backdrop-filter: blur(20px) saturate(.85);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 30%, #0000 68%);
  mask-image: linear-gradient(100deg, #000 0%, #000 30%, #0000 68%);
  position: absolute;
  inset: 0;
}

/* Capa 3: el verde de marca, difuminado de izquierda a derecha */
.section_header36.is-hero-media .header36_tint {
  z-index: 2;
  background-image:
    linear-gradient(100deg,
      rgba(0, 48, 19, .96) 0%,
      rgba(0, 76, 30, .9) 30%,
      rgba(0, 76, 30, .62) 55%,
      rgba(0, 76, 30, .34) 78%,
      rgba(0, 76, 30, .2) 100%),
    linear-gradient(to bottom,
      rgba(0, 30, 12, .5) 0%,
      rgba(0, 30, 12, 0) 26%,
      rgba(0, 30, 12, 0) 68%,
      rgba(0, 30, 12, .6) 100%);
  position: absolute;
  inset: 0;
}

/* El contenido va por encima de las tres capas */
.section_header36.is-hero-media .header36_component {
  z-index: 3;
  background-color: #0000;
  grid-template-columns: 1fr;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: relative;
}

/* El id lo pone Webflow solo para empujar el bloque a la derecha en la
   grilla de dos columnas; con el hero a una columna va pegado a la izquierda.
   Se necesita el selector de id para ganarle en especificidad. */
.section_header36.is-hero-media #w-node-_095d0057-075f-7c4d-68e1-1a1f1cd1bd0b-b8d5cf45,
.section_header36.is-hero-media .header36_content {
  justify-self: start;
  max-width: 36rem;
  margin-left: 5vw;
  margin-right: 5vw;
}

.section_header36.is-hero-media .heading-style-h1 {
  text-shadow: 0 2px 24px rgba(0, 30, 12, .55);
}

.section_header36.is-hero-media .text-size-medium,
.section_header36.is-hero-media .text-size-medium .bold-text {
  color: var(--_primitives---colors--white);
  text-shadow: 0 1px 16px rgba(0, 30, 12, .6);
}

/* ------------------------------------------------------------
   Arsenal (layout239): mismo verde solido del hero, titular en
   verde fosforescente y el resto del bloque en blanco.
   ------------------------------------------------------------ */

.section_layout239.is-arsenal-green {
  background-color: var(--_primitives---colors--spring-green-darkest);
  color: var(--_primitives---colors--white);
}

/* .padding-section-large trae background-color: #fff desde Webflow y tapa
   el verde de la seccion; hay que devolverlo a transparente. Los 7rem de
   abajo dejaban un hueco muerto tras los CTA. */
.section_layout239.is-arsenal-green .padding-section-large {
  background-color: #0000;
  padding-bottom: 5rem;
}

.section_layout239.is-arsenal-green .heading-style-h2 {
  color: var(--_primitives---colors--spring-green);
}

.section_layout239.is-arsenal-green .text-style-tagline,
.section_layout239.is-arsenal-green .heading-style-h4 {
  color: var(--_primitives---colors--white);
}

/* Los parrafos van apenas por debajo del blanco puro: son bloques largos y
   a 100% compiten con el titular y con los nombres de cada servicio. */
.section_layout239.is-arsenal-green .text-size-medium,
.section_layout239.is-arsenal-green .layout239_item p {
  color: rgba(255, 255, 255, .84);
}

/* Las tres tarjetas se estiran a la misma altura y el CTA se ancla abajo,
   asi los tres botones quedan alineados aunque los parrafos midan distinto. */
.section_layout239.is-arsenal-green .layout239_list {
  align-items: stretch;
}

.section_layout239.is-arsenal-green .layout239_item > .margin-top {
  margin-top: auto;
  padding-top: 2rem;
}

/* ------------------------------------------------------------
   Bloques oscuros: Method (layout538) y Results (blog34).
   Mismo charcoal del navbar, texto blanco y botones con contorno.
   ------------------------------------------------------------ */

/* layout538 venia con un fondo cafe #735b4e que solo asomaba como marco
   alrededor del panel blanco. Los dos pasan al charcoal del navbar. */
.section_layout538,
.section_blog34 {
  background-color: var(--_primitives---colors--neutral-darker);
  color: var(--_primitives---colors--white);
}

/* Otra vez el #fff hardcodeado de .padding-section-large: en layout538
   dibujaba un panel blanco mas chico que su celda y por eso se veia el
   borde de la seccion. */
.section_layout538 .padding-section-large,
.section_blog34 .padding-section-large {
  background-color: #0000;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* La foto de Method es vertical (756x1344): sin encuadre queda centrada y
   corta la cara al recortar a la mitad del ancho. */
.section_layout538 .layout538_image-object-fit-cover {
  object-position: 50% 28%;
}

.section_layout538 .text-style-tagline,
.section_blog34 .text-style-tagline {
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8125rem;
}

.section_layout538 .heading-style-h2 {
  color: var(--_primitives---colors--white);
}

/* Results usa el mismo verde fosforescente que Arsenal en su titular. */
.section_blog34 .heading-style-h2 {
  color: var(--_primitives---colors--spring-green);
}

.section_layout538 .text-size-medium,
.section_blog34 .text-size-medium,
.section_blog34 .text-size-regular {
  color: rgba(255, 255, 255, .84);
}

/* Sobre el panel oscuro el boton va con contorno claro, no en verde solido. */
.section_layout538 .button.is-secondary.is-alternate,
.section_blog34 .button.is-secondary.is-alternate {
  background-color: #0000;
  border-color: var(--_primitives---opacity--white-20);
  color: var(--_primitives---colors--white);
}

.section_layout538 .button.is-secondary.is-alternate:hover,
.section_blog34 .button.is-secondary.is-alternate:hover {
  background-color: var(--_primitives---opacity--white-10);
}

/* El chip de categoria (.tag.is-alternate) siempre fue blanco sobre blanco:
   existia pero no se veia. Sobre el fondo oscuro ya aparece solo. */

/* ---- Pasarela de casos ---------------------------------------------
   La grilla pasa a pista horizontal con scroll-snap. El scroll nativo
   (trackpad, dedo, shift+rueda) sigue funcionando; los botones son un
   atajo, no el unico camino.
   -------------------------------------------------------------------- */
.blog34_list-wrapper.is-carousel {
  position: relative;
}

.is-carousel .blog34_list {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  grid-auto-flow: column;
  grid-auto-columns: calc(33.333% - 1.333rem);
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.is-carousel .blog34_list::-webkit-scrollbar {
  display: none;
}

.is-carousel .blog34_item {
  scroll-snap-align: start;
}

.carousel_controls {
  grid-column-gap: 2rem;
  align-items: center;
  margin-top: 2.5rem;
  display: flex;
}

.carousel_progress {
  background-color: var(--_primitives---opacity--white-20);
  border-radius: 99px;
  flex: 1;
  height: 4px;
  overflow: hidden;
}

.carousel_progress-bar {
  background-color: var(--_primitives---colors--spring-green);
  border-radius: 99px;
  width: 100%;
  height: 100%;
  transition: transform .2s, width .2s;
  display: block;
  box-shadow: 0 0 12px rgba(0, 255, 102, .55);
}

.carousel_buttons {
  grid-column-gap: .625rem;
  flex: none;
  display: flex;
}

.carousel_btn {
  color: var(--_primitives---colors--white);
  cursor: pointer;
  background-color: #0000;
  border: 1px solid var(--_primitives---opacity--white-20);
  border-radius: 99px;
  justify-content: center;
  align-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  transition: border-color .18s, background-color .18s, color .18s, opacity .18s;
  display: flex;
}

.carousel_btn:hover:not(:disabled) {
  color: var(--_primitives---colors--neutral-darkest);
  background-color: var(--_primitives---colors--spring-green);
  border-color: var(--_primitives---colors--spring-green);
}

.carousel_btn:disabled {
  cursor: default;
  opacity: .3;
}

/* En escritorio los botones se salen de la fila de abajo y se plantan en
   los laterales, centrados sobre las portadas y en verde de marca. El
   contenedor no atrapa clics: solo los botones. Abajo queda la barra de
   progreso sola, ya gruesa para que se note. */
@media screen and (min-width: 992px) {
  .blog34_list-wrapper.is-carousel .carousel_buttons {
    grid-column-gap: 0;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    inset: 0 .75rem calc(2.5rem + 4px);
    /* Centrados sobre la portada, no sobre la tarjeta entera: si no, el
       boton cae encima del tag y del titulo. La portada es 3/2 y ocupa un
       tercio de la pista, asi que su mitad sale de la propia anchura. */
    padding-top: calc(100% / 9 - 1.778rem);
    pointer-events: none;
    z-index: 3;
  }

  .blog34_list-wrapper.is-carousel .carousel_btn {
    color: var(--_primitives---colors--neutral-darkest);
    background-color: var(--_primitives---colors--spring-green);
    border-color: var(--_primitives---colors--spring-green);
    width: 3rem;
    height: 3rem;
    pointer-events: auto;
    box-shadow: 0 0 0 6px rgba(0, 255, 102, .12), 0 .5rem 1.5rem rgba(0, 0, 0, .45);
    transition: border-color .18s, background-color .18s, color .18s,
                opacity .18s, transform .18s, box-shadow .18s;
  }

  .blog34_list-wrapper.is-carousel .carousel_btn svg {
    width: 20px;
    height: 20px;
  }

  .blog34_list-wrapper.is-carousel .carousel_btn:hover:not(:disabled) {
    transform: scale(1.08);
    box-shadow: 0 0 0 10px rgba(0, 255, 102, .2), 0 .625rem 1.75rem rgba(0, 0, 0, .5);
  }

  /* Sin salida por ese lado el boton se apaga en vez de quedar verde a medias. */
  .blog34_list-wrapper.is-carousel .carousel_btn:disabled {
    opacity: 0;
    transform: scale(.9);
  }
}

/* Sin desbordamiento no hay nada que pasear: se ocultan los controles. */
.blog34_list-wrapper.is-carousel:not(.is-scrollable) .carousel_controls {
  display: none;
}

@media screen and (max-width: 991px) {
  .is-carousel .blog34_list {
    grid-auto-columns: calc(60% - 1rem);
  }
}

@media screen and (max-width: 767px) {
  .is-carousel .blog34_list {
    grid-auto-columns: calc(85% - 1rem);
  }

  .carousel_controls {
    margin-top: 2rem;
  }
}

/* ---- Motion compartido ---------------------------------------------
   [data-reveal] entra al viewport una vez. Se anula por completo si el
   sistema pide menos movimiento.
   -------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transition: none;
    transform: none;
  }

  .squad_item:hover .squad_image,
  .navbar10_blog-item.is-compact:hover,
  .menu-feature_card:hover .menu-feature_image {
    transform: none;
  }
}

/* ------------------------------------------------------------
   CTA final (cta65): banner cinematografico con la foto de fondo
   difuminada hacia los bordes y el copy centrado encima.
   ------------------------------------------------------------ */

.section_cta65 .is-cta-banner {
  background-color: var(--_primitives---colors--neutral-darkest);
  align-items: center;
  min-height: 15rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section_cta65 .cta65_bg-image {
  z-index: 0;
  object-fit: cover;
  /* La cara queda en la mitad izquierda del encuadre; el 34% vertical la
     centra en la franja que se ve con el banner a la mitad de alto. */
  object-position: 50% 22%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  filter: grayscale(1) contrast(1.12) brightness(.95);
}

/* El velo aprieta solo en la franja central, donde cae el texto, y se abre
   a los lados para que la cara y los monitores se lean. */
.section_cta65 .cta65_bg-fade {
  z-index: 1;
  background-image:
    radial-gradient(40% 130% at 50% 50%,
      rgba(13, 10, 0, .62) 0%,
      rgba(13, 10, 0, .42) 55%,
      rgba(13, 10, 0, .12) 88%,
      rgba(13, 10, 0, 0) 100%),
    linear-gradient(to right,
      rgba(13, 10, 0, .92) 0%,
      rgba(13, 10, 0, .3) 12%,
      rgba(13, 10, 0, .18) 50%,
      rgba(13, 10, 0, .3) 88%,
      rgba(13, 10, 0, .92) 100%),
    linear-gradient(to bottom,
      rgba(13, 10, 0, .45) 0%,
      rgba(13, 10, 0, .1) 40%,
      rgba(13, 10, 0, .5) 100%);
  position: absolute;
  inset: 0;
}

.section_cta65 .is-cta-banner .container-large {
  z-index: 2;
  position: relative;
}

/* Y otra vez el #fff hardcodeado de .padding-section-large. */
.section_cta65 .is-cta-banner .padding-section-large {
  background-color: #0000;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Sin el tope de 48rem el titular y el parrafo entran en un renglon cada
   uno en escritorio, que es lo que permite bajar el banner a la mitad. */
.section_cta65 .is-cta-banner .max-width-large {
  max-width: none;
}

.section_cta65 .is-cta-banner .heading-style-h2 {
  color: var(--_primitives---colors--white);
  text-shadow: 0 2px 28px rgba(0, 0, 0, .6);
}

.section_cta65 .is-cta-banner .heading-style-h2 .is-accent {
  color: var(--_primitives---colors--spring-green);
}

.section_cta65 .is-cta-banner .text-size-medium {
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .65);
}

/* Los dos botones venian en negro sobre blanco: sobre el banner oscuro uno
   desaparecia y el otro se quedaba sin contorno visible. */
.section_cta65 .is-cta-banner .button.is-alternate {
  border-color: var(--_primitives---colors--spring-green);
  background-color: var(--_primitives---colors--spring-green);
  color: var(--_primitives---colors--neutral-darkest);
}

.section_cta65 .is-cta-banner .button.is-alternate:hover {
  border-color: var(--_primitives---colors--spring-green-dark);
  background-color: var(--_primitives---colors--spring-green-dark);
}

.section_cta65 .is-cta-banner .button.is-secondary {
  border-color: var(--_primitives---opacity--white-20);
  background-color: #0000;
  color: var(--_primitives---colors--white);
}

.section_cta65 .is-cta-banner .button.is-secondary:hover {
  background-color: var(--_primitives---opacity--white-10);
}

/* En vertical el texto ocupa todo el ancho, asi que el velo deja de ir de
   izquierda a derecha y pasa a subir desde abajo: la foto respira arriba y
   el copy queda apoyado en la parte baja. */
@media screen and (max-width: 991px) {
  .section_header36.is-hero-media {
    align-items: flex-end;
    height: auto;
    min-height: 40rem;
    max-height: none;
  }

  .section_header36.is-hero-media .header36_bg-image {
    object-position: 50% 30%;
  }

  .section_header36.is-hero-media .header36_blur {
    -webkit-backdrop-filter: blur(14px) saturate(.9);
    backdrop-filter: blur(14px) saturate(.9);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 44%, #0000 76%);
    mask-image: linear-gradient(to top, #000 0%, #000 44%, #0000 76%);
  }

  .section_header36.is-hero-media .header36_tint {
    background-image:
      linear-gradient(to top,
        rgba(0, 48, 19, .95) 0%,
        rgba(0, 76, 30, .88) 38%,
        rgba(0, 76, 30, .52) 72%,
        rgba(0, 76, 30, .3) 100%);
  }

  .section_header36.is-hero-media .header36_component {
    grid-row-gap: 0rem;
    padding-top: 9rem;
    padding-bottom: 3.5rem;
  }
}

@media screen and (max-width: 767px) {
  .section_header36.is-hero-media {
    min-height: 38rem;
  }

  .section_header36.is-hero-media .header36_component {
    padding-top: 8rem;
    padding-bottom: 3rem;
  }
}

/* ------------------------------------------------------------
   CAUSA RAIZ del texto ilegible del export de Webflow.
   .padding-section-large trae background-color:#fff y se pinta ENCIMA
   del fondo que define el color-scheme de cada seccion. En las
   secciones color-scheme-3/4/5 (verdes y oscuras) el texto sigue
   siendo blanco pero el fondo pasa a blanco: contraste 1:1, contenido
   invisible. Verificado que ocurre igual sin custom.css, o sea que ya
   venia asi del export. Se devuelve a transparente para que mande el
   color-scheme, que es lo que Webflow pretendia.
   ------------------------------------------------------------ */
.padding-section-large {
  background-color: #0000;
}

/* Las secciones sin color-scheme si necesitan el blanco explicito. */
.section_layout239:not(.is-arsenal-green) > .padding-global,
.section_testimonial14,
.section_faq10 {
  background-color: var(--_primitives---colors--white);
}

/* Verde fosforescente sobre blanco da 1.36:1. En fondo claro va el verde
   oscuro de marca, que llega a ~7:1. */
.color-scheme-1 .heading-style-h1,
.color-scheme-1 .heading-style-h2 {
  color: var(--_primitives---colors--spring-green-darker);
}

/* case-studies-2.html trae color-scheme-5 (fondo claro) en la seccion de
   resultados, que gana por especificidad sobre el panel oscuro y deja el
   titular y las descripciones a 1.03:1. Se iguala la especificidad. */
.section_blog34.color-scheme-5 {
  background-color: var(--_primitives---colors--neutral-darker);
  color: var(--_primitives---colors--white);
}

.section_blog34.color-scheme-5 .heading-style-h2 {
  color: var(--_primitives---colors--spring-green);
}

.section_blog34.color-scheme-5 .text-size-medium,
.section_blog34.color-scheme-5 .text-size-regular {
  color: rgba(255, 255, 255, .84);
}

/* El tagline verde fosforescente sobre el gris claro de color-scheme-5. */
.color-scheme-5 .text-style-tagline,
.color-scheme-1 .text-style-tagline {
  color: var(--_primitives---colors--spring-green-darker);
}

/* Los CTA en blanco sobre el verde fosforescente dan 1.36:1, muy por debajo
   del minimo legible. Texto oscuro sobre ese verde da ~14:1, que es lo que
   ya se resolvio bien en el boton Contact del navbar. */
.button.is-secondary.is-alternate,
.section_layout239.is-arsenal-green .button.is-secondary.is-alternate {
  color: var(--_primitives---colors--neutral-darkest);
}

/* En los paneles oscuros el mismo boton va en contorno, ahi el texto blanco
   si tiene contraste de sobra contra el fondo charcoal. */
.section_layout538 .button.is-secondary.is-alternate,
.section_blog34 .button.is-secondary.is-alternate,
.svc-case .button.is-secondary.is-alternate,
.navbar10_menu-right .button.is-secondary.is-alternate {
  color: var(--_primitives---colors--white);
}