@import url('variables.css');
@import url('header.css');
@import url('hero.css');
@import url('symptoms.css');
@import url('ia.css');
@import url('analysis.css');
@import url('about.css');

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:var(--bg);
color:white;
overflow-x:hidden;
}

.container{
width:90%;
max-width:1400px;
margin:auto;
}
/* ==================================
   BOTÓN FLOTANTE MESSENGER
================================== */

.messenger-float{
    position:fixed;
    right:25px;
    bottom:25px;

    width:70px;
    height:70px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #1877F2,
        #0084FF
    );

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
    0 10px 30px rgba(24,119,242,.45);

    z-index:9999;

    transition:.3s;
}

.messenger-float:hover{
    transform:scale(1.08);
}

.messenger-float::before{

    content:'Agenda tu cita';

    position:absolute;

    right:85px;

    background:#fff;

    color:#04122B;

    padding:10px 15px;

    border-radius:10px;

    white-space:nowrap;

    font-size:14px;

    font-weight:600;

    opacity:0;

    visibility:hidden;

    transition:.3s;
}

.messenger-float:hover::before{

    opacity:1;

    visibility:visible;
}

@media(max-width:768px){

    .messenger-float{

        width:60px;
        height:60px;

        right:15px;
        bottom:15px;
    }

    .messenger-float::before{
        display:none;
    }
}