/* ============================================================================
   THE WIN CAPITAL S.A. - typography.css
   Sistema tipografico completo
   ============================================================================ */

/* =======================================================================
   HEADINGS
   ======================================================================= */

.twc-h1,
.twc-display {
    font-size: var(--twc-text-4xl);
    font-weight: var(--twc-font-extrabold);
    line-height: var(--twc-leading-none);
    letter-spacing: var(--twc-tracking-tighter);
}

.twc-h2 {
    font-size: var(--twc-text-3xl);
    font-weight: var(--twc-font-bold);
    line-height: var(--twc-leading-tight);
    letter-spacing: var(--twc-tracking-tight);
}

.twc-h3 {
    font-size: var(--twc-text-2xl);
    font-weight: var(--twc-font-bold);
    line-height: var(--twc-leading-tight);
}

.twc-h4 {
    font-size: var(--twc-text-xl);
    font-weight: var(--twc-font-semibold);
    line-height: var(--twc-leading-snug);
}

.twc-h5 {
    font-size: var(--twc-text-lg);
    font-weight: var(--twc-font-semibold);
    line-height: var(--twc-leading-snug);
}

.twc-h6 {
    font-size: var(--twc-text-md);
    font-weight: var(--twc-font-semibold);
    line-height: var(--twc-leading-normal);
}

/* Display grande para hero */
.twc-display-xl {
    font-size: clamp(var(--twc-text-3xl), 5vw, var(--twc-text-6xl));
    font-weight: var(--twc-font-black);
    line-height: 1.05;
    letter-spacing: var(--twc-tracking-tighter);
}

.twc-display-lg {
    font-size: clamp(var(--twc-text-2xl), 4vw, var(--twc-text-5xl));
    font-weight: var(--twc-font-extrabold);
    line-height: 1.1;
    letter-spacing: var(--twc-tracking-tighter);
}


/* =======================================================================
   BODY TEXT
   ======================================================================= */

.twc-body-lg {
    font-size: var(--twc-text-lg);
    line-height: var(--twc-leading-relaxed);
}

.twc-body {
    font-size: var(--twc-text-base);
    line-height: var(--twc-leading-relaxed);
}

.twc-body-sm {
    font-size: var(--twc-text-sm);
    line-height: var(--twc-leading-normal);
}

.twc-body-xs {
    font-size: var(--twc-text-xs);
    line-height: var(--twc-leading-normal);
}

.twc-lead {
    font-size: var(--twc-text-lg);
    font-weight: var(--twc-font-light);
    line-height: var(--twc-leading-relaxed);
    color: var(--twc-text-secondary);
}


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

.twc-text-primary   { color: var(--twc-text-primary); }
.twc-text-secondary { color: var(--twc-text-secondary); }
.twc-text-muted     { color: var(--twc-text-muted); }
.twc-text-gold      { color: var(--twc-primary); }
.twc-text-green     { color: var(--twc-success); }
.twc-text-red       { color: var(--twc-danger); }
.twc-text-blue      { color: var(--twc-info); }
.twc-text-purple    { color: var(--twc-vip); }
.twc-text-white     { color: var(--twc-gray-0); }


/* =======================================================================
   UTILIDADES TIPOGRAFICAS
   ======================================================================= */

.twc-text-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--twc-tracking-wider);
}

.twc-text-gradient {
    background: var(--twc-grad-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.twc-text-gradient-green {
    background: var(--twc-grad-green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.twc-text-gradient-purple {
    background: var(--twc-grad-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.twc-text-balance {
    text-wrap: balance;
}

.twc-text-pretty {
    text-wrap: pretty;
}


/* =======================================================================
   SECTION HEADERS
   ======================================================================= */

.twc-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--twc-space-12);
}

.twc-section-header__label {
    display: inline-flex;
    align-items: center;
    gap: var(--twc-space-2);
    font-size: var(--twc-text-sm);
    font-weight: var(--twc-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--twc-tracking-widest);
    color: var(--twc-primary);
    margin-bottom: var(--twc-space-4);
}

.twc-section-header__label::before,
.twc-section-header__label::after {
    content: '';
    width: 32px;
    height: 2px;
    background: var(--twc-primary);
    border-radius: var(--twc-radius-full);
}

.twc-section-header__title {
    font-size: clamp(var(--twc-text-2xl), 3.5vw, var(--twc-text-4xl));
    font-weight: var(--twc-font-extrabold);
    line-height: var(--twc-leading-tight);
    letter-spacing: var(--twc-tracking-tight);
    color: var(--twc-text-primary);
    margin-bottom: var(--twc-space-4);
}

.twc-section-header__subtitle {
    font-size: var(--twc-text-md);
    font-weight: var(--twc-font-regular);
    line-height: var(--twc-leading-relaxed);
    color: var(--twc-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Variante para secciones oscuras */
.twc-dark-section .twc-section-header__title {
    color: var(--twc-gray-0);
}

.twc-dark-section .twc-section-header__subtitle {
    color: var(--twc-gray-300);
}

.twc-dark-section .twc-section-header__label {
    color: var(--twc-primary-light);
}

.twc-dark-section .twc-section-header__label::before,
.twc-dark-section .twc-section-header__label::after {
    background: var(--twc-primary-light);
}


/* =======================================================================
   DECORADORES DE TEXTO
   ======================================================================= */

/* Subrayado animado dorado */
.twc-underline-gold {
    position: relative;
    display: inline;
}

.twc-underline-gold::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background: var(--twc-grad-gold);
    border-radius: var(--twc-radius-full);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--twc-transition-base);
}

.twc-underline-gold:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Highlight dorado */
.twc-highlight {
    position: relative;
    display: inline;
    z-index: 1;
}

.twc-highlight::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    bottom: 0;
    height: 35%;
    background: rgba(var(--twc-primary-rgb), 0.2);
    z-index: -1;
    border-radius: 2px;
}