:root{
    --carolina:#56A0D3;
    --cg:#007AA5;
    --dark:#071C39;
    --green:#1CC88A;
    --light:#F5FAFD;
    --white:#FFFFFF;
    --gray:#52616B;
}

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

body{
    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:#1d1d1d;
}

header{
    position:fixed;
    top:0;
    width:100%;
    padding:14px 7%;
    background:rgba(7,28,57,.88);
    backdrop-filter:blur(14px);
    z-index:1000;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

header.scrolled{
    background:rgba(7,28,57,.97);
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.brand img{
    width:56px;
    height:56px;
    object-fit:cover;
    border-radius:50%;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.18));
}

.brand h1{
    font-family:'Montserrat',sans-serif;
    font-size:2rem;
    font-weight:900;
    letter-spacing:2px;
    background:linear-gradient(90deg,var(--carolina),var(--cg),#ffffff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.brand span{
    display:block;
    color:#dff7ff;
    font-size:.72rem;
    letter-spacing:1.3px;
}

nav ul{
    display:flex;
    gap:20px;
    list-style:none;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:600;
    font-size:.88rem;
}

.menu-toggle{
    display:none;
    background:transparent;
    border:none;
    color:white;
    font-size:2rem;
    cursor:pointer;
}

/* HERO */
.hero{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
    overflow:hidden;
    color:white;
    background:
    linear-gradient(rgba(7,28,57,.80),rgba(0,122,165,.68)),
    url('../images/hero-ras.png') center/cover;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center, transparent 20%, rgba(7,28,57,.35));
    z-index:1;
}

.hero-content{
    max-width:1100px;
    padding:0 8%;
    position:relative;
    z-index:2;
}

.hero h2{
    font-family:'Montserrat',sans-serif;
    font-size:4rem;
    font-weight:900;
    line-height:1.1;
    margin-bottom:24px;
}

.hero p{
    max-width:900px;
    margin:auto;
    font-size:1.18rem;
    line-height:1.8;
}

