/* ============================================================
   landing.css — Estilos de la landing de Enchulate Dropshipping
   Los colores críticos ya están embebidos en include/head.php
   Este archivo agrega gradientes, efectos y componentes extra
   ============================================================ */

:root {
  --enchulate-dark:  #701E3A;
  --enchulate-pink:  #eb1c74;
  --enchulate-light: #f4e8ee;
  --font-base: 'Inter', sans-serif;
}

body {
  font-family: var(--font-base);
  color: #1a1a2e;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.bg-enchulate        { background-color: var(--enchulate-dark) !important; }
.text-enchulate-pink { color: var(--enchulate-pink) !important; }
.btn-enchulate-pink  {
  background-color: var(--enchulate-pink);
  border-color:     var(--enchulate-pink);
  color: #fff;
  border-radius: 50px;
}
.btn-enchulate-pink:hover {
  background-color: #c41562;
  border-color:     #c41562;
  color: #fff;
}
.bg-enchulate-pink { background-color: var(--enchulate-pink) !important; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero-section {
  /* Fallback sólido primero; el gradiente lo sobrescribe */
  background: #701E3A;
  background: linear-gradient(135deg, var(--enchulate-dark) 0%, #4a1228 60%, #1a0714 100%);
  min-height: 90vh;
  display: flex;
  align-items: center;
}

/* ── Paso a paso ────────────────────────────────────────────── */
.step-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--enchulate-light);
  color: var(--enchulate-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto 1rem;
}

/* ── Cards de precios ───────────────────────────────────────── */
.pricing-card {
  border: 2px solid #e9ecef;
  border-radius: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.pricing-card:hover,
.pricing-card.featured {
  border-color: var(--enchulate-pink);
  box-shadow: 0 8px 32px rgba(235,28,116,.15);
}
.pricing-card.featured { position: relative; }

/* ── Utils ──────────────────────────────────────────────────── */
.rounded-lg  { border-radius: 16px !important; }
.shadow-soft { box-shadow: 0 4px 24px rgba(0,0,0,.08) !important; }
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }