@font-face{
    font-family:"Pally";
    src:url("../fonts/Pally-Bold.otf");
}

@font-face{
    font-family:"Author";
    src:url("../fonts/Author-Regular.otf");
}

@font-face{
    font-family:"Author Medium";
    src:url("../fonts/Author-Medium.otf");
}

@font-face{
    font-family:"Author Semibold";
    src:url("../fonts/Author-Semibold.otf");
}

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

body{
    font-family:"Author", sans-serif;
       font-size:18px;
    background:#f4f8fb;
    color:#0b1736;
    
}

.logo-link img{

    transition:transform .2s;

}

.logo-link img.salto{

    animation:saltoLogo .45s ease;

}

@keyframes saltoLogo{

    0%{

        transform:translateY(0);

    }

    30%{

        transform:translateY(-8px);

    }

    60%{

        transform:translateY(0);

    }

    80%{

        transform:translateY(-3px);

    }

    100%{

        transform:translateY(0);

    }

}

h1,
h2,
.hero h1{
    font-family:"Pally", sans-serif;
}

.section-title{
    font-family:"Pally", sans-serif;
        font-size:56px;
}

.btn,
.maps-btn{
    font-family:"Author Semibold", sans-serif;
}

.service-link  { 
    font-family:"Author Medium", sans-serif;

}

nav a{
    font-family:"Author Medium", sans-serif;
 
}



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

a{
    text-decoration:none;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.navbar{
    background:white;
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:1px solid #e8eef5;
}

.nav-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:80px;
}


.logo{
    font-size:28px;
    font-weight:800;
}

nav{
    display:flex;
    gap:35px;
}

nav a{
    color:#4f6b8d;
    font-weight:500;
}

.btn-whatsapp{
    background:#20a7f2;
    color:white;
    padding:12px 28px;
    border-radius:999px;
    font-weight:600;
}

.hero{
    position:relative;

    background-image:url('../img/hero.jpg');

    background-position:center;
       background-repeat:no-repeat;

    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.35) 50%,
        rgba(0,0,0,.60) 100%
    );

    z-index:1;
}
.hero-overlay{
    background:rgba(0,0,0,.60);
    min-height:720px;
}

.hero-content{
    color:white;
    padding-top:120px;
    padding-left:80px;
    position:relative;
    z-index:2;

}

.hero-badge{
    display:inline-block;
    padding:10px 20px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.3);
    margin-bottom:30px;
    font-size:14px;
}

.hero h1{
    font-size:72px;
    line-height:1;
    max-width:900px;
    margin-bottom:25px;
    text-shadow:0 4px 20px rgba(0,0,0,.35);

}

.hero h1 span{
    display:block;
    color:#7fd3ff;
}

.hero p{
    max-width:650px;
    font-size:20px;
    line-height:1.5;
    margin-bottom:40px;
}

.hero-buttons{
    display:flex;
    gap:20px;
}

.hero-content{
    opacity:0;
    transform:translateY(40px);
    animation:heroFade 1s ease forwards;
}

@keyframes heroFade{

    from{
        opacity:0;
        transform:translateY(40px);
    }

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

}


.hero{
    animation:heroZoomBg 8s ease-out forwards;
}

@keyframes heroZoomBg{

    from{
        background-size:110%;
    }

    to{
        background-size:100%;
    }

}

.btn-primary,
.btn-secondary{

    transition:.3s;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary:hover{

    transform:translateY(-3px);

}
.btn-primary{
    background:#1bc65b;
    color:white;
    padding:18px 32px;
    border-radius:15px;
    font-weight:700;
}

.btn-secondary{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.35);
    color:white;
    padding:18px 32px;
    border-radius:15px;
    font-weight:700;
}


header{

    animation:navFade .8s ease;

}

@keyframes navFade{

    from{
        opacity:0;
        transform:translateY(-30px);
    }

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

}

.hero h1 span{

    animation:pulseBlue 3s infinite;

}

@keyframes pulseBlue{

    0%{
        text-shadow:0 0 0 rgba(30,168,239,0);
    }

    50%{
        text-shadow:0 0 20px rgba(30,168,239,.5);
    }

    100%{
        text-shadow:0 0 0 rgba(30,168,239,0);
    }

}

.stats{
    background:#29a8e6;
    color:white;
    position:relative;
    z-index:2;
    display:grid;

    grid-template-columns:repeat(4, auto);

    justify-content:center;

    gap:120px;

    text-align:center;

    height:100px;
}

.stats > div{
    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;
}

.stats h2{
    margin:0;
    line-height:1;
}

.stats p{
    margin-top:6px;
    margin-bottom:0;

    font-size:15px;
    color:#d7eefb;
}

.logo img{
    height:70px;
    width:auto;
}

@media (min-width:769px){

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

    .service-card:hover{

    transform:translateY(-10px);

}
.service-card img{

    transition:.6s ease;

}

.service-icon{
    position:absolute;
    top:18px;
    left:18px;
}

.service-card:hover .service-icon{

    transform:scale(1.15);

}

.service-card:hover{

    box-shadow:
        0 20px 40px rgba(0,0,0,.18),
        0 0 0 2px rgba(30,168,239,.25);

}

.service-card{
    box-shadow:
    0 15px 40px rgba(3, 5, 10, 0.479);
}

.services{
    padding:120px 0;
}
}




.service-card{

    opacity:0;
    filter:blur(8px);

    transition:
        opacity .6s ease,
        filter .6s ease;

}

.service-card.visible{

    opacity:1;
    transform:translateY(0);

}

.btn-primary,
.btn-secondary{

    transition:all .3s ease;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(27,198,91,.35);

}

.btn-secondary:hover{

    transform:translateY(-4px);

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

    border-color:white;

}

.btn-primary:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:0 12px 25px rgba(27,198,91,.35);

}


.section-tag{
    display:block;
    text-align:center;
    color:#1ea8ef;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
}

.section-benefits{
    display:block;
    text-align:left;
    color:#1ea8ef;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:15px;
}

.section-title{
    text-align:center;
    font-size:60px;
    margin-bottom:20px;
    color:#07162f;
}

.section-description{
    text-align:center;
    max-width:700px;
    margin:0 auto 60px;
    color:#58708e;
    font-size:22px;
}

@media (min-width:769px){
.services-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:30px;

}

.service-card img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .5s ease;
}

.catalogo-profesional{

    position:relative;
    overflow:hidden;

}

.catalogo-profesional::before{

    content:"";

    position:absolute;
    inset:0;

    background:url("../img/fondohydra.jpg") center/cover;

    opacity:.10;

    z-index:0;

}

.catalogo-profesional>*{

    position:relative;
    z-index:1;

}

.service-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    height:360px;
    width:380px;
}

}
.service-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,.05)
    );

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:20px;
    color:white;
    
}

.service-overlay h3{
    margin-bottom:10px;
    font-size:20px;
}

.service-overlay p{
    font-size:16px;
    line-height:1.5;
        color:rgb(204, 203, 203);
    
}


.team-card{

    transition:.35s ease;

}

.team-card:hover{

    transform:translateY(-10px);

}

.team-card img{

    transition:.6s ease;

}

.team-card:hover img{

    transform:scale(1.05);

}
.team-card{

        opacity:0;

    transform:translateY(40px);

        position:relative;

}

.team-card h3{

    transition:.3s ease;

}

.team-card:hover h3{

    color:#1ea8ef;


}

.benefits{
    padding:120px 0;
}

.benefits-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

.benefits-images{
    position:relative;
    width:50%;
    min-height:500px;
    padding-left:40px;
}

.img-main{
    width:340px;
    border-radius:25px;
    right:120px;
    bottom:60px;
    box-shadow:
    0 12px 30px rgba(19, 8, 8, 0.521);
}

