/* ══════════════════════════════════════
   FERRANOVA — Estilos Globales
   Utilidades + layout + tipografía base
   ══════════════════════════════════════ */

/* ── Container ── */
.fn-container {
  width: 100%;
  max-width: var(--fn-container-xl);
  margin: 0 auto;
  padding-left: var(--fn-seccion-px);
  padding-right: var(--fn-seccion-px);
}

.fn-container--wide {
  max-width: var(--fn-container-2xl);
}

.fn-container--narrow {
  max-width: var(--fn-container-md);
}

/* ── Secciones ── */
.fn-seccion {
  padding-top: var(--fn-seccion-py);
  padding-bottom: var(--fn-seccion-py);
}

.fn-seccion--alt {
  background-color: var(--fn-fondo-alt);
}

.fn-seccion--oscura {
  background-color: var(--fn-gris-800);
  color: var(--fn-texto-sobre-oscuro);
}

.fn-seccion--oscura h2,
.fn-seccion--oscura h3,
.fn-seccion--oscura h4 {
  color: var(--fn-blanco);
}

.fn-seccion--oscura p {
  color: var(--fn-gris-300);
}

.fn-seccion--primaria {
  background: linear-gradient(135deg, var(--fn-primario) 0%, var(--fn-primario-hover) 100%);
  color: var(--fn-texto-sobre-primario);
}

/* ── Títulos de Sección ── */
.fn-titulo-seccion {
  font-family: var(--fn-fuente-titulo);
  font-size: var(--fn-fs-2xl);
  font-weight: var(--fn-fw-extrabold);
  color: var(--fn-gris-800);
  margin-bottom: var(--fn-sp-md);
  letter-spacing: var(--fn-ls-tight);
}

.fn-titulo-seccion--center {
  text-align: center;
}

.fn-subtitulo-seccion {
  font-size: var(--fn-fs-md);
  color: var(--fn-texto-suave);
  max-width: 600px;
  line-height: var(--fn-lh-relaxed);
}

.fn-subtitulo-seccion--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.fn-titulo-seccion .fn-acento {
  color: var(--fn-primario);
}

.fn-linea-decorativa {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--fn-secundario), var(--fn-primario));
  border-radius: var(--fn-radio-full);
  margin-bottom: var(--fn-sp-lg);
}

.fn-linea-decorativa--center {
  margin-left: auto;
  margin-right: auto;
}

/* ── Grids ── */
.fn-grid {
  display: grid;
  gap: var(--fn-sp-lg);
}

.fn-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fn-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .fn-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fn-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .fn-grid--4,
  .fn-grid--3,
  .fn-grid--2 { grid-template-columns: 1fr; }
}

/* ── Flexbox Helpers ── */
.fn-flex {
  display: flex;
}

.fn-flex--center {
  align-items: center;
  justify-content: center;
}

.fn-flex--between {
  align-items: center;
  justify-content: space-between;
}

.fn-flex--col {
  flex-direction: column;
}

.fn-flex--wrap {
  flex-wrap: wrap;
}

.fn-gap-sm  { gap: var(--fn-sp-sm); }
.fn-gap-md  { gap: var(--fn-sp-md); }
.fn-gap-lg  { gap: var(--fn-sp-lg); }
.fn-gap-xl  { gap: var(--fn-sp-xl); }

/* ── Texto ── */
.fn-text-center   { text-align: center; }
.fn-text-primario { color: var(--fn-primario); }
.fn-text-muted    { color: var(--fn-texto-muted); }
.fn-text-sm       { font-size: var(--fn-fs-sm); }

/* ── Animaciones Base ── */
@keyframes fn-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fn-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fn-slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.fn-animate-fadeInUp {
  animation: fn-fadeInUp 0.6s ease forwards;
}

.fn-animate-fadeIn {
  animation: fn-fadeIn 0.5s ease forwards;
}

/* ── Badges ── */
.fn-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--fn-sp-2xs) var(--fn-sp-xs);
  border-radius: var(--fn-radio-full);
  font-size: var(--fn-fs-xs);
  font-weight: var(--fn-fw-semibold);
  letter-spacing: var(--fn-ls-wide);
  text-transform: uppercase;
}

.fn-badge--primario {
  background: var(--fn-primario-ultra-light);
  color: var(--fn-primario);
}

.fn-badge--oferta {
  background: var(--fn-secundario);
  color: var(--fn-blanco);
}

.fn-badge--nuevo {
  background: var(--fn-exito);
  color: var(--fn-blanco);
}

/* ── Separadores ── */
.fn-separador {
  width: 100%;
  height: 1px;
  background: var(--fn-borde);
  border: none;
}

/* ── Precios ── */
.fn-precio {
  font-family: var(--fn-fuente-titulo);
  font-weight: var(--fn-fw-bold);
  color: var(--fn-gris-800);
}

.fn-precio--grande {
  font-size: var(--fn-fs-xl);
}

.fn-precio-tachado {
  text-decoration: line-through;
  color: var(--fn-texto-muted);
  font-weight: var(--fn-fw-regular);
  font-size: var(--fn-fs-sm);
}