/*
 * ============================================================================
 * Studium360 · Página pública Enterprise
 * ============================================================================
 *
 * Archivo:
 * public/themes/modern-white/assets/css/pages/enterprise.css
 *
 * Namespace:
 *   ep-*
 *
 * Dirección visual:
 *
 * - extensión natural de modern-white;
 * - sin hero visual;
 * - sin superficies oscuras;
 * - sin contrastes agresivos;
 * - presentación institucional y tranquila;
 * - jerarquía mediante espacio, tipografía y bordes;
 * - diferenciada de landing.php sin competir con ella;
 * - utiliza exclusivamente tokens globales.
 *
 * Fuente visual:
 *
 * public/themes/modern-white/assets/css/tokens.css
 *
 * No redefine componentes globales:
 *
 *   .btn
 *   .card
 *   .cp-*
 *   .lp-*
 *
 * ============================================================================
 */


/*
 * ============================================================================
 * PAGE
 * ============================================================================
 */

.ep-page {
  display: flex;
  flex-direction: column;

  gap: 0;

  padding:
    0
    0
    var(--space-7);
}


/*
 * ============================================================================
 * COMMON
 * ============================================================================
 */

.ep-kicker {
  margin: 0;

  font-size:
    var(--text-sm);

  font-weight: 700;

  line-height:
    var(--line-base);

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  color:
    var(--muted);
}


.ep-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap:
    var(--space-2);

  margin-top:
    var(--space-4);
}


.ep-actions .btn,
.ep-cta__actions .btn {
  display: inline-flex;
  align-items: center;

  gap:
    var(--space-1);
}


/*
 * ============================================================================
 * INTRODUCCIÓN
 * ============================================================================
 *
 * Aunque el markup conserva temporalmente ep-hero por compatibilidad,
 * visualmente ya NO se trata como un hero.
 *
 * Es simplemente el bloque introductorio de la página.
 * ============================================================================
 */

.ep-hero {
  position: static;

  margin: 0;

  padding:
    var(--space-4)
    0
    var(--space-6);

  overflow: visible;

  background:
    transparent;
}


.ep-hero::before,
.ep-hero::after {
  display: none;
}


.ep-hero__content {
  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(18rem, 0.65fr);

  gap:
    var(--space-6);

  align-items:
    start;
}


.ep-hero__copy {
  min-width: 0;

  padding:
    var(--space-2)
    0;
}


.ep-hero .ep-kicker {
  color:
    var(--muted);
}


.ep-hero__title {
  max-width: 20ch;

  margin:
    var(--space-2)
    0
    var(--space-3);

  font-size:
    var(--text-3xl);

  font-weight: 800;

  line-height:
    1.08;

  letter-spacing:
    -0.03em;

  color:
    var(--text);
}


.ep-hero__lead {
  max-width: 60ch;

  margin: 0;

  font-size:
    var(--text-lg);

  line-height:
    1.7;

  color:
    var(--text);
}


