:root{
    --primary:#004ea9;
    --primary-dark:#004ea9;
    --primary-light:#d9edf6;

    --background:#f4f7f9;
    --surface:rgba(255,255,255,.88);
    --surface-solid:#ffffff;
    --surface-light:#eef5f8;

    --border:rgba(7,56,77,.10);
    --border-primary:rgba(112,164,189,.35);

    --text:#004ea9;
    --text-secondary:#5f7480;
    --text-muted:#8a9aa3;

    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:28px;

    --shadow:0 18px 45px rgba(7,56,77,.10);
    --shadow-blue:0 12px 35px rgba(112,164,189,.22);
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--background);
    color:var(--text);
    font-family:"League Spartan",sans-serif;
    overflow-x:hidden;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
    radial-gradient(circle at 15% 20%, rgba(112,164,189,.18), transparent 30%),
    radial-gradient(circle at 85% 40%, rgba(112,164,189,.10), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(112,164,189,.12), transparent 35%);
    pointer-events:none;
    z-index:-1;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

.header{
    width:100%;
    position:fixed;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
}

.nav-bar{
    max-width:1240px;
    margin:0 auto;
    padding:18px 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
}

/* .logo: veja o bloco "REFINAMENTOS DE DESIGN" no final do arquivo */

.navegacao{
    display:flex;
    align-items:center;
    gap:24px;
}

.navegacao a{
    color:var(--text-secondary);
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.navegacao a:hover{
    color:var(--primary-dark);
}

.btn-topo{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--primary);
    color:white;
    padding:11px 18px;
    border-radius:999px;
    font-weight:700;
    transition:.3s;
    white-space:nowrap;
}

.btn-topo:hover{
    box-shadow:var(--shadow-blue);
    transform:translateY(-2px);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px 26px;
    border-radius:var(--radius-sm);
    font-weight:700;
    transition:.3s;
}

.btn-primary{
    background:var(--primary);
    color:white;
}

.btn-primary:hover{
    box-shadow:var(--shadow-blue);
    transform:translateY(-3px);
}

.btn-outline{
    border:1px solid var(--border-primary);
    color:var(--primary-dark);
    background:rgba(112,164,189,.09);
}

.btn-outline:hover{
    background:rgba(112,164,189,.16);
    transform:translateY(-3px);
}

.hero{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    padding:150px 32px 90px;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(244,247,249,.98),
        rgba(244,247,249,.86),
        rgba(244,247,249,.55)
    ),
    url("../img/coelho-banner.jpg") center/cover no-repeat;
    animation:slowZoom 18s ease-in-out infinite alternate;
    z-index:-3;
}

.hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:230px;
    background:linear-gradient(transparent,var(--background));
    z-index:-2;
}

.hero-blur{
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(112,164,189,.22);
    filter:blur(90px);
    z-index:-1;
}

.hero-blur-1{
    top:18%;
    left:-160px;
}

.hero-blur-2{
    right:-180px;
    bottom:10%;
}

.hero-wrapper{
    max-width:1240px;
    width:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:60px;
    align-items:center;
}

.hero-content{
    width:100%;
}

.tag,
.section-label{
    color:var(--primary-dark);
    text-transform:uppercase;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:16px;
}

.hero h1{
    max-width:760px;
    font-size:clamp(46px,6vw,86px);
    line-height:.96;
    letter-spacing:-6px;
    margin-bottom:26px;
    color:var(--text);
}

.hero-text{
    max-width:640px;
    color:var(--text-secondary);
    font-size:19px;
    line-height:1.7;
}

.hero-buttons{
    display:flex;
    gap:16px;
    margin-top:36px;
    flex-wrap:wrap;
}

.hero-mini-infos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:38px;
    max-width:680px;
}

.hero-mini-infos div{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow);
}

.hero-mini-infos strong{
    display:block;
    color:var(--primary-dark);
    font-size:16px;
    margin-bottom:5px;
}

.hero-mini-infos span{
    color:var(--text-secondary);
    font-size:13px;
}

.hero-visual{
    position:relative;
}

.hero-image-card{
    position:relative;
    border-radius:32px;
    overflow:hidden;
    border:1px solid var(--border-primary);
    box-shadow:var(--shadow);
    min-height:520px;
    background:var(--surface);
}

.hero-image-card img{
    width:100%;
    height:100%;
    min-height:520px;
    object-fit:cover;
}

.hero-image-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.28)
    );
}

.hero-image-badge{
    position:absolute;
    left:24px;
    bottom:24px;
    z-index:2;
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.86);
    color:#17313f;
    font-weight:800;
    box-shadow:0 12px 28px rgba(0,0,0,.16);
    backdrop-filter:blur(12px);
}

.hero-image-badge i{
    color:var(--primary-dark);
    font-size:20px;
}

.scroll-indicator{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text-secondary);
    font-size:13px;
    font-weight:700;
}

.scroll-indicator span{
    width:18px;
    height:30px;
    border:2px solid var(--primary-dark);
    border-radius:999px;
    position:relative;
}

.scroll-indicator span::before{
    content:"";
    position:absolute;
    top:6px;
    left:50%;
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--primary-dark);
    transform:translateX(-50%);
    animation:scrollDot 1.4s infinite;
}

@keyframes scrollDot{
    0%{
        opacity:1;
        transform:translate(-50%,0);
    }

    100%{
        opacity:0;
        transform:translate(-50%,11px);
    }
}

body.tema-escuro .hero-bg{
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.96),
        rgba(0,0,0,.76),
        rgba(0,0,0,.36)
    ),
    url("../img/coelho-banner.jpg") center/cover no-repeat;
}

body.tema-escuro .hero-image-badge{
    background:rgba(18,18,18,.78);
    color:white;
    border:1px solid var(--border);
}

body.tema-escuro .hero-image-card::after{
    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.55)
    );
}

@media(max-width:1050px){

    .hero{
        min-height:auto;
        padding:135px 24px 80px;
    }

    .hero-wrapper{
        grid-template-columns:1fr;
        gap:44px;
    }

    .hero-visual{
        order:2;
    }

    .hero-image-card,
    .hero-image-card img{
        min-height:380px;
    }

}

@media(max-width:700px){

    .hero{
        padding:120px 22px 70px;
    }

    .hero h1{
        font-size:clamp(42px,14vw,62px);
        letter-spacing:-2px;
    }

    .hero-text{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .hero-mini-infos{
        grid-template-columns:1fr;
    }

    .hero-image-card,
    .hero-image-card img{
        min-height:320px;
    }

    .hero-image-badge{
        left:16px;
        right:16px;
        justify-content:center;
        text-align:center;
    }

    .scroll-indicator{
        display:none;
    }

}

.section{
    max-width:1240px;
    margin:110px auto;
    padding:0 32px;
}

.section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 52px;
}

.section-title h2{
    font-size:clamp(32px,4vw,52px);
    line-height:1.05;
    letter-spacing:-2px;
    margin-bottom:14px;
    color:#004ea9;
}

.section-title span{
    color:var(--text-secondary);
    font-size:18px;
    line-height:1.6;
}

.sobre-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:32px;
    align-items:stretch;
}

.sobre-image{
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:1px solid var(--border);
    min-height:460px;
    box-shadow:var(--shadow);
}

.sobre-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.sobre-info{
    background:var(--surface);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    box-shadow:var(--shadow);
}

.sobre-info p{
    color:var(--text-secondary);
    line-height:1.8;
    margin-bottom:18px;
}

.sobre-lista{
    display:grid;
    gap:14px;
    margin-top:18px;
}

.sobre-lista div{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    background:var(--surface-light);
}

.sobre-lista i{
    color:var(--primary-dark);
    font-size:22px;
}

.racas-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.cuidados-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.raca-card,
.cuidado{
    background:var(--surface);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:30px;
    transition:.3s;
    box-shadow:var(--shadow);
}

.raca-card:hover,
.cuidado:hover{
    transform:translateY(-8px);
    border-color:var(--border-primary);
    box-shadow:var(--shadow-blue);
}

.raca-card i,
.cuidado i{
    color:var(--primary-dark);
    font-size:34px;
    margin-bottom:22px;
}