.hero-buttons{
    margin-top:36px;
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.btn{
    display:inline-block;
    padding:15px 32px;
    border-radius:50px;
    text-decoration:none;
    color:white;
    font-weight:800;
    transition:.35s;
}

.btn-primary{
    background:linear-gradient(90deg,var(--green),#13b87b);
    box-shadow:0 0 28px rgba(28,200,138,.48);
}

.btn-secondary{
    border:2px solid rgba(255,255,255,.85);
}

.btn:hover{
    transform:translateY(-6px);
}

.bubble{
    position:absolute;
    bottom:-120px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    animation:rise 14s infinite linear;
    z-index:2;
}

@keyframes rise{
    0%{transform:translateY(0);opacity:0}
    20%{opacity:1}
    100%{transform:translateY(-125vh);opacity:0}
}

section{
    padding:95px 8%;
}

.section-title{
    text-align:center;
    margin-bottom:55px;
}

.section-title h2{
    font-family:'Montserrat',sans-serif;
    font-size:2.7rem;
    font-weight:900;
    background:linear-gradient(90deg,var(--carolina),var(--cg));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-title p{
    max-width:850px;
    margin:14px auto 0;
    color:#52616b;
}

/* ABOUT */
.about{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:45px;
    align-items:center;
}

.about-logo{
    background:linear-gradient(145deg,#ffffff,#eef7fb);
    border-radius:30px;
    padding:18px;
    text-align:center;
    box-shadow:0 20px 45px rgba(0,0,0,.11);
}

.about-logo img{
    width:100%;
    min-height:420px;
    object-fit:cover;
    border-radius:24px;
    filter:drop-shadow(0 12px 28px rgba(0,0,0,.14));
}

.about-box{
    background:linear-gradient(135deg,var(--dark),var(--cg));
    color:white;
    border-radius:30px;
    padding:45px;
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

/* CARDS */
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:28px;
}

.card{
    background:rgba(255,255,255,.9);
    border-radius:24px;
    padding:32px;
    box-shadow:0 18px 40px rgba(7,28,57,.10);
    border:1px solid rgba(86,160,211,.18);
    transition:.45s;
}

.card:hover{
    transform:translateY(-12px);
    box-shadow:0 22px 55px rgba(0,122,165,.22);
}

.card h3{
    color:var(--cg);
    margin-bottom:12px;
    font-size:1.22rem;
}

.card .emoji{
    font-size:2rem;
    margin-bottom:12px;
    display:block;
}

/* BUSINESS */
.business{
    background:linear-gradient(135deg,#edf7fb,#ffffff);
}

.business-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}

.business-card{
    position:relative;
    overflow:hidden;
    background:white;
    border-radius:28px;
    padding:34px;
    box-shadow:0 18px 42px rgba(7,28,57,.11);
    border:1px solid rgba(86,160,211,.18);
}

.business-card:before{
    content:"";
    position:absolute;
    right:-45px;
    top:-45px;
    width:140px;
    height:140px;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(86,160,211,.18),rgba(0,122,165,.18));
}

.business-card h3{
    color:#25364a;
    margin-bottom:15px;
}

.business-card ul{
    padding-left:18px;
    color:#5d6b78;
    line-height:1.9;
}

/* SUPPLY */
.supply{
    background:#ffffff;
}

.supply-box{
    background:linear-gradient(135deg,var(--dark),var(--cg));
    border-radius:34px;
    padding:44px;
    color:white;
    box-shadow:0 24px 60px rgba(7,28,57,.22);
}

.supply-tags{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
    margin-top:28px;
}

.supply-tags span{
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.22);
    padding:11px 16px;
    border-radius:30px;
    font-weight:600;
}

/* PROVIDER */
.provider{
    background:#f2f7fa;
}

.provider-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:center;
}

.provider-panel{
    background:white;
    padding:38px;
    border-radius:30px;
    box-shadow:0 18px 42px rgba(7,28,57,.10);
}

.provider-panel h3{
    font-size:1.8rem;
    color:var(--dark);
    margin-bottom:18px;
}

.check-list{
    display:grid;
    gap:12px;
    margin-top:20px;
}

.check-list p{
    background:#f6fbfe;
    border-left:5px solid var(--cg);
    padding:13px 16px;
    border-radius:12px;
    color:#50606f;
}

/* STATS */
.stats{
    background:linear-gradient(135deg,var(--dark),var(--cg));
    color:white;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:24px;
    text-align:center;
}

.stat{
    background:rgba(255,255,255,.12);
    padding:34px;
    border-radius:24px;
    backdrop-filter:blur(10px);
}

.stat h3{
    color:#9de8ff;
    font-size:3rem;
}

/* CATALOG */
.catalog{
    background:white;
}

.catalog-controls{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:35px;
}

.catalog-controls button{
    border:0;
    padding:11px 18px;
    border-radius:25px;
    background:#edf7fb;
    color:#071C39;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.catalog-controls button.active,
.catalog-controls button:hover{
    background:linear-gradient(90deg,var(--carolina),var(--cg));
    color:white;
}

.catalog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
    gap:32px;
}

.product{
    background:white;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 18px 42px rgba(0,0,0,.10);
    transition:.45s;
}

.product:hover{
    transform:translateY(-14px);
    box-shadow:0 25px 60px rgba(0,122,165,.25);
}

.product-img{
    height:310px;
    overflow:hidden;
    background:#eef7fb;
}

.product-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.product:hover img{
    transform:scale(1.1);
}

.product-info{
    padding:26px;
}

.product-info h3{
    color:var(--dark);
    font-size:1.35rem;
    margin-bottom:10px;
}

.product-info p{
    color:#52616b;
    margin-bottom:18px;
}

.quote-btn{
    display:inline-block;
    padding:12px 22px;
    border-radius:35px;
    background:linear-gradient(90deg,var(--carolina),var(--cg));
    color:white;
    text-decoration:none;
    font-weight:800;
}

/* PROJECTS */
.projects{
    background:#edf7fb;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
    gap:32px;
}

.project-card{
    background:white;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 18px 42px rgba(0,0,0,.12);
    transition:.45s;
}

.project-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,122,165,.22);
}

.video-box{
    position:relative;
    background:#000;
    height:470px;
    overflow:hidden;
}

.video-box video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.video-label{
    position:absolute;
    top:18px;
    left:18px;
    background:rgba(7,28,57,.82);
    color:white;
    padding:10px 16px;
    border-radius:22px;
    font-size:.85rem;
    font-weight:800;
    backdrop-filter:blur(10px);
}

.project-info{
    padding:26px;
}

.project-info h3{
    color:var(--dark);
    margin-bottom:10px;
}

.project-info p{
    color:#52616b;
    margin-bottom:18px;
}

/* CONTACT */
.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:36px;
}

.contact-card{
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at top left, rgba(86,160,211,.18), transparent 35%),
      linear-gradient(145deg,#ffffff,#edf3f7);
    color:#2d3748;
    border-radius:32px;
    padding:42px;
    box-shadow:0 24px 55px rgba(7,28,57,.14);
    border:1px solid rgba(255,255,255,.8);
}

