/* =========================================
   SISTEMA DE DISEÑO · MARATONEAR v0.2
   Paleta: Argentina · Hemisferio Sur
   Tipografía: Outfit
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
    /* ====== IDENTIDAD ARGENTINA ====== */
    --arg-navy:     #1B396B;
    --arg-celeste:  #74ACDF;
    --arg-sol:      #FDB913;
    --arg-sol-dark: #E5A50A;

    /* ====== NEUTROS ====== */
    --text-body:    #374151;
    --text-muted:   #6B7280;
    --text-hint:    #9CA3AF;
    --bg-light:     #F8FAFB;
    --bg-surface:   #FFFFFF;
    --border-light: #E5E9EF;

    /* ====== PALETA ESTACIONAL (Hemisferio Sur) ====== */
    --mes-enero:        #FF4D4D;
    --mes-enero-g:      linear-gradient(135deg, #FF4D4D, #FF8A65);
    --mes-febrero:      #FF7F50;
    --mes-febrero-g:    linear-gradient(135deg, #FF7F50, #FFB74D);
    --mes-marzo:        #FFB900;
    --mes-marzo-g:      linear-gradient(135deg, #FFB900, #FFD54F);
    --mes-abril:        #D35400;
    --mes-abril-g:      linear-gradient(135deg, #D35400, #E67E22);
    --mes-mayo:         #8E44AD;
    --mes-mayo-g:       linear-gradient(135deg, #8E44AD, #AB47BC);
    --mes-junio:        #5D4E37;
    --mes-junio-g:      linear-gradient(135deg, #5D4E37, #8D6E63);
    --mes-julio:        #74ACDF;
    --mes-julio-g:      linear-gradient(135deg, #74ACDF, #4FC3F7);
    --mes-agosto:       #2980B9;
    --mes-agosto-g:     linear-gradient(135deg, #2980B9, #42A5F5);
    --mes-septiembre:   #1ABC9C;
    --mes-septiembre-g: linear-gradient(135deg, #1ABC9C, #26C6DA);
    --mes-octubre:      #2ECC71;
    --mes-octubre-g:    linear-gradient(135deg, #2ECC71, #66BB6A);
    --mes-noviembre:    #27AE60;
    --mes-noviembre-g:  linear-gradient(135deg, #27AE60, #43A047);
    --mes-diciembre:    #E84393;
    --mes-diciembre-g:  linear-gradient(135deg, #E84393, #F06292);
    --mes-default:      #BDC3C7;
    --mes-default-g:    linear-gradient(135deg, #BDC3C7, #D5D8DC);

    /* ====== DIFICULTAD ====== */
    --dif-principiante-bg:  #E8F5E9;
    --dif-principiante-txt: #2E7D32;
    --dif-principiante-bdr: #A5D6A7;
    --dif-moderada-bg:      #E3F2FD;
    --dif-moderada-txt:     #1565C0;
    --dif-moderada-bdr:     #90CAF9;
    --dif-tecnica-bg:       #FFF3E0;
    --dif-tecnica-txt:      #E65100;
    --dif-tecnica-bdr:      #FFB74D;
    --dif-extrema-bg:       #FCE4EC;
    --dif-extrema-txt:      #C62828;
    --dif-extrema-bdr:      #EF9A9A;

    /* ====== RADIOS / SOMBRAS / TIMING ====== */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-pill: 50px;
    --shadow-card:  0 2px 8px rgba(0,0,0,0.06);
    --shadow-hover: 0 20px 40px rgba(0,0,0,0.1);
    --ease-spring:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ====== TIPOGRAFÍA GLOBAL ====== */
body {
    color: var(--text-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    color: var(--arg-navy);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 { font-weight: 900; }
h2 { font-weight: 800; }

a {
    color: var(--arg-navy);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--arg-celeste); }

/* ====== BOTONES GLOBALES ====== */
button, .button, input[type="submit"] {
    font-family: 'Outfit', system-ui, sans-serif;
    background: linear-gradient(135deg, var(--arg-sol), #F9A825) !important;
    color: #222 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: none !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.3s var(--ease-spring);
}
button:hover, .button:hover, input[type="submit"]:hover {
    background: linear-gradient(135deg, var(--arg-sol-dark), #E8A000) !important;
    color: #000 !important;
    transform: translateY(-1px);
}

/* ====== ANIMACIONES REUTILIZABLES ====== */
@keyframes stripe-march {
    from { background-position: 0 0; }
    to   { background-position: 40px 0; }
}

@keyframes float-sun {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(5deg); }
}

@keyframes sol-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}