@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
:root{
    --azul-principal:#6bbfe8;
    --azul-secundario:#8fd3f4;
    --turquesa:#b8f2e6;
    --verde-agua:#d8fff5;
    --fondo:#f8fffd;
    --texto:#111111;
    --blanco:#ffffff;
    --azul-menu:#0b74c9;

    --gradiente-principal:linear-gradient(
        135deg,
        #ffffff,
        #d8fff5,
        #b8f2e6,
        #8fd3f4
    );
--radius-sm:12px;
--radius-md:24px;
--radius-lg:35px;

--shadow-sm:0 5px 15px rgba(0,0,0,.08);
--shadow-md:0 10px 25px rgba(0,0,0,.12);
--shadow-lg:0 15px 40px rgba(0,0,0,.18);

--transition:.3s ease;

}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Montserrat', Arial, sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--fondo);
    color:var(--texto);
}


/* HEADER */

.header{
    width:100%;
    height:100px;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0.98) 0%,
        rgba(216,255,245,0.98) 40%,
        rgba(184,242,230,0.98) 75%,
        rgba(143,211,244,0.98) 100%
    );
    backdrop-filter:blur(10px);
    box-shadow:0 8px 25px rgba(0,0,0,0.22);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 60px;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    overflow:visible;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

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

.navbar{
    display:flex;
    gap:25px;
}

.navbar a{
    color: var(--texto);
    text-shadow:0 1px 2px rgba(255,255,255,0.15);
    text-decoration:none;
    transition:var(--transition);
    position:relative;
    font-weight:600;
}

.navbar a:hover{
    color:var(--azul-menu);
}

.navbar a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-5px;

    width:0%;
    height:2px;

    background:var(--turquesa);

    transition:var(--transition);
}

.navbar a:hover::after{
    width:100%;
}


/* SLIDER */

.slider{
    width:100%;
    height:70vh;
    min-height:500px;
    max-height:800px;
    position:relative;
    overflow:hidden;
}

.slide{
    width:100%;
    height:100%;
    position:absolute;
    opacity:0;
    transition:1s;
}

.slide.active{
    opacity:1;
}

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

.slide::before{
    display:none;
}

.slide-content{
    position:absolute;
    top:50%;
    left:10%;
    transform:translateY(-50%);
    color:white;
    z-index:10;
}

.slide-content h1{
    font-size:70px;
    margin-bottom:20px;
}

.slide-content p{
    font-size:24px;
    margin-bottom:30px;
}

.slide-content a{
    padding:15px 35px;
    background:var(--gradiente-principal);
    color:white;
    text-decoration:none;
    border-radius:12px;
    font-weight:bold;
    box-shadow:0 5px 15px rgba(19,159,211,0.35);
    transition:var(--transition);
}
.slide-content a:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(19,159,211,0.45);
}


/* LINEAS */

.lineas{
    padding:0px 80px;
    background:linear-gradient(to bottom,#ffffff,#eef8fb);
    text-align:center;
}

.lineas h2{
font-family:'Bodoni Moda', serif;
font-weight:800;
font-size:3.4rem;
letter-spacing:1px;
    letter-spacing:3px;
    color:#111;
    margin-bottom:15px;
    text-align:center;
}



.lineas-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}


.linea-card i{
    font-size:60px;
    color:var(--turquesa);
    margin-bottom:20px;
}

.linea-card h3{
    margin-bottom:15px;
}


/* FILTROS */

.filters{
    padding:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px;
}

#searchInput{
    width:350px;
    max-width:90%;
    padding:15px;
    border:none;
    border-radius:14px;
    background:white;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    outline:none;
}

.buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.filter-btn{
    padding:12px 25px;
    border:none;
    border-radius:30px;
    cursor:pointer;
    transition:var(--transition);
    background:white;
    color:var(--texto);
    font-weight:600;
    box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.filter-btn.active{
    background:var(--gradiente-principal);
    color:white;
}


/* PRODUCTOS */

.products{
    padding:60px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.product-card{
    background:white;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    transition:var(--transition);
    border:1px solid rgba(17,183,201,0.12);
}

.product-card:hover{
    transform:translateY(-10px);
}

.product-card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.product-info{
    padding:25px;
}

.product-info h3{
    margin-bottom:15px;
}

.product-info p{
    margin-bottom:25px;
    color:#666;
}

.product-info a{
    display:inline-block;
    padding:12px 25px;
    background:var(--gradiente-principal);
    color:white;
    text-decoration:none;
    border-radius:12px;
    font-weight:bold;
    transition:var(--transition);
}
.product-info a:hover{
    transform:translateY(-2px);
}




/* FOOTER */

footer{
    background:#8fd3f4;
    color:#111;
    text-align:center;
    padding:20px;
}


/* RESPONSIVE */

.logo img{
    height:78px;
    object-fit:contain;
    mix-blend-mode:normal;
    filter:
        drop-shadow(0 4px 12px rgba(0,0,0,0.35))
        drop-shadow(0 0 8px rgba(255,255,255,0.15));
    transition:var(--transition);
}
.logo img:hover{
    transform:scale(1.03);
}

.dropdown{
    position:relative;
    z-index:1001;
}

.dropdown-btn{
    cursor:pointer;
    color:var(--texto);
    transition:var(--transition);
}

.dropdown:hover .dropdown-btn{
    color:var(--azul-menu);
}

.dropdown-content{
    position:absolute;
    top:40px;
    left:0;

    background:white;

    min-width:220px;

    border-radius:10px;

    overflow:hidden;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:var(--transition);

    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    z-index:1002;
}

.dropdown-content a{
    display:block;

    padding:15px;

    color:#111;

    text-decoration:none;

    transition:var(--transition);
}

.dropdown-content a:hover{
    background:#eef7ff;
    color:var(--azul-menu);
    font-weight:700;
}
.dropdown:hover .dropdown-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.linea-link{
    text-decoration:none;
    color:inherit;
}

.linea-img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:18px;
    margin-bottom:18px;
}

/* LINEAS */

.linea-card{
    background:white;
    padding:40px;
    border-radius:24px;
    transition:var(--transition);
    border:1px solid rgba(17,183,201,0.15);
    box-shadow:0 8px 25px rgba(0,0,0,0.06);
    overflow:hidden;
    cursor:pointer;
}

.linea-card:hover{
    transform:translateY(-10px);
}

.banner-linea{
    width:100%;
    aspect-ratio:1920 / 700;
    position:relative;
    overflow:hidden;
}

.banner-linea img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.banner-overlay{
    position:absolute;
    inset:0;

  /*  background:linear-gradient(
        to right,
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.25)
    );*/

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

    padding:60px;
    color:white;
}

.banner-overlay h1{
    font-size:6rem;
    letter-spacing:14px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:15px;
}

.banner-overlay p{
    font-size:1.2rem;
    max-width:600px;
    line-height:1.6;
}

.contacto{
    padding:100px 8%;
    text-align:center;
}

.contacto h2{
    font-size:3rem;
    margin-bottom:20px;
}

.contacto-texto{
    max-width:700px;
    margin:auto;
    margin-bottom:50px;
    font-size:1.1rem;
    line-height:1.7;
    opacity:0.8;
}

.social-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
    margin-top:40px;
}

