/* ============================================================================
   THE WIN CAPITAL S.A. - global.css
   Estilos globales, secciones y layout base
   ============================================================================ */

/* =======================================================================
   MAIN LAYOUT
   ======================================================================= */

.twc-main {
    margin-top: var(--twc-header-total);
    min-height: calc(100vh - var(--twc-header-total));
}

/* =======================================================================
   SECCIONES
   ======================================================================= */

.twc-section {
    position: relative;
    padding: var(--twc-section-py) 0;
    overflow: hidden;
}

.twc-section--sm {
    padding: var(--twc-section-py-sm) 0;
}

.twc-section--no-top {
    padding-top: 0;
}

.twc-section--no-bottom {
    padding-bottom: 0;
}

/* Fondos de seccion */
.twc-section--white {
    background-color: var(--twc-gray-0);
}

.twc-section--light {
    background-color: var(--twc-gray-50);
}

.twc-section--dark {
    background: var(--twc-grad-dark);
    color: var(--twc-gray-0);
}

.twc-section--hero {
    background: var(--twc-grad-hero);
    color: var(--twc-gray-0);
}

.twc-section--gold {
    background: var(--twc-grad-gold);
    color: var(--twc-gray-900);
}

/* Separadores decorativos entre secciones */
.twc-section--wave-top::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    background: inherit;
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 2;
}

.twc-section--angle-top::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 40px;
    background: inherit;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Elemento decorativo radial en background */
.twc-section--glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--twc-grad-radial);
    pointer-events: none;
    z-index: 0;
}

.twc-section--glow > * {
    position: relative;
    z-index: 1;
}


/* =======================================================================
   GRID PATTERNS (Decorativo en secciones oscuras)
   ======================================================================= */

.twc-grid-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

.twc-dot-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}


/* =======================================================================
   CONTENEDORES ESPECIALES
   ======================================================================= */

.twc-container-narrow {
    max-width: var(--twc-container-sm);
    margin: 0 auto;
    padding: 0 var(--twc-space-4);
}

.twc-container-md {
    max-width: var(--twc-container-md);
    margin: 0 auto;
    padding: 0 var(--twc-space-4);
}


/* =======================================================================
   CARDS BASE
   ======================================================================= */

.twc-card {
    position: relative;
    background: var(--twc-card-bg);
    border: var(--twc-border-width) solid var(--twc-card-border);
    border-radius: var(--twc-radius-xl);
    padding: var(--twc-space-6);
    transition: transform var(--twc-transition-base),
                box-shadow var(--twc-transition-base),
                border-color var(--twc-transition-base);
}

.twc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--twc-shadow-lg);
    border-color: rgba(var(--twc-primary-rgb), 0.2);
}

.twc-card--flat {
    border: none;
    box-shadow: var(--twc-shadow-sm);
}

.twc-card--flat:hover {
    box-shadow: var(--twc-shadow-xl);
}

/* Card glassmorphism para secciones oscuras */
.twc-card--glass {
    background: var(--twc-glass-bg);
    border: 1px solid var(--twc-glass-border);
    backdrop-filter: blur(var(--twc-glass-blur));
    -webkit-backdrop-filter: blur(var(--twc-glass-blur));
}

.twc-card--glass:hover {
    background: var(--twc-card-bg-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Card con borde izquierdo de color */
.twc-card--accent {
    border-left: 4px solid var(--twc-primary);
    border-radius: var(--twc-radius-sm) var(--twc-radius-xl) var(--twc-radius-xl) var(--twc-radius-sm);
}

.twc-card--accent-green  { border-left-color: var(--twc-success); }
.twc-card--accent-blue   { border-left-color: var(--twc-info); }
.twc-card--accent-purple { border-left-color: var(--twc-vip); }


/* =======================================================================
   ICON BOXES
   ======================================================================= */

.twc-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--twc-radius-lg);
}

.twc-icon-box--sm {
    width: 36px;
    height: 36px;
    font-size: var(--twc-text-sm);
}

