:root{
    --primary:#0ea5a4;
    --primary-dark:#0b7285;
    --secondary:#f59e0b;
    --dark:#06243a;
    --dark-soft:#0c3654;
    --light:#f7fbfd;
    --text:#334155;
    --white:#ffffff;
    --shadow:0 20px 50px rgba(0,0,0,.12);
    --radius:22px;
}

html{
    overflow-x:hidden;
}

body{
    font-family:'Inter',sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,#eefafd 0%,#ffffff 100%);
}

h1,h2,h3,h4,.brand-title,.section-title-main{
    font-family:'Playfair Display',serif;
}

.page-bg{
    position:fixed;
    inset:0;
    background:
        radial-gradient(circle at top left, rgba(14,165,164,.15), transparent 30%),
        radial-gradient(circle at bottom right, rgba(245,158,11,.12), transparent 25%);
    z-index:-1;
}

.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(6,36,58,.82);
    backdrop-filter:blur(12px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.brand-title{
    color:#fff;
    font-size:1.1rem;
    font-weight:800;
    letter-spacing:.05em;
    line-height:1;
}

.brand-subtitle{
    color:rgba(255,255,255,.75);
}

.logo-icon{
    font-size:1.9rem;
}

.navbar .nav-link{
    color:rgba(255,255,255,.92) !important;
    font-weight:600;
}

.navbar .nav-link:hover{
    color:#ffd166 !important;
}

.hero-section{
    min-height:92vh;
    background-size:cover;
    background-position:center;
    color:#fff;
    position:relative;
}

.hero-badge{
    display:inline-block;
    padding:.55rem 1rem;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.2);
    font-weight:600;
    margin-bottom:1rem;
}

.hero-title{
    font-size:clamp(2.6rem,6vw,5rem);
    line-height:1.05;
    margin-bottom:1rem;
}

.hero-text{
    font-size:1.1rem;
    max-width:720px;
    color:rgba(255,255,255,.92);
}

.section-padding{
    padding:6rem 0;
}

.section-soft{
    background:#f6fbfd;
}