.raca-card h3,
.cuidado h3{
    font-size:22px;
    margin-bottom:12px;
    color:var(--text);
}

.raca-card p,
.cuidado p{
    color:var(--text-secondary);
    line-height:1.7;
}

.cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.filhotes-grid{
    align-items:stretch;
}

.coelho-card{
    background:var(--surface);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:26px;
    overflow:hidden;
    transition:.35s;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
}

.coelho-card:hover{
    transform:translateY(-10px);
    border-color:var(--border-primary);
    box-shadow:var(--shadow-blue);
}

.coelho-card-destaque{
    border-color:var(--border-primary);
}

.coelho-image{
    height:270px;
    position:relative;
    overflow:hidden;
}

.coelho-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.22)
    );
    z-index:1;
}

.coelho-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s;
}

.coelho-card:hover .coelho-image img{
    transform:scale(1.08);
}

.badge{
    position:absolute;
    top:16px;
    left:16px;
    z-index:2;
    color:white;
    padding:8px 13px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.badge-disponivel{
    background-color: #38747c;
}

.badge-reserva{
    background:#8b5cf6;
}

.badge-indisponivel{
    background:#bb533a;
}

.coelho-content{
    padding:24px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.coelho-topo{
    margin-bottom:18px;
}

.coelho-topo h3{
    font-size:24px;
    margin-bottom:6px;
    color:var(--text);
}

.coelho-topo span{
    color:var(--primary-dark);
    font-weight:800;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.coelho-details{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:11px;
    margin-bottom:18px;
}

.coelho-details span{
    color:var(--text-secondary);
    font-size:14px;
    padding:10px;
    border-radius:12px;
    background:rgba(112,164,189,.08);
}

.coelho-details i{
    color:var(--primary-dark);
    margin-right:5px;
}

.coelho-descricao{
    color:var(--text-secondary);
    line-height:1.7;
    font-size:14px;
    margin-bottom:24px;
}

.coelho-footer{
    margin-top:auto;
}

.coelho-content strong{
    display:block;
    color:var(--primary-dark);
    font-size:22px;
    margin-bottom:16px;
}

.btn-card{
    display:block;
    text-align:center;
    padding:14px;
    border-radius:14px;
    background:var(--primary);
    color:white;
    font-weight:800;
    transition:.3s;
}

.btn-card:hover{
    box-shadow:var(--shadow-blue);
    transform:translateY(-2px);
}

body.tema-escuro .coelho-details span{
    background:rgba(255,255,255,.04);
}

body.tema-escuro .coelho-topo span,
body.tema-escuro .coelho-details i,
body.tema-escuro .coelho-content strong{
    color:var(--primary);
}

body.tema-escuro .btn-card{
    color:#050505;
}

@media(max-width:1050px){

    .cards{
        grid-template-columns:1fr;
    }

    .coelho-image{
        height:320px;
    }

}

@media(max-width:700px){

    .coelho-card{
        border-radius:22px;
    }

    .coelho-image{
        height:260px;
    }

    .coelho-content{
        padding:20px;
    }

    .coelho-details{
        grid-template-columns:1fr;
    }

    .coelho-topo h3{
        font-size:22px;
    }

}

.depoimentos-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.depoimento{
    background:var(--surface);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:30px;
    box-shadow:var(--shadow);
}

.stars{
    color:var(--primary-dark);
    margin-bottom:18px;
    letter-spacing:3px;
}

.depoimento p{
    color:var(--text-secondary);
    line-height:1.7;
    margin-bottom:20px;
}

.depoimento strong{
    color:var(--text);
}

.cta{
    max-width:1240px;
    margin:110px auto;
    padding:72px 32px;
    text-align:center;
    border-radius:var(--radius-lg);
    border:1px solid var(--border-primary);
    background:
    linear-gradient(135deg, rgba(112,164,189,.22), rgba(255,255,255,.92)),
    var(--surface-solid);
    box-shadow:var(--shadow);
}

.cta h2{
    font-size:clamp(32px,4vw,54px);
    letter-spacing:-2px;
    margin-bottom:16px;
    color:var(--text);
}

.cta p{
    color:var(--text-secondary);
    font-size:18px;
    margin-bottom:32px;
}

.footer{
    border-top:1px solid var(--border);
    background:#ffffff;
    padding:60px 32px 24px;
}

.footer-grid{
    max-width:1240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.4fr .7fr 1fr;
    gap:40px;
}

.footer p{
    color:var(--text-secondary);
    line-height:1.7;
    margin-top:16px;
}

.footer h4{
    margin-bottom:18px;
    color:var(--text);
}

.footer a:not(.logo){
    display:block;
    color:var(--text-secondary);
    margin-bottom:10px;
    transition:.3s;
}

.footer a:hover{
    color:var(--primary-dark);
}

.footer i{
    color:var(--primary-dark);
    margin-right:8px;
}

.footer-bottom{
    max-width:1240px;
    margin:40px auto 0;
    padding-top:24px;
    border-top:1px solid var(--border);
    text-align:center;
}

.theme-toggle{
    width:58px;
    height:32px;
    border:1px solid var(--border-primary);
    border-radius:999px;
    background:rgba(112,164,189,.12);
    padding:3px;
    cursor:pointer;
    display:flex;
    align-items:center;
    transition:.35s;
}

.theme-toggle:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-blue);
}

.theme-toggle-ball{
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--primary);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    transition:.35s;
}

.theme-toggle.ativo{
    background:rgba(112,164,189,.25);
}

.theme-toggle.ativo .theme-toggle-ball{
    transform:translateX(26px);
    background:var(--primary-dark);
    color:white;
}

body,
.header,
.hero-specs,
.sobre-info,
.raca-card,
.cuidado,
.coelho-card,
.depoimento,
.cta,
.footer,
.btn,
.btn-card,
.btn-topo{
    transition:
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

body.tema-escuro{
    --primary:#004ea9;
    --primary-dark:#385a81;
    --primary-light:#76a4d8;

    --background:#070707;
    --surface:rgba(18,18,18,.78);
    --surface-solid:#121212;
    --surface-light:#1a1a1a;

    --border:rgba(255,255,255,.09);
    --border-primary:rgba(112,164,189,.35);

    --text:#ffffff;
    --text-secondary:#bdbdbd;
    --text-muted:#777777;

    --shadow:0 20px 50px rgba(0,0,0,.45);
    --shadow-blue:0 0 35px rgba(112,164,189,.18);
}

body.tema-escuro::before{
    background:
    radial-gradient(circle at 15% 20%, rgba(112,164,189,.14), transparent 30%),
    radial-gradient(circle at 85% 40%, rgba(112,164,189,.08), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(112,164,189,.08), transparent 35%);
}

body.tema-escuro .header{
    background:rgba(7,7,7,.72);
}

body.tema-escuro .navegacao a:hover,
body.tema-escuro .tag,
body.tema-escuro .section-label,
body.tema-escuro .hero-specs strong,
body.tema-escuro .sobre-lista i,
body.tema-escuro .raca-card i,
body.tema-escuro .cuidado i,
body.tema-escuro .coelho-details i,
body.tema-escuro .coelho-content strong,
body.tema-escuro .stars,
body.tema-escuro .footer a:hover,
body.tema-escuro .footer i{
    color:var(--primary);
}

body.tema-escuro .btn-topo,
body.tema-escuro .btn-primary,
body.tema-escuro .btn-card{
    color:#050505;
}

body.tema-escuro .btn-outline{
    color:var(--primary-light);
    background:rgba(112,164,189,.06);
}

body.tema-escuro .hero-bg{
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.96),
        rgba(0,0,0,.72),
        rgba(0,0,0,.35)
    ),
    url("../img/coelho-banner.jpg") center/cover no-repeat;
}

body.tema-escuro .hero::after{
    background:linear-gradient(transparent,var(--background));
}

body.tema-escuro .hero-specs{
    background:rgba(18,18,18,.62);
    box-shadow:none;
}

body.tema-escuro .sobre-lista div{
    background:rgba(255,255,255,.03);
}

body.tema-escuro .badge{
    color:#050505;
}

body.tema-escuro .cta{
    background:
    linear-gradient(135deg, rgba(112,164,189,.2), rgba(18,18,18,.88)),
    var(--surface-solid);
}

