:root{
    --primary-blue: #0B5FFF;
    --dark-blue: #063A7A;
    --soft-blue: #E6F0FF;
    --accent-red: #D93B3B;
    --muted-red: #F6E8E8;
    --neutral-ink: #1F2A44;
    --muted-text: #55607A;
    --surface: #ffffff;
}

*{box-sizing:border-box;}

body{
    font-family: Arial, sans-serif;
    margin:0;
    padding:0;
    background:var(--surface);
    color:var(--neutral-ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

header{
    background: linear-gradient(90deg,var(--dark-blue),var(--primary-blue));
    color:#fff;
    padding:1.25rem;
    text-align:center;
}

header h1{ margin:0 0 .2rem 0; font-size:1.6rem; letter-spacing:0.2px; }
header p{ margin:0; color:rgba(255,255,255,0.9); }

main{
    max-width:980px;
    margin:2rem auto;
    padding:0 1rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

section{
    background:var(--soft-blue);
    padding:1rem 1.25rem;
    box-shadow:0 4px 14px rgba(6,58,122,0.06);
    border-radius:8px;
}

h2{
    color:var(--dark-blue);
    margin:0 0 .5rem 0;
    font-size:1.1rem;
}


.imagen{
    text-align:center;
    background:transparent;
    box-shadow:none;
    padding-top:0.5rem;
}

.imagen img{
    width:80%;
    max-width:360px;
    height:auto;
    display:inline-block;
    border-radius:6px;
    box-shadow:0 6px 18px rgba(11,95,255,0.08);
}

/* Footer */
footer{
    background:var(--dark-blue);
    color:#fff;
    padding:1rem;
    text-align:center;
    margin-top:2rem;
}

/* Botones (por si los añades) */
.btn-primary{
    background:var(--primary-blue);
    color:#fff;
    border:none;
    padding:.6rem 1rem;
    border-radius:6px;
    cursor:pointer;
}
.btn-accent{
    background:var(--accent-red);
    color:#fff;
    border:none;
    padding:.5rem .9rem;
    border-radius:6px;
    cursor:pointer;
}

/* Responsive tweaks */
@media (min-width:900px){
    main{ gap:1.25rem; }
    section{ padding:1.25rem 1.5rem; }
}