.social-card{
    text-decoration:none;
    color:white;

    padding:35px 25px;

    border-radius:24px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;

    transition:var(--transition);

    backdrop-filter:blur(10px);

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


.social-card span{
    font-size:1.1rem;
    font-weight:600;
}

.social-card:hover{
    transform:translateY(-8px) scale(1.02);
}

/* FACEBOOK */
.facebook{
    background:linear-gradient(135deg,#1877f2,#0d5bd9);
}

/* INSTAGRAM */
.instagram{
    background:linear-gradient(
        135deg,
        #f58529,
        #dd2a7b,
        #8134af,
        #515bd4
    );
}

/* WHATSAPP */
.whatsapp{
    background:linear-gradient(135deg,#25d366,#128c7e);
}

/* TIKTOK */
.tiktok{
    background:linear-gradient(135deg,#000000,#1f1f1f);
}

.social-card i{
    font-size:4rem;
    color:white;
    display:block;
}

.sucursales-container{
    display:flex;
    justify-content:center;
    margin-top:50px;
}

.btn-sucursales{
    display:flex;
    align-items:center;
    gap:15px;

    background:linear-gradient(135deg,#0d9488,#14b8a6);

    color:white;
    text-decoration:none;

    padding:18px 35px;

    border-radius:18px;

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

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

    transition:var(--transition);
}

.btn-sucursales i{
    font-size:1.5rem;
}

.btn-sucursales:hover{
    transform:translateY(-5px) scale(1.03);

    box-shadow:0 15px 35px rgba(0,0,0,0.2);
}

/* WHATSAPP FLOAT */
.whatsapp-float{
    position:fixed;

    right:25px;
    bottom:25px;

    z-index:9999;

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

    background:#25d366;
    color:white;

    text-decoration:none;

    padding:16px 22px;

    border-radius:100px;

    box-shadow:0 10px 30px rgba(0,0,0,0.2);

    transition:var(--transition);
}

.whatsapp-float:hover{
    transform:translateY(-5px) scale(1.03);
}

.whatsapp-float i{
    font-size:2.3rem;
}

.whatsapp-text{
    display:flex;
    flex-direction:column;

    line-height:1.2;
}

.whatsapp-text span{
    font-size:0.8rem;
    opacity:0.9;
}

.whatsapp-text strong{
    font-size:1rem;
}

@media(max-width:768px){

    .whatsapp-text{
        display:none;
    }

    .whatsapp-float{
        padding:18px;
        border-radius:50%;
    }
}

/* =========================================
   PRODUCTO PAGE
========================================= */

.producto-page{
    display:flex;

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

    gap:60px;

    padding:120px 8% 80px;

    flex-wrap:wrap;
}

.producto-img{
    flex:1;
    min-width:320px;

    display:flex;
    justify-content:center;
}

.producto-img img{
    width:100%;

    max-width:520px;

    height:520px;

    object-fit:cover;

    border-radius:28px;

    box-shadow:0 15px 40px rgba(0,0,0,0.18);

    transition:0.4s ease;
}

.producto-info-page{
    flex:1;
    min-width:320px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}


.producto-info-page ul{
    margin:25px 0;

    padding-left:20px;
}

.producto-info-page li{
    margin-bottom:12px;

    color:#444;
}

/* AROMAS */

/* =========================================
   BOTÓN VOLVER
========================================= */

.producto-info-page a{
    display:inline-flex;

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

    margin-top:20px;

    background:var(--gradiente-principal);

    color:white;

    text-decoration:none;

    padding:15px 28px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);
}

.producto-info-page a:hover{
    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,0,0,0.15);
}

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

@media(max-width:768px){
    .producto-page{
        padding:100px 25px 60px;
    }
    .producto-img img{
        height:380px;
    }
    .producto-info-page h1{
        font-size:2.2rem;
    }
    
}

@media(max-width:768px){

    .header{
        padding:20px;
        flex-direction:column;
        height:auto;
        gap:15px;
        position:sticky;
        top:0;
    }
    .banner-linea{
        margin-top:0;
    }

    .navbar{
        flex-wrap:wrap;
        justify-content:center;
        margin-top:10px;
        gap:18px;
    }

    .slide-content h1{
        font-size:45px;
    }

    .slide-content p{
        font-size:18px;
    }

    .products{
        padding:20px;
    }

    .slider{
        height:158px;
        min-height:auto;
    }

    .banner-linea{
        height:158px;
    }

    .banner-overlay{
        padding:25px;
        align-items:center;
        justify-content:center;
        text-align:center;
    }
    .banner-overlay h1{
        font-size:2.8rem;
        margin-bottom:10px;
        letter-spacing:20px;
        font-weight:700;
        text-transform:uppercase;
        text-align:center;
        width:100%;
    }

    .banner-overlay p{
        font-size:0.8rem;
        text-align:center;
        max-width:90%;
        margin:0 auto;
    }

    .lineas h2{
        font-size:1.5rem;
    }

    .linea-card img{
    height: 230px;
}

}
 
/* =========================================
   ESTILO CATALOGO PDF - PRODUCTO HERO
========================================= */

.producto-page{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(22,198,217,0.25) 0 70px, transparent 72px),
        radial-gradient(circle at 86% 12%, rgba(22,198,217,0.18) 0 95px, transparent 98px),
        linear-gradient(90deg,#ffffff 0%,#f7fbfd 48%,#ffffff 100%);
}

.producto-page::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(255,255,255,0.88) 0%,rgba(255,255,255,0.45) 42%,rgba(255,255,255,0.15) 100%),
        var(--fondo-producto, url('img/catalogo-fondo.jpg'));
    background-size:cover;
    background-position:center;
    opacity:1;
    z-index:0;
}

.producto-page::after{
    content:'';
    position:absolute;
    width:420px;
    height:420px;
    right:-120px;
    bottom:-160px;
    background:radial-gradient(circle,rgba(22,198,217,0.22),transparent 68%);
    border-radius:50%;
    z-index:0;
}

.producto-img,
.producto-info-page{
    position:relative;
    z-index:1;
}

.producto-img img{
    background:white;
    padding:18px;
    border-radius:35px;
    box-shadow:
        0 30px 60px rgba(11,37,69,0.22),
        0 0 0 10px rgba(255,255,255,0.65);
}


.producto-info-page h1{
    font-size:4.3rem;
    font-family:'Anton', sans-serif;
    line-height:1.1;
    text-transform:none;
    font-weight:900;
    -webkit-text-stroke: 3px rgba(11,94,120,0.70);
    letter-spacing:0px;
    text-wrap:balance;
    color:#0b5e78;
    text-shadow:
        -2px -2px 0 #ffffff,
         2px -2px 0 #ffffff,
        -2px  2px 0 #ffffff,
         2px  2px 0 #ffffff,
         0px  4px 10px rgba(11,37,69,0.20);
    margin-bottom:24px;
    text-align:center;
}

.producto-info-page h1 span{
    display:block;
}

.producto-info-page h1 .desengrasante-subtitulo{
    font-size:.65em;
    letter-spacing:normal;
    white-space:nowrap;
}


.producto-info-page p{
    max-width:560px;
    font-size:1.15rem;
    color:#111;
    line-height:1.8;
    margin-bottom:30px;
}

.producto-info-page h3{
    display:inline-block;
    padding:10px 22px;
    background:linear-gradient(135deg,#0b5e78,#16c6d9);
    color:#ffffff;
    border-radius:0 0 16px 16px;
    letter-spacing:0.5px;
    text-transform:none;
    margin-bottom:22px;
}
.aromas-container{
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(10px);
    padding:22px;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(11,37,69,0.12);
    border:1px solid rgba(255,255,255,0.85);
    margin-top:15px;
}

.aroma-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:14px 22px;
    margin:6px;

    background:rgba(255,255,255,.92);
    color:#0b5e78;

    border:2px solid rgba(22,198,217,.18);
    border-radius:999px;

    font-weight:700;
    font-size:.95rem;

    cursor:pointer;
    transition:all .28s ease;

    box-shadow:
        0 8px 20px rgba(11,37,69,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/* Color inicial del modelo seleccionado en el regenerador de color */
.aroma-btn.ropa-color.active{
    background:linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899);
    color:#fff;
}

.aroma-btn:hover{
    transform:translateY(-3px) scale(1.03);
    border-color:#16c6d9;
    color:#0787c7;
    box-shadow:
        0 14px 28px rgba(7,135,199,.18),
        0 4px 10px rgba(0,0,0,.08);
}

.aroma-btn.active{
    color:#fff;
    border-color:#fff;
    transform:translateY(-2px) scale(1.04);
    box-shadow:
        0 14px 30px rgba(0,0,0,.20),
        0 0 0 4px rgba(255,255,255,.45);
}

.aroma-btn::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:currentColor;
    opacity:.35;
    transition:.3s;
}

.aroma-btn.active::before{
    opacity:1;
    background:#fff;
    box-shadow:0 0 8px rgba(255,255,255,.7);
}

#aromaTitulo{
    background:#111;
    color:white;
    border-radius:50px;
    padding:14px 24px;
    box-shadow:0 12px 30px rgba(11,37,69,0.18);
}