body.tema-escuro .footer{
    background:#050505;
}

@keyframes slowZoom{
    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }
}

@media(max-width:1050px){
    .navegacao{
        display:none;
    }

    .sobre-grid,
    .cards,
    .depoimentos-grid{
        grid-template-columns:1fr;
    }

    .racas-grid,
    .cuidados-grid,
    .hero-specs{
        grid-template-columns:repeat(4,1fr);
    }

    .hero-specs div:nth-child(2){
        border-right:none;
    }

    .hero-specs div{
        border-bottom:1px solid var(--border);
    }

    .hero-specs div:nth-child(3),
    .hero-specs div:nth-child(4){
        border-bottom:none;
    }
}

@media(max-width:700px){
    .btn-topo{
        display:none;
    }

    .nav-bar{
        padding:16px 22px;
    }

    .hero{
        padding:130px 22px 60px;
    }

    .hero h1{
        letter-spacing:-2px;
    }

    .hero-text{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .hero-specs{
        grid-template-columns:1fr;
        margin-top:40px;
    }

    .hero-specs div{
        border-right:none;
        border-bottom:1px solid var(--border);
        padding:18px;
    }

    .hero-specs div:last-child{
        border-bottom:none;
    }

    .section{
        margin:80px auto;
        padding:0 22px;
    }

    .sobre-info,
    .raca-card,
    .cuidado,
    .depoimento{
        padding:24px;
    }

    .sobre-image{
        min-height:280px;
    }

    .coelho-details,
    .racas-grid,
    .cuidados-grid{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .cta{
        margin:80px 22px;
        padding:50px 24px;
    }
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

.btn-instagram{
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary-dark);
    background:rgba(112,164,189,.12);
    border:1px solid var(--border-primary);
    transition:.3s;
}

.btn-instagram:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-blue);
}

.menu-toggle{
    display:none;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:white;
    font-size:25px;
    cursor:pointer;
}

.mobile-menu{
    display:none;
}

.whatsapp-float{
    position:fixed;
    right:24px;
    bottom:24px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:#25D366;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    z-index:999;
    box-shadow:0 10px 28px rgba(37,211,102,.35);
    transition:.3s;
}

.whatsapp-float:hover{
    transform:translateY(-4px) scale(1.04);
}

@media(max-width:1050px){

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .navegacao{
        display:none;
    }

    .btn-topo{
        display:none;
    }

    .mobile-menu{
        position:fixed;
        top:76px;
        left:22px;
        right:22px;
        display:flex;
        flex-direction:column;
        gap:10px;
        padding:18px;
        background:var(--surface);
        border:1px solid var(--border);
        border-radius:22px;
        box-shadow:var(--shadow);
        backdrop-filter:blur(18px);
        z-index:49;
        opacity:0;
        pointer-events:none;
        transform:translateY(-12px);
        transition:.3s;
    }

    .mobile-menu.ativo{
        opacity:1;
        pointer-events:auto;
        transform:translateY(0);
    }

    .mobile-menu a{
        padding:13px 14px;
        border-radius:14px;
        color:var(--text);
        font-weight:700;
        background:rgba(112,164,189,.08);
    }

    .mobile-social{
        color:var(--primary-dark) !important;
    }

}

@media(max-width:700px){

    .btn-instagram{
        display:none;
    }

    .whatsapp-float{
        width:54px;
        height:54px;
        right:18px;
        bottom:18px;
        font-size:28px;
    }

}

@media(max-width:700px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .header{
        width:100%;
        overflow:hidden;
    }

    .nav-bar{
        width:100%;
        max-width:100%;
        padding:14px 14px;
        gap:10px;
    }

    .nav-actions{
        margin-left:auto;
        flex-shrink:0;
        gap:8px;
    }

    .theme-toggle{
        width:52px;
        height:30px;
        flex-shrink:0;
    }

    .menu-toggle{
        width:42px;
        height:42px;
        flex-shrink:0;
    }

    .hero,
    .section,
    .cta,
    .footer{
        max-width:100%;
        overflow:hidden;
    }

}

@media(max-width:700px){

    .hero{

        padding:112px 18px 64px;

        min-height:auto;

    }

    .hero-wrapper{

        display:flex;

        flex-direction:column;

        gap:32px;

    }

    .hero-content{

        text-align:left;

    }

    .tag{

        font-size:11px;

        letter-spacing:1.5px;

        margin-bottom:14px;

    }

    .hero h1{

        font-size:clamp(42px, 13vw, 58px);

        line-height:.98;

        letter-spacing:-2px;

        margin-bottom:20px;

    }

    .hero-text{

        font-size:15.5px;

        line-height:1.65;

    }

    .hero-buttons{

        margin-top:28px;

        gap:12px;

    }

    .hero-mini-infos{

        grid-template-columns:1fr;

        gap:10px;

        margin-top:28px;

    }

    .hero-mini-infos div{

        padding:14px 16px;

        border-radius:16px;

    }

    .hero-mini-infos strong{

        font-size:15px;

    }

    .hero-mini-infos span{

        font-size:12.5px;

    }

    .hero-visual{

        width:100%;

        order:2;

    }

    .hero-image-card{

        min-height:300px;

        border-radius:26px;

    }

    .hero-image-card img{

        min-height:300px;

    }

    .hero-image-badge{

        left:14px;

        right:14px;

        bottom:14px;

        justify-content:center;

        text-align:center;

        padding:12px 14px;

        font-size:13px;

    }

    .scroll-indicator{

        display:none;

    }
    
    .sobre-image{
        display: none;
    }
}

/* =========================
   POR QUE ESCOLHER
========================= */

.escolher-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.escolher-card{
    position:relative;
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:26px;
    padding:32px 26px;
    box-shadow:var(--shadow);
    transition:.35s;
}

.escolher-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,var(--primary),var(--primary-dark));
}

.escolher-card::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(112,164,189,.16);
    filter:blur(35px);
    right:-45px;
    top:-45px;
    opacity:0;
    transition:.35s;
}

.escolher-card:hover{
    transform:translateY(-8px);
    border-color:var(--border-primary);
    box-shadow:var(--shadow-blue);
}

.escolher-card:hover::after{
    opacity:1;
}

.escolher-icon{
    width:64px;
    height:64px;
    border-radius:22px;
    background:rgba(112,164,189,.13);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:24px;
    color:var(--primary-dark);
    font-size:30px;
    transition:.35s;
}

.escolher-card:hover .escolher-icon{
    transform:scale(1.08) rotate(-3deg);
    background:var(--primary);
    color:white;
}

.escolher-card h3{
    color:var(--text);
    font-size:22px;
    margin-bottom:14px;
}

.escolher-card p{
    color:var(--text-secondary);
    line-height:1.7;
    font-size:15px;
}

body.tema-escuro .escolher-icon{
    color:var(--primary);
    background:rgba(112,164,189,.12);
}

body.tema-escuro .escolher-card:hover .escolher-icon{
    color:#050505;
    background:var(--primary);
}

/* =========================
   DEPOIMENTOS PREMIUM
========================= */

.depoimentos-carousel{
    max-width:860px;
    margin:0 auto;
    position:relative;
    min-height:360px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.depoimento-premium{
    display:none;
    width:100%;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:32px;
    padding:46px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    text-align:center;
    animation:depoimentoFade .45s ease;
}

.depoimento-premium.ativo{
    display:block;
}

.quote-icon{
    position:absolute;
    top:-25px;
    left:34px;
    font-size:140px;
    line-height:1;
    color:rgba(112,164,189,.18);
    font-family:serif;
}

.depoimento-premium p{
    position:relative;
    z-index:2;
    color:var(--text-secondary);
    font-size:21px;
    line-height:1.75;
    max-width:690px;
    margin:0 auto 24px;
}

.depoimento-premium .stars{
    color:#f5b301;
    letter-spacing:4px;
    font-size:18px;
    margin-bottom:26px;
}

.depoimento-autor{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    background:var(--primary);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:20px;
}

.depoimento-autor strong{
    display:block;
    color:var(--text);
    font-size:16px;
    text-align:left;
}

.depoimento-autor span{
    display:block;
    color:var(--text-secondary);
    font-size:13px;
    text-align:left;
}

.depoimento-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5;
    transition:.3s;
    box-shadow:var(--shadow);
}

