/* ============================================================
   Landings de caso de uso
   ------------------------------------------------------------
   Paginas de primer nivel tipo /features/, una por caso de uso, que
   reutilizan casi todo lo que ya existe: .block-hero y .feature-grid de
   components-2.css, .section/.section__header y .compare-table y .steps de
   home-sections.css, .faq-list/.faq-item de home-sections-2.css y
   .block-final-cta del mismo.

   Aqui va SOLO lo que no existia: la fila de feature con captura al lado, la
   caja de precio y el bloque de enlaces a las paginas hermanas.

   Todo con tokens de tokens.css. Depende de: tokens, typography, buttons y
   home-sections (declarado en el enqueue de functions.php).
   ============================================================ */

/* ----- Fila de feature: texto + captura -----
   Alterna el lado de la imagen con :nth-child(even) en vez de con una clase
   modificadora, para que anadir una fila no obligue a recordar cual toca. */
.landing-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: center;
}

.landing-feature + .landing-feature {
  margin-top: var(--space-16);
}

.landing-feature:nth-child(even) .landing-feature__media {
  order: -1;
}

.landing-feature__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}

.landing-feature__body {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
}

.landing-feature__bullets {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.landing-feature__bullets li + li {
  margin-top: var(--space-2);
}

.landing-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}

/* ----- Caja de precio -----
   El precio va en la propia landing y no solo en /pricing/: es lo que hacen
   las paginas de este tipo que posicionan, y evita un salto de pagina entre
   "me convence" y "cuanto cuesta". La cifra sale de ar-planes; si cambia,
   cambia aqui tambien. */
.landing-price {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  background: var(--bg-secondary);
  text-align: center;
}

.landing-price__amount {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.1;
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
}

/* El "/ mes" no debe competir con la cifra: misma linea, tamano de cuerpo. */
.landing-price__per {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.landing-price__note {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
}

.landing-price__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.landing-price__list li + li {
  margin-top: var(--space-2);
}

.landing-price__small {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ----- Enlaces a paginas hermanas ----- */
.landing-links {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-6);
}

.landing-links__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}

.landing-links ul {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
}

.landing-links li + li {
  margin-top: var(--space-2);
}

/* ----- Responsive -----
   768px es el corte que ya usan components-2.css y home-sections.css para
   pasar las rejillas a una columna: se respeta para que la landing rompa a
   la vez que el resto de la pagina. */
@media (max-width: 768px) {
  .landing-feature {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* En una columna la captura va SIEMPRE despues del texto: alternarla
     dejaba filas que empiezan por una imagen sin contexto. */
  .landing-feature:nth-child(even) .landing-feature__media {
    order: 0;
  }

  .landing-price {
    padding: var(--space-6);
  }
}