@media(max-width:768px){
    .producto-info-page h1{
        font-size:1.5rem;
        line-height:1.3;
        letter-spacing:12px;
        text-align:center;
        width:100%;
        font-weight:900;
        -webkit-text-stroke: 2.5px rgba(11,94,120,0.70);
    }

    .producto-info-page h1 span{
        display:block;
        width:100%;
        margin-top:10px;
    }
    .producto-page{
        padding:100px 25px 60px;
        min-height:auto;
    }
    .producto-img img{
        height:380px;
    }
    .producto-page::before{
        opacity:0.85;
    }
}

/* =========================================
   SELECT DESPLEGABLE DE AROMAS
========================================= */

.aroma-select{
    width:100%;
    max-width:420px;
    padding:16px 22px;
    border-radius:50px;
    border:2px solid rgba(22,198,217,0.35);
    background:white;
    color:#111;
    font-size:1rem;
    font-weight:700;
    cursor:pointer;
    outline:none;
    box-shadow:0 10px 25px rgba(11,37,69,0.12);
    transition:0.3s ease;
}

.aroma-select:hover,
.aroma-select:focus{
    border-color:var(--turquesa);
    box-shadow:0 14px 32px rgba(7,135,199,0.22);
}

.aromas-container.select-mode{
    display:block;
    max-width:460px;
}

