/* ============================================================
   LANDING — Tu Cajita
   Estilos compartidos para páginas especiales:
   suscripcion, mystery-scoop, personaliza, diy-lab.
   ============================================================ */

/* Franja superior rosa */
.landing-header {
  background: linear-gradient(135deg, #F5ADCA 0%, #F07DAA 55%, #E0609A 100%);
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}

.landing-header-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-3xl);
  color: var(--color-white);
  letter-spacing: 0.04em;
}

/* Cuerpo de contenido */
.landing-body {
  padding: var(--space-16) 0 var(--space-6);
}

.landing-content {
  max-width: 680px;
  margin: 0 auto;
}

/* Lista con viñetas de acento */
.landing-content-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.landing-content-list li {
  padding-left: var(--space-6);
  position: relative;
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: var(--color-text);
}

.landing-content-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 0.65rem;
  top: 0.45em;
}

/* Nota centrada en cursiva */
.landing-center-note {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-style: italic;
  margin-top: var(--space-4);
}

/* Contenedor del CTA */
.landing-cta {
  text-align: center;
  margin-top: var(--space-10);
}

/* Titular en mayúsculas destacado */
.landing-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

/* Subtítulo de sección (ej: ¿Cómo funciona?) */
.landing-subtitle {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
}

/* Pasos numerados */
.landing-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-6);
}

.landing-step {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.landing-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}

.landing-step-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  color: var(--color-text);
  padding-top: 4px;
}

/* Nota al pie de sección */
.landing-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: var(--line-height-loose);
  margin-top: var(--space-4);
}

/* Sección de tarjeta de producto única */
.landing-product-section {
  padding: var(--space-4) 0 var(--space-20);
}

.landing-product-wrapper {
  max-width: 320px;
  margin: 0 auto;
}

/* Bloque de contacto (diy-lab) */
.landing-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
  justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
  .landing-header {
    padding: var(--space-10) 0 var(--space-8);
  }

  .landing-header-title {
    font-size: var(--font-size-2xl);
  }

  .landing-body {
    padding: var(--space-10) 0 var(--space-4);
  }
}