.img-secondary{
    width:280px;
    border-radius:25px;

    position:absolute;
    right:0;
    bottom:60px;
    box-shadow:
    0 12px 30px rgba(19, 8, 8, 0.521);
}

.benefit-stat{
    position:absolute;

    left:30px;
    bottom:100px;

    background:white;
    padding:20px 25px;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

.benefit-stat h3{
    color:#1ea8ef;
    font-size:40px;
}

.benefits-content{
    width:50%;
}

.benefits-content h2{
    font-size:50px;
    line-height:1.1;
    margin-bottom:40px;
    color:#07162f;
}

.benefit-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
    margin-bottom:18px;
    
}

.benefit-icon{
    width:48px;
    height:48px;

    border-radius:50%;
    background:hsl(207, 88%, 94%);

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

    font-size:20px;
    flex-shrink:0;
}

.benefit-text p{
    color:#7c8da3;
    line-height:1.6;
}

.benefit-item h4{
    font-size:20px;
    margin-bottom:8px;
}

.benefits-images{

    opacity:0;

    transform:translateX(-50px);

}

.benefits-content{

    opacity:0;

    transform:translateX(50px);

}

.img-main,
.img-secondary{

    transition:.4s ease;

}

.img-main:hover,
.img-secondary:hover{

    transform:scale(1.03);

}

.benefit-stat{

    transition:.3s ease;

}

.benefit-stat:hover{

    transform:translateY(-5px);

}

.benefit-item i{

    transition:.3s ease;

}

.benefit-item:hover i{

    transform:scale(1.2);

}

.benefit-stat{

    animation:floatCard 4s ease-in-out infinite;

}

@keyframes floatCard{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }

}

.benefit-item{

    opacity:0;

    transform:translateX(30px);

}

.btn-reservar{
    display:inline-block;

    margin-top:25px;

    background:#1ea8ef;
    color:white;

    padding:18px 34px;

    border-radius:14px;

    font-weight:700;
}

.btn-reservar{
    transition:.3s ease;
}

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

.team{
    padding:120px 0;
     position:relative;
    overflow:hidden;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;

    width:92%;
    max-width:1500px;

    margin:0 auto;
}

.team-card{
    transition:.3s ease;
}

.team-card:hover{
    transform:translateY(-8px);
}

.team-card img{
    width:100%;
    height:580px;
    object-fit:cover;
    border-radius:25px;
    transition:.4s ease;
}

.team-info{
    padding-top:12px;
    text-align:center;
}

.team-info h3{
    font-size:32px;
    margin-bottom:10px;
    color:#07162f;
}

.team-info span{
    color:#1ea8ef;
    font-weight:500;
    display:block;
    margin-bottom:10px;
     font-size:20px;
}

.team-info p{
    color:#6d8098;
   font-size:19px;
}

.team-card:hover img{
    filter:brightness(1.03);
}

.gallery{

    background:linear-gradient(
        to bottom,
        #dff3ff 0%,
        #dff3ff 75%,
        #f7f9fc 100%
    );

}


.gallery::before{

    content:"";

    position:absolute;

    width:1200px;
    height:1200px;

    left:50%;
    top:55%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(127,213,255,.35) 0%,
        rgba(127,213,255,.18) 45%,
        rgba(127,213,255,.08) 70%,
        transparent 100%
    );

    z-index:0;

}


.gallery .container{

    position:relative;

    z-index:1;

}

.gallery-grid{
    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    gap:20px;
}

.gallery-grid img{
    width:100%;
    height:250px;

    object-fit:cover;

    border-radius:20px;

    transition:.4s ease;
}

.gallery-grid img:hover{
    transform:scale(1.03);
}

.gallery-big{
    grid-row:span 2;
    height:520px !important;
}

.testimonials{
    background:#061a3a;

    padding:120px 0;


}

.testimonial-tag{
    color:#3db8ff;
}

.testimonial-title{
    text-align:center;

    color:white;

    font-size:58px;

    margin-bottom:70px;
}

.testimonial-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;
}

.testimonial-card{
    background:#0d2449;

    padding:30px;

    border-radius:25px;

    border:1px solid rgba(255,255,255,.08);

    transition:.3s ease;
}

.testimonial-card:hover{
    transform:translateY(-8px);
}

.stars{
    color:#38d66b;

    font-size:24px;

    margin-bottom:20px;
}

.testimonial-card p{
    color:white;

    line-height:1.8;

    margin-bottom:25px;
}

.testimonial-author strong{
    display:block;

    color:white;

    margin-bottom:5px;
}

.testimonial-author span{
    color:#9eb4d0;
}

.branches{
    padding:120px 0;
}

.branches-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    
}

.branch-card{
    background:white;
    border-radius:25px;
    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.branch-card iframe{
    width:100%;
    height:300px;
    border:none;
    display:block;
}

.branches .catalogo-card{

    padding:0;

}

.branch-info{
    padding:20px 30px 30px;
}

.branch-info h3{
    font-size:20px;
    color:#07162f;
    margin-bottom:15px;
}

.branch-info p{
    margin-bottom:12px;
    color:#5f728c;
    font-size:17px;
    line-height:1.5;
}

.maps-btn{

    display:block;

    width:100%;

    text-align:center;

    margin-top:20px;

    padding:14px;

    background:#1ea8ef;

    color:white;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.maps-btn:hover{
    background:#0094e3;
}

.producto-precios{
    display:flex;
    align-items:center;
    gap:8px;
}

.precio-anterior{
    display:none;

    color:#94a3b8;
    font-size:.9rem;

    text-decoration:line-through;
}

.descuento-badge{
    display:none;

    padding:3px 8px;

    background:#16a34a;
    color:white;

    border-radius:999px;

    font-size:.72rem;
    font-weight:700;
}

.producto-card.en-oferta .precio-anterior,
.producto-card.en-oferta .descuento-badge{
    display:inline-block;
}

.branch-item{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:15px;
}

.branch-icon{
    width:38px;
    height:38px;

    border-radius:50%;

    background:#eaf7fd;

    color:#1ea8ef;

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

    flex-shrink:0;
}

.contact-section{
    padding:40px 120;
}

.contact-container{
    background:#1ea8ef;
    border-radius:35px;
    padding:70px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    max-width:1100px;
    margin:auto;
}

.contact-left,
.contact-right{
    flex:1;
}

.contact-left h2{
    color:white;
    font-size:42px;
    line-height:1.1;
    margin-bottom:20px;
}

.contact-left p{
    color:white;
    line-height:1.6;
    margin-bottom:25px;
    max-width:420px;
}

.contact-whatsapp{
    display:inline-block;

    background:#1bc65b;

    color:white;

    padding:18px 28px;

    border-radius:15px;

    font-weight:700;
}

.socials{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.socials a{
    width:50px;
    height:50px;

    border-radius:50%;

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

    display:flex;

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

    color:white;

    font-size:22px;
}

.contact-right{
    background:white;
    padding:25px;
    border-radius:25px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.contact-right h3{
    margin-bottom:30px;
}

.contact-actions{
    display:flex;
    align-items:center;
    gap:15px;
}

.socials{
    display:flex;
    gap:15px;
    margin-top:0;
}

.schedule-item{
    display:flex;

    justify-content:space-between;

    padding:15px 0;

    border-bottom:1px solid #e8edf5;
}

.emergency-box{
    margin-top:25px;

    background:#e8fff0;

    color:#1e9f4d;

    padding:18px;

    border-radius:12px;

    font-weight:600;
}

.footer{
    background:#061a3a;

    padding:35px 0;

    margin-top:120px;
}

.footer-content{
    display:flex;

    justify-content:space-between;

    align-items:center;
}

.footer-logo{
    color:white;

    font-size:24px;

    font-weight:700;
}

.footer p{
    color:#b8c5d8;
}

.socials a{
    width:50px;
    height:50px;

    border-radius:50%;

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

    display:flex;

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

    text-decoration:none;

    color:white;

    font-size:22px;

    transition:.3s;
}

.socials a:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.25);
}

.footer{
    background:#f7f9fc;
    margin-top:80px;
    border-top:1px solid #dbe3ec;
}

.footer-top{
    display:grid;
    grid-template-columns:
    1.5fr
    1fr
    1fr
    1fr;

    gap:60px;

    padding:80px 0;
}

.footer-logo{
    width:180px;
    margin-bottom:20px;
}

.footer-brand p{
    color:#5f728c;
    line-height:1.8;
    margin-bottom:25px;
}

.footer-column h4{
    margin-bottom:25px;

    font-size:18px;

    color:#07162f;
}

.footer-column{
    display:flex;
    flex-direction:column;
}

.footer-column a{
    text-decoration:none;

    color:#5f728c;

    margin-bottom:15px;

    transition:.3s;
}

.footer-column a:hover{
    color:#1ea8ef;
}

.footer-column p{
    color:#5f728c;
    margin-bottom:18px;
}

.footer-socials{
    display:flex;
    gap:15px;
}

.footer-socials a{
    width:45px;
    height:45px;

    border-radius:50%;

    border:1px solid #dbe3ec;

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

    text-decoration:none;

    color:#07162f;

    transition:.3s;
}

.footer-socials a:hover{
    background:#1ea8ef;
    color:white;
    border-color:#1ea8ef;
}

.footer-bottom{
    border-top:1px solid #dbe3ec;
}

.footer-bottom-content{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px 0;
}

.footer-bottom p{
    color:#5f728c;
}

.team{
    position: relative;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #e8f7ff 20%,
        #d8f2ff 80%,
        #ffffff 100%
    );

    padding: 140px 0;
}

.team::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:#7fd5ff;

    opacity:.15;

    border-radius:50%;

    top:-150px;
    left:-150px;
}

