@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,700;1,400;1,700&family=Belleza&display=swap');

:root {
    --background-hsl: 60 56% 91%;
    --foreground-hsl: 116 25% 20%;
    --primary-hsl: 116 44% 34%;
    --accent-hsl: 25 56% 40%;
    --border-hsl: 60 20% 80%;
    --font-body: 'Alegreya', serif;
    --font-headline: 'Belleza', sans-serif;
    --radius: 14px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:var(--font-body);
    background:hsl(var(--background-hsl));
    color:hsl(var(--foreground-hsl));
    line-height:1.5;
    font-size:17px;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ===== Header unificado ===== */
header{
    position:sticky;top:0;z-index:50;width:100%;
    background:hsl(var(--background-hsl));
    border-bottom:1px solid hsl(var(--border-hsl));
    height:80px;display:flex;align-items:center;justify-content:space-between;
    padding:0 1rem;
}
header .logo img{height:60px;width:auto;border-radius:15%}
header nav{display:flex;align-items:center;gap:2rem}
header nav ul{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}
header nav a{font-family:var(--font-headline);font-weight:700;font-size:1rem;color:hsl(var(--primary-hsl));transition:color .2s}
header nav a:hover,header nav a.active{color:hsl(var(--accent-hsl))}
.hamburger{display:none;flex-direction:column;justify-content:center;width:40px;height:40px;cursor:pointer;gap:7px}
.hamburger span{display:block;height:4px;width:100%;background:hsl(var(--foreground-hsl));border-radius:2px;transition:.3s}
.mobile-menu{display:none;flex-direction:column;gap:1rem;background:hsl(var(--background-hsl));position:absolute;top:80px;right:0;width:70%;max-width:300px;padding:1.25rem 1.5rem;border-left:1px solid hsl(var(--border-hsl));border-bottom:1px solid hsl(var(--border-hsl));box-shadow:-4px 6px 16px rgba(0,0,0,.06)}
.mobile-menu a{font-family:var(--font-headline);font-size:1.05rem;color:hsl(var(--primary-hsl));padding:.25rem 0}
@media (max-width:768px){header nav ul{display:none}.hamburger{display:flex}}

/* ===== Registro ===== */
.register-container{
    max-width:720px;
    margin:3rem auto;
    padding:1.5rem 1.75rem;
    background:#fff;
    border:1px solid hsl(var(--border-hsl));
    border-radius:var(--radius);
    box-shadow:0 10px 25px -18px rgba(0,0,0,.25);
    text-align:left;
}
.register-container h1{
    font-family:var(--font-headline);
    color:hsl(var(--primary-hsl));
    font-size:clamp(1.6rem,3.2vw,2rem);
    margin:0 0 1rem;
}

.register-form{
    display:grid;
    gap:1rem;
}
.register-form label{
    font-weight:700;
    color:hsl(var(--foreground-hsl));
    font-family:var(--font-headline);
}
.register-form input{
    width:100%;
    padding:.9rem 1rem;
    border:1px solid hsl(var(--border-hsl));
    border-radius:8px;
    background:#fff;
    color:hsl(var(--foreground-hsl));
    font-family:var(--font-body);
    font-size:1rem;
    outline:none;
    transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.register-form input:focus{
    border-color:hsl(var(--primary-hsl));
    box-shadow:0 0 0 4px hsla(116,44%,34%,.12);
    background:#fff;
}

/* Botón estilo unificado */
.register-form button{
    width:100%;
    padding:1rem;
    border:none;
    border-radius:var(--radius);
    background:hsl(var(--primary-hsl));
    color:#fff;
    font-size:1.05rem;
    font-weight:700;
    font-family:var(--font-headline);
    letter-spacing:.3px;
    cursor:pointer;
    transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
    box-shadow:0 6px 14px -6px hsla(116,44%,34%,.4);
}
.register-form button:hover{
    filter:brightness(1.05);
    box-shadow:0 8px 20px -8px hsla(116,44%,34%,.5);
}
.register-form button:active{
    transform:translateY(2px);
    box-shadow:0 4px 10px -6px hsla(116,44%,34%,.5);
}

.registro-link{
    margin-top:1rem;
    text-align:center;
}
.registro-link a{
    color:hsl(var(--primary-hsl));
    font-family:var(--font-headline);
    font-weight:700;
    text-decoration:none;
    border-bottom:1px dashed hsla(116,44%,34%,.35);
}
.registro-link a:hover{
    color:hsl(var(--accent-hsl));
    border-bottom-color:hsla(25,56%,40%,.5);
}

/* Mensajes */
.success{
    color:#27ae60;background:#eafaf1;border:1px solid #27ae6022;
    border-radius:8px;padding:.6rem .75rem;margin-top:.5rem;font-weight:600;
}
.error{
    color:#c0392b;background:#fbeee6;border:1px solid rgba(192,57,43,.25);
    border-radius:8px;padding:.6rem .75rem;margin-top:.5rem;font-weight:600;
}

@media (max-width:600px){
    .register-container{max-width:95vw;padding:1rem}
}