@media(max-width:768px){
    .aroma-select{
        max-width:100%;
        font-size:0.95rem;
    }
}

/* =========================================
   TIPOGRAFÍA DE TÍTULOS
========================================= */

h1,
h2,
.banner-overlay h1,
.slide-content h1,
.lineas h2,
.contacto h2,
.producto-info-page h1,
.navbar a,
.dropdown-btn,
.dropdown-content a,
.aroma-select option,
#aromaTitulo{
    text-transform:uppercase;
}

h3,
h4,
h5,
h6,
p,
li,
span,
.product-info p,
.producto-info-page p,
.banner-overlay p{
    text-transform:none;
}

.contacto h2,
.contacto p,
.contacto-texto{
    color:#111;
}

/* =========================================
   TIPOGRAFÍA ELEGANTE
========================================= */

h1,
h2,
.banner-overlay h1,
.slide-content h1,
.contacto h2{
font-family:'DM Serif Display', serif;

font-weight:400;

letter-spacing:inherit;
}

.banner-overlay h1{
    letter-spacing:14px;
}

@media(max-width:768px){
    .banner-overlay h1{
        letter-spacing:8px;
    }
}

.navbar a,
.dropdown-btn,
.dropdown-content a,
.aroma-btn,
.aroma-select,
button{
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    letter-spacing:0.6px;
}

p,
li,
span,
.product-info p,
.producto-info-page p,
.contacto-texto{
    font-family:'Montserrat', sans-serif;
    font-weight:400;
}
.muestra-gratis-container {
  margin-top: 25px;
}

.btn-muestra-gratis {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: #25d366;
  color: #111 !important;
  text-decoration: none;

  padding: 14px 24px;
  border-radius: 12px;

  font-size: 1rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;

  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
}

.btn-muestra-gratis:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}

.btn-muestra-gratis i {
  font-size: 1.3rem;
}