.twc-icon-box--md {
    width: 48px;
    height: 48px;
    font-size: var(--twc-text-lg);
}

.twc-icon-box--lg {
    width: 64px;
    height: 64px;
    font-size: var(--twc-text-xl);
}

.twc-icon-box--xl {
    width: 80px;
    height: 80px;
    font-size: var(--twc-text-2xl);
}

.twc-icon-box--gold {
    background: var(--twc-gold-50);
    color: var(--twc-primary);
}

.twc-icon-box--green {
    background: var(--twc-green-50);
    color: var(--twc-success);
}

.twc-icon-box--blue {
    background: var(--twc-blue-50);
    color: var(--twc-info);
}

.twc-icon-box--purple {
    background: var(--twc-purple-50);
    color: var(--twc-vip);
}

.twc-icon-box--dark {
    background: rgba(255,255,255,0.08);
    color: var(--twc-primary);
}

/* Variante circular */
.twc-icon-box--circle {
    border-radius: var(--twc-radius-full);
}

/* Con gradiente */
.twc-icon-box--grad-gold {
    background: var(--twc-grad-gold);
    color: var(--twc-gray-900);
}

.twc-icon-box--grad-green {
    background: var(--twc-grad-green);
    color: var(--twc-gray-0);
}

.twc-icon-box--grad-purple {
    background: var(--twc-grad-purple);
    color: var(--twc-gray-0);
}


/* =======================================================================
   BADGES
   ======================================================================= */

.twc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--twc-space-1);
    padding: var(--twc-space-1) var(--twc-space-3);
    font-size: var(--twc-text-xs);
    font-weight: var(--twc-font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--twc-tracking-wider);
    border-radius: var(--twc-radius-full);
    white-space: nowrap;
}

.twc-badge--gold {
    background: var(--twc-gold-100);
    color: var(--twc-gold-800);
}

.twc-badge--green {
    background: var(--twc-green-100);
    color: var(--twc-green-800);
}

.twc-badge--blue {
    background: var(--twc-blue-100);
    color: var(--twc-blue-800);
}

.twc-badge--purple {
    background: var(--twc-purple-100);
    color: var(--twc-purple-800);
}

.twc-badge--red {
    background: var(--twc-red-100);
    color: var(--twc-red-800);
}

.twc-badge--dark {
    background: var(--twc-gray-800);
    color: var(--twc-gray-0);
}

.twc-badge--outline {
    background: transparent;
    border: 1px solid currentColor;
}

/* Badge pulsante para "en vivo" */
.twc-badge--pulse {
    position: relative;
    padding-left: calc(var(--twc-space-3) + 12px);
}

.twc-badge--pulse::before {
    content: '';
    position: absolute;
    left: var(--twc-space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    animation: twcPulse 2s ease-in-out infinite;
}

@keyframes twcPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
    50%      { opacity: 0.7; box-shadow: 0 0 0 6px transparent; }
}


/* =======================================================================
   DIVIDERS
   ======================================================================= */

.twc-divider {
    width: 60px;
    height: 3px;
    background: var(--twc-grad-gold);
    border-radius: var(--twc-radius-full);
    border: none;
    margin: var(--twc-space-4) 0;
}

.twc-divider--center {
    margin-left: auto;
    margin-right: auto;
}

.twc-divider--lg {
    width: 100px;
    height: 4px;
}

.twc-divider--white {
    background: var(--twc-gray-0);
    opacity: 0.3;
}


/* =======================================================================
   NUMERO DECORATIVO (Para steps, rankings, etc)
   ======================================================================= */

.twc-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--twc-radius-full);
    font-size: var(--twc-text-md);
    font-weight: var(--twc-font-bold);
    flex-shrink: 0;
    background: var(--twc-grad-gold);
    color: var(--twc-gray-900);
    box-shadow: var(--twc-shadow-gold);
}