.team::after{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    background:#4ec7ff;

    opacity:.10;

    border-radius:50%;

    bottom:-120px;
    right:-120px;
}

.gallery{
    position: relative;

    background: linear-gradient(
        180deg,
        #fffffff6 0%,
        #e2f4fcfd 50%,
        #d4eefdee 100%
    );

    padding: 120px 0;
}


.gallery-grid img{
    transition:.4s;
}

.gallery-grid img:hover{
    transform:translateY(-8px);
}

.gallery-grid img{
    border-radius:20px;

    transition:.4s;

    box-shadow:
    0 8px 25px rgba(0,0,0,.08);
}

.gallery-grid img:hover{
    transform:scale(1.03);

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

html{
    scroll-behavior:smooth;
}

.service-icon i{
    font-size:18px;
}

.service-icon{
    position:absolute;
    top:20px;
    left:20px;

    width:56px;
    height:56px;

    border-radius:50%;
    background:white;

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

    z-index:5;

    box-shadow:0 10px 25px rgba(0,0,0,.10);
}

.service-icon img{

    width:55px;
    height:55px;

    object-fit:contain;

}

.service-icon i{
    color:#1ea8ef;
    font-size:20px;
}

.service-link{
    display:inline-block;
    margin-top:15px;

    color:white;
    text-decoration:none;
    font-weight:600;
}

.modal{
    display:none;

    position:fixed;
    inset:0;

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

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

    z-index:9999;
}

.modal-content ul{

    display:inline-block;

    text-align:left;

    padding-left:22px;

    margin:12px auto;

}

.modal-content li{

    margin:6px 0;

}


.modal-content{
    background:#fff;

    width:550px;

    padding:35px;

    border-radius:22px;

    text-align:center;

    position:relative;

    box-shadow:
        0 20px 60px rgba(0,0,0,.18);

    animation:aparecer .25s ease;

    max-height:90vh;
    overflow-y:auto;

    animation: aparecer .25s ease;
}

.modal-content.modal-equipo h2 {
    color: #20a7f2;
}

.modal-content.modal-equipo h4 {
    color: #21af2a;
}


.service-icon{
    pointer-events: auto;
    cursor: pointer;
}

.opciones-sucursal-tienda{

    display:flex;
    gap:15px;

    justify-content:center;

    margin-top:25px;

}

.btn-sucursal-tienda{

    border:2px solid #0ea5e9;

    background:white;
    color:#0ea5e9;

    padding:14px 22px;

    border-radius:14px;

    font-size:1rem;
    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-sucursal-tienda:hover{

    background:#0ea5e9;
    color:white;

    transform:translateY(-2px);

}

.modal-content a{
    display:block;

    margin:15px 0;

    padding:15px;

    background:#1ea8ef;

    color:white;

    border-radius:12px;

    text-decoration:none;
}


#cerrar-detalles{

    position:absolute;

    top:20px;

    right:20px;

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:#eef3f8;

    color:#0b1736;

    font-size:24px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

    z-index:20;

}

.cerrar-servicios,
.cerrar-marcas,
.cerrar-spa,
.cerrar-extras,
.cerrar-cortes,
.cerrar-modal,
.cerrar-estetica,
.cerrar-banos{

    position:absolute;
    top:15px;
    right:15px;

    width:36px;
    height:36px;

    border:none;
    border-radius:50%;

    background:#eef4fa;
    color:#5f728c;

    font-size:24px;
    font-weight:700;

    cursor:pointer;

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

    transition:all .25s ease;

    z-index:100;

}


.cerrar-servicios::hover,
.cerrar-marcas:hover,
.cerrar-spa:hover,
.cerrar-extras:hover,
.cerrar-modal:hover,
.cerrar-estetica:hover,
.cerrar-banos:hover{

    background:#1ea8ef;
    color:#fff;

    transform:rotate(90deg);

}

.modal-cortes .catalogo-card:last-child{

    grid-column:1 / 3;

    max-width:400px;

    width:100%;

    justify-self:center;

}

.modal-banos .catalogo-card:last-child{

    grid-column:1 / 3;

    max-width:400px;

    width:100%;

    justify-self:center;

}

.modal-spa .catalogo-card:last-child{

    grid-column:1 / 4;

    max-width:320px;

    width:100%;

    justify-self:center;

}
.btn-sucursal{

    display:block;

    width:100%;

    margin:15px 0;
    padding:16px;

    background:#1ea8ef;
    color:white;

    text-decoration:none;
    text-align:center;

    font-weight:600;
    font-size:17px;

    border-radius:12px;

    transition:all .25s ease;

    box-shadow:0 6px 18px rgba(30,168,239,.25);

}

.btn-sucursal:hover{

    background:#1497da;

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(30,168,239,.35);

}

.btn-sucursal:active{

    transform:scale(.98);

}

.btn-sucursal i{
    margin-right:10px;
}


.modal-spa,
.modal-extras,
.modal-cortes,
.modal-estetica,
.modal-banos{

    width:min(900px,90vw);
    max-height:90vh;
    overflow-y:auto;
    padding:40px;

}

.catalogo-subtitulo{

    color:#6f84a0;
    margin:10px 0 35px;
    text-align:center;
    font-size:20px;

}

.catalogo-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;

}


.catalogo-card{

    display:flex;
    flex-direction:column;

    background:#fff;

    border:1px solid #e6eef7;
    border-radius:22px;

    padding:30px;

    text-align:center;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

    transition:.3s;

}

@media (min-width:769px){

    .catalogo-card:hover{

        transform:translateY(-6px);

        box-shadow:0 18px 40px rgba(0,0,0,.10);

    }

    .catalogo-card:hover .catalogo-icono{

        transform:scale(1.15) rotate(8deg);

    }

}

