/* ===================================================
   LAYOUT & GRID
   =================================================== */

/* --- Elementos Visuales Únicos Anti-Genéricos --- */
.ornamental-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-gold);
  display: inline-block;
  vertical-align: middle;
}

.ornamental-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--clr-gold-soft), transparent);
  flex: 1;
}

/* --- Container Principal --- */
.container {
  width: min(var(--max-width), 100% - var(--sp-xl) * 2);
  margin-inline: auto;
}

/* --- Tipografía con Personalidad Única --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-heading);
  line-height: 1.08;
  font-weight: 400;
  color: var(--clr-text);
  text-wrap: balance;
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-hero);
  font-style: italic;
}
h2 {
  font-size: var(--fs-3xl);
}
h3 {
  font-size: var(--fs-2xl);
}
h4 {
  font-size: var(--fs-xl);
}
h5 {
  font-size: var(--fs-lg);
}

p {
  margin-bottom: var(--sp-md);
  text-wrap: pretty;
  letter-spacing: 0.01em;
}

/* --- Secciones con Acento Único --- */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clr-accent-dark);
  margin-bottom: var(--sp-md);
}
.section-label::before {
  content: "";
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--clr-gold), transparent);
}

.section-title {
  font-size: clamp(var(--fs-xl), 3vw + 0.5rem, var(--fs-2xl));
  margin-bottom: var(--sp-lg);
}

.section-subtitle {
  font-size: var(--fs-md);
  color: var(--clr-text-muted);
  max-width: 55ch;
  margin-bottom: var(--sp-3xl);
}

.bg-subtle {
  background-color: var(--clr-bg-subtle);
}

/* --- Transiciones de Tema Suaves --- */
body, .site-header, .site-footer,
.service-card, .pricing-card, .testimonial-card,
.contact-info-card, .about-stats, .value-item,
.dropdown-menu, .process-step, .quote-band,
input, select, textarea {
  transition:
    background-color 0.45s ease,
    border-color 0.45s ease,
    color 0.45s ease,
    box-shadow 0.45s ease;
}