.depoimento-btn:hover{
    transform:translateY(-50%) scale(1.07);
    box-shadow:var(--shadow-blue);
}

.depoimento-prev{
    left:-23px;
}

.depoimento-next{
    right:-23px;
}

.depoimento-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:22px;
}

.dot{
    width:10px;
    height:10px;
    border:none;
    border-radius:50%;
    background:rgba(112,164,189,.35);
    cursor:pointer;
    transition:.3s;
}

.dot.ativo{
    width:28px;
    border-radius:999px;
    background:var(--primary-dark);
}

body.tema-escuro .avatar{
    color:#050505;
}

body.tema-escuro .depoimento-btn{
    color:#050505;
}

body.tema-escuro .dot.ativo{
    background:var(--primary);
}

@keyframes depoimentoFade{
    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================
   RESPONSIVO ETAPAS 1 E 2
========================= */

@media(max-width:1050px){

    .escolher-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:700px){

    .escolher-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .escolher-card{
        padding:26px 22px;
        border-radius:22px;
    }

    .escolher-icon{
        width:58px;
        height:58px;
        font-size:27px;
        margin-bottom:20px;
    }

    .escolher-card h3{
        font-size:20px;
    }

    .depoimentos-carousel{
        min-height:auto;
        display:block;
    }

    .depoimento-premium{
        padding:34px 24px;
        border-radius:26px;
    }

    .quote-icon{
        font-size:100px;
        left:22px;
        top:-18px;
    }

    .depoimento-premium p{
        font-size:17px;
        line-height:1.65;
    }

    .depoimento-btn{
        display:none;
    }

    .depoimento-autor{
        justify-content:flex-start;
    }

}


/* =========================
   CTA PREMIUM
========================= */

.cta-premium{
    max-width:1240px;
    margin:110px auto;
    padding:0;
    border-radius:34px;
    overflow:hidden;
    border:1px solid var(--border-primary);
    background:
    linear-gradient(
        135deg,
        rgba(112,164,189,.24),
        rgba(255,255,255,.94)
    ),
    var(--surface-solid);
    box-shadow:var(--shadow);
}

.cta-content{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:stretch;
    min-height:520px;
}

.cta-texto{
    padding:64px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.cta-icon{
    width:66px;
    height:66px;
    border-radius:24px;
    background:var(--primary);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:24px;
    box-shadow:var(--shadow-blue);
}

.cta-texto h2{
    font-size:clamp(34px,4vw,58px);
    line-height:1.02;
    letter-spacing:-2px;
    color:var(--text);
    margin-bottom:18px;
}

.cta-texto > p:not(.section-label){
    color:var(--text-secondary);
    font-size:18px;
    line-height:1.75;
    max-width:620px;
    margin-bottom:34px;
}

.cta-buttons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:30px;
}

.cta-beneficios{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.cta-beneficios span{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--text-secondary);
    font-weight:700;
    font-size:14px;
}

.cta-beneficios i{
    color:var(--primary-dark);
}

.cta-image{
    position:relative;
    min-height:100%;
    overflow:hidden;
}

.cta-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cta-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(255,255,255,.7),
        transparent
    );
}

body.tema-escuro .cta-premium{
    background:
    linear-gradient(
        135deg,
        rgba(112,164,189,.20),
        rgba(18,18,18,.88)
    ),
    var(--surface-solid);
}

body.tema-escuro .cta-image::after{
    background:
    linear-gradient(
        90deg,
        rgba(18,18,18,.82),
        transparent
    );
}

body.tema-escuro .cta-icon{
    color:#050505;
}

body.tema-escuro .cta-beneficios i{
    color:var(--primary);
}

@media(max-width:900px){

    .cta-content{
        grid-template-columns:1fr;
    }

    .cta-image{
        min-height:320px;
        order:-1;
    }

    .cta-image::after{
        background:
        linear-gradient(
            transparent,
            var(--surface-solid)
        );
    }

    body.tema-escuro .cta-image::after{
        background:
        linear-gradient(
            transparent,
            var(--surface-solid)
        );
    }

    .cta-texto{
        padding:42px 28px;
    }

}

@media(max-width:700px){

    .cta-premium{
        margin:80px 22px;
        border-radius:28px;
    }

    .cta-texto{
        padding:34px 24px;
    }

    .cta-icon{
        width:58px;
        height:58px;
        font-size:26px;
        border-radius:20px;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-buttons .btn{
        width:100%;
    }

    .cta-image{
        min-height:260px;
    }

}


/*==============================
GALERIA DOS FILHOTES
==============================*/

.coelho-image{

    position:relative;

    height:260px;

    overflow:hidden;

}

.coelhoSwiper{

    width:100%;
    height:100%;

}

.coelhoSwiper .swiper-slide{

    display:flex;

    justify-content:center;

    align-items:center;

}

.coelhoSwiper img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.coelho-card:hover .coelhoSwiper img{

    transform:scale(1.04);

}

/* ======================
   PAGINAÇÃO
====================== */

.swiper-pagination{

    bottom:12px !important;

}

.swiper-pagination-bullet{

    width:8px;

    height:8px;

    background:#ffffff;

    opacity:.45;

    transition:.25s;

}

.swiper-pagination-bullet-active{

    opacity:1;

    transform:scale(1.3);

}

/* ======================
   SETAS
====================== */

.swiper-button-prev,
.swiper-button-next{

    width:40px;

    height:40px;

    border-radius:50%;

    background:rgba(255,255,255,.88);

    backdrop-filter:blur(6px);

    box-shadow:0 5px 15px rgba(0,0,0,.18);

    color:#0b5d73;

    transition:.25s;

    opacity:0;

}

.coelho-card:hover .swiper-button-prev,
.coelho-card:hover .swiper-button-next{

    opacity:1;

}

.swiper-button-prev:hover,
.swiper-button-next:hover{

    background:#0b5d73;

    color:white;

}

.swiper-button-prev::after,
.swiper-button-next::after{

    font-size:16px;

    font-weight:bold;

}

.swiper-button-prev{

    left:12px;

}

.swiper-button-next{

    right:12px;

}

/*=========================
MOBILE
=========================*/

@media(max-width:768px){

    .swiper-button-prev,
    .swiper-button-next{

        display:none;

    }

}


@media(max-width:700px){

    .hero-mini-infos{
        display: none;
    }

    .sobre-lista{
        display:none;
    }

    .display-mobile{
        display: none;
    }

    .cta-image{
        display: none;
    }

    .hero-image-badge{
        display: none;
    }
}

.cta-image img,
.cta-image video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


.barco-galeria{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.imagem-principal{

    position:relative;

    border-radius:22px;

    overflow:hidden;

    background:#eef3f8;

    aspect-ratio:4/3;

}

.imagem-principal img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;

}

.imagem-principal:hover img{

    transform:scale(1.05);

}


/* brilho */

.imagem-principal::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-60%;

    width:45%;

    height:300%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:rotate(18deg);

    transition:1s;

}

.imagem-principal:hover::after{

    left:150%;

}


/*====================================================
                    SETAS
====================================================*/

.btn-slide{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    backdrop-filter:blur(10px);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    transition:.3s;

    z-index:5;

}

.btn-slide:hover{

    background:var(--primary);

    color:#fff;

}

.anterior{

    left:16px;

}

.proximo{

    right:16px;

}


/*====================================================
                    CONTADOR
====================================================*/

.contador{

    position:absolute;

    bottom:18px;

    right:18px;

    background:rgba(0,0,0,.6);

    color:#fff;

    padding:6px 14px;

    border-radius:999px;

    font-size:.9rem;

}


/*====================================================
                MINIATURAS
====================================================*/

.miniaturas{

    display:flex;

    gap:12px;

}

.thumb{

    width:88px;

    height:70px;

    border-radius:14px;

    object-fit:cover;

    cursor:pointer;

    opacity:.55;

    border:3px solid transparent;

    transition:.3s;

}

.thumb:hover{

    opacity:1;

    transform:translateY(-3px);

}

.thumb.ativa{

    opacity:1;

    border-color:var(--primary);

}