.section-gradient{
    background:linear-gradient(135deg, #06243a 0%, #0c4a6e 100%);
}

/* ── About Section ── */
/* ── Floating WhatsApp Button ── */
.whatsapp-float{
    position:fixed;bottom:1.5rem;right:1.5rem;
    width:60px;height:60px;
    background:#25d366;color:#fff;
    border-radius:50%;
    display:flex !important;align-items:center;justify-content:center;
    font-size:1.8rem;
    box-shadow:0 4px 14px rgba(37,211,102,.45);
    z-index:9999;
    transition:transform .25s ease, box-shadow .25s ease;
    text-decoration:none;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}
@media (max-width:767.98px){
    .whatsapp-float{
        width:52px;height:52px;
        bottom:1.2rem;right:1.2rem;
        font-size:1.5rem;
    }
}
.whatsapp-float:hover{
    filter:brightness(1.1);
    box-shadow:0 6px 20px rgba(37,211,102,.6);
    color:#fff;
}

.about-img-wrap{
    position:relative;
    display:inline-block;
}
.about-badge{
    position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
    background:var(--primary);color:#fff;
    font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    padding:.45rem 1.2rem;border-radius:50px;
    white-space:nowrap;box-shadow:0 4px 14px rgba(14,165,164,.4);
}
.about-quote{
    border-left:4px solid var(--primary);
    background:#f0fdfa;
    border-radius:0 var(--radius) var(--radius) 0;
    padding:1.2rem 1.5rem;
    margin:1.5rem 0;
    font-style:italic;
    color:var(--dark);
    font-size:1.05rem;
    line-height:1.6;
    position:relative;
}
.about-quote .bi-quote{
    font-size:1.8rem;color:var(--primary);opacity:.35;
    position:absolute;top:.5rem;left:.8rem;
    font-style:normal;
}
.about-stats{
    display:flex;flex-wrap:wrap;gap:.8rem;
}
.about-stat{
    display:inline-flex;align-items:center;gap:.4rem;
    background:#f0fdfa;border:1px solid #ccfbf1;
    border-radius:50px;padding:.4rem 1rem;
    font-size:.82rem;font-weight:600;color:var(--primary-dark);
}
.about-stat i{
    font-size:.95rem;
}

.section-kicker{
    display:inline-block;
    color:var(--primary-dark);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:.75rem;
    font-size:.82rem;
}

.section-heading{
    max-width:850px;
    margin:0 auto 3rem;
}

.section-title-main{
    font-size:clamp(2rem,4vw,3.2rem);
    color:var(--dark);
    margin-bottom:1rem;
}

.section-subtitle{
    font-size:1.05rem;
    color:#64748b;
}

.info-card,
.feature-card,
.service-card,
.activity-box,
.form-card,
.success-card{
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.info-card{
    background:#fff;
    padding:2rem 1.5rem;
    height:100%;
}

.info-icon{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(14,165,164,.12);
    color:var(--primary-dark);
    font-size:1.4rem;
    margin-bottom:1rem;
}

/* ── Sports Banner ── */
.sports-banner{
    position:relative;
    background:linear-gradient(135deg, var(--dark) 0%, #0b3d5b 50%, var(--primary-dark) 100%);
    border-radius:var(--radius);
    padding:2.2rem 2.5rem;
    overflow:hidden;
}
.sports-banner-deco{
    position:absolute;
    top:-40px;
    right:-40px;
    width:160px;
    height:160px;
    border-radius:50%;
    background:rgba(14,165,164,.15);
    pointer-events:none;
}
.sports-banner-deco::after{
    content:'';
    position:absolute;
    bottom:-60px;
    left:-80px;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(245,158,11,.1);
}
.sports-banner-icon{
    width:64px;
    height:64px;
    min-width:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:rgba(245,158,11,.18);
    color:var(--secondary);
    font-size:1.6rem;
}
.sports-banner-title{
    font-family:'Playfair Display',serif;
    font-size:1.25rem;
    font-weight:700;
    color:#fff;
    margin-bottom:.4rem;
}
.sports-banner-text{
    font-size:.92rem;
    color:rgba(255,255,255,.75);
    line-height:1.6;
    margin-bottom:0;
}
.sports-banner-btn{
    white-space:nowrap;
    color:var(--dark);
    font-size:.9rem;
    border:none;
    transition:transform .2s, box-shadow .2s;
}
.sports-banner-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.2);
    color:var(--primary-dark);
}

/* ── Tip Cards ── */
.tip-card{
    background:#fff;
    padding:2.2rem 1.5rem 1.8rem;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    border:1px solid rgba(0,0,0,.05);
    transition:transform .25s ease, box-shadow .25s ease;
    position:relative;
    overflow:hidden;
}
.tip-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    border-radius:var(--radius) var(--radius) 0 0;
    background:var(--primary);
}
.tip-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 32px rgba(14,165,164,.18);
}

.tip-icon-wrap{
    width:64px;
    height:64px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:1.6rem;
    margin-bottom:1.2rem;
}
.tip-icon--danger{
    background:rgba(239,68,68,.1);
    color:#dc2626;
}
.tip-icon--danger + .tip-title ~ .tip-text{ }
.tip-card:has(.tip-icon--danger)::before{ background:#dc2626; }

.tip-icon--warning{
    background:rgba(245,158,11,.12);
    color:#d97706;
}
.tip-card:has(.tip-icon--warning)::before{ background:#d97706; }

.tip-icon--heat{
    background:rgba(249,115,22,.1);
    color:#ea580c;
}
.tip-card:has(.tip-icon--heat)::before{ background:#ea580c; }

.tip-icon--info{
    background:rgba(14,165,164,.1);
    color:var(--primary-dark);
}

.tip-title{
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:.6rem;
    color:var(--dark);
}

.tip-text{
    font-size:.92rem;
    color:#64748b;
    line-height:1.6;
    margin-bottom:0;
}

/* ── Comparison Cards (Sargazo) ── */
.comparison-card{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:transform .3s ease, box-shadow .3s ease;
}
.comparison-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.15);
}
.comparison-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    display:block;
}
.comparison-badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:2;
    padding:.4rem 1rem;
    border-radius:50px;
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.03em;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.comparison-card--good{
    border:3px solid #22c55e;
}
.comparison-card--real{
    border:3px solid #f59e0b;
}
.sargazo-cta{
    background:#f0fdf4;
    border:1px solid #bbf7d0;
    border-radius:50px;
    padding:.8rem 1.6rem;
}