.catalogo-icono{

    width:70px;
    height:70px;

    margin:0 auto 20px;

    border-radius:50%;
    background:#eaf7fd;

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

    font-size:34px;

}

.catalogo-card h3{

    color:#07162f;
    font-size:24px;

    margin-bottom:12px;

}

.catalogo-card p{

    color:#6f84a0;
    line-height:1.7;

    margin-bottom:22px;

    flex:1;

}

.descripcion-servicio{

    color:#66768d;

    margin-bottom:18px;

    line-height:1.6;

}

.servicio-lista{

    list-style:none;

    padding:0;

    margin:0 0 22px;

    text-align:left;

}

.servicio-lista li{

    position:relative;

    padding-left:24px;

    margin-bottom:10px;

    color:#4d617b;

}

.servicio-lista li::before{

    content:"✔";

    color:#25c26e;

    font-weight:bold;

    position:absolute;

    left:0;

}

.btn-catalogo{

    width:100%;

    margin-top:auto;

    border:none;

    border-radius:12px;

    background:#1ea8ef;

    color:#fff;

    padding:15px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.btn-catalogo:hover{

    background:#1497da;

    transform:translateY(-2px);

}

.btn-catalogo:active{

    transform:scale(.98);

}
.volver-tienda,
.volver-alimentos,
.volver-spa,
.volver-extras,
.volver-cortes,
.volver-estetica{

    position:absolute;

    top:22px;
    left:22px;

    background:none;
    border:none;

    color:#7a8da8;

    font-size:20px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}
.volver-tienda:hover,
.volver-alimentos:hover,
.volver-spa:hover,
.volver-extras:hover,
.volver-cortes:hover,
.volver-estetica:hover{

    color:#1ea8ef;

}

.modal-spa{

    width:min(1000px,92vw);

}

.modal-spa .catalogo-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}

.modal-spa .catalogo-card{

    padding:22px;

}

.modal-spa .catalogo-icono{

    width:60px;
    height:60px;

    font-size:28px;

}

.modal-spa .catalogo-card h3{

    font-size:20px;

}

.modal-spa .catalogo-card p{

    min-height:auto;

    margin-bottom:18px;

    font-size:17px;

}

.spa-titulo{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-bottom:18px;

}

.modal-spa .catalogo-icono{

    width:52px;
    height:52px;

    margin:0;

    font-size:26px;

    flex-shrink:0;

}

.modal-spa h3{

    margin:0;

    font-size:30px;

}
@media(max-width:768px){
    .modal-extras,
.modal-cortes,
    .modal-estetica,
    .modal-banos{

        width:95vw;
        padding:25px;

    }


    .modal-spa .catalogo-grid{

        display:flex;

        gap:0;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        padding:10px 20px;

        scrollbar-width:none;

    }

} 


@keyframes aparecer{

    from{
        transform:translateY(20px);
        opacity:0;
    }

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

}

.btn-detalles{

    background:none;

    border:none;

    color:#1ea8ef;

    font-weight:600;

    cursor:pointer;

    margin-bottom:15px;

    transition:.3s;

}

.btn-detalles:hover{

    transform:translateX(5px);

}

.detalle-content{

    max-width:900px;

    text-align:center;

}


.miembro-card h3 {
    margin-bottom: 8px;
}

.miembro-card p {
    margin-top: 0;
}

.detalle-content h2{

    text-align:center;

    margin-bottom:15px;

}

.detalle-content p{

    color:#5f728c;

    line-height:1.2;

}

.detalle-content h4{

    margin-top:25px;

    margin-bottom:10px;

    color:#07162f;

}

.detalle-content ul{

    padding-left:25px;

    margin-bottom:15px;

}

.detalle-content li{

    margin-bottom:8px;

    color:#5f728c;

}


.testimonial-card{

    opacity:0;

    transform:translateY(40px);

}

.testimonial-card{

    transition:.35s ease;

}


.catalogo-card{

    position:relative;
    overflow:hidden;

}

.badge-premium-corner{

    position:absolute;

    top:0;
    right:0;

    padding:8px 14px;

    border-bottom-left-radius:12px;

    font-size:10px;
    font-weight:800;

    letter-spacing:1px;

    color:#5a3d00;

    background:linear-gradient(
        135deg,
        #fff4b0 0%,
        #ffd95c 20%,
        #ffbf2f 50%,
        #ffd95c 80%,
        #fff4b0 100%
    );

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.8),
        0 3px 10px rgba(255,191,47,.25);

    overflow:hidden;

}

.badge-premium-corner::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:50%;
    height:100%;

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

    transform:skewX(-25deg);

    animation:shine 4s infinite;

}

@keyframes shine{

    0%{
        left:-100%;
    }

    20%{
        left:150%;
    }

    100%{
        left:150%;
    }

}

.catalogo-icono{

    transition:.3s ease;

}



.placa-valoracion{

    display:inline-block;

    margin:5px 0 12px;

    padding:7px 16px;

    background:linear-gradient(
        145deg,
        #f4f4f4,
        #d9d9d9,
        #f4f4f4
    );

    border:1px solid #cfcfcf;

    border-radius:999px;

    color:#4a4a4a;

    font-size:13px;
    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}

.placa-cortes{

    max-width:700px;

    margin:10px auto 20px;

    padding:14px 20px;

    background:linear-gradient(
        135deg,
        #fff7d6,
        #ffe08a
    );

    border:1px solid #ffd05a;

    border-radius:16px;

    color:#8a5a00;

    font-size:18px;
    font-weight:600;

    text-align:center;

}

.navbar a{

    position:relative;

    transition:.3s ease;

}

.navbar a:hover{

    color:#1ea8ef;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    width:0;
    height:3px;

    background:#1ea8ef;

    border-radius:20px;

    transform:translateX(-50%);

    transition:.3s ease;

}

.nav-links a:hover::after{

    width:100%;

}

.contacto-modal{

    max-width:500px;
    text-align:center;

}

.contact-options{

    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:25px;

}

.contact-option{

    background:#1ea8ef;
    color:white;
    text-decoration:none;

    padding:15px;
    border-radius:12px;

    font-family:"Author Semibold";

    transition:.3s ease;

}

.contact-option:hover{

    transform:translateY(-2px);

}

.contact-option.whatsapp{

    background:#25d366;

}

.contact-btn{

    display:flex;
    align-items:center;
    gap:10px;

    padding:14px 26px;

    background:#1ea8ef;

    color:white;

    border-radius:999px;

    text-decoration:none;

    font-family:"Author Semibold";

    font-size:15px;

    transition:.3s ease;

    box-shadow:
        0 10px 25px rgba(30,168,239,.20);

}

.contact-btn i{

    font-size:16px;

    transition:.3s ease;

}
.contact-btn:hover{

    transform:translateY(-3px);

    background:#1699db;

    box-shadow:
        0 15px 35px rgba(30,168,239,.30);

}

.contact-btn:hover i{

    transform:rotate(-15deg);

}

.modal-close{

    position:absolute;

    top:20px;
    right:25px;

    font-size:24px;

    color:#07162f;

    cursor:pointer;

    transition:.3s;

}

.modal-close:hover{

    color:#1ea8ef;

    transform:rotate(90deg);

}

