/* <style>
		body{font-family: Arial, sans-serif;background:#f5f5f5;display:flex;align-items:center;justify-content:center;height:100vh;margin:0}
		.card{background:#fff;padding:24px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);width:320px}
		h2{text-align:center;margin:0 0 16px}
		label{display:block;margin:8px 0 4px;font-size:14px}
		input[type="text"],input[type="password"]{width:100%;padding:10px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}
		.actions{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
		button{background:#0078d4;color:#fff;border:none;padding:10px 16px;border-radius:4px;cursor:pointer}
		.link{background:transparent;border:none;color:#0078d4;cursor:pointer;text-decoration:underline;padding:0}
	</style> */


/* ── 01. FUENTES Y RESET ─────────────────────────────────── */
@font-face {
    font-family: 'MarioFont';
    src: url('../font/SuperMario256.ttf') format('truetype');
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Press+Start+2P&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ── 02. VARIABLES ───────────────────────────────────────── */
:root {
    /* Paleta Mario refinada */
    --mario-red:      #e63946;
    --mario-red-dk:   #b8232f;
    --mario-blue:     #2563eb;
    --mario-blue-dk:  #1d4ed8;
    --mario-sky:      #7dd3fc;
    --mario-sky-lt:   #bae6fd;
    --mario-yellow:   #fcd34d;
    --mario-yellow-dk:#f59e0b;
    --mario-green:    #16a34a;
    --mario-green-lt: #22c55e;
    --mario-brown:    #92400e;

    /* Gradientes */
    --grad-sky:    linear-gradient(180deg, #93c5fd 0%, #bfdbfe 60%, #e0f2fe 100%);
    --grad-hero:   linear-gradient(160deg, #1e3a8a 0%, #1e40af 50%, #312e81 100%);
    --grad-night:  linear-gradient(160deg, #0f172a 0%, #1e1b4b 60%, #4c1d95 100%);
    --grad-red:    linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --grad-blue:   linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --grad-green:  linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --grad-yellow: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
    --grad-card:   linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,251,235,0.9) 100%);

    /* Tipografía */
    --font-display: 'MarioFont', 'Press Start 2P', system-ui, sans-serif;
    --font-pixel:   'Press Start 2P', monospace;
    --font-body:    'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;

}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--grad-sky);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.6;
    min-height: 100vh;
    font-weight: 400;
}

.card {
    background : var(--grad-card);
    padding: 24px;
    border-radius: 8px;
}

h2{
    text-align:center;
    margin:0 0 16px
}

label{
    display:block;
    margin:8px 0 4px;
    font-size:14px
}

input{
    width:100%;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
    box-sizing:border-box
}

.actions{
    display:flex;
    align-items:center;
    margin-top:16px
}

button{
    background:#0078d4;
    color:#fff;
    border:none;
    padding:10px 16px;
    border-radius:4px;
    margin-top:16px;
    cursor:pointer;
}

.link{
    background:transparent;
    border:none;
    color:#0078d4;
    cursor:pointer;
    text-decoration:underline;
    padding:0
}