/* ==========================================================
   REFINAMENTOS DE DESIGN
   (tokens, logo, animações e ajustes do tema escuro)
========================================================== */

:root{
    --heading:#004ea9;
    --accent-text:#004ea9;
    --logo-accent:#4a8ad6;
    --ease:cubic-bezier(.22,1,.36,1);
}

body.tema-escuro{
    --heading:#eaf2ff;
    --accent-text:#76a4d8;
    --logo-accent:#76a4d8;
}

html{
    scroll-padding-top:90px;
}

body{
    font-family:"Outfit","League Spartan",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
}

::selection{
    background:rgba(0,78,169,.25);
}

body.tema-escuro ::selection{
    background:rgba(118,164,216,.35);
    color:#fff;
}

:focus-visible{
    outline:2px solid var(--logo-accent);
    outline-offset:3px;
    border-radius:8px;
}

.section,
.cta{
    scroll-margin-top:90px;
}

.section-title h2{
    color:var(--heading);
}

/* ---------- LOGO ---------- */

.logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:"Outfit","League Spartan",system-ui,sans-serif;
    font-size:26px;
    font-weight:700;
    letter-spacing:-.6px;
    line-height:1;
    color:var(--heading);
    white-space:nowrap;
}

.logo-mark{
    position:relative;
    width:46px;
    height:46px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:linear-gradient(145deg,#ffffff,var(--primary-light));
    border:1px solid var(--border-primary);
    box-shadow:0 8px 20px rgba(0,78,169,.16), inset 0 1px 0 rgba(255,255,255,.9);
    transition:transform .5s var(--ease), box-shadow .4s ease, background .35s ease, border-color .35s ease;
}

.logo-mark img{
    width:32px;
    height:32px;
    transform-origin:50% 90%;
    animation:orelhas 5s ease-in-out 1.2s infinite;
}

.logo-text{
    display:inline-block;
    transition:transform .4s var(--ease);
}

.logo-text span{
    font-weight:300;
    color:var(--logo-accent);
    letter-spacing:-.3px;
}

.logo:hover .logo-mark{
    transform:translateY(-2px) rotate(-6deg);
    box-shadow:0 12px 26px rgba(0,78,169,.24), inset 0 1px 0 rgba(255,255,255,.9);
}

.logo:hover .logo-text{
    transform:translateX(2px);
}

@keyframes orelhas{
    0%,86%,100%{ transform:rotate(0) scale(1); }
    90%{ transform:rotate(-7deg) scale(1.04); }
    94%{ transform:rotate(6deg) scale(1.04); }
    97%{ transform:rotate(-3deg); }
}

body.tema-escuro .logo-mark{
    background:linear-gradient(145deg,#1d2a3d,#0f1622);
    border-color:rgba(118,164,216,.32);
    box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 22px rgba(118,164,216,.14), inset 0 1px 0 rgba(255,255,255,.08);
}

body.tema-escuro .logo-mark img{
    filter:invert(1);
}

body.tema-escuro .logo:hover .logo-mark{
    box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 30px rgba(118,164,216,.28), inset 0 1px 0 rgba(255,255,255,.1);
}

.footer .logo{
    margin-bottom:4px;
}

/* ---------- HEADER: encolhe ao rolar + barra de progresso ---------- */

.header{
    transition:background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.nav-bar{
    transition:padding .4s var(--ease);
}

.header.rolando{
    box-shadow:0 10px 30px rgba(0,50,110,.10);
}

.header.rolando .nav-bar{
    padding-top:10px;
    padding-bottom:10px;
}

body.tema-escuro .header.rolando{
    box-shadow:0 10px 30px rgba(0,0,0,.55);
}

.header::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-1px;
    height:3px;
    width:var(--scroll,0%);
    background:linear-gradient(90deg,var(--primary),var(--logo-accent));
    border-radius:0 3px 3px 0;
    transition:width .12s linear;
}

/* ---------- LINKS DA NAVEGAÇÃO ---------- */

.navegacao a{
    position:relative;
    padding:6px 0;
    letter-spacing:.6px;
}

.navegacao a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,var(--primary),var(--logo-accent));
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .4s var(--ease);
}

.navegacao a:hover::after,
.navegacao a.ativo::after{
    transform:scaleX(1);
    transform-origin:left;
}

.navegacao a.ativo{
    color:var(--accent-text);
}

/* ---------- TAG E LABELS ---------- */

.tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(0,78,169,.07);
    border:1px solid var(--border-primary);
}

.tag::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--logo-accent);
    animation:pulsoPonto 2.2s ease-out infinite;
}

@keyframes pulsoPonto{
    0%{ box-shadow:0 0 0 0 rgba(74,138,214,.55); }
    100%{ box-shadow:0 0 0 10px rgba(74,138,214,0); }
}

.section-title .section-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.section-title .section-label::before,
.section-title .section-label::after{
    content:"";
    width:30px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--logo-accent));
}

.section-title .section-label::after{
    transform:scaleX(-1);
}

/* ---------- BOTÕES ---------- */

.btn,
.btn-card,
.btn-topo,
.raca-card,
.cuidado,
.coelho-card,
.escolher-card,
.hero-mini-infos div,
.btn-instagram,
.theme-toggle{
    transition:
    transform .4s var(--ease),
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.btn-primary,
.btn-topo,
.btn-card{
    position:relative;
    overflow:hidden;
    background-image:linear-gradient(135deg,#0d64c9,#004ea9);
    box-shadow:0 8px 20px rgba(0,78,169,.22);
}

.btn-primary::after,
.btn-topo::after,
.btn-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
    transform:translateX(-120%);
    transition:transform .8s var(--ease);
    pointer-events:none;
}

.btn-primary:hover::after,
.btn-topo:hover::after,
.btn-card:hover::after{
    transform:translateX(120%);
}

.btn:active,
.btn-card:active,
.btn-topo:active{
    transform:translateY(0) scale(.98);
}

.btn-instagram:hover{
    background:var(--primary);
    color:#fff;
}

/* ---------- CARDS: ícones em "chip", igual ao "Por que escolher" ---------- */

.raca-card i,
.cuidado i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:62px;
    height:62px;
    border-radius:20px;
    font-size:28px;
    margin-bottom:22px;
    background:rgba(112,164,189,.13);
    transition:transform .45s var(--ease), background-color .35s ease, color .35s ease;
}

.raca-card:hover i,
.cuidado:hover i{
    transform:scale(1.08) rotate(-4deg);
    background:var(--primary);
    color:#fff;
}

.hero-mini-infos div:hover{
    transform:translateY(-4px);
    border-color:var(--border-primary);
    box-shadow:var(--shadow-blue);
}

.sobre-lista div{
    transition:transform .35s var(--ease), border-color .35s ease, background-color .35s ease;
}

.sobre-lista div:hover{
    transform:translateX(6px);
    border-color:var(--border-primary);
}

.sobre-image img{
    transition:transform 1.2s var(--ease);
}

.sobre-image:hover img{
    transform:scale(1.05);
}

/* ---------- HERO: movimento suave ---------- */

.hero-image-card{
    animation:flutuar 7s ease-in-out infinite;
}

.hero-blur-1{ animation:deriva 14s ease-in-out infinite alternate; }
.hero-blur-2{ animation:deriva 17s ease-in-out infinite alternate-reverse; }

.hero-image-badge i{
    animation:batida 2.6s ease-in-out infinite;
}

@keyframes flutuar{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

@keyframes deriva{
    from{ transform:translate(0,0) scale(1); }
    to{ transform:translate(40px,-30px) scale(1.15); }
}

@keyframes batida{
    0%,60%,100%{ transform:scale(1); }
    70%{ transform:scale(1.25); }
    80%{ transform:scale(1.05); }
    90%{ transform:scale(1.2); }
}

/* ---------- WHATSAPP FLUTUANTE ---------- */

.whatsapp-float::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.55);
    animation:anelWhats 2.4s ease-out infinite;
    pointer-events:none;
}

@keyframes anelWhats{
    0%{ transform:scale(1); opacity:.9; }
    100%{ transform:scale(1.55); opacity:0; }
}

/* ---------- RODAPÉ ---------- */

.footer a:not(.logo){
    transition:color .3s ease, transform .35s var(--ease);
}