.contact-options{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.sucursal-title{

    margin:15px 0 10px;

    color:#07162f;

    font-family:"Author Medium";

    font-size:20px;

}

.contact-option{

    transition:.3s ease;

}

.contact-option:hover{

    transform:translateY(-3px);

    filter:brightness(1.05);

}

.modal-contacto-content{

    max-width:520px;

    padding:35px 40px;

}

.modal-contacto-content .sucursal-title{

    margin:5px 0 10px;

}

.modal-contacto-content .contact-option{

    margin:0;

}

.sucursal-card{

    background:#f8fafc;

    border:1px solid #e5edf5;

    border-radius:20px;

    padding:25px;

}

.sucursal-card h4{

    text-align:center;

    margin-bottom:18px;

    font-family:"Author Medium";

    color:#07162f;

    font-size:22px;

}

.sucursal-actions{

    display:flex;

    gap:12px;

}

.contact-option{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    padding:14px;

    border-radius:12px;

    text-decoration:none;

    color:white;

    font-family:"Author Semibold";

    transition:.3s ease;

}

.call{

    background:#1ea8ef;

}

.whatsapp{

    background:#25d366;

}

.contact-option:hover{

    transform:translateY(-3px);

}

.modal-contacto-content{

    max-width:550px;

}

.contact-options{

    display:flex;

    flex-direction:column;

    gap:18px;

}
#cerrar-contacto{

    position:absolute;

    top:20px;
    right:20px;

    width:36px;
    height:36px;

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

    border-radius:50%;

    color:#64748b;

    cursor:pointer;

    transition:.3s ease;

}

#cerrar-contacto:hover{

    background:#e2e8f0;

    color:#1ea8ef;

    transform:rotate(90deg);

}

.modal-contacto-content{

    position:relative;

}

.team-image{

    position:relative;

}

.btn-team-info{

    position:absolute;

    top:15px;

    right:15px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:rgba(14,165,233,.95);

    color:white;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    backdrop-filter:blur(8px);

    box-shadow:
        0 8px 20px rgba(14,165,233,.35);

    transition:.25s;

}

.btn-team-info:hover{

    transform:translateY(-2px);

}

.btn-team-info:hover .tooltip{

    opacity:1;

    visibility:visible;

}

.btn-team-info{

    position:absolute;

    top:15px;

    right:15px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#0EA5E9;

    color:white;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}

.tooltip{

    position:absolute;

    top:50%;

    right:60px;

    transform:translateY(-50%);

    background:#07162f;

    color:white;

    padding:8px 12px;

    border-radius:8px;

    font-size:.85rem;

    white-space:nowrap;

    opacity:0;

    visibility:hidden;

    transition:.25s;

}

.equipo-galeria{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:20px;

}

.miembro-card img{

    width:100%;

    height:auto;

    display:block;

    border-radius:16px;

}