.muestra-gratis-texto {
  margin-top: 10px;
  color: #666;
  font-size: 0.95rem;
  max-width: 450px;
  line-height: 1.5;
}

.btn-muestra-gratis,
.btn-muestra-gratis:visited,
.btn-muestra-gratis:hover,
.btn-muestra-gratis:focus,
.btn-muestra-gratis:active {
    color: #111 !important;
}




/* ===== EFECTO BURBUJAS LIMPIEZA ===== */

.burbujas-limpieza {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.burbuja {
  position: absolute;
  bottom: -100px;
  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.75) 40%,
    rgba(143,211,244,0.55) 100%
  );

  border: 2px solid rgba(255,255,255,0.9);

  backdrop-filter: blur(4px);

  box-shadow:
    0 0 12px rgba(255,255,255,0.8),
    0 0 25px rgba(143,211,244,0.6),
    inset -6px -6px 12px rgba(255,255,255,0.35);

  animation: subirBurbuja linear forwards;
}

@keyframes subirBurbuja {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }

  15% {
    opacity: 0.95;
  }

  100% {
    transform: translateY(-120vh) scale(1.2);
    opacity: 0;
  }
}

/* ===== EFECTO SPA / VAPOR DE HUMIDIFICADOR ===== */

.spa-vapor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 998;
}

.nube-vapor {
  position: absolute;
  bottom: -280px;
  border-radius: 50% 44% 54% 46%;
  background:
    radial-gradient(circle at 35% 68%, rgba(222, 247, 241, 0.95) 0 16%, transparent 43%),
    radial-gradient(circle at 66% 58%, rgba(184, 225, 216, 0.82) 0 18%, transparent 46%),
    radial-gradient(circle at 47% 31%, rgba(238, 252, 249, 0.78) 0 16%, transparent 45%);
  filter: blur(14px);
  box-shadow: 0 0 55px rgba(178, 224, 214, 0.75);
  animation: subirNubeVapor ease-in forwards;
}