.feature-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    padding:2rem 1.5rem;
    backdrop-filter:blur(8px);
}

.feature-card p{
    color:rgba(255,255,255,.78);
}

.feature-icon{
    font-size:2rem;
    color:#ffd166;
    margin-bottom:1rem;
}

/* ── Section Services BG ── */
.section-services{
    background:linear-gradient(180deg, #f0fdfa 0%, #f7fbfd 100%);
    position:relative;
}
.section-services::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
}

/* ── Services Cards ── */
.svc-card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:0 4px 20px rgba(6,36,58,.06);
    overflow:hidden;
    transition:transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease;
    border-bottom:3px solid transparent;
}
.svc-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(14,165,164,.18), 0 8px 16px rgba(0,0,0,.06);
    border-bottom-color:var(--primary);
}
.svc-card-img{
    position:relative;
    overflow:hidden;
    height:240px;
}
.svc-card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .6s cubic-bezier(.25,.46,.45,.94);
}
.svc-card:hover .svc-card-img img{
    transform:scale(1.1);
}
.svc-card-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(6,36,58,.55) 100%);
    pointer-events:none;
    transition:opacity .4s ease;
}
.svc-card:hover .svc-card-overlay{
    background:linear-gradient(180deg, transparent 30%, rgba(14,165,164,.4) 100%);
}
.svc-card-badge{
    position:absolute;
    top:16px;
    left:16px;
    background:rgba(14,165,164,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    color:#fff;
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    padding:.45rem 1.1rem;
    border-radius:50px;
    z-index:2;
    box-shadow:0 4px 14px rgba(14,165,164,.3);
    transition:transform .3s ease, box-shadow .3s ease;
}
.svc-card:hover .svc-card-badge{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(14,165,164,.4);
}
.svc-card-body{
    padding:1.6rem 1.5rem 1.8rem;
    display:flex;
    flex-direction:column;
}
.svc-card-title{
    font-size:1.2rem;
    font-weight:700;
    color:var(--dark);
    margin-bottom:.6rem;
    font-family:'Playfair Display',serif;
    transition:color .3s ease;
}
.svc-card:hover .svc-card-title{
    color:var(--primary-dark);
}
.svc-card-text{
    font-size:.9rem;
    color:#64748b;
    line-height:1.7;
    flex-grow:1;
}
.svc-card-cta{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.88rem;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
    margin-top:.8rem;
    transition:color .25s, gap .25s;
}
.svc-card-cta i{
    font-size:.82rem;
    transition:transform .3s ease;
}
.svc-card:hover .svc-card-cta{
    color:var(--primary-dark);
    gap:.65rem;
}
.svc-card:hover .svc-card-cta i{
    transform:translateX(4px);
}

.activity-box{
    background:#fff;
    padding:2rem;
    height:100%;
}

.activity-links{
    list-style:none;
    padding-left:0;
    margin-bottom:0;
}

.activity-links li{
    margin-bottom:.75rem;
}

.activity-links a{
    color:var(--primary-dark);
    text-decoration:none;
    font-weight:600;
}

.activity-links a:hover{
    color:var(--secondary);
}

/* ── Activity Cards v2 ── */
.act-card{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
    border:1px solid rgba(0,0,0,.05);
    transition:transform .25s ease, box-shadow .25s ease;
}
.act-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.act-card-header{
    padding:1.1rem 1.5rem;
    font-family:var(--font-heading);
    font-weight:700;
    font-size:1.05rem;
    color:#fff;
    display:flex;
    align-items:center;
}
.act-header--primary{
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.act-header--secondary{
    background:linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.act-header--dark{
    background:linear-gradient(135deg, #06243a 0%, #0c4a6e 100%);
}

.act-card-body{
    padding:1.5rem;
}

.act-list{
    list-style:none;
    padding:0;
    margin:0;
}
.act-list li{
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:.7rem 0;
    border-bottom:1px solid #f1f5f9;
}
.act-list li:last-child{
    border-bottom:none;
}

.act-num{
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(14,165,164,.12);
    color:var(--primary-dark);
    font-weight:700;
    font-size:.82rem;
    flex-shrink:0;
}
.act-num--amber{
    background:rgba(217,119,6,.1);
    color:#b45309;
}

.act-list a{
    color:var(--dark);
    text-decoration:none;
    font-weight:600;
    transition:color .2s;
}
.act-list a:hover{
    color:var(--primary);
}
.act-list a::after{
    content:'\F1C5';
    font-family:'bootstrap-icons';
    margin-left:.4rem;
    font-size:.7rem;
    opacity:.4;
}

.act-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}
.act-tag{
    display:inline-flex;
    align-items:center;
    padding:.45rem .9rem;
    background:#f0f9ff;
    border:1px solid #bae6fd;
    border-radius:50px;
    font-size:.84rem;
    font-weight:500;
    color:#0c4a6e;
    transition:background .2s, border-color .2s;
}
.act-tag:hover{
    background:#e0f2fe;
    border-color:#7dd3fc;
}

.form-card{
    background:#fff;
    padding:2.5rem;
    border-radius:var(--radius);
    border:1px solid #d0d9e0;
    box-shadow:0 4px 24px rgba(0,0,0,.08);
}

.form-control,
.form-select{
    border-radius:14px;
    padding:.85rem 1rem;
    border:2px solid #b0bec5;
    background-color:#fafbfc;
    transition:border-color .2s, box-shadow .2s;
}

.form-control:focus,
.form-select:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(10,77,104,.15);
    background-color:#fff;
}

.form-control::placeholder{
    color:#9ca8b3;
}

.form-check-input{
    width:1.25em;
    height:1.25em;
    border:2px solid #b0bec5;
    cursor:pointer;
}

.form-check-input:checked{
    background-color:var(--primary);
    border-color:var(--primary);
}

.form-check-label{
    cursor:pointer;
    padding-top:2px;
}

.form-label{
    font-weight:600;
    color:#2c3e50;
    margin-bottom:.4rem;
}

textarea.form-control{
    min-height:130px;
}

.contact-section{
    background:linear-gradient(135deg,#06243a 0%,#0b4d63 100%);
}

.contact-info-card{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius);
    padding:2.5rem 1.8rem 2rem;
    backdrop-filter:blur(8px);
    transition:transform .3s ease, box-shadow .3s ease;
}
.contact-info-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 32px rgba(14,165,164,.25);
}
.contact-info-icon{
    width:64px;height:64px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1.6rem;margin-bottom:1rem;
}
.contact-info-icon--gold{
    background:rgba(255,209,102,.15);color:#ffd166;
}
.contact-info-icon--turquesa{
    background:rgba(14,165,164,.15);color:var(--primary);
}
.contact-info-icon--green{
    background:rgba(37,211,102,.15);color:#25d366;
}
.contact-info-title{
    font-family:var(--font-heading);font-size:1.15rem;color:#fff;margin-bottom:.5rem;
}
.contact-info-price{
    font-family:var(--font-heading);font-size:2.2rem;font-weight:700;
    color:#fff;margin-bottom:.5rem;line-height:1.1;
}
.contact-info-price sup{
    font-size:.55em;vertical-align:super;
}
.contact-info-text{
    font-size:.92rem;color:rgba(255,255,255,.55);line-height:1.6;
    margin-bottom:0;
}
@media (max-width:767.98px){
    .contact-info-card{padding:1.2rem .8rem .8rem;}
    .contact-info-icon{width:44px;height:44px;font-size:1.1rem;margin-bottom:.6rem;}
    .contact-info-title{font-size:.8rem;}
    .contact-info-price{font-size:1.3rem;}
    .contact-info-price sup{font-size:.5em;}
    .contact-info-text{font-size:.72rem;line-height:1.4;}
}

.success-card{
    max-width:760px;
    background:#fff;
    padding:3rem 2rem;
}

.success-icon i{
    font-size:4.5rem;
    color:#22c55e;
}

/* ── Policy Card ── */
.policy-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:var(--radius);
    padding:3rem 2.5rem;
    box-shadow:0 4px 24px rgba(0,0,0,.06);
    position:relative;
    overflow:hidden;
}
.policy-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg, var(--primary), #ffd166);
}

