/* ==========================================================================
   GO Asesores — Página ARL
   Storytelling: hero → servicios → contraste → tecnología → alianzas → CTA
   ========================================================================== */


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.arl-hero .hero-mini__actions {
  justify-content: center;
  margin-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   Servicios — 6 cards con número watermark + icono fill de marca
   -------------------------------------------------------------------------- */
.arl-services__title {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

.arl-services__subtitle {
  max-width: 48ch;
  margin: 0 auto;
  color: var(--text-tertiary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.arl-services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-16);
}

@media (min-width: 640px) {
  .arl-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .arl-services__grid { grid-template-columns: repeat(3, 1fr); }
}

.arl-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow-light);
}

/* Número gigante translúcido de fondo */
.arl-card__num {
  position: absolute;
  top: -0.1em;
  right: 0.06em;
  font-size: 5.5rem;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.arl-card__icon,
.arl-card__title,
.arl-card__desc {
  position: relative;
  z-index: 1;
}

.arl-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 14%, var(--glass-bg));
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
              var(--glass-shadow-light);
  color: var(--color-primary);
}

[data-theme="dark"] .arl-card__icon {
  background: color-mix(in srgb, var(--color-secondary) 16%, var(--glass-bg));
  border-color: color-mix(in srgb, var(--color-secondary) 26%, transparent);
  color: var(--color-secondary);
}

.arl-card__title {
  font-size: var(--text-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

.arl-card__desc {
  color: var(--text-tertiary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Contraste — Cumplir vs Prevenir (dos estados sobre fondo oscuro)
   -------------------------------------------------------------------------- */
.arl-contrast {
  position: relative;
  overflow: hidden;
}

.arl-contrast__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 76% 56%, color-mix(in srgb, var(--color-secondary) 18%, transparent) 0%, transparent 64%);
}

.arl-contrast__headline {
  margin-top: var(--space-4);
}

.arl-contrast__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 920px;
  margin: var(--space-16) auto 0;
}

@media (min-width: 768px) {
  .arl-contrast__grid {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-12);
  }
}

.arl-contrast__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .arl-contrast__side--min {
    text-align: right;
    align-items: flex-end;
  }
}

/* Estado mínimo — apagado, lo justo legal */
.arl-contrast__side--min .arl-contrast__label { color: color-mix(in srgb, #fff 55%, transparent); }
.arl-contrast__side--min .arl-contrast__text  { color: color-mix(in srgb, #fff 42%, transparent); }

/* Estado GO — vivo, anclado en la marca */
.arl-contrast__side--go .arl-contrast__label { color: #fff; }
.arl-contrast__side--go .arl-contrast__text  { color: color-mix(in srgb, #fff 80%, transparent); }

/* Lado GO: logomark de marca como marca de agua luminosa detrás del texto */
.arl-contrast__side--go {
  position: relative;
}

/* Halo de marca que hace brillar la zona — monocromático cyan, suave */
.arl-contrast__side--go::before {
  content: "";
  position: absolute;
  inset: -55% -28%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--color-secondary) 15%, transparent) 0%,
    transparent 68%);
}

.arl-contrast__side--go .arl-contrast__label,
.arl-contrast__side--go .arl-contrast__text {
  position: relative;
  z-index: 1;
}

.arl-contrast__watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.arl-contrast__logo {
  width: clamp(9rem, 22vw, 13rem);
  height: auto;
  --logo-wing: var(--color-primary);
  --logo-tie: var(--color-secondary);
  opacity: 0.28;
  filter: drop-shadow(0 0 36px color-mix(in srgb, var(--color-secondary) 42%, transparent));
}

.arl-contrast__label {
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

.arl-contrast__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.arl-contrast__divider {
  display: none;
}

@media (min-width: 768px) {
  .arl-contrast__divider {
    display: block;
    width: 1px;
    height: 96px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-secondary) 55%, transparent), transparent);
  }
}

/* --------------------------------------------------------------------------
   Tecnología propia — 2 cards con icono fill
   -------------------------------------------------------------------------- */
.arl-tech__title {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

.arl-tech__lead {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--text-tertiary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Showcase de productos — logos reales con glow, alternados (sin tarjetas) */
.arl-tech__showcase {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: 940px;
  margin: var(--space-16) auto 0;
}

.arl-product {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .arl-product {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
  .arl-product--reverse .arl-product__visual { order: 2; }
}

.arl-product__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow-light);
  overflow: hidden;
}

/* Glow por marca del producto: Dynbel azul, Glymdo naranja */
.arl-product--dynbel { --product-glow: #22d3ee; }
.arl-product--glymdo { --product-glow: #ff6b2b; }

.arl-product__glow {
  position: absolute;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--product-glow, var(--color-primary)) 32%, transparent) 0%, transparent 70%);
  filter: blur(44px);
  pointer-events: none;
}

.arl-product__logo {
  position: relative;
  width: auto;
  max-width: 100%;
  max-height: 5.5rem;
}

.arl-product__tag {
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

/* Palabra clave del tagline en el gradiente de cada producto */
.arl-product--dynbel .arl-product__tag .text-gradient {
  background-image: linear-gradient(135deg, #1e7bff, #22d3ee);
}

.arl-product--glymdo .arl-product__tag .text-gradient {
  background-image: linear-gradient(135deg, #ff6b2b, #ffb800);
}

.arl-product__desc {
  margin-top: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Alianzas — ARLs en glass sutil
   -------------------------------------------------------------------------- */
.arl-partners__title {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

.arl-partners__subtitle {
  max-width: 44ch;
  margin: var(--space-3) auto 0;
  color: var(--text-tertiary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.arl-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  max-width: 760px;
  margin: var(--space-12) auto 0;
}

@media (min-width: 768px) {
  .arl-partners__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Liquid Glass claro: vidrio esmerilado blanco para que los logos a color de las ARL lean en light y dark */
.arl-partners__card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  padding: var(--space-6) var(--space-5);
  background: color-mix(in srgb, #fff 85%, transparent);
  border: 1px solid color-mix(in srgb, #fff 50%, transparent);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-soft)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
              var(--glass-shadow-light);
}

.arl-partners__logo {
  width: 100%;
  max-width: 140px;
  max-height: 60px;
  height: auto;
  object-fit: contain;
}