/* ==========================================================================
   SALSAS CHILANGAS · TYPOGRAPHY
   --------------------------------------------------------------------------
   Clases reutilizables con prefijo sc- + selectores Elementor seguros.
   Aplica estas clases en el campo "CSS Classes" de cualquier widget/contenedor
   de Elementor (ej: añade "sc-h2" a un widget Heading).
   ========================================================================== */

/* Familia display compartida por display + headings */
.sc-display,
.sc-h1,
.sc-h2,
.sc-h3,
.sc-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.sc-display {
  font-size: clamp(2.6rem, 6vw, var(--fs-display));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-extra);
}
.sc-h1 {
  font-size: clamp(2.1rem, 4.6vw, var(--fs-h1));
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}
.sc-h2 {
  font-size: clamp(1.75rem, 3.4vw, var(--fs-h2));
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}
.sc-h3 {
  font-size: clamp(1.35rem, 2.2vw, var(--fs-h3));
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.sc-h4 {
  font-size: clamp(1.1rem, 1.6vw, var(--fs-h4));
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  font-weight: var(--fw-semibold);
}

/* Cuerpo de texto */
.sc-lead {
  font-size: clamp(1.1rem, 1.6vw, var(--fs-lead));
  line-height: var(--lh-lead);
  color: var(--text-secondary);
  font-weight: var(--fw-regular);
}
.sc-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.sc-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--text-muted);
}
.sc-label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
}

/* Kicker / eyebrow con glifo de chile (línea decorativa) */
.sc-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-size: var(--fs-kicker);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--green-600);
}
.sc-kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--red-500);
  border-radius: 2px;
}
.sc-kicker--red { color: var(--red-600); }
.sc-kicker--red::before { background: var(--green-500); }
.sc-kicker--inverse { color: var(--gold-soft); }
.sc-kicker--inverse::before { background: var(--red-400); }

/* Precio y nombre de producto */
.sc-price {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-price);
  color: var(--text-price);
  letter-spacing: -.01em;
}
.sc-price__old {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 1rem;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: .4em;
}
.sc-price__unit {
  font-size: .8125rem;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}
.sc-product-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--text-primary);
}

/* Enlaces de navegación */
.sc-nav-link {
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: color var(--t-fast);
}
.sc-nav-link:hover { color: var(--green-600); }

/* Ritmo vertical entre párrafos consecutivos dentro de bloques de texto */
.sc-body p + p,
.sc-lead p + p { margin-top: var(--space-4); }

/* ==========================================================================
   PUENTE CON ELEMENTOR (seguro, sin !important)
   --------------------------------------------------------------------------
   Solo se fija la familia tipográfica por defecto en widgets de texto y
   headings, para que el sitio "herede" la marca aunque no se toque cada
   widget. Tamaños/colores se dejan al control de Elementor para no romper
   diseños ya configurados.
   ========================================================================== */

/* Headings de Elementor → fuente display de marca por defecto */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
}

/* Editor de texto → fuente body de marca por defecto */
.elementor-widget-text-editor {
  font-family: var(--font-body);
}

/* Texto de botón Elementor → fuente body bold (estética CTA de marca) */
.elementor-button {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
}