.policy-icon-wrap{
    width:72px;
    height:72px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(14,165,164,.1);
    color:var(--primary-dark);
    font-size:1.8rem;
    margin-bottom:1.2rem;
}

.policy-text{
    font-size:1.05rem;
    color:#64748b;
    line-height:1.7;
    max-width:600px;
    margin:0 auto;
}

.policy-divider{
    border:none;
    height:1px;
    background:linear-gradient(90deg, transparent, #cbd5e1, transparent);
    margin:1.8rem 0;
}

.policy-details span{
    font-size:.92rem;
    font-weight:600;
    color:var(--dark);
}

/* ── Policy Card Dark (inside contact section) ── */
.policy-card-dark{
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--radius);
    padding:2.5rem 2rem;
    position:relative;
    overflow:hidden;
}
.policy-card-dark::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    background:linear-gradient(90deg, var(--primary), var(--secondary));
}
.policy-dark-icon{
    width:64px;height:64px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:rgba(14,165,164,.2);
    color:var(--primary);
    font-size:1.6rem;
    margin-bottom:1rem;
}
.policy-dark-text{
    font-size:1.05rem;
    color:rgba(255,255,255,.92);
    line-height:1.7;
    max-width:580px;
    margin:0 auto;
}
.policy-dark-divider{
    border:none;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    margin:1.5rem 0;
}
.policy-dark-badge{
    font-size:.92rem;
    font-weight:600;
    color:#fff;
}
.policy-dark-badge i{
    color:var(--primary);
}

