/* Ajustes del landing /as: imagen de portada y logo provistos por el cliente. */
.site-header .brand,
.footer .brand {
  width: 330px;
  min-width: 330px;
  height: 76px;
  background: url("/as/assets/aliados-logo.png") center / 100% auto no-repeat;
  mix-blend-mode: screen;
  filter: none;
}

.site-header .brand img,
.site-header .brand::after,
.footer .brand img,
.footer .brand::after {
  opacity: 0;
}

.hero {
  min-height: min(860px, calc(100svh - 88px));
  padding-top: 24px;
  padding-bottom: 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-bg {
  background:
    linear-gradient(90deg, rgba(3, 7, 12, .94) 0%, rgba(3, 7, 12, .84) 36%, rgba(3, 7, 12, .26) 70%, rgba(3, 7, 12, .12) 100%),
    linear-gradient(0deg, rgba(3, 7, 12, .82), transparent 32%),
    url("/as/assets/aliados-hero.png") center center / cover no-repeat;
}

.hero-bg::before {
  display: none;
}

.hero-grid {
  grid-template-columns: minmax(0, 760px);
  align-items: start;
  margin-bottom: 56px;
}

.hero-visual-wrap {
  display: none;
}

.hero-copy {
  max-width: 760px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .48);
}

.hero-copy p {
  color: #eef1f3;
}

.hero-capabilities span {
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(4, 10, 16, .68);
}

.hero-pillars {
  position: relative;
  border: 1px solid rgba(243, 199, 95, .18);
  border-radius: 12px;
  background: rgba(4, 9, 15, .78);
  backdrop-filter: blur(12px);
}

@media (max-width: 1240px) {
  .site-header .brand,
  .footer .brand {
    width: 230px;
    min-width: 230px;
    height: 72px;
  }
}

@media (min-width: 921px) and (max-width: 1040px) {
  .site-header .brand {
    width: 205px;
    min-width: 205px;
  }

  .site-header .header-shell {
    gap: 10px;
  }

  .site-header .main-nav {
    gap: 8px;
  }

  .site-header .header-cta {
    padding: 0 8px;
    font-size: 10px;
  }
}

@media (max-width: 920px) {
  .hero {
    min-height: 0;
    padding-top: 72px;
  }

  .hero-grid {
    margin-bottom: 58px;
  }

  .hero-bg {
    background:
      linear-gradient(90deg, rgba(3, 7, 12, .9), rgba(3, 7, 12, .48)),
      linear-gradient(0deg, rgba(3, 7, 12, .9), transparent 46%),
      url("/as/assets/aliados-hero.png") 58% center / cover no-repeat;
  }
}