.twc-step-number--dark {
    background: var(--twc-gray-800);
    color: var(--twc-primary);
    box-shadow: var(--twc-shadow-dark);
}

.twc-step-number--outline {
    background: transparent;
    color: var(--twc-primary);
    border: 2px solid var(--twc-primary);
    box-shadow: none;
}


/* =======================================================================
   ESTADISTICAS / METRICAS
   ======================================================================= */

.twc-stat {
    text-align: center;
}

.twc-stat__value {
    font-size: var(--twc-text-4xl);
    font-weight: var(--twc-font-black);
    line-height: var(--twc-leading-none);
    color: var(--twc-primary);
}

.twc-stat__label {
    font-size: var(--twc-text-sm);
    font-weight: var(--twc-font-medium);
    color: var(--twc-text-secondary);
    margin-top: var(--twc-space-2);
    text-transform: uppercase;
    letter-spacing: var(--twc-tracking-wide);
}

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

.twc-dark-section .twc-stat__label {
    color: var(--twc-gray-400);
}


/* =======================================================================
   RATING STARS
   ======================================================================= */

.twc-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--twc-amber-400);
    font-size: var(--twc-text-sm);
}


/* =======================================================================
   FEATURE LIST (para cards de niveles, planes, etc)
   ======================================================================= */

.twc-feature-list {
    display: flex;
    flex-direction: column;
    gap: var(--twc-space-3);
}

.twc-feature-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--twc-space-3);
    font-size: var(--twc-text-sm);
    line-height: var(--twc-leading-normal);
    color: var(--twc-text-secondary);
}

.twc-feature-list__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--twc-radius-full);
    font-size: 10px;
    margin-top: 1px;
}

.twc-feature-list__icon--check {
    background: var(--twc-green-100);
    color: var(--twc-green-700);
}

.twc-feature-list__icon--cross {
    background: var(--twc-red-100);
    color: var(--twc-red-600);
}

.twc-feature-list__icon--star {
    background: var(--twc-gold-100);
    color: var(--twc-gold-700);
}

/* En secciones oscuras */
.twc-dark-section .twc-feature-list__item {
    color: var(--twc-gray-300);
}

.twc-dark-section .twc-feature-list__icon--check {
    background: rgba(16,185,129,0.15);
    color: var(--twc-green-400);
}


/* =======================================================================
   SOCIAL PROOF LIVE NOTIFICATION
   ======================================================================= */

.twc-live-notif {
    position: fixed;
    bottom: 100px;
    left: var(--twc-space-4);
    z-index: var(--twc-z-toast);
    max-width: 340px;
    background: var(--twc-gray-0);
    border-radius: var(--twc-radius-xl);
    box-shadow: var(--twc-shadow-2xl);
    border: 1px solid var(--twc-gray-200);
    padding: var(--twc-space-4);
    display: flex;
    align-items: center;
    gap: var(--twc-space-3);
    transform: translateX(-120%);
    opacity: 0;
    transition: transform var(--twc-transition-spring),
                opacity var(--twc-transition-base);
}

.twc-live-notif.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.twc-live-notif__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--twc-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--twc-green-100);
    color: var(--twc-green-600);
    font-size: var(--twc-text-md);
}

.twc-live-notif__text {
    font-size: var(--twc-text-sm);
    line-height: var(--twc-leading-snug);
    color: var(--twc-gray-700);
}

.twc-live-notif__text strong {
    color: var(--twc-gray-900);
}

.twc-live-notif__time {
    font-size: var(--twc-text-xs);
    color: var(--twc-gray-400);
    margin-top: 2px;
}

.twc-live-notif__close {
    position: absolute;
    top: var(--twc-space-2);
    right: var(--twc-space-2);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--twc-text-sm);
    color: var(--twc-gray-400);
    border-radius: var(--twc-radius-full);
    transition: background var(--twc-transition-fast);
}

.twc-live-notif__close:hover {
    background: var(--twc-gray-100);
    color: var(--twc-gray-600);
}