/* ==========================================================
   MAIN.CSS — Punto de entrada que importa todos los estilos
   Orden: variables → reset → componentes → secciones → utils
   ========================================================== */

/* 1. Base */
@import url('./base/variables.css');
@import url('./base/reset.css');

/* 2. Componentes reutilizables */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/navbar.css');
@import url('./components/footer.css');
@import url('./components/color-customizer.css');
@import url('./components/phone-carousel.css');

/* 3. Secciones específicas */
@import url('./sections/hero.css');
@import url('./sections/content.css');
@import url('./sections/features.css');
@import url('./sections/social.css');

/* 4. Utilidades */
@import url('./utilities/animations.css');
@import url('./utilities/responsive.css');

/* ==========================================================
   PÁGINA DE POLÍTICAS - Estilos para la vista independiente
   ========================================================== */
.policy-body {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%);
}

.policy-page {
  padding-top: calc(var(--navbar-height) + 50px);
  padding-bottom: 80px;
}

.policy-hero {
  padding: 24px 0 12px;
}

.policy-hero .section-title {
  margin-bottom: 12px;
}

.policy-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 3vw, 40px);
}

.policy-section {
  margin-top: 28px;
}

.policy-section h2 {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.policy-section p,
.policy-section li {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.8;
}

.policy-section ul {
  list-style: disc;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.policy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.policy-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  border: 1px solid rgba(252, 52, 65, 0.2);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .policy-page {
    padding-top: calc(var(--navbar-height) + 30px);
  }

  .policy-card {
    padding: 20px 18px;
  }
}