@media (max-width: 640px) {
  .site-header .brand,
  .footer .brand {
    width: 220px;
    min-width: 220px;
    height: 60px;
  }

  .hero {
    padding-top: 48px;
    padding-bottom: 30px;
  }

  .hero-bg {
    background:
      linear-gradient(180deg, rgba(3, 7, 12, .58) 0%, rgba(3, 7, 12, .76) 35%, rgba(3, 7, 12, .94) 68%, #050607 100%),
      url("/as/assets/aliados-hero.png") 60% top / auto 480px no-repeat,
      #050607;
  }

  .hero-grid {
    margin-bottom: 42px;
  }

  .hero-copy h1 {
    font-size: clamp(34px, 9.2vw, 50px);
    line-height: 1.06;
    overflow-wrap: anywhere;
  }

  .hero-copy p {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.56;
  }

  .hero-actions {
    gap: 12px;
    margin-top: 26px;
  }

  .hero-actions .button {
    min-height: 52px;
    padding: 10px 14px;
    text-align: center;
  }

  .hero-capabilities {
    gap: 8px;
  }

  .hero-capabilities span {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .hero-pillars {
    padding: 6px 16px;
  }

  .hero-pillars article {
    padding: 16px 0;
  }
}

@media (max-width: 360px) {
  .site-header .brand,
  .footer .brand {
    width: 180px;
    min-width: 180px;
  }

  .hero-copy h1 {
    font-size: 32px;
  }
}

/* Beneficios de la portada: tarjetas legibles y separadas. */
.hero-pillars {
  gap: 12px;
  margin-top: 28px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.hero-pillars article,
.hero-pillars article:last-child {
  min-height: 110px;
  padding: 19px;
  border: 1px solid rgba(243, 199, 95, .2);
  border-radius: 12px;
  background: rgba(6, 11, 17, .86);
  box-shadow: 0 14px 35px rgba(0, 0, 0, .25);
}

.hero-pillars svg {
  width: 32px;
  height: 32px;
}

.hero-pillars h2 {
  font-size: 15px;
  line-height: 1.25;
}

.hero-pillars p {
  font-size: 13px;
  line-height: 1.45;
}

/* La tienda web tiene una ilustración y jerarquía propias. */
.service-grid .product-card:nth-child(5) {
  border-color: rgba(243, 199, 95, .48);
  background:
    radial-gradient(circle at 22% 34%, rgba(217, 168, 62, .16), transparent 48%),
    linear-gradient(145deg, #1a1b1b, #090b0e);
}

.service-grid .product-card:nth-child(5) h3 {
  color: var(--gold-bright);
}

.service-grid .product-card:nth-child(5) .product-card__visual img {
  width: 100%;
  max-width: 340px;
  filter: drop-shadow(0 18px 25px rgba(0, 0, 0, .38));
}

/* Soluciones a medida: secuencia clara en lugar de órbitas superpuestas. */
.company-board {
  width: 100%;
  min-height: 0;
  padding: 24px;
  display: grid;
  align-content: start;
  place-items: stretch;
  gap: 12px;
  border: 1px solid rgba(243, 199, 95, .23);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(24, 29, 35, .96), rgba(8, 11, 15, .98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.company-board::before {
  content: "DEL PROBLEMA A LA SOLUCIÓN";
  display: block;
  margin: 3px 0 8px;
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.company-board .board-orbit {
  display: none;
}

.company-board article,
.company-board article:nth-of-type(1),
.company-board article:nth-of-type(2),
.company-board article:nth-of-type(3) {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  min-height: 91px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 3px 15px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}

.company-board article::after {
  position: absolute;
  right: 18px;
  top: 18px;
  color: rgba(243, 199, 95, .58);
  font-size: 12px;
  font-weight: 800;
}

.company-board article:nth-of-type(1)::after { content: "01"; }
.company-board article:nth-of-type(2)::after { content: "02"; }
.company-board article:nth-of-type(3)::after { content: "03"; }

.company-board article svg {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
}

.company-board article span {
  color: var(--muted);
  font-size: 13px;
}

.company-board article strong {
  font-size: 18px;
  line-height: 1.25;
}

.company-board .board-center {
  width: 100%;
  height: auto;
  min-height: 80px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(217, 168, 62, .18), rgba(20, 22, 23, .92));
  box-shadow: none;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.company-board a.board-center:hover {
  border-color: rgba(243, 199, 95, .64);
  box-shadow: 0 12px 30px rgba(217, 168, 62, .12);
  transform: translateY(-2px);
}

.board-center span {
  font-size: 28px;
}

.board-center p {
  flex: 1;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.board-center svg {
  flex: 0 0 auto;
}

@media (max-width: 1240px) {
  .company-board {
    max-width: 720px;
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .hero-pillars {
    gap: 9px;
  }

  .hero-pillars article,
  .hero-pillars article:last-child {
    min-height: 0;
    padding: 15px;
  }

  .company-board {
    padding: 16px;
    border-radius: 16px;
  }

  .company-board article,
  .company-board article:nth-of-type(1),
  .company-board article:nth-of-type(2),
  .company-board article:nth-of-type(3) {
    min-height: 82px;
    padding: 14px;
  }

  .company-board article strong {
    font-size: 16px;
  }

  .company-board .board-center {
    min-height: 72px;
    padding: 14px;
  }
}