.site-footer{
    background:#041723;
    color:rgba(255,255,255,.8);
}

.footer-title,
.footer-heading{
    color:#fff;
}

.footer-links a{
    color:rgba(255,255,255,.82);
    text-decoration:none;
}

.footer-links a:hover{
    color:#ffd166;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    background:#03111a;
}

@media (max-width: 991.98px){
    .hero-section{
        min-height:80vh;
        padding:4rem 0;
    }

    .section-padding{
        padding:4.5rem 0;
    }
}

/* ── Scroll Reveal Animations ── */
.reveal{
    opacity:0;
    transition:opacity .8s ease, transform .8s ease;
}
.reveal.fade-up{
    transform:translateY(50px);
}
.reveal.fade-down{
    transform:translateY(-50px);
}
.reveal.fade-left{
    transform:translateX(-60px);
}
.reveal.fade-right{
    transform:translateX(60px);
}
.reveal.scale-up{
    transform:scale(.85);
}
.reveal.active{
    opacity:1;
    transform:translate(0) scale(1);
}
/* stagger delays for child cards */
.reveal.delay-1{transition-delay:.1s}
.reveal.delay-2{transition-delay:.2s}
.reveal.delay-3{transition-delay:.25s}
.reveal.delay-4{transition-delay:.35s}
.reveal.delay-5{transition-delay:.45s}
.reveal.delay-6{transition-delay:.55s}

@media (prefers-reduced-motion: reduce){
    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}