/* ===============================================
   TIPOGRAFÍA - ESTILOS Y UTILIDADES
   =============================================== */

/* ===============================================
   CLASES DE UTILIDAD PARA TÍTULOS
   =============================================== */

.heading-display {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.heading-hero {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.heading-section {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-guindo-dark);
    margin-bottom: var(--spacing-xl);
}

.heading-card {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-sm);
}

/* ===============================================
   TEXTO DESTACADO
   =============================================== */

.text-lead {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-600);
}

.text-muted {
    color: var(--color-gray-600);
}

.text-small {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

/* ===============================================
   ALINEACIÓN
   =============================================== */

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ===============================================
   PESOS DE FUENTE
   =============================================== */

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ===============================================
   COLORES DE TEXTO
   =============================================== */

.text-guindo { color: var(--color-guindo-primary); }
.text-guindo-dark { color: var(--color-guindo-dark); }
.text-dorado { color: var(--color-dorado-accent); }
.text-white { color: var(--color-white); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-900 { color: var(--color-gray-900); }

/* ===============================================
   ENLACES ESPECIALES
   =============================================== */

.link-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-hover-underline {
    text-decoration: none;
}

.link-hover-underline:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.link-subtle {
    color: var(--color-gray-700);
    transition: color var(--transition-fast);
}

.link-subtle:hover {
    color: var(--color-guindo-primary);
}

/* ===============================================
   LISTAS ESTILIZADAS
   =============================================== */

.list-styled {
    list-style: none;
    padding-left: 0;
}

.list-styled li {
    position: relative;
    padding-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.list-styled li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-guindo-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.list-check li::before {
    content: "✓";
    color: var(--color-success);
}

/* ===============================================
   BLOQUES DE TEXTO
   =============================================== */

.blockquote {
    border-left: 4px solid var(--color-guindo-primary);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    font-style: italic;
    color: var(--color-gray-700);
}

/* ===============================================
   RESPONSIVE - AJUSTES DE TAMAÑO
   =============================================== */

@media (max-width: 768px) {
    .heading-display {
        font-size: var(--font-size-4xl);
    }

    .heading-hero {
        font-size: var(--font-size-3xl);
    }

    .heading-section {
        font-size: var(--font-size-2xl);
    }

    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
}