.footer a:not(.logo):hover{
    transform:translateX(5px);
}

/* ==========================================================
   TEMA ESCURO: contraste e harmonia
   (o azul #004ea9 some no fundo escuro, então textos/ícones
   de destaque usam --accent-text e botões usam texto branco)
========================================================== */

body.tema-escuro .navegacao a:hover,
body.tema-escuro .tag,
body.tema-escuro .section-label,
body.tema-escuro .hero-mini-infos strong,
body.tema-escuro .hero-image-badge i,
body.tema-escuro .sobre-lista i,
body.tema-escuro .raca-card i,
body.tema-escuro .cuidado i,
body.tema-escuro .escolher-icon,
body.tema-escuro .coelho-topo span,
body.tema-escuro .coelho-details i,
body.tema-escuro .coelho-content strong,
body.tema-escuro .cta-beneficios i,
body.tema-escuro .btn-instagram,
body.tema-escuro .mobile-social,
body.tema-escuro .footer a:hover,
body.tema-escuro .footer i{
    color:var(--accent-text) !important;
}

body.tema-escuro .btn-topo,
body.tema-escuro .btn-primary,
body.tema-escuro .btn-card,
body.tema-escuro .badge,
body.tema-escuro .avatar,
body.tema-escuro .depoimento-btn,
body.tema-escuro .cta-icon,
body.tema-escuro .escolher-card:hover .escolher-icon{
    color:#fff !important;
}

body.tema-escuro .raca-card i,
body.tema-escuro .cuidado i{
    background:rgba(118,164,216,.12);
}

body.tema-escuro .raca-card:hover i,
body.tema-escuro .cuidado:hover i,
body.tema-escuro .btn-instagram:hover{
    background:var(--primary);
    color:#fff !important;
}

body.tema-escuro .escolher-card:hover .escolher-icon{
    background:var(--primary);
}

body.tema-escuro .btn-primary,
body.tema-escuro .btn-topo,
body.tema-escuro .btn-card{
    box-shadow:0 8px 22px rgba(0,78,169,.45);
}

body.tema-escuro .tag{
    background:rgba(118,164,216,.08);
}

body.tema-escuro .scroll-indicator span{
    border-color:var(--accent-text);
}

body.tema-escuro .scroll-indicator span::before{
    background:var(--accent-text);
}

body.tema-escuro .dot.ativo{
    background:var(--accent-text);
}

body.tema-escuro .thumb.ativa{
    border-color:var(--accent-text);
}

body.tema-escuro .theme-toggle-ball{
    background:var(--primary);
}

/* ==========================================================
   RESPONSIVO DO LOGO / NAVBAR
========================================================== */

@media(max-width:1180px){

    .navegacao{
        gap:16px;
    }

    .navegacao a{
        font-size:14px;
        letter-spacing:.3px;
    }

    .logo{
        font-size:22px;
        gap:10px;
    }

    .logo-mark{
        width:42px;
        height:42px;
        border-radius:14px;
    }

    .btn-topo{
        padding:10px 15px;
    }

}

@media(max-width:700px){

    .logo{
        font-size:20px;
        gap:9px;
        max-width:none;
        overflow:visible;
    }

    .logo-mark{
        width:38px;
        height:38px;
        border-radius:12px;
    }

    .logo-mark img{
        width:26px;
        height:26px;
    }

    .header.rolando .nav-bar{
        padding-top:10px;
        padding-bottom:10px;
    }

}

/* ==========================================================
   ACESSIBILIDADE: respeita quem prefere menos movimento
========================================================== */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

}


/* ==========================================================
   CTA: vídeo encaixado sem faixa escura no meio
   O vídeo preenche toda a coluna e se dissolve suavemente no
   fundo do card (funciona igual nos temas claro e escuro).
========================================================== */

.cta-image{
    background:transparent;
}

.cta-image video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.06);
}

@media(min-width:901px){

    .cta-image::after{
        display:none;
    }

    .cta-image video{
        -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
        mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
    }

}


/* ==========================================================
   GALERIA DOS FILHOTES NO CELULAR
   - contador (1/4) sempre visível, sobre a foto
   - sem zoom ao tocar
========================================================== */

@media(max-width:700px), (hover:none){

    .coelho-galeria{
        height:100%;
    }

    .imagem-principal{
        height:100%;
        aspect-ratio:auto;
        border-radius:0;
    }

    .miniaturas{
        display:none;
    }

    .contador{
        z-index:6;
        bottom:14px;
        right:14px;
        padding:5px 12px;
        font-size:.8rem;
        background:rgba(0,0,0,.62);
        backdrop-filter:blur(6px);
    }

    .imagem-principal img,
    .imagem-principal:hover img,
    .coelho-card:hover .coelho-image img{
        transform:none !important;
    }

    .imagem-principal::after{
        display:none;
    }

}

/* ==========================================================
   FILHOTES: FILTRO DE RAÇAS, CARD INDISPONÍVEL E CELULAR
========================================================== */

/* ---------- Filtro ---------- */

.filtro-racas{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin:-18px auto 40px;
}

.filtro-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:11px 18px;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
    backdrop-filter:blur(18px);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:0 6px 18px rgba(7,56,77,.06);
    transition:transform .4s var(--ease), background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.filtro-btn i{
    font-size:14px;
}

.filtro-btn:hover{
    transform:translateY(-2px);
    border-color:var(--border-primary);
    color:var(--accent-text);
}

.filtro-count{
    min-width:24px;
    height:24px;
    padding:0 7px;
    border-radius:999px;
    display:inline-grid;
    place-items:center;
    font-size:12px;
    font-weight:800;
    background:rgba(112,164,189,.14);
    color:var(--accent-text);
    transition:inherit;
}

/* raça sem filhotes disponíveis: ponto laranja de "em breve" */
.filtro-btn.sem-filhotes .filtro-count{
    background:rgba(187,83,58,.12);
    color:#bb533a;
}

.filtro-btn.ativo{
    background-image:linear-gradient(135deg,#0d64c9,#004ea9);
    border-color:transparent;
    color:#fff;
    box-shadow:0 10px 24px rgba(0,78,169,.28);
}

.filtro-btn.ativo .filtro-count{
    background:rgba(255,255,255,.22);
    color:#fff;
}

body.tema-escuro .filtro-btn{
    box-shadow:none;
}

body.tema-escuro .filtro-btn.ativo{
    box-shadow:0 10px 26px rgba(0,78,169,.45);
}

body.tema-escuro .filtro-btn.sem-filhotes:not(.ativo) .filtro-count{
    background:rgba(232,128,100,.14);
    color:#e88064;
}

/* ---------- Cards: ordem e animação do filtro ---------- */

.coelho-card.oculto{
    display:none;
}

.coelho-card.entrando{
    animation:cardEntra .55s var(--ease) both;
}

@keyframes cardEntra{
    from{ opacity:0; transform:translateY(16px) scale(.98); }
    to{ opacity:1; transform:none; }
}

/* raça acima do nome, pequena (hierarquia mais limpa) */
.coelho-topo{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.coelho-topo h3{
    margin-bottom:0;
}

.coelho-topo span{
    order:-1;
    font-size:11.5px;
    letter-spacing:1.2px;
}

.coelho-details span{
    display:flex;
    align-items:center;
}

/* ---------- Card indisponível ---------- */

.coelho-card[data-status="indisponivel"]{
    border-style:dashed;
    border-color:var(--border-primary);
}

.coelho-card[data-status="indisponivel"] .coelho-image > img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(.85) brightness(.75);
}

.coelho-card[data-status="indisponivel"]:hover .coelho-image > img{
    transform:scale(1.04);
}

.coelho-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:20px;
    text-align:center;
    color:#fff;
    background:linear-gradient(180deg,rgba(0,20,45,.15),rgba(0,20,45,.62));
}

.coelho-overlay .badge{
    position:static;
    margin-bottom:4px;
}

.coelho-overlay strong{
    font-size:30px;
    font-weight:700;
    letter-spacing:-1px;
    line-height:1;
    text-shadow:0 4px 18px rgba(0,0,0,.35);
}

.coelho-overlay small{
    font-size:13.5px;
    opacity:.88;
}