.ep-hero__support {
  max-width: 64ch;

  margin:
    var(--space-3)
    0
    0;

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * INTRO ACTIONS
 * ============================================================================
 */

.ep-hero .ep-actions .btn:not(.btn-primary) {
  color: inherit;
}


/*
 * ============================================================================
 * INTRO TRUST POINTS
 * ============================================================================
 */

.ep-hero__trust {
  display: flex;
  flex-wrap: wrap;

  gap:
    var(--space-2)
    var(--space-4);

  max-width:
    52rem;

  margin-top:
    var(--space-4);

  padding-top:
    var(--space-3);

  border-top:
    1px solid
    var(--border);
}


.ep-hero__trust span {
  display: inline-flex;
  align-items: center;

  gap:
    var(--space-1);

  font-size:
    var(--text-sm);

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


.ep-hero__trust svg {
  flex:
    0
    0
    auto;

  color:
    var(--tone-success-text);
}


/*
 * ============================================================================
 * INTRO SUMMARY
 * ============================================================================
 *
 * Panel de síntesis.
 *
 * Sin degradado, sin banda de color, sin sombra prominente.
 * ============================================================================
 */

.ep-hero__summary {
  min-width: 0;

  padding:
    var(--space-4);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface-2);
}


.ep-hero__summary::before,
.ep-hero__summary::after {
  display: none;
}


.ep-hero__summary-icon {
  display: grid;
  place-items: center;

  width:
    2.75rem;

  height:
    2.75rem;

  margin-bottom:
    var(--space-3);

  border-radius:
    var(--radius-sm);

  color:
    var(--primary);

  background:
    var(--tone-info-bg);
}


.ep-hero__summary > h2 {
  margin:
    var(--space-1)
    0
    var(--space-3);

  font-size:
    var(--text-xl);

  line-height:
    var(--line-tight);

  color:
    var(--text);
}


.ep-hero__summary-list {
  display: grid;

  gap: 0;

  border-top:
    1px solid
    var(--border);
}


.ep-summary-item {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    var(--space-2);

  align-items:
    flex-start;

  padding:
    var(--space-3)
    0;

  border-bottom:
    1px solid
    var(--border);
}


.ep-summary-item:last-child {
  border-bottom: 0;

  padding-bottom: 0;
}


.ep-summary-item__icon {
  display: grid;
  place-items: center;

  width:
    2.25rem;

  height:
    2.25rem;

  flex:
    0
    0
    auto;

  border-radius:
    var(--radius-sm);

  color:
    var(--primary);

  background:
    var(--surface);
}


.ep-summary-item strong {
  display: block;

  margin-bottom:
    var(--space-1);

  color:
    var(--text);
}


.ep-summary-item div > span {
  display: block;

  font-size:
    var(--text-sm);

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * GENERIC SECTION
 * ============================================================================
 */

.ep-section {
  padding:
    var(--space-6)
    0;
}


.ep-section__head {
  max-width:
    52rem;

  margin-bottom:
    var(--space-4);
}


.ep-section__head h2 {
  max-width:
    26ch;

  margin:
    var(--space-1)
    0
    var(--space-2);

  font-size:
    var(--text-2xl);

  line-height:
    var(--line-tight);

  letter-spacing:
    -0.02em;

  color:
    var(--text);
}


.ep-section__head > p:last-child {
  max-width:
    65ch;

  margin: 0;

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * VALUE GRID
 * ============================================================================
 *
 * Diferente de landing:
 *
 * - menos apariencia de card individual;
 * - agrupación visual común;
 * - separadores discretos;
 * - superficie neutra.
 * ============================================================================
 */

.ep-value-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface);
}


.ep-value-card {
  min-width: 0;

  padding:
    var(--space-4);

  border: 0;

  border-right:
    1px solid
    var(--border);

  background:
    transparent;
}


.ep-value-card:last-child {
  border-right: 0;
}


.ep-value-card__icon {
  display: grid;
  place-items: center;

  width:
    2.5rem;

  height:
    2.5rem;

  margin-bottom:
    var(--space-3);

  border-radius:
    var(--radius-sm);

  color:
    var(--primary);

  background:
    var(--tone-info-bg);
}


.ep-value-card h3 {
  margin:
    0
    0
    var(--space-2);

  font-size:
    var(--text-lg);

  line-height:
    var(--line-tight);

  color:
    var(--text);
}


.ep-value-card p {
  margin: 0;

  font-size:
    var(--text-sm);

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * JOURNEY
 * ============================================================================
 *
 * Flujo de contratación / implementación.
 *
 * No se presenta como una gran franja promocional.
 * ============================================================================
 */

.ep-journey {
  margin: 0;

  padding:
    var(--space-6)
    0;

  border-top:
    1px solid
    var(--border);

  border-bottom:
    1px solid
    var(--border);

  background:
    transparent;
}


.ep-journey__intro {
  max-width:
    52rem;

  margin-bottom:
    var(--space-5);
}


.ep-journey__intro h2 {
  max-width:
    27ch;

  margin:
    var(--space-1)
    0
    var(--space-2);

  font-size:
    var(--text-2xl);

  line-height:
    var(--line-tight);

  letter-spacing:
    -0.02em;

  color:
    var(--text);
}


.ep-journey__intro > p:last-child {
  max-width:
    64ch;

  margin: 0;

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * JOURNEY STEPS
 * ============================================================================
 */

.ep-journey__steps {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    var(--space-3);

  margin: 0;

  padding: 0;

  list-style: none;
}


.ep-journey-step {
  min-width: 0;

  padding:
    var(--space-3)
    0;

  border-top:
    2px solid
    var(--border-2);
}


.ep-journey-step__number {
  display: grid;
  place-items: center;

  width:
    2rem;

  height:
    2rem;

  margin-bottom:
    var(--space-3);

  border-radius:
    50%;

  font-size:
    var(--text-sm);

  font-weight:
    700;

  color:
    var(--primary);

  background:
    var(--tone-info-bg);
}


.ep-journey-step__icon {
  display: none;
}


.ep-journey-step h3 {
  margin:
    0
    0
    var(--space-1);

  font-size:
    var(--text-base);

  line-height:
    var(--line-tight);

  color:
    var(--text);
}


.ep-journey-step p {
  margin: 0;

  font-size:
    var(--text-sm);

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * MANAGEMENT
 * ============================================================================
 */

.ep-management {
  display: grid;

  grid-template-columns:
    minmax(0, 1.3fr)
    minmax(18rem, 0.7fr);

  gap:
    var(--space-4);

  margin:
    var(--space-6)
    0;
}


.ep-management__main,
.ep-management__aside {
  min-width: 0;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);
}


.ep-management__main {
  padding:
    var(--space-5);

  background:
    var(--surface);
}


.ep-management__main > h2 {
  max-width:
    25ch;

  margin:
    var(--space-1)
    0
    var(--space-3);

  font-size:
    var(--text-2xl);

  line-height:
    var(--line-tight);

  letter-spacing:
    -0.02em;

  color:
    var(--text);
}


.ep-management__lead {
  max-width:
    64ch;

  margin: 0;

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * MANAGEMENT ITEMS
 * ============================================================================
 */

.ep-management__items {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    var(--space-3);

  margin-top:
    var(--space-5);
}


.ep-management-item {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    var(--space-2);

  align-items:
    flex-start;

  min-width: 0;
}


.ep-management-item > span {
  display: grid;
  place-items: center;

  width:
    2.25rem;

  height:
    2.25rem;

  flex:
    0
    0
    auto;

  border-radius:
    var(--radius-sm);

  color:
    var(--primary);

  background:
    var(--tone-info-bg);
}


.ep-management-item strong {
  display: block;

  margin-bottom:
    var(--space-1);

  color:
    var(--text);
}


.ep-management-item p {
  margin: 0;

  font-size:
    var(--text-sm);

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * MANAGEMENT ASIDE
 * ============================================================================
 *
 * Mismo sistema visual.
 * Sin panel oscuro.
 * ============================================================================
 */

.ep-management__aside {
  padding:
    var(--space-5);

  background:
    var(--surface-2);
}


.ep-management__aside .ep-kicker {
  color:
    var(--muted);
}


.ep-management__aside-icon {
  display: grid;
  place-items: center;

  width:
    2.75rem;

  height:
    2.75rem;

  margin-bottom:
    var(--space-3);

  border-radius:
    var(--radius-sm);

  color:
    var(--primary);

  background:
    var(--tone-info-bg);
}


.ep-management__aside h3 {
  margin:
    var(--space-1)
    0
    var(--space-3);

  font-size:
    var(--text-xl);

  line-height:
    var(--line-tight);

  color:
    var(--text);
}


.ep-management__aside > p:last-of-type {
  margin:
    0
    0
    var(--space-4);

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


.ep-management__aside ul {
  display: grid;

  gap: 0;

  margin: 0;
  padding: 0;

  list-style: none;

  border-top:
    1px solid
    var(--border);
}


.ep-management__aside li {
  position: relative;

  padding:
    var(--space-2)
    0
    var(--space-2)
    var(--space-3);

  border-bottom:
    1px solid
    var(--border);

  line-height:
    var(--line-base);

  color:
    var(--text);
}


.ep-management__aside li::before {
  content: "";

  position: absolute;

  top:
    calc(
      var(--space-2)
      + 0.55rem
    );

  left: 0;

  width:
    0.375rem;

  height:
    0.375rem;

  border-radius:
    50%;

  background:
    var(--primary);
}


/*
 * ============================================================================
 * FIT
 * ============================================================================
 */

.ep-fit {
  padding:
    var(--space-5)
    0
    var(--space-6);
}


.ep-fit__grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface);
}


.ep-fit__grid article {
  min-width: 0;

  padding:
    var(--space-4);

  border-right:
    1px solid
    var(--border);

  background:
    transparent;
}


.ep-fit__grid article:last-child {
  border-right: 0;
}


.ep-fit__grid article > span {
  display: grid;
  place-items: center;

  width:
    2.5rem;

  height:
    2.5rem;

  margin-bottom:
    var(--space-3);

  border-radius:
    var(--radius-sm);

  color:
    var(--primary);

  background:
    var(--tone-info-bg);
}


.ep-fit__grid h3 {
  margin:
    0
    0
    var(--space-2);

  font-size:
    var(--text-lg);

  line-height:
    var(--line-tight);

  color:
    var(--text);
}


.ep-fit__grid p {
  margin: 0;

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * SERVICE NOTE
 * ============================================================================
 *
 * Información contractual secundaria.
 * ============================================================================
 */

.ep-service-note {
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    var(--space-3);

  align-items:
    flex-start;

  margin-bottom:
    var(--space-6);

  padding:
    var(--space-3);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-md);

  background:
    var(--surface-2);
}


.ep-service-note__icon {
  display: grid;
  place-items: center;

  width:
    2.25rem;

  height:
    2.25rem;

  flex:
    0
    0
    auto;

  border-radius:
    var(--radius-sm);

  color:
    var(--muted);

  background:
    var(--surface);
}


.ep-service-note h2 {
  margin:
    0
    0
    var(--space-1);

  font-size:
    var(--text-base);

  color:
    var(--text);
}


.ep-service-note p {
  max-width:
    80ch;

  margin: 0;

  font-size:
    var(--text-sm);

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


/*
 * ============================================================================
 * FINAL CTA
 * ============================================================================
 *
 * Tampoco es un segundo hero.
 *
 * Simple cierre de conversión dentro del sistema modern-white.
 * ============================================================================
 */

.ep-cta {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap:
    var(--space-5);

  align-items:
    center;

  padding:
    var(--space-5);

  border:
    1px solid
    var(--tone-info-border);

  border-radius:
    var(--radius-md);

  background:
    var(--tone-info-bg);
}


.ep-cta__content {
  max-width:
    48rem;
}


.ep-cta .ep-kicker {
  color:
    var(--muted);
}


.ep-cta__content h2 {
  max-width:
    25ch;

  margin:
    var(--space-1)
    0
    var(--space-2);

  font-size:
    var(--text-2xl);

  line-height:
    var(--line-tight);

  letter-spacing:
    -0.02em;

  color:
    var(--text);
}


.ep-cta__content > p:last-child {
  max-width:
    64ch;

  margin: 0;

  line-height:
    var(--line-base);

  color:
    var(--muted);
}


.ep-cta__actions {
  display: flex;
  flex-direction: column;

  align-items:
    stretch;

  gap:
    var(--space-2);
}


.ep-cta__actions .btn {
  justify-content:
    center;

  white-space:
    nowrap;
}


.ep-cta__back {
  display: inline-flex;
  justify-content: center;

  padding-top:
    var(--space-1);

  font-size:
    var(--text-sm);

  font-weight:
    600;

  text-decoration:
    none;

  color:
    var(--muted);
}


.ep-cta__back:hover {
  color:
    var(--primary);
}


/*
 * ============================================================================
 * MEDIUM DESKTOP
 * ============================================================================
 */

@media (max-width: 1050px) {

  .ep-value-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .ep-value-card:nth-child(2) {
    border-right: 0;
  }


  .ep-value-card:nth-child(-n + 2) {
    border-bottom:
      1px solid
      var(--border);
  }


  .ep-journey__steps {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}


/*
 * ============================================================================
 * TABLET
 * ============================================================================
 */

@media (max-width: 900px) {

  .ep-hero {
    padding-top:
      var(--space-3);
  }


  .ep-hero__content,
  .ep-management {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .ep-hero__title {
    max-width:
      24ch;

    font-size:
      var(--text-2xl);
  }


  .ep-hero__lead {
    font-size:
      var(--text-base);
  }


  .ep-management__items {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .ep-fit__grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .ep-fit__grid article {
    border-right: 0;

    border-bottom:
      1px solid
      var(--border);
  }


  .ep-fit__grid article:last-child {
    border-bottom: 0;
  }


  .ep-cta {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .ep-cta__actions {
    flex-direction:
      row;

    flex-wrap:
      wrap;
  }

}


/*
 * ============================================================================
 * MOBILE
 * ============================================================================
 */

@media (max-width: 640px) {

  .ep-page {
    padding-bottom:
      var(--space-6);
  }


  .ep-hero {
    padding:
      var(--space-2)
      0
      var(--space-5);
  }


  .ep-hero__title {
    margin-top:
      var(--space-1);

    font-size:
      var(--text-2xl);
  }


  .ep-actions {
    align-items:
      stretch;
  }


  .ep-actions .btn {
    width: 100%;

    justify-content:
      center;
  }


  .ep-hero__summary {
    padding:
      var(--space-3);
  }


  .ep-section {
    padding:
      var(--space-5)
      0;
  }


  .ep-value-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .ep-value-card,
  .ep-value-card:nth-child(2) {
    border-right: 0;

    border-bottom:
      1px solid
      var(--border);
  }


  .ep-value-card:last-child {
    border-bottom: 0;
  }


  .ep-journey {
    padding:
      var(--space-5)
      0;
  }


  .ep-journey__steps {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      var(--space-2);
  }


  .ep-journey-step {
    display: grid;

    grid-template-columns:
      auto
      minmax(0, 1fr);

    column-gap:
      var(--space-3);
  }


  .ep-journey-step__number {
    grid-row:
      1
      / span 2;

    margin-bottom: 0;
  }


  .ep-management {
    margin:
      var(--space-5)
      0;
  }


  .ep-management__main,
  .ep-management__aside {
    padding:
      var(--space-4);
  }


  .ep-fit {
    padding:
      var(--space-4)
      0
      var(--space-5);
  }


  .ep-service-note {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .ep-cta {
    padding:
      var(--space-4);
  }


  .ep-cta__actions {
    flex-direction:
      column;
  }


  .ep-cta__actions .btn {
    width: 100%;
  }

}