/*Estilos importados*/
@import url('variables.css');

/*Tipografías*/
@import url('tipografias.css');

:root{
    --bg: #5674FB;
    --card: #ffffff;
    --muted: #6b6b6b;
    --accent: #5674FB;
    --max-w: 1000px;
    --glass: rgba(255,255,255,0.6);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

    --float-distance: 30px;
    --float-duration: 3.6s;
    --float-rotation: 2deg;      
    --easing: cubic-bezier(.25,.9,.35,.95);
}
html,body{
    min-height:90vh;
    margin:0
}
body{
    background: linear-gradient(90deg,var(--bg),#334bb9);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    color:#111;
}
.container{
    width:100%; 
    max-width:var(--max-w);
    background:var(--card);
    border-radius:30px;
    padding: 4rem;
    box-shadow:0 8px 30px rgba(18,20,24,0.06);
    display:grid;
    grid-template-columns:320px 1fr;
    gap:28px;
    align-items:center;
    
}

/* Keyframes: movimiento vertical con pequeña rotación */
@keyframes floatY{
    0%{
        transform: translateY(0) rotateZ(0);
    }
    25%{
        transform: translateY(calc(-1 * var(--float-distance) * 0.65)) rotateZ(calc(var(--float-rotation) * 0.6));
    }
    50%{
        transform: translateY(calc(-1 * var(--float-distance))) rotateZ(calc(var(--float-rotation) * -0.3));
    }
    75%{
        transform: translateY(calc(-1 * var(--float-distance) * 0.65)) rotateZ(calc(var(--float-rotation) * 0.4));
    }
    100%{
        transform: translateY(0) rotateZ(0);
    }
}


.icon-wrap{
    display:flex;
    align-items:center;
    justify-content:center
}
/* SVG wrapper to keep icon transparent for banners */
.icon-box{
    display:flex;
    align-items:center;
    justify-content:center;
    animation: floatY var(--float-duration) var(--easing) infinite;
}
h1{
    margin:0;
    font-size:26px;
    letter-spacing:-0.02em
}
.subtitle{
    margin-top:8px;
    color:var(--muted);
    font-size:15px
}
.section{
    margin-top:22px
}
h2{
    margin:0;
    font-size:16px
}
p{
    color:var(--muted);
    line-height:1.5;
    margin-top:8px
}
.meta{
    display:flex;
    flex-direction: column;
    gap:12px;
    align-items:start;
    margin-top:14px
}
.time{
    background:linear-gradient(180deg,#f3f7ff,#eef6ff);
    padding:10px 12px;
    border-radius:8px;
    font-weight:600
}
.cta-row{
    display:flex;
    gap:12px;
    margin-top:18px
}
.btn{
    background:var(--accent);
    color:#fff;
    padding:10px 14px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600
}
.ghost{
    border:1px solid #e6e6e6;
    padding:10px 14px;
    border-radius:10px;
    color:var(--muted);
    text-decoration:none
}
footer{
    grid-column:1/-1;
    margin-top:18px;
    color:#9b9b9b;
    font-size:13px
}

@media (max-width:880px){
    .container{
        grid-template-columns:1fr;
        padding: 2rem;
        max-width: 300px
    }
    .icon-box{
        width:100%;
    }
}