.coelho-aviso{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    margin-bottom:16px;
    border-radius:16px;
    border:1px solid var(--border-primary);
    background:rgba(112,164,189,.10);
}

.coelho-aviso > i{
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:20px;
    color:#fff;
    background:linear-gradient(135deg,#0d64c9,#004ea9);
}

.coelho-aviso strong{
    display:block;
    font-size:16px !important;
    margin-bottom:2px !important;
    color:var(--text) !important;
}

.coelho-aviso span{
    font-size:13.5px;
    color:var(--text-secondary);
}

.btn-card-espera{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

body.tema-escuro .coelho-aviso{
    background:rgba(118,164,216,.07);
}

body.tema-escuro .coelho-aviso > i{
    color:#fff !important;
}

/* ---------- Estado vazio (raça sem cards) ---------- */

.filhotes-vazio{
    max-width:620px;
    margin:0 auto;
    padding:46px 34px;
    text-align:center;
    border-radius:var(--radius-lg);
    border:1px dashed var(--border-primary);
    background:var(--surface);
    box-shadow:var(--shadow);
    animation:cardEntra .55s var(--ease) both;
}

.filhotes-vazio[hidden]{
    display:none;
}

.filhotes-vazio-icon{
    width:64px;
    height:64px;
    margin:0 auto 20px;
    border-radius:22px;
    display:grid;
    place-items:center;
    font-size:28px;
    color:var(--accent-text);
    background:rgba(112,164,189,.13);
}

.filhotes-vazio h3{
    font-size:24px;
    line-height:1.2;
    color:var(--text);
    margin-bottom:10px;
}

.filhotes-vazio p{
    color:var(--text-secondary);
    line-height:1.7;
    margin-bottom:24px;
}

.filhotes-grid.vazio{
    display:none;
}

/* ---------- Link "Ver filhotes" nas raças ---------- */

.raca-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:18px;
    font-size:14px;
    font-weight:700;
    color:var(--accent-text);
}

.raca-link span{
    transition:transform .35s var(--ease);
}

.raca-link:hover span{
    transform:translateX(4px);
}

/* ---------- Pontinhos (só celular) ---------- */

.filhotes-dots{
    display:none;
}

/* ---------- Tablet: 2 colunas ---------- */

@media(max-width:1050px) and (min-width:701px){

    .cards.filhotes-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px;
    }

    .filhotes-grid .coelho-image{
        height:250px;
    }

}

/* ---------- Celular: carrossel com cards compactos ---------- */

@media(max-width:700px){

    .filhotes .section-title{
        margin-bottom:26px;
    }

    .filtro-racas{
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        scrollbar-width:none;
        margin:0 -22px 22px;
        padding:4px 22px 6px;
        gap:8px;
        -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);
        mask-image:linear-gradient(90deg,#000 85%,transparent);
    }

    .filtro-racas::-webkit-scrollbar{
        display:none;
    }

    .filtro-btn{
        padding:9px 14px;
        font-size:13.5px;
        gap:7px;
        flex-shrink:0;
    }

    .filtro-count{
        min-width:20px;
        height:20px;
        font-size:11px;
        padding:0 6px;
    }

    .cards.filhotes-grid{
        display:flex;
        gap:14px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        margin:0 -22px;
        padding:6px 22px 22px;
        scroll-padding:0 22px;
    }

    .cards.filhotes-grid::-webkit-scrollbar{
        display:none;
    }

    .filhotes-grid .coelho-card{
        flex:0 0 82%;
        scroll-snap-align:center;
        border-radius:20px;
        box-shadow:0 10px 26px rgba(7,56,77,.10);
    }

    /* um card sozinho ocupa a largura toda */
    .filhotes-grid.unico .coelho-card{
        flex-basis:100%;
    }

    .filhotes-grid .coelho-card:hover{
        transform:none;
    }

    .filhotes-grid .coelho-image{
        height:200px;
    }

    .filhotes-grid .badge{
        top:12px;
        left:12px;
        padding:6px 10px;
        font-size:10px;
    }

    .filhotes-grid .coelho-content{
        padding:16px 16px 18px;
    }

    .filhotes-grid .coelho-topo{
        margin-bottom:12px;
        gap:4px;
    }

    .filhotes-grid .coelho-topo h3{
        font-size:19px;
    }

    .filhotes-grid .coelho-topo span{
        font-size:10.5px;
    }

    /* detalhes viram "chips" pequenos */
    .filhotes-grid .coelho-details{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
        margin-bottom:12px;
    }

    .filhotes-grid .coelho-details span{
        padding:6px 10px;
        font-size:12px;
        border-radius:999px;
    }

    .filhotes-grid .coelho-details i{
        margin-right:4px;
        font-size:12px;
    }

    .filhotes-grid .coelho-descricao{
        font-size:13px;
        line-height:1.55;
        margin-bottom:14px;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .filhotes-grid .coelho-content strong{
        font-size:19px;
        margin-bottom:12px;
    }

    .filhotes-grid .btn-card{
        padding:12px;
        border-radius:12px;
        font-size:14.5px;
    }

    .coelho-overlay strong{
        font-size:24px;
    }

    .coelho-overlay small{
        font-size:12px;
    }

    .coelho-aviso{
        padding:10px 12px;
        gap:11px;
        margin-bottom:12px;
        border-radius:14px;
    }

    .coelho-aviso > i{
        width:38px;
        height:38px;
        font-size:17px;
        border-radius:12px;
    }

    .coelho-aviso strong{
        font-size:14.5px !important;
    }

    .coelho-aviso span{
        font-size:12.5px;
    }

    .contador{
        bottom:10px;
        right:10px;
    }

    .filhotes-dots{
        display:flex;
        justify-content:center;
        gap:7px;
        margin-top:2px;
    }

    .filhotes-dots span{
        width:7px;
        height:7px;
        border-radius:999px;
        background:rgba(112,164,189,.35);
        transition:width .35s var(--ease), background-color .35s ease;
    }

    .filhotes-dots span.ativo{
        width:22px;
        background:var(--accent-text);
    }

    .filhotes-vazio{
        padding:34px 22px;
    }

    .filhotes-vazio h3{
        font-size:20px;
    }

    .filhotes-vazio p{
        font-size:14.5px;
    }

}

/* Vídeo nos cards indisponíveis */
.coelho-card[data-status="indisponivel"] .coelho-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(.85) brightness(.75);
    transition:transform .45s var(--ease);
}

.coelho-card[data-status="indisponivel"]:hover .coelho-video{
    transform:scale(1.04);
}

/* ==========================================================
   HERO: fundo de campo verde + céu, harmonizado com o azul
========================================================== */

.hero .hero-bg{
    background:
        /* clareia o lado do texto */
        linear-gradient(90deg,
            rgba(244,247,249,.97) 0%,
            rgba(244,247,249,.86) 38%,
            rgba(244,247,249,.35) 70%,
            rgba(244,247,249,.12) 100%),
        /* véu azul no céu e base mais fria, puxando para a paleta do site */
        linear-gradient(180deg,
            rgba(0,78,169,.20) 0%,
            rgba(0,78,169,0) 45%,
            rgba(7,56,77,.22) 100%),
        url("../img/hero-campo.jpg") center 60% / cover no-repeat;
    filter:saturate(.82);
}

body.tema-escuro .hero .hero-bg{
    background:
        linear-gradient(90deg,
            rgba(7,7,7,.95) 0%,
            rgba(7,7,7,.78) 40%,
            rgba(7,7,7,.35) 75%,
            rgba(7,7,7,.18) 100%),
        linear-gradient(180deg,
            rgba(0,45,110,.40) 0%,
            rgba(0,0,0,0) 50%,
            rgba(7,7,7,.65) 100%),
        url("../img/hero-campo.jpg") center 60% / cover no-repeat;
    filter:saturate(.75) brightness(.9);
}