.contact-title{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:26px;
}

.contact-title .mark{
    width:14px;
    height:58px;
    border-radius:20px;
    background:linear-gradient(180deg,var(--carolina),var(--cg));
}

.contact-title h3{
    font-family:'Raleway',sans-serif;
    font-size:2rem;
    font-weight:800;
    letter-spacing:.4px;
    color:#3f4b57;
    line-height:1;
}

.contact-title span{
    display:block;
    font-size:.86rem;
    color:#7b8794;
    font-weight:600;
    margin-top:6px;
}

.contact-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 0;
    border-bottom:1px solid rgba(90,105,120,.12);
}

.contact-icon{
    min-width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:900;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.icon-wsp{background:#25D366}
.icon-mail{background:linear-gradient(135deg,#56A0D3,#007AA5)}
.icon-time{background:linear-gradient(135deg,#667085,#344054)}
.icon-ig{background:linear-gradient(135deg,#833AB4,#FD1D1D,#FCAF45)}
.icon-fb{background:#1877F2}
.icon-tt{background:#111827}

.contact-item strong{
    display:block;
    color:#354052;
    font-size:.95rem;
}

.contact-item a,.contact-item p{
    color:#697586;
    text-decoration:none;
    font-size:.95rem;
}

.social-row{
    position:relative;
    display:flex;
    gap:12px;
    margin-top:24px;
    flex-wrap:wrap;
}

.social-pill{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 16px;
    border-radius:30px;
    background:#ffffff;
    color:#4b5563;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(7,28,57,.08);
    font-weight:700;
    font-size:.92rem;
}

.social-dot{
    width:24px;
    height:24px;
    border-radius:50%;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:.8rem;
    font-weight:900;
}

form{
    display:grid;
    gap:16px;
    background:white;
    padding:38px;
    border-radius:30px;
    box-shadow:0 20px 45px rgba(0,0,0,.10);
}

input,select,textarea{
    width:100%;
    padding:15px;
    border:1px solid #dce8ef;
    border-radius:14px;
    font-family:'Poppins',sans-serif;
}

button.submit{
    padding:16px;
    border:0;
    border-radius:35px;
    background:linear-gradient(90deg,var(--green),#16a972);
    color:white;
    font-size:1rem;
    font-weight:900;
    cursor:pointer;
}

footer{
    background:var(--dark);
    color:white;
    text-align:center;
    padding:44px 8%;
}

.advisor-float{
    position:fixed;
    right:24px;
    bottom:24px;
    min-width:74px;
    height:74px;
    padding:0 18px;
    border-radius:50px;
    background:linear-gradient(135deg,var(--cg),var(--dark));
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    z-index:999;
    box-shadow:0 14px 35px rgba(0,0,0,.34), 0 0 0 8px rgba(86,160,211,.14);
    text-decoration:none;
    color:white;
    transition:.35s;
    overflow:hidden;
}

.advisor-float::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:60px;
    border:2px solid rgba(86,160,211,.45);
    animation:pulse 1.8s infinite;
}

@keyframes pulse{
    0%{transform:scale(.92);opacity:.9}
    100%{transform:scale(1.22);opacity:0}
}

.advisor-icon{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:50%;
    background:linear-gradient(135deg,#ffffff,#dff7ff);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--cg);
    position:relative;
    z-index:2;
}

.advisor-icon svg{
    width:30px;
    height:30px;
    fill:var(--cg);
}

.advisor-text{
    position:relative;
    z-index:2;
    max-width:0;
    opacity:0;
    white-space:nowrap;
    overflow:hidden;
    font-size:.9rem;
    font-weight:800;
    transition:.35s;
}

.advisor-float:hover{
    transform:translateY(-5px);
    padding-right:24px;
}

.advisor-float:hover .advisor-text{
    max-width:190px;
    opacity:1;
}

.reveal{
    opacity:0;
    transform:translateY(70px);
    transition:1s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

@media(max-width:900px){
    .menu-toggle{display:block}
    nav ul{
        position:absolute;
        top:84px;
        right:7%;
        background:rgba(7,28,57,.96);
        padding:20px;
        border-radius:18px;
        flex-direction:column;
        display:none;
        width:230px;
    }
    nav ul.open{display:flex}
    .hero h2{font-size:2.45rem}
    .about,.contact-wrapper,.provider-wrap{grid-template-columns:1fr}
    section{padding:78px 6%}
    .video-box{height:520px}
    .advisor-text{display:none}
    .advisor-float{width:74px;padding:0;border-radius:50%}
}


/* Tipografía amigable para marca RAINDROP */
.brand h1{
    font-family:'Nunito Sans', 'Montserrat', sans-serif !important;
    font-weight:900 !important;
    letter-spacing:1px !important;
    text-transform:none !important;
}

.brand span{
    font-family:'Nunito Sans', 'Poppins', sans-serif !important;
    font-weight:800 !important;
    letter-spacing:.8px !important;
    text-transform:none !important;
}


/* V14 Branding */
.brand h1{
 font-family:'Plus Jakarta Sans',sans-serif !important;
 font-weight:800 !important;
 letter-spacing:.5px !important;
 font-size:2.15rem !important;
 background:linear-gradient(90deg,#78C6F0 0%,#2E9DD8 45%,#0B6EA8 100%) !important;
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.brand span{
 font-family:'Plus Jakarta Sans',sans-serif !important;
 font-size:.82rem !important;
 font-weight:700 !important;
 color:#D9F3FF !important;
 letter-spacing:1.4px !important;
}


/* V15 Brand override */
.brand{
 gap:16px;
}
.brand img{
 width:62px!important;
 height:62px!important;
}
.brand h1{
 font-family:'Manrope',sans-serif!important;
 font-size:2.05rem!important;
 font-weight:800!important;
 letter-spacing:2px!important;
 color:#FFFFFF!important;
 background:none!important;
 -webkit-text-fill-color:#FFFFFF!important;
 text-shadow:0 2px 8px rgba(0,0,0,.35)!important;
}
.brand span{
 font-family:'Manrope',sans-serif!important;
 font-size:.74rem!important;
 font-weight:700!important;
 letter-spacing:2.2px!important;
 color:#8FD7FF!important;
 text-transform:uppercase;
}


/* V16 Branding con fuente AMATIC */
.brand{
    gap:16px;
}

.brand img{
    width:62px !important;
    height:62px !important;
}

.brand h1{
    font-family:'Amatic SC', cursive !important;
    font-size:3.25rem !important;
    font-weight:700 !important;
    letter-spacing:3px !important;
    line-height:.9 !important;
    color:#FFFFFF !important;
    background:none !important;
    -webkit-text-fill-color:#FFFFFF !important;
    text-shadow:0 3px 10px rgba(0,0,0,.45) !important;
}

.brand span{
    font-family:'Poppins', sans-serif !important;
    font-size:.72rem !important;
    font-weight:700 !important;
    letter-spacing:1.8px !important;
    color:#8FD7FF !important;
    text-transform:uppercase !important;
    margin-top:4px !important;
    display:block !important;
}


/* V17 Branding con fuente Dancing Script */
.brand{
    gap:16px;
}

.brand img{
    width:62px !important;
    height:62px !important;
}

.brand h1{
    font-family:'Dancing Script', cursive !important;
    font-size:3.05rem !important;
    font-weight:700 !important;
    letter-spacing:.5px !important;
    line-height:.95 !important;
    color:#FFFFFF !important;
    background:none !important;
    -webkit-text-fill-color:#FFFFFF !important;
    text-shadow:0 3px 10px rgba(0,0,0,.45) !important;
}

.brand span{
    font-family:'Dancing Script', cursive !important;
    font-size:1.28rem !important;
    font-weight:700 !important;
    letter-spacing:.4px !important;
    color:#8FD7FF !important;
    text-transform:none !important;
    margin-top:2px !important;
    display:block !important;
    text-shadow:0 2px 8px rgba(0,0,0,.35) !important;
}


/* V18 Branding con fuente Comfortaa Bold */
.brand{
    gap:16px;
}

.brand img{
    width:62px !important;
    height:62px !important;
}

.brand h1{
    font-family:'Comfortaa', cursive !important;
    font-size:2.15rem !important;
    font-weight:700 !important;
    letter-spacing:1.2px !important;
    line-height:1 !important;
    color:#FFFFFF !important;
    background:none !important;
    -webkit-text-fill-color:#FFFFFF !important;
    text-shadow:0 3px 10px rgba(0,0,0,.45) !important;
}

.brand span{
    font-family:'Comfortaa', cursive !important;
    font-size:.72rem !important;
    font-weight:700 !important;
    letter-spacing:.8px !important;
    color:#8FD7FF !important;
    text-transform:none !important;
    margin-top:5px !important;
    display:block !important;
    text-shadow:0 2px 8px rgba(0,0,0,.35) !important;
}