@keyframes subirNubeVapor {
  0% {
    transform: translate3d(0, 0, 0) scale(0.45) rotate(-8deg);
    opacity: 0;
  }

  16% { opacity: 0.88; }

  65% { opacity: 0.62; }

  100% {
    transform: translate3d(100px, -125vh, 0) scale(1.5) rotate(10deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nube-vapor {
    animation: none;
  }
}

.banner-linea {
  animation: aparecerLimpio 1.2s ease-out;
}

@keyframes aparecerLimpio {
  from {
    opacity: 0;
    filter: blur(15px);
    transform: scale(1.03);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

.slider{
    position:relative;
}

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    cursor:pointer;
    z-index:20;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.slider-btn:hover{
    background:#fff;
}

.slider-btn.prev{
    left:15px;
}

.slider-btn.next{
    right:15px;
}

@media(max-width:768px){
    .slider-btn{
        width:38px;
        height:38px;
        font-size:16px;
    }
}



/* =========================
   QUIÉNES SOMOS
========================= */

.nosotros {
  padding: 80px 10%;
  background: #ffffff;
  text-align: center;
}

.nosotros-container {
  max-width: 900px;
  margin: 0 auto;
}

.nosotros h2 {
  font-size: 2.5rem;
  color: #0d4c92;
  margin-bottom: 25px;
  position: relative;
}

.nosotros h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #00bcd4;
  margin: 15px auto 0;
  border-radius: 10px;
}

.nosotros p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
}

/* =========================
   MISIÓN Y VISIÓN
========================= */

.mision-vision {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 0 10% 80px;
  background: #ffffff;
  flex-wrap: wrap;
}

.mv-card {
  background: #fff;
  width: 400px;
  padding: 35px 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border-top: 5px solid #00bcd4;
}

.mv-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.mv-card i {
  font-size: 3rem;
  color: #0d4c92;
  margin-bottom: 20px;
}

.mv-card h3 {
  font-size: 1.8rem;
  color: #0d4c92;
  margin-bottom: 15px;
}

.mv-card p {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
}

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

@media (max-width: 768px) {
  .nosotros {
    padding: 60px 25px;
  }

  .nosotros h2 {
    font-size: 2rem;
  }

  .nosotros p {
    font-size: 1rem;
  }

  .mision-vision {
    padding: 0 25px 60px;
  }

  .mv-card {
    width: 100%;
  }
}

/* =========================================
   EFECTO SUAVE AL DESLIZAR
========================================= */

.linea-card,
.product-card,
.social-card,
.mv-card,
.nosotros-container,
.banner-linea,
.producto-img,
.producto-info-page,
.filters,
.contacto,
.sucursales-container{
    animation: aparecerScroll linear;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

@keyframes aparecerScroll{
    from{
        opacity:0;
        transform:translateY(60px) scale(.96);
        filter:blur(6px);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}


.linea-card h3{
    color: var(--color-linea, #0b5e78);
    text-align: center;
    transition: color .3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    min-height: 70px; /* Hace que todos los títulos ocupen el mismo espacio */
}

.linea-card h3::after{
    content:"";
    width:60px;
    height:3px;
    margin-top:10px;
    background:var(--color-linea, #0b5e78);
    border-radius:20px;
}

/* Solo Aceite de Pino */
.aceite-pino .titulo-pino span{
    color:#064a0f;
}

@media(max-width:768px){
    .aceite-pino .titulo-pino{
        -webkit-text-stroke:2px #064a0f;
    }

    .aceite-pino .titulo-pino span{
        color:#064a0f;
    }
}


/*==================================
        ESPUMA LAVANDERÍA
==================================*/

.foam-container{

    position:fixed;
    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:9999;

    opacity:1;
    transition:opacity 1.2s ease, transform 1.2s ease;

}

/*============================*/

.foam{

    position:absolute;

    left:0;

    width:100%;

    height:180px;

    background-repeat:repeat-x;

    background-size:auto 180px;

    animation:foamMove 3.5s ease-in-out infinite;

}

/*============================*/

.foam-top{
    top:-40px;
    background-image:url("img/foam-top.png");
}

.foam-bottom{

    bottom:0;

    background-image:url("img/foam-bottom.png");

}

/*============================*/

.foamBubble{

    position:absolute;

    border-radius:50%;

    background:
    radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.98) 0%,
    rgba(225,245,255,.92) 35%,
    rgba(185,225,255,.45) 70%,
    rgba(255,255,255,0) 100%);

    border:1px solid rgba(185,225,255,.45);

    box-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 18px rgba(180,225,255,.65),
    inset -3px -3px 5px rgba(255,255,255,.4);

    animation:bubbleUp linear forwards;

}

/*============================*/

@keyframes foamMove{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(7px);

    }

}

/*============================*/

@keyframes bubbleUp{

    from{

        transform:translateY(0) scale(.3);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    to{

        transform:translateY(-260px) scale(1);

        opacity:0;

    }

}

@keyframes bubbleDown{

    from{

        transform:translateY(0) scale(.35);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    to{

        transform:translateY(230px) scale(1);

        opacity:0;

    }

}

/* ===== EFECTO HUELLAS DE NEUMÁTICO: LÍNEA AUTOMOTRIZ ===== */
.huellas-automotriz {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
}

.huellas-automotriz img {
    position: absolute;
    width: min(82vw, 1050px);
    right: 3vw;
    bottom: -8vh;
    opacity: 0;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.2));
    animation: aparecerHuellas 3.8s cubic-bezier(.18, .72, .32, 1) 1 forwards;
}

@keyframes aparecerHuellas {
    0% {
        transform: translate(22vw, 16vh) scale(0.82);
        opacity: 0;
    }
    28% {
        opacity: 0.88;
    }
    72% {
        transform: translate(0, 0) scale(1);
        opacity: 0.82;
    }
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .huellas-automotriz img {
        width: 125vw;
        right: -18vw;
        bottom: 4vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .huellas-automotriz img {
        animation: none;
        display: none;
    }
}