/*
 * typography.css — Sistema tipográfico global de Grupo Palmaderas
 * Se carga al final en layoutUser (después de todos los CSS de página)
 * para garantizar que las reglas con !important prevalezcan sobre
 * los estilos inline y los <style> blade-específicos.
 */

/* ─── Variables globales ─────────────────────────────────────── */
:root {
  --tp-brown : #6d4c41;
  --tp-gold  : #c28875;
  --tp-ink   : #2b2b2b;
  --tp-text  : #444444;
  --tp-muted : #8d6e63;
  --tp-font  : 'Roboto', sans-serif;
}

/* ─── Fuente base en todos los encabezados del contenido ──────── */
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  font-family: var(--tp-font) !important;
  font-weight: 700 !important;
}

/* ─── Párrafos y listas del contenido ────────────────────────── */
.content p,
.content li {
  font-family: var(--tp-font) !important;
  font-size  : 1rem !important;
  line-height: 1.8 !important;
  color      : var(--tp-text) !important;
}

.content p {
  margin-bottom: 1rem !important;
  text-align   : justify !important;
}

/* Excepción: texto sobre fondos oscuros / secciones hero ────── */
.content .text-white p,
.content .text-white li {
  color: #ffffff !important;
}

/* ─── Listas ─────────────────────────────────────────────────── */
.content ul,
.content ol {
  text-align: left !important;
}

/* Clases de lista específicas de deck/vigas/revest ───────────── */
.deck-list li,
.deck-list-two-columns li {
  font-family: var(--tp-font) !important;
  font-size  : 1rem !important;
  line-height: 1.8 !important;
  color      : var(--tp-text) !important;
}

/* ─── h2.section-label (etiqueta de sección) ─────────────────── *
 *  Usada en: deck, vigas, revestimientos
 * ────────────────────────────────────────────────────────────── */
.section-label {
  font-family   : var(--tp-font) !important;
  font-size     : 1.2rem !important;
  font-weight   : 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color         : var(--tp-gold) !important;
  margin-bottom : 0.5rem !important;
}

/* ─── h3.section-subtitle (subtítulo de sección) ─────────────── *
 *  Usada en: deck, vigas
 * ────────────────────────────────────────────────────────────── */
.section-subtitle {
  font-family  : var(--tp-font) !important;
  font-size    : 1.3rem !important;
  font-weight  : 700 !important;
  color        : var(--tp-brown) !important;
  margin-top   : 1.5rem !important;
  margin-bottom: 1rem !important;
}

/* ─── p.deck-lead (párrafo intro de producto) ────────────────── *
 *  Usada en: deck, vigas, revestimientos
 * ────────────────────────────────────────────────────────────── */
.deck-lead {
  font-family  : var(--tp-font) !important;
  font-size    : 1rem !important;
  line-height  : 1.8 !important;
  color        : var(--tp-text) !important;
  text-align   : justify !important;
  text-wrap    : balance !important;
  margin-bottom: 1rem !important;
}

/* ─── .empresa-title (título de sección empresa/home) ────────── */
.empresa-title {
  font-family   : var(--tp-font) !important;
  font-size     : clamp(1.6rem, 2vw + 1rem, 2.25rem) !important;
  font-weight   : 700 !important;
  color         : var(--tp-ink) !important;
  border-bottom : 2px solid var(--tp-gold) !important;
  padding-bottom: 0.5rem !important;
}

/* ─── .empresa-content (bloque de contenido empresa/home) ────── */
.empresa-content {
  font-family: var(--tp-font) !important;
  font-size  : 1rem !important;
  line-height: 1.8 !important;
  color      : var(--tp-text) !important;
}

.empresa-content strong {
  color      : var(--tp-ink) !important;
  font-weight: 600 !important;
}

/* ─── Instalaciones / Servicios especiales ───────────────────── *
 *  Los h2 con style inline de esa página quedan unificados
 * ────────────────────────────────────────────────────────────── */
.content .fw-bold {
  font-weight: 700 !important;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .content p,
  .content li,
  .deck-lead {
    font-size  : 0.95rem !important;
    line-height: 1.7 !important;
  }

  .section-label    { font-size: 1.05rem !important; }
  .section-subtitle { font-size: 1.15rem !important; }
}