:root{
    --bg:#f2f2f2;
    --ribbon:#34495e;
    --ribbon-text:#ffffff;
    --muted:#555;
    --container-width:1000px;
}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:#222;background:var(--bg);}
/* Top ribbon menu */
header.ribbon{
    background:var(--ribbon);
    color:var(--ribbon-text);
    box-shadow:0 2px 4px rgba(0,0,0,0.08);
}
.ribbon .wrap{
    max-width:var(--container-width);
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:1rem;
    padding:0.6rem 1rem;
}
.brand{font-weight:600}
nav.main{
    margin-left:auto;
}
nav.main a{
    color:var(--ribbon-text);
    text-decoration:none;
    padding:0.45rem 0.9rem;
    display:inline-block;
    border-radius:4px;
    transition:background .15s;
}
nav.main a:hover{background:rgba(255,255,255,0.06);}
nav.main a[aria-current="page"]{background:rgba(255, 255, 255, 0.200);}
/* Page content */
main{
    max-width:var(--container-width);
    margin:2.2rem auto;
    padding:0 1rem;
}
.profile{
    display:flex;
    gap:1.2rem;
    align-items:flex-start;
    background:#fff;
    padding:1rem;
    border-radius:8px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.profile img{
    width:220px;
    height:auto;
    object-fit:cover;
    border-radius:6px;
    flex:0 0 220px;
}
.bio{
    flex:1 1 auto;
    color:#222;
    line-height:1.6;
}
/* Footer */
footer{
    margin-top:1.6rem;
    text-align:center;
    color:var(--muted);
    font-size:0.95rem;
    padding:1rem 0;
}
/* Responsive */
@media (max-width:720px){
    .profile{flex-direction:column;align-items:center;text-align:center;}
    .profile img{flex:0 0 auto;width:160px;}
    nav.main{margin-left:0;margin-top:0.4rem;}
    .ribbon .wrap{flex-wrap:wrap;gap:0.4rem;}
}

/* Estilos para enlaces en el contenido: sin subrayado, texto azul oscuro, fondo azul claro */
main a, .bio a{
    text-decoration: none;
    color: #0b3d91; /* azul oscuro */
    background-color: #f2f8ff; /* azul claro */
    border-radius: 4px;
    padding: 0 0.18rem;
    transition: background-color .12s, color .12s;
}
main a:hover, .bio a:hover{
    background-color: #d0e8ff;
    color: #07224f;
}

/* Formulario de contacto: disposición y estilo limpio */
.contact-form{
    max-width:820px;
    margin:0 auto;
}
.contact-form .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0.8rem;
}
.contact-form .field{
    display:flex;
    flex-direction:column;
    margin-top:0.6rem;
}
.contact-form label{font-weight:600;margin-bottom:0.28rem;color:#222;}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
    padding:0.6rem 0.7rem;
    border:1px solid #e1e4e8;
    border-radius:6px;
    font:inherit;
    color:inherit;
}
.contact-form textarea{min-height:160px;resize:vertical;}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid rgba(36,78,158,0.12);box-shadow:0 0 0 3px rgba(36,78,158,0.06);border-color:#244e9e}
.contact-form .actions{margin-top:0.9rem}
.contact-form button{padding:0.6rem 0.9rem;border-radius:6px;border:0;background:#244e9e;color:#fff;cursor:pointer}
.contact-form .hint{margin-top:1rem;color:var(--muted);font-size:0.95rem}

@media (max-width:720px){
    .contact-form .form-grid{grid-template-columns:1fr;}
}

/* =========================================
   ANIMACIÓN DEL RINOCERONTE (Easter Egg)
   ========================================= */

@keyframes paseoRinoceronte {
    0% {
        transform: translateX(120vw); /* Empieza fuera a la derecha */
    }
    100% {
        transform: translateX(-120vw); /* Termina fuera a la izquierda */
    }
}

.rino-sorpresa {
    position: fixed; /* Se queda fijo en la pantalla aunque hagas scroll */
    z-index: 50; /* Por encima del texto normal */
    width: 180px; /* Ajusta el tamaño aquí */
    opacity: 0.8; /* Un poco transparente para no molestar tanto */
    pointer-events: none; /* CRÍTICO: Permite hacer clic A TRAVÉS de la imagen */
    display: none; /* Oculto por defecto (para móviles) */
}

/* Solo se activa en pantallas grandes (PC/Tablets > 768px) */
@media (min-width: 768px) {
    .rino-sorpresa.activo {
        display: block;
        animation: paseoRinoceronte 25s linear forwards; /* Tarda 25 seg en cruzar */
    }
}