/* ==========================================================================
   GO Asesores — Página Empresas
   Storytelling: hero → soluciones (bento) → método → CTA
   Lenguaje visual basado en PRL "líneas": label editorial, bento de cards
   ricas con checklist, CTA estilo Apple. Sin dividers ni separadores.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.emp-hero__title {
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .emp-hero__title { font-size: var(--text-hero); }
}

.emp-hero__actions {
  justify-content: center;
  margin-top: var(--space-8);
}

/* Frase cinética — palabra que rota previsualizando los frentes */
.emp-hero__rotator {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.4ch;
  margin-top: var(--space-12);
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 1024px) {
  .emp-hero__rotator { font-size: var(--text-3xl); }
}

.emp-hero__rotator-slot {
  display: inline-grid;
  text-align: left;
}

.emp-hero__rotator-word {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.35em);
}

.emp-hero__rotator-word.is-active {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Soluciones — header centrado + bento de cards
   -------------------------------------------------------------------------- */
.emp-solutions__header {
  max-width: 60ch;
  margin: 0 auto var(--space-12);
  text-align: center;
}

.emp-solutions__title {
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.emp-solutions__desc {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Recorrido conectado — hilo conductor SVG (reusa el patrón de Esencia)
   -------------------------------------------------------------------------- */
.emp-flow {
  position: relative;
  isolation: isolate;
}

.emp-flow__line {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .emp-flow__path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}

@media (min-width: 1024px) {
  .emp-flow__line {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 1320px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
  }

  /* Sin z-index propio: la sección no debe crear contexto, solo aporta su fondo bajo la línea */
  .emp-flow > .section {
    position: relative;
  }

  .emp-flow > .section .container {
    position: relative;
    z-index: 2;
  }
}

/* --------------------------------------------------------------------------
   Frentes — encadenados en zig-zag sobre fondo continuo (sin bandas)
   -------------------------------------------------------------------------- */
.emp-frentes {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  margin-top: var(--space-16);
}

@media (min-width: 1024px) {
  .emp-frentes { gap: var(--space-24); }
}

.emp-frente {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1024px) {
  .emp-frente {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  .emp-frente--alt .emp-frente__content { order: 2; }
}

.emp-frente__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Número alineado al título (mismo borde izquierdo, justo encima) */
.emp-frente__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.emp-frente__num {
  width: max-content;
  font-size: var(--text-4xl);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: -0.03em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
}

.emp-frente__name {
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

.emp-frente__desc {
  max-width: 48ch;
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Seguros — 2 columnas balanceadas, nombre en gradiente, sin viñetas */
.emp-frente__seguros {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5) var(--space-8);
}

@media (min-width: 540px) {
  .emp-frente__seguros {
    grid-template-columns: repeat(2, 1fr);
  }
}

.emp-frente__seguro {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.emp-frente__seguro-name {
  width: max-content;
  max-width: 100%;
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.emp-frente__seguro-desc {
  max-width: 46ch;
  margin-top: var(--space-1);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* Imagen del frente */
.emp-frente__media { width: 100%; }

.emp-frente__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

/* CTA — botón primario + secundario glass, centrados */
.emp-solutions__cta {
  justify-content: center;
  margin-top: var(--space-16);
}

.emp-solutions__cta .btn svg { vertical-align: middle; }

/* --------------------------------------------------------------------------
   Nuestro diferencial — paso a paso vertical (basado en about-manifesto de PRL)
   -------------------------------------------------------------------------- */
.emp-steps__title {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--text-4xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

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

.emp-steps .section__header {
  margin-bottom: var(--space-12);
}

.emp-steps__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.emp-steps__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: center;
}

.emp-steps__number-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.emp-steps__number {
  font-size: var(--text-5xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 2px 0 color-mix(in srgb, var(--color-primary) 38%, transparent))
    drop-shadow(0 4px 0 color-mix(in srgb, var(--color-primary) 18%, transparent))
    drop-shadow(0 8px 16px color-mix(in srgb, var(--color-primary) 22%, transparent))
    drop-shadow(0 16px 32px color-mix(in srgb, var(--color-primary) 10%, transparent));
  user-select: none;
}

[data-theme="dark"] .emp-steps__number {
  filter:
    drop-shadow(0 2px 0 color-mix(in srgb, var(--color-secondary) 38%, transparent))
    drop-shadow(0 4px 0 color-mix(in srgb, var(--color-secondary) 18%, transparent))
    drop-shadow(0 8px 16px color-mix(in srgb, var(--color-secondary) 26%, transparent))
    drop-shadow(0 16px 32px color-mix(in srgb, var(--color-secondary) 12%, transparent));
}

.emp-steps__body {
  text-align: center;
}

.emp-steps__heading {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.emp-steps__text {
  max-width: 480px;
  margin-inline: auto;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.emp-steps__divider {
  border: none;
  height: 1px;
  margin: 0;
  background: linear-gradient(90deg, transparent 0%, var(--border-default) 30%, var(--border-default) 70%, transparent 100%);
}

@media (min-width: 1024px) {
  .emp-steps__list {
    gap: var(--space-10);
  }

  .emp-steps__item {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  /* 2do enunciado (hijo 3 contando divisores): el número salta a la derecha */
  .emp-steps__list > :nth-child(3) .emp-steps__number-wrap { order: 2; }

  .emp-steps__number {
    font-size: var(--text-hero-xl);
  }

  .emp-steps__body {
    text-align: left;
  }

  .emp-steps__heading {
    font-size: var(--text-3xl);
  }

  .emp-steps__text {
    max-width: none;
    margin-inline: 0;
    font-size: var(--text-lg);
    text-align: justify;
    text-justify: inter-word;
  }

  .emp-steps__divider {
    margin-block: var(--space-4);
  }
}