.miembro-card{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.btn-cerrar-modal{

    position:absolute;

    top:20px;

    right:20px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#f1f5f9;

    color:#07162f;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.1rem;

    transition:.25s;

}


.productos-lista{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-top:20px;

}

.producto-info{

    flex:1;

}

.producto-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.precio{

    color:#16a34a;

    font-size:1.4rem;

    font-weight:700;

}

.producto-card{

    display:flex;

    gap:20px;

    align-items:center;

    padding:20px;

    border-radius:24px;

    background:white;

    border:1px solid #e5e7eb;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.producto-card:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.producto-card img{

    width:140px;

    height:140px;

    object-fit:contain;

    flex-shrink:0;

}

.btn-whatsapp-producto{

    margin-top:15px;

    border:none;

    border-radius:12px;

    padding:12px 18px;

    background:#73cf4c;

    color:white;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.btn-whatsapp-producto:hover{

    transform:translateY(-2px);

}

.logo-marca{

    width:100%;

    max-width:600px;

    height:150px;

    object-fit:contain;

    margin:0 auto 20px;

    display:block;

}

.btn-catalogo{

    margin-top:auto;

}

@media (min-width:769px){
.modal-marcas .catalogo-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.modal-marcas{

    width:95%;

    max-width:1200px;

}

}

.store{

    padding:100px 5%;

}

.store-layout{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:40px;

    margin-top:50px;

}

.store-sidebar{

    position:sticky;

    top:120px;

    align-self:start;

}

.sidebar-group{

    margin-bottom:35px;

}

.sidebar-group h3{

    color:#07162f;

    font-size:1rem;

    margin-bottom:15px;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.sidebar-group button{

    display:block;

    width:100%;

    text-align:left;

    border:none;

    background:none;

    padding:10px 0;

    cursor:pointer;

    color:#64748b;

    font-size:1rem;

    transition:.25s;

}

.sidebar-group button:hover{

    color:#0EA5E9;

    transform:translateX(5px);

}

.store-content{

    width:100%;

}

.buscador-productos{

    position:relative;

    margin-bottom:30px;

}

.buscador-productos i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

}

.buscador-productos input{

    width:100%;

    padding:15px 20px 15px 50px;

    border:1px solid #dbe2ea;

    border-radius:16px;

    font-size:1rem;

}

.store-sidebar button.active{

    color:#0EA5E9;

    font-weight:700;

}

.productos-lista{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.btn-filtro.active{

    color:#0EA5E9;

    font-weight:700;

}

@media(min-width:768px){

.producto-card{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:40px;

    align-items:start;

}

.producto-media{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;

}

.producto-info{

    margin:15px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.precio{

    margin-top:20px;
    margin-bottom:15px;

}

.descripcion-producto{

    margin:10px 0 15px;

    color:#64748b;

    font-size:1.1rem;

    line-height:1.5;

}

}

@media(max-width:768px){

    .store-layout{

        grid-template-columns:1fr;

    }

    .store-sidebar{

        position:static;

    }

}

.filtro-mobile{
    display:none;
}

.section-header{

    text-align:center;

    margin-bottom:40px;

}

.section-header h2{

    font-size:50px;

    margin-bottom:10px;

}


.selector-presentacion{

    margin:15px 0;

}

.selector-presentacion label{

    display:block;

    margin-bottom:6px;

    font-size:.9rem;

    font-weight:600;

}

.selector-presentacion select{

    width:100%;

    padding:10px;

    border:1px solid #dbe4ee;

    border-radius:10px;

}

.filtro-especie{

    display:flex;
    gap:10px;
    margin:20px 0;

}

.btn-especie{

    border:none;
    background:#f1f5f9;
    color:#07162f;
    padding:10px 18px;
    border-radius:999px;
    cursor:pointer;
    font-weight:600;
    transition:.25s;

}

.color-blue .service-hint{
    color:#16a9e5;
    border-color:#16a9e5;
}

.color-green .service-hint{
    color:#8DC63F;
    border-color:#8DC63F;
}

.color-green .service-hint::before{
    border-left-color:#8DC63F;
    border-bottom-color:#8DC63F;
}

.service-hint i{
    color:inherit;
}

.card-ofertas{

    position:relative;

    background:#fff;

    border:2px solid #1ea8ef;

    border-radius:18px;

    padding:22px;

    margin-bottom:22px;

    overflow:hidden;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:
        transform .3s,
        box-shadow .3s,
        border-color .3s;

}

/* Fondo que nace desde la huellita */

.card-ofertas::before{

    content:"";

    position:absolute;

    width:60px;

    height:60px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #31b4ff,
        #0d86d7
    );

    top:22px;

    right:22px;

    transform:translate(50%,-50%) scale(0);

    transition:
        transform .55s cubic-bezier(.2,.9,.2,1);

    z-index:1;

}

/* El contenido siempre encima */

.card-ofertas>*{

    position:relative;

    z-index:2;

}

/* Hover */

.card-ofertas:hover{

    transform:translateY(-5px);

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

}

/* Activa */

.card-ofertas.activa::before{

    transform:translate(50%,-50%) scale(18);

}

.card-ofertas.activa{

    border-color:#0d86d7;

}

.titulo-ofertas,
.accion-ofertas{

    color:#0d86d7;

    transition:color .35s;

}

.texto-ofertas{

    color:#555;

    transition:color .35s;

}

.card-ofertas.activa .titulo-ofertas,
.card-ofertas.activa .texto-ofertas,
.card-ofertas.activa .accion-ofertas{

    color:#fff;

}

.card-ofertas-paw{

    position:absolute;

    top:18px;

    right:18px;

    font-size:4.8rem;

    color:#1ea8ef;

    opacity:.08;

    transform:rotate(10deg);

    transition:
        transform .45s,
        color .35s,
        opacity .35s;

}

.card-ofertas:hover .card-ofertas-paw{

    transform:rotate(0deg) scale(1.05);

    opacity:.12;

}

.card-ofertas.activa .card-ofertas-paw{

    color:#fff;

    opacity:.22;

    transform:rotate(-8deg) scale(1.12);

}

/* ===== ESCRITORIO ===== */
@media (min-width:769px){

    .service-hint{

        position:absolute;

        left:72px;
        top:50%;

        transform:translateY(-50%) translateX(-10px);

        display:flex;
        align-items:center;
        gap:8px;

        padding:8px 14px;

        background:#fff;
        color:#0ea5e9;

        border:2px solid #0ea5e9;
        border-radius:999px;

        font-size:.8rem;
        font-weight:600;

        white-space:nowrap;

        opacity:0;

        transition:.3s;

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

        pointer-events:none;

    }

    .service-card:hover .service-hint{

        opacity:1;

        transform:translateY(-50%) translateX(0);

    }

}


.team-card{
    cursor:pointer;
    transition:.3s;
}

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

.btn-especie:hover{

    background:#e2e8f0;

}

.btn-especie.active{

    background:#0EA5E9;
    color:white;

}

.menu-toggle{

    display:none;

}

.mobile-menu{

    position:fixed;

    top:71px;

    left:0;

    width:100%;

    background:white;

    z-index:999;

    border-bottom:1px solid #e8eef5;

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:15px;

    opacity:0;

    visibility:hidden;

    transform:translateY(-15px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.mobile-menu a{

    display:flex;

    align-items:center;

    padding:14px 18px;

    border-radius:14px;

    color:#07162f;

    font-family:"Author Medium";

    transition:.25s ease;

}

.mobile-menu a:hover{

    background:#eaf7fd;

    color:#1ea8ef;

}

.menu-toggle i{

    transition:
        transform .25s ease;

}

.menu-toggle i.fa-times{

    transform:rotate(180deg);

}

.contact-btn-mobile{

    margin-top:10px;

    justify-content:center;

    background:#1ea8ef;

    color:white !important;

    border-radius:14px;

    font-family:"Author Semibold";

}

.contact-btn-mobile:hover{

    background:#1699db;

}
   
.catalogo-indicadores{
    display:none;
}

.spa-tabs{

    display:none;

}

.contador-productos{

    margin:15px 0 20px;

    color:#64748b;

    font-size:.95rem;

    font-weight:500;

}

.ofertas-flotante{

    display:none;

}

.aviso-ofertas{

    display:flex;

    align-items:center;

    gap:12px;

    margin:14px 0 20px;

    padding:14px 18px;

    background:#eef8ff;

    border:1px solid #b9e2ff;

    border-left:5px solid #1ea8ef;

    border-radius:14px;

    color:#0f4f73;

    font-size:14px;

    opacity:0;

    transform:translateY(-10px);

    max-height:0;

    overflow:hidden;

    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .35s ease,
        max-height .45s ease,
        padding .35s ease,
        margin .35s ease;

}

.aviso-ofertas{

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 18px;

    margin:0;

    background:#eef8ff;

    border:1px solid #b9e2ff;

    border-left:5px solid #1ea8ef;

    border-radius:14px;

    color:#0f4f73;

    font-size:14px;

    opacity:0;

    transform:translateY(-12px);

    max-height:0;

    overflow:hidden;

    pointer-events:none;

    transition:
        opacity .35s,
        transform .35s,
        max-height .45s,
        padding .35s,
        margin .35s;

}

 .aviso-ofertas.visible{

    opacity:1;

    transform:translateY(0);

    max-height:100px;

    padding:14px 18px;

    margin:14px 0 20px;

    pointer-events:auto;

}

/*==================================================
        CATÁLOGO PROFESIONAL
==================================================*/

.catalogo-profesional{

    padding:100px 8%;
    background:#f8fbff;

}

.catalogo-header{

    background:#ffffff;
    border-radius:28px;
    padding:50px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    border:1px solid #e8eef5;

}

.catalogo-header-texto{

    flex:1;

}

.catalogo-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#eaf8ff;
    color:#0ea5e9;
    padding:8px 18px;
    border-radius:50px;
    font-size:.9rem;
    font-weight:600;
    margin-bottom:20px;

}

.catalogo-header h2{

    font-size:2.3rem;
    color:#12344d;
    line-height:1.2;
    margin-bottom:18px;

}

.catalogo-header p{

    color:#607286;
    font-size:1.05rem;
    line-height:1.8;
    max-width:760px;

}

.catalogo-toggle{

    border:none;
    background:#0ea5e9;
    color:white;
    padding:18px 34px;
    border-radius:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1rem;
    font-weight:600;
    transition:.35s;

}

.catalogo-toggle:hover{

    background:#0284c7;
    transform:translateY(-3px);

}

/*=========================================
            CONTENIDO
=========================================*/

.catalogo-contenido{

    margin-top:45px;
    display:none;

}

.catalogo-contenido.abierto{

    display:block;

}

/*=========================================
            INTRODUCCIÓN
=========================================*/

.catalogo-intro{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    background:white;
    padding:50px;
    border-radius:28px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    margin-bottom:45px;

}

.intro-imagen{

    width:100%;
    height:100%;

}

.intro-imagen img{

    width:100%;
    height:450px;
    object-fit:cover;
    border-radius:24px;

}

.intro-texto h3{

    font-size:2rem;
    color:#12344d;
    margin-bottom:20px;

}

.intro-texto p{

    color:#607286;
    line-height:1.9;
    margin-bottom:30px;

}

.intro-beneficios{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;

}

.intro-beneficios div{

    background:#f3f9fc;
    border-radius:15px;
    padding:16px 18px;
    color:#35526b;
    font-weight:500;

}

/*=========================================
            LÍNEAS
=========================================*/

.linea-productos{

    background:white;
    border-radius:25px;
    overflow:hidden;
    margin-bottom:30px;
    box-shadow:0 12px 35px rgba(0,0,0,.06);

}

.linea-toggle{

    width:100%;
    background:white;
    border:none;
    padding:30px 40px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    transition:.3s;

}

.linea-toggle:hover{

    background:#f8fcff;

}

.linea-toggle h3{

    color:#12344d;
    font-size:1.45rem;
    margin-bottom:8px;

}

.linea-toggle p{

    color:#708497;
    font-size:.96rem;

}

.linea-toggle i{

    font-size:1.2rem;
    color:#0ea5e9;

}

.linea-contenido{

    display:none;
    padding:0 40px 40px;

}

.linea-contenido.abierto{

    display:block;

}

/*=========================================
            INFORMACIÓN DE MARCA
=========================================*/

.marca-info{

    display:flex;
    align-items:center;
    gap:25px;
    background:#f7fbff;
    border:1px solid #ddeef9;
    border-radius:20px;
    padding:25px;
    margin-bottom:35px;

}

.marca-info img{

    width:90px;
    height:90px;
    object-fit:contain;
    background:white;
    border-radius:18px;
    padding:12px;

}

.marca-info h4{

    font-size:1.3rem;
    color:#12344d;
    margin-bottom:8px;

}

.marca-info p{

    color:#607286;
    line-height:1.7;

}

/*==================================================
        GALERÍA HORIZONTAL
==================================================*/

.productos-scroll{

    display:flex;
    gap:25px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    padding:10px 5px 20px;

}

.productos-scroll::-webkit-scrollbar{

    height:10px;

}

.productos-scroll::-webkit-scrollbar-track{

    background:#edf5fb;
    border-radius:50px;

}

.productos-scroll::-webkit-scrollbar-thumb{

    background:#0ea5e9;
    border-radius:50px;

}

.productos-scroll::-webkit-scrollbar-thumb:hover{

    background:#0284c7;

}



/*==================================================
        TARJETAS DE PRODUCTOS
==================================================*/

.producto-profesional{

    min-width:320px;
    max-width:320px;
    background:white;
    border-radius:22px;
    overflow:hidden;
    border:1px solid #e5eef5;
    box-shadow:0 12px 30px rgba(0,0,0,.07);
    transition:.35s;
    flex-shrink:0;

}

.producto-profesional:hover{

    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.producto-profesional img{

    width:100%;
    height:250px;
    object-fit:contain;
    background:#f8fbff;
    padding:25px;

}

.producto-info{

    padding:25px;

}

.producto-info h4{

    color:#12344d;
    font-size:1.2rem;
    margin-bottom:10px;

}

.producto-info p{

    color:#607286;
    line-height:1.7;
    margin-bottom:18px;

}

.producto-info ul{

    list-style:none;
    padding:0;
    margin:0;

}

.producto-info li{

    margin-bottom:10px;
    color:#35526b;
    display:flex;
    align-items:center;
    gap:8px;

}

/*==================================================
        ETIQUETAS
==================================================*/

.producto-tags{

    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;

}

.producto-tags span{

    background:#eef8ff;
    color:#0ea5e9;
    border-radius:50px;
    padding:7px 14px;
    font-size:.82rem;
    font-weight:600;

}

/*==================================================
        BOTÓN OPCIONAL
==================================================*/

.producto-profesional .btn-info{

    margin-top:20px;
    width:100%;
    padding:14px;
    border:none;
    border-radius:14px;
    background:#0ea5e9;
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:.3s;

}

.producto-profesional .btn-info:hover{

    background:#0284c7;

}

/*==============================
        TARJETA HYDRA
===============================*/

.hydra-intro{

    margin-top:50px;

}

.hydra-intro .intro-texto{

    order:1;

}

.hydra-intro .intro-imagen{

    order:2;

}

.hydra-intro .intro-imagen img{

    object-fit:cover;

}

@media(max-width:1100px){

    .hydra-intro{

        grid-template-columns:1fr;

    }

    .hydra-intro .intro-texto{

        order:2;

    }

    .hydra-intro .intro-imagen{

        order:1;

    }

}

/*==================================================
        ANIMACIONES
==================================================*/

.catalogo-header,
.catalogo-intro,
.linea-productos,
.producto-profesional{

    animation:catalogoFade .6s ease;

}

@keyframes catalogoFade{

    from{

        opacity:0;
        transform:translateY(30px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.linea-contenido{

    animation:abrirLinea .4s ease;

}

@keyframes abrirLinea{

    from{

        opacity:0;
        transform:translateY(-10px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:1100px){

    .catalogo-header{

        flex-direction:column;
        align-items:flex-start;

    }

    .catalogo-intro{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .catalogo-profesional{

        padding:70px 20px;

    }

    .catalogo-header{

        padding:30px;

    }

    .catalogo-header h2{

        font-size:1.9rem;

    }

    .catalogo-intro{

        padding:30px;

    }

    .intro-imagen img{

        height:260px;

    }

    .intro-beneficios{

        grid-template-columns:1fr;

    }

    .linea-toggle{

        padding:25px;

    }

    .linea-contenido{

        padding:0 25px 30px;

    }

    .marca-info{

        flex-direction:column;
        text-align:center;

    }

.producto-profesional{

    min-width:270px;
    max-width:270px;
    height:auto;

}

.producto-profesional img{

    height:170px;

}

.producto-info{

    padding:18px;

}

.producto-tags{

    margin-top:15px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;

}

.producto-tags span{

    font-size:.75rem;
    padding:6px 10px;

}

}


/*==============================
    CELULAR
==============================*/


@media (max-width:768px){

.ofertas-flotante{

    position:fixed;

    right:18px;

    bottom:20px;

    display:none;

    align-items:center;

    gap:18px;

    padding:16px 22px;

    background:#fff;

    border:2px solid #ef291e;

    border-radius:18px;

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    z-index:9999;

    cursor:pointer;

    overflow:hidden;

    transform-origin:right center;

    transition:
        width .75s cubic-bezier(.18,.9,.25,1),
        height .75s cubic-bezier(.18,.9,.25,1),
        padding .75s cubic-bezier(.18,.9,.25,1),
        border-radius .75s cubic-bezier(.18,.9,.25,1),
        gap .75s cubic-bezier(.18,.9,.25,1),
        transform .75s cubic-bezier(.18,.9,.25,1),
        background .35s,
        box-shadow .35s;

}

.ofertas-flotante.click{

    animation:ofertasClick .45s cubic-bezier(.22,1,.36,1);

}

.ofertas-flotante.click .ofertas-flotante-icono{

    animation:fuegoClick .45s cubic-bezier(.22,1,.36,1);

}

.ofertas-flotante-icono{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:30px;

    line-height:1;

    transition:transform .45s cubic-bezier(.22,1,.36,1);

}

.ofertas-flotante-texto{

    display:flex;

    flex-direction:column;

    gap:3px;

    white-space:nowrap;

    transition:
        opacity .45s ease,
        transform .55s ease,
        max-width .65s ease;


}

.ofertas-flotante-texto strong{

    font-size:20px;

    font-weight:700;

    color:#0f172a;

}

.ofertas-flotante-texto span{

    font-size:14px;

    color:#64748b;

}

.ofertas-flotante.compacta{

    width:64px;

    height:64px;

    padding:0;

    gap:0;

    border-radius:50%;

    justify-content:center;

    align-items:center;

    transform:scale(.92);

}

.ofertas-flotante.compacta .ofertas-flotante-texto{

    opacity:0;

    transform:translateX(20px);

    max-width:0;

    overflow:hidden;

    pointer-events:none;

    transition-delay:.12s;

    transform:translateX(20px);

    transition:.35s;

}

.barra-scroll{

    width:100%;
    height:8px;

    background:#e7eef5;

    border-radius:999px;

    overflow:hidden;

    position:relative;

    margin-top:18px;

}

.barra-scroll-progreso{

    position:absolute;

    left:0;

    top:0;

    width:30%;

    height:100%;

    background:#0ea5e9;

    border-radius:999px;

    transition:transform .12s linear;

}

.ofertas-flotante.compacta .ofertas-flotante-icono{

    transform:scale(1.15);

}

.ofertas-flotante.activa{

    background:#ef1e1e;

    border-color:#ef3d1e;

}

.ofertas-flotante.activa strong,

.ofertas-flotante.activa span{

    color:#fff;

}

.ofertas-flotante.mostrar{

    animation:aparecerOferta .65s cubic-bezier(.22,1,.36,1);

}

        .oculta-spa{

        display:none !important;

    }


.navbar{

    position:sticky;

    top:0;

    z-index:1000;

    background:white;

}
    .nav-content{

        flex-direction:column;

        height:auto;

        padding:10px 0;

        gap:10px;

    }

    .logo img{

        height:45px;

    }

    nav{

        flex-wrap:wrap;

        justify-content:center;

        gap:12px;

    }

    nav a{

        font-size:14px;

    }

    .contact-btn{

        padding:10px 18px;

        font-size:14px;

    }

    .hero-overlay{

        min-height:auto;

    }

    .hero-content{

        padding:60px 25px;

    }

    .hero-badge{

        font-size:12px;

        padding:8px 16px;

        margin-bottom:20px;

    }

    .hero h1{

        font-size:58px;

        max-width:100%;

    }

    .hero p{

        font-size:18px;

        line-height:1.6;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .btn-primary,
    .btn-secondary{

        text-align:center;

    }

    .hero{

        background-position:85% center;

        background-size:300% !important;

        animation:none;

        background-size:150%;


    }

    .nav-content{

        flex-direction:row;

        justify-content:space-between;

        align-items:center;

        height:auto;

        padding:12px 0;

    }

    .menu-toggle{

        display:flex;

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

        width:42px;
        height:42px;

        border:none;

        background:none;

        color:#07162f;

        font-size:24px;

        cursor:pointer;

    }

    nav,
    .contact-btn{

        display:none;

    }

    .stats{

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    height:auto;

    padding: 25px 15px;

}

.stat-item h3{
    margin-bottom: 5px;
}


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

.service-card img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .5s ease;
}

.service-card{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    height:360px;

}

.services-grid{

    display:flex;

    gap:20px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    padding:20px 20px 60px;

    scrollbar-width:none;

        perspective:1200px;

        

}

.services-grid::-webkit-scrollbar{
    display:none;
}

.service-card{

    flex:0 0 78%;

    height:360px;

    scroll-snap-align:center;

    opacity:.45;

    transform:
        scale(.85)
        translateY(25px);

    transition:
        transform .35s ease,
        opacity .35s ease,
        box-shadow .35s ease;

            transform-style:
        preserve-3d;

}

.service-card.left{

    transform:
        scale(.88)
        rotateY(18deg);

    opacity:.7;

}

.service-card.right{

    transform:
        scale(.88)
        rotateY(-18deg);

    opacity:.7;

}

.service-card.visible{

    opacity:1;

}

.service-card.active{

    opacity:1;

    transform:
        scale(1)
        translateY(0);

    z-index:10;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.713);

}

    .service-card img{
    transition: transform .5s ease;
}

.service-card.active img{
    transform: scale(1.08);
}

.service-icon{
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.service-card.active .service-icon{
    transform: scale(1.15);

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);
}


.service-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,.05)
    );
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    color:white;
}

.services-grid::before,
.services-grid::after{

    content:"";

    flex:0 0 11%;

}


.service-card img{
    pointer-events:none;
}


    .service-card,
    .service-card *{

        -webkit-tap-highlight-color: transparent;

    }

    .service-card:focus,
    .service-card:focus-within{

        transform:scale(.85) translateY(25px);

    }

.services{
    padding:80px 0;
}

.team-grid{

    grid-template-columns:1fr;

}

.benefits-container{

    flex-direction:column;

    gap:40px;

}

.benefits-images,
.benefits-content{

    width:100%;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-big{

    grid-row:auto;

    height:250px !important;

}

.gallery::before{

    display:none;

}

.contact-container{

    flex-direction:column;

    padding:30px;

}

    .modal-content{

        width:90%;

        max-height:85vh;

        overflow-y:auto;

    }

.footer-top{

    grid-template-columns:1fr;

    gap:30px;

}

    .footer-column{

        text-align:center;

    }

.testimonial-grid{

    grid-template-columns:1fr;

}

.container{

    width:95%;

}

.team::before,
.team::after{

    display:none;

}


.benefits-images,
.benefits-content,
.benefit-item{

    transform:none !important;

}

    .catalogo-grid{

        display:flex;

        gap:0px;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        padding:10px 20px;

        scrollbar-width:none;

    }

    .catalogo-grid::-webkit-scrollbar{
        display:none;
    }

    .catalogo-card{

        flex:0 0 85%;

        scroll-snap-align:center;

        padding:25px;

        opacity:.6;

        transform:scale(.92);

        transition:
            transform .35s ease,
            opacity .35s ease,
            box-shadow .35s ease;

    }

    .catalogo-card.active{

        opacity:1;

        transform:scale(1);

        box-shadow:
            0 18px 40px rgba(0,0,0,.12);

    }

    .catalogo-card.active .catalogo-icono{
    transform:scale(1.15);
}

.catalogo-icono{
    transition:transform .35s ease;
}


    .catalogo-indicadores{

        display:flex;

        justify-content:center;

        align-items:center;

        gap:8px;

        margin-top:18px;

    }

    .dot{

    width:8px;
    height:8px;

    border-radius:999px;

    background:#d6dee8;

    transition:.3s ease;

}

.dot.active{

    width:24px;

    background:#0EA5E9;

}

    .spa-tabs{

        display:flex;

        gap:10px;

        margin:15px 0 20px;

    }

    .spa-tab{

        flex:1;

        border:none;

        border-radius:12px;

        padding:12px;

        font-weight:600;

        cursor:pointer;

    }

    .spa-tab.active{

        background:#0EA5E9;

        color:white;

    }


    .branches-grid{

        display:flex;

        gap:0;

        overflow-x:auto;

        scroll-snap-type:x mandatory;

        padding:10px 20px;

        scrollbar-width:none;

    }

    .branches-grid::-webkit-scrollbar{
        display:none;
    }


    .branch-card{

        flex:0 0 85%;

        scroll-snap-align:center;

        opacity:.6;

        transform:scale(.92);

        transition:
            transform .35s ease,
            opacity .35s ease;

    }

    .branch-card.active{

        opacity:1;

        transform:scale(1);

    }



    .scroll-indicator{

    position:sticky;

    bottom:10px;

    text-align:center;

    font-size:2rem;

    color:#0EA5E9;

    animation:flotar 1.5s infinite;

    pointer-events:none;

}


    .store-sidebar{
        display:none;
    }

    .filtro-mobile{
        display:block;
        margin-top:15px;
        margin-bottom:20px;
    }

    .filtro-mobile select{

        width:100%;

        padding:14px 16px;

        border:1px solid #dbe4ee;

        border-radius:12px;

        font-size:1rem;

        background:white;

    }


    .filtro-especie{

        overflow-x:auto;
        padding-bottom:5px;

    }

    .btn-especie{

        flex-shrink:0;

    }

.service-card{
    position:relative;
}

    .service-hint{

        left:calc(100% + 8px);
        top:50%;

        transform:translateY(-50%);
        font-size:.72rem;

        padding:6px 12px;

    }
    
    .service-card.active .service-hint{

    opacity:1;

    transform:translateY(-50%) translateX(0);

}
    
.producto-card{

    display:flex;

    gap:20px;

    align-items:center;

    padding:20px;

    border-radius:20px;

    background:#fff;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.producto-card img{

    width:160px;

    height:160px;

    object-fit:contain;

    margin:0 auto;

    display:block;

}

.descripcion-producto{

    margin:10px 0 15px;

    color:#64748b;

    font-size:.9rem;

    line-height:1.5;

    min-height:45px;

}


    .service-hint{

        position:absolute;

        left:78px;
        top:22px;

        transform:none;

        display:flex;
        align-items:center;
        gap:8px;

        padding:7px 12px;

        background:#fff;
        color:#0ea5e9;

        border:2px solid #0ea5e9;
        border-radius:999px;

        font-size:.72rem;
        font-weight:600;

        white-space:nowrap;

        opacity:0;

        transition:.3s;

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

        pointer-events:none;

    }

    .service-card.active .service-hint{

        opacity:1;

    }

@keyframes aparecerOferta{

    0%{

        opacity:0;

        transform:translateY(30px) scale(.85);

    }

    70%{

        transform:translateY(-4px) scale(1.03);

    }

    100%{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


@keyframes flotar{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(6px);
    }

}

@keyframes ofertasClick{

    0%{

        transform:scale(1);

    }

    35%{

        transform:scale(.92);

    }

    65%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes fuegoClick{

    0%{

        transform:rotate(0deg) scale(1);

    }

    35%{

        transform:rotate(-12deg) scale(.9);

    }

    65%{

        transform:rotate(10deg) scale(1.2);

    }

    100%{

        transform:rotate(0deg) scale(1);

    }

}


}