/* no celular o texto ocupa a largura toda: véu de cima para baixo */
@media(max-width:1050px){

    .hero .hero-bg{
        background:
            linear-gradient(180deg,
                rgba(244,247,249,.55) 0%,
                rgba(244,247,249,.88) 45%,
                rgba(244,247,249,.97) 100%),
            linear-gradient(180deg, rgba(0,78,169,.18), rgba(0,78,169,0) 40%),
            url("../img/hero-campo.jpg") center 40% / cover no-repeat;
    }

    body.tema-escuro .hero .hero-bg{
        background:
            linear-gradient(180deg,
                rgba(7,7,7,.55) 0%,
                rgba(7,7,7,.85) 45%,
                rgba(7,7,7,.96) 100%),
            linear-gradient(180deg, rgba(0,45,110,.35), rgba(0,0,0,0) 40%),
            url("../img/hero-campo.jpg") center 40% / cover no-repeat;
    }

}


/* ==========================================================
   ABERTURA DO SITE (primeira visita da sessão)
   Brasão revelado como gravura + assinatura + saída suave
========================================================== */

@property --intro-raio{
    syntax:"<percentage>";
    inherits:false;
    initial-value:0%;
}

.intro{
    display:none;
}

html.com-intro,
html.com-intro body{
    overflow:hidden;
}

html.com-intro .intro{
    --intro-bg:#f4f7f9;
    --intro-bg-2:#e6eef6;
    --intro-glow:rgba(0,78,169,.16);
    --intro-texto:#0b3d84;
    --intro-acento:#4a8ad6;
    --intro-sub:#6b7f8c;
    --intro-linha:rgba(0,78,169,.35);

    position:fixed;
    inset:0;
    z-index:10000;
    display:grid;
    place-items:center;
    overflow:hidden;
    cursor:pointer;
    background:
        radial-gradient(ellipse 70% 60% at 50% 42%, var(--intro-bg) 0%, var(--intro-bg-2) 100%);
    transition:opacity .9s cubic-bezier(.4,0,.2,1), visibility 0s linear .9s;
}

html.intro-escuro .intro{
    --intro-bg:#0b1220;
    --intro-bg-2:#030406;
    --intro-glow:rgba(30,110,210,.22);
    --intro-texto:#eef4ff;
    --intro-acento:#7fb0e8;
    --intro-sub:#7d8a99;
    --intro-linha:rgba(127,176,232,.4);
}

/* vinheta + brilho que "respira" atrás do brasão */

.intro::before{
    content:"";
    position:absolute;
    left:50%;
    top:44%;
    width:min(720px,120vw);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle, var(--intro-glow) 0%, transparent 62%);
    transform:translate(-50%,-50%) scale(.6);
    opacity:0;
    animation:introGlow 2.6s cubic-bezier(.22,1,.36,1) .1s forwards;
}

.intro::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.08) 100%);
}

html.intro-escuro .intro::after{
    background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%);
}

.intro-centro{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 24px;
    transition:transform 1s cubic-bezier(.4,0,.2,1), opacity .8s ease, filter .8s ease;
}

/* ---------- brasão ---------- */

.intro-brasao{
    position:relative;
    width:min(250px,58vw);
    aspect-ratio:560 / 683;
}

.intro-brasao img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;

    /* revela de dentro para fora, como tinta se espalhando */
    -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 calc(var(--intro-raio) - 12%), transparent var(--intro-raio));
    mask-image:radial-gradient(circle at 50% 46%, #000 calc(var(--intro-raio) - 12%), transparent var(--intro-raio));

    opacity:0;
    filter:blur(8px);
    transform:scale(1.05);
}

html.intro-pronta .intro-brasao img{
    animation:introBrasao 1.7s cubic-bezier(.22,1,.36,1) forwards;
}

/* reflexo de porcelana passando sobre o brasão (recortado no formato do brasão) */

.intro-reflexo{
    position:absolute;
    inset:0;
    pointer-events:none;
    -webkit-mask:url("../img/logo-vincent.webp") center / contain no-repeat;
    mask:url("../img/logo-vincent.webp") center / contain no-repeat;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
    background-size:260% 100%;
    background-position:120% 0;
    opacity:0;
    mix-blend-mode:soft-light;
}

html.intro-escuro .intro-reflexo{
    mix-blend-mode:screen;
    background-image:linear-gradient(105deg, transparent 40%, rgba(170,205,255,.55) 50%, transparent 60%);
}

html.intro-pronta .intro-reflexo{
    animation:introReflexo 1.5s cubic-bezier(.45,0,.2,1) 1.15s forwards;
}

/* ---------- assinatura ---------- */

.intro-assinatura{
    margin-top:30px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.intro-nome{
    font-family:"Outfit",system-ui,sans-serif;
    font-size:clamp(17px,2.4vw,22px);
    font-weight:300;
    letter-spacing:.7em;
    padding-left:.7em;           /* compensa o espaçamento da última letra */
    text-transform:uppercase;
    color:var(--intro-texto);
    opacity:0;
    filter:blur(4px);
}

.intro-nome b{
    font-weight:600;
}

html.intro-pronta .intro-nome{
    animation:introNome 1.4s cubic-bezier(.22,1,.36,1) .95s forwards;
}

.intro-divisor{
    display:flex;
    align-items:center;
    gap:12px;
    margin:16px 0 14px;
}

.intro-divisor i{
    width:64px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--intro-linha));
    transform:scaleX(0);
    transform-origin:right;
}

.intro-divisor i:last-child{
    background:linear-gradient(90deg, var(--intro-linha), transparent);
    transform-origin:left;
}

.intro-divisor span{
    width:5px;
    height:5px;
    background:var(--intro-acento);
    transform:rotate(45deg) scale(0);
}

html.intro-pronta .intro-divisor i{
    animation:introLinha 1s cubic-bezier(.65,0,.35,1) 1.3s forwards;
}

html.intro-pronta .intro-divisor span{
    animation:introLosango .6s cubic-bezier(.34,1.56,.64,1) 1.25s forwards;
}

.intro-local{
    font-family:"Outfit",system-ui,sans-serif;
    font-size:11px;
    font-weight:500;
    letter-spacing:.42em;
    padding-left:.42em;
    text-transform:uppercase;
    color:var(--intro-sub);
    opacity:0;
    transform:translateY(6px);
}

html.intro-pronta .intro-local{
    animation:introLocal .9s ease 1.6s forwards;
}

/* ---------- saída ---------- */

.intro.saindo{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.intro.saindo .intro-centro{
    transform:scale(.94) translateY(-10px);
    opacity:0;
    filter:blur(6px);
}

.intro.saindo::before{
    animation:none;
    opacity:0;
    transition:opacity .6s ease;
}

html.intro-revelando main{
    animation:introSite 1.4s cubic-bezier(.22,1,.36,1) both;
}

html.intro-revelando .header{
    animation:introHeader 1.1s cubic-bezier(.22,1,.36,1) .25s both;
}

/* ---------- keyframes ---------- */

@keyframes introGlow{
    to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@keyframes introBrasao{
    0%  { --intro-raio:0%;   opacity:0; filter:blur(8px); transform:scale(1.05); }
    25% { opacity:1; }
    99% { filter:blur(0); }
    100%{ --intro-raio:140%; opacity:1; filter:none; transform:scale(1); -webkit-mask-image:none; mask-image:none; }
}

@keyframes introReflexo{
    0%  { opacity:1; background-position:120% 0; }
    100%{ opacity:1; background-position:-20% 0; }
}

@keyframes introNome{
    to{ opacity:1; filter:blur(0); letter-spacing:.42em; padding-left:.42em; }
}

@keyframes introLinha{
    to{ transform:scaleX(1); }
}

@keyframes introLosango{
    to{ transform:rotate(45deg) scale(1); }
}

@keyframes introLocal{
    to{ opacity:1; transform:none; }
}

@keyframes introSite{
    from{ opacity:0; transform:scale(1.025); }
    to{ opacity:1; transform:none; }
}

@keyframes introHeader{
    from{ opacity:0; transform:translateY(-16px); }
    to{ opacity:1; transform:none; }
}

@media(max-width:700px){

    .intro-brasao{
        width:min(210px,56vw);
    }

    .intro-assinatura{
        margin-top:24px;
    }

    .intro-nome{
        font-size:15px;
    }

    .intro-divisor i{
        width:44px;
    }

    .intro-local{
        font-size:10px;
        letter-spacing:.34em;
    }

}

@media(prefers-reduced-motion:reduce){
    .intro{ display:none !important; }
}