/* =========================
   CARD VIDEO
========================= */

.card-video{
    border:none;
    border-radius:28px;
    overflow:hidden;
    background:white;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;
}

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

.video-box{
    position:relative;
    overflow:hidden;
}

.preview-video{
    width:100%;
    height:340px;
    object-fit:cover;
    background:black;
    transition:.4s;
}

.card-video:hover .preview-video{
    transform:scale(1.03);
}

.play-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.35),
        rgba(0,0,0,.05)
    );
}

.play-overlay i{
    width:75px;
    height:75px;
    background:rgba(255,255,255,.20);
    backdrop-filter:blur(8px);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    color:white;
}

.card-info{
    padding:22px;
    text-align:center;
}

.card-info h5{
    font-size:19px;
    font-weight:700;
    margin-bottom:15px;
}

.btn-video{
    border:none;
    background:var(--secundario);
    color:white;
    border-radius:50px;
    padding:11px 22px;
    font-weight:600;
    transition:.3s;
}

.btn-video:hover{
    background:var(--principal);
    transform:translateY(-2px);
}

.btn-outline-rosa{

    border: 2px solid var(--principal) !important;

    color: var(--principal) !important;

    background: white !important;

    border-radius: 14px !important;

    padding: 8px 14px !important;

}

/* =========================
   MODAL
========================= */

.modal-content{
    border:none;
    border-radius:30px;
    overflow:hidden;
}

.modal-header{
    border:none;
    padding:20px 25px;
    background:rgba(var(--principal-rgb), .12);
}

.modal-title{
    color:var(--principal);
    font-weight:700;
}

.modal-body{
    background:white;
    padding:20px;
}

.video-modal{
    width:100%;
    max-height:75vh;
    border-radius:18px;
    background:black;
}

@media(max-width:768px){

    .preview-video{
        height:260px;
    }

}

.hero-interno{

   /* background:
    linear-gradient(
        135deg,
        rgba(var(--principal-rgb),.95),
        rgba(var(--secundario-rgb),.85)
    );*/


    background: linear-gradient(
        135deg,
        var(--secundario), var(--principal));

    max-width:1200px;
    margin:50px auto 60px;

    border-radius:30px;

    padding:55px 30px;

    text-align:center;

    position:relative;

    overflow:hidden;

    margin-bottom:50px;

}

.hero-interno-content{

    position:relative;

    z-index:2;

}


.hero-interno h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(42px,5vw,70px);

    font-weight:500;

    letter-spacing:2px;

    color:var(--secundario);

    margin-bottom:12px;

    text-transform:uppercase;

}

.hero-interno p{

    color:rgba(255,255,255,.92);

    font-size:18px;

    max-width:700px;

    margin:25px auto 0;

    line-height:1.8;

    font-weight:300;

}

.btn-hero-interno{

    display:inline-block;

    margin-top:30px;

    background:white;

    color:var(--principal);

    padding:12px 28px;

    border-radius:50px;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-hero-interno:hover{


    color:var(--principal);

}

@media(max-width:768px){

    .hero-interno{

        margin-top:95px;

        padding:45px 20px;

    }

    .hero-interno h1{

        font-size:32px;

    }

    .hero-interno p{

        font-size:15px;

    }

}


/* =========================
   Collages.php
========================= */

.titulo{
    font-size:40px;
    font-weight:800;
    color:var(--secundario);
}

/* =========================
   CARD COLLAGE
========================= */

.card-collage{
    border:none;
    border-radius:28px;
    overflow:hidden;
    transition:0.35s;
    background:white;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.card-collage:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(212,106,146,0.15);
}

.imagen-collage{
    height:300px;
    width:100%;
    object-fit:cover;
    object-position:center;
    transition:0.4s;
}

.card-collage:hover .imagen-collage{
    transform:scale(1.03);
}

.card-body{
    padding:25px;
}

/* =========================
   MODAL
========================= */

.modal-content{
    border:none;
    border-radius:28px;
    overflow:hidden;
}

.modal-header{
    background:linear-gradient(135deg,#d46a92,#efbfd0);
    color:white;
    border:none;
    padding:20px 25px;
}

.modal-body{
    background:#fff7fb;
    padding:25px;
}

.modal-img{
    width:100%;
    max-height:78vh;
    object-fit:contain;
    border-radius:18px;
}



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

@media(max-width:768px){

    .hero{
        text-align:center;
        padding:45px 22px;
        margin-top:90px;
    }

    .hero h1{
        font-size:34px;
    }

    .hero p{
        font-size:14px;
    }

    .titulo{
        font-size:30px;
    }

    .imagen-collage{
        height:240px;
    }

    .logo-tienda{
        font-size:24px;
    }

    .navbar-collapse{
        background:var(--principal);
        padding:18px;
        border-radius:22px;
        margin-top:15px;
    }

    .nav-premium-link{
        padding:12px !important;
    }

}


/* ======================================================================
   CSS GUIAS
========================= */
/* ======================================================================
   GUIAS
====================================================================== */

.card-guia{

    border:none;

    border-radius:28px;

    overflow:hidden;

    background:white;

    height:100%;

    transition:.25s;

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

}

.card-guia:hover{

    transform:translateY(-6px);

    box-shadow:
    0 15px 35px rgba(var(--principal-rgb),.15);

}

.guia-img{

    width:100%;

    height:300px;

    object-fit:cover;

    transition:.35s;

    background:white;

}

.card-guia:hover .guia-img{

    transform:scale(1.03);

}

/* ======================================================================
   MODAL
====================================================================== */

.modal-content{

    border:none;

    border-radius:28px;

    overflow:hidden;

}

.modal-header{

    background:
    linear-gradient(
        135deg,
        var(--principal),
        var(--secundario)
    );

    color:white;

    border:none;

    padding:20px 25px;

}

.modal-body{

    background:#fff;

    text-align:center;

    padding:30px;

}

.modal-img{

    max-width:100%;

    max-height:75vh;

    object-fit:contain;

    border-radius:20px;

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

}

/* ======================================================================
   BUSCADOR
====================================================================== */

.buscador-guias{

    max-width:700px;

    margin:auto;

    padding-top:15px;

}

.buscador-guias .input-group{

    background:white;

    border-radius:50px;

    overflow:hidden;

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

}

.buscador-guias .input-group-text{

    background:white;

    border:none;

}

#buscadorGuias{

    border:none !important;

    box-shadow:none !important;

    font-size:15px;

}

#buscadorGuias:focus{

    box-shadow:none !important;

}

/* ======================================================================
   MENSAJE SIN RESULTADOS
====================================================================== */

#sinResultados{

    background:white;

    border-radius:30px;

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

}

#sinResultados i{

    font-size:70px;

    color:var(--principal);

}

/* ======================================================================
   SIN GUIAS
====================================================================== */

.sin-guias{

    background:white;

    border-radius:35px;

    padding:80px 30px;

    text-align:center;

    box-shadow:
    0 10px 35px rgba(0,0,0,.05);

}

.sin-guias i{

    font-size:75px;

    color:var(--principal);

    margin-bottom:20px;

}

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

@media(max-width:768px){

    .guia-img{

        height:250px;

    }

    .buscador-guias{

        padding-top:10px;

    }

}


/* ======================================================================
  css informacion.php
====================================================================== */

/* =========================
   TARJETAS
========================= */

.card-info{

    border:none;

    border-radius:28px;

    overflow:hidden;

    background:white;

    height:100%;

    transition:.25s;

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

}

.card-info:hover{

    transform:translateY(-6px);

    box-shadow:
    0 15px 35px rgba(var(--principal-rgb),.15);

}

.info-img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.3s;

}

.card-info:hover .info-img{

    transform:scale(1.03);

}

.icon-box{

    width:58px;

    height:58px;

    border-radius:18px;

    background:
    rgba(var(--principal-rgb),.10);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--principal);

    font-size:24px;

    margin-bottom:18px;

}

.card-title{

    font-size:22px;

    font-weight:700;

    color:var(--principal);

    margin-bottom:14px;

}

.card-text{

    color:#64748B;

    font-size:15px;

    line-height:1.8;

    display:-webkit-box;

    -webkit-line-clamp:4;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* =========================
   MODAL
========================= */

.modal-content{

    border:none;

    border-radius:28px;

    overflow:hidden;

}

.modal-header{

    background:
    linear-gradient(
        135deg,
        var(--principal),
        var(--secundario)
    );

    color:white;

    border:none;

}

.modal-body{

    background:#fff;

    padding:30px;

}

.modal-img{

    width:100%;

    max-height:600px;

    object-fit:contain;

    border-radius:18px;

}

/* =========================
   VACIO
========================= */

.sin-info{

    background:white;

    border-radius:30px;

    padding:70px 30px;

    text-align:center;

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

}

.sin-info i{

    font-size:70px;

    color:var(--principal);

    margin-bottom:20px;

}

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

@media(max-width:768px){

    .info-img{

        height:220px;

    }

    .card-title{

        font-size:20px;

    }

}

/* =========================
   VER_TODO.PHP
========================= */

.buscador-colores{

    max-width:700px;

    margin:auto;

}

.buscador-colores .input-group{

    background:white;

    border-radius:50px;

    overflow:hidden;

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

}

.buscador-colores .input-group-text{

    border:none;

    background:white;

}

#buscarColor{

    border:none !important;

    box-shadow:none !important;

    font-size:15px;

}

#buscarColor:focus{

    box-shadow:none !important;

}

/* ======================================================================
   PRODUCTOS
====================================================================== */

.producto-item{

    display:flex;

}

.card-producto{

    border:none;

    border-radius:28px;

    overflow:hidden;

    background:white;

    position:relative;

    width:100%;

    transition:.25s;

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

}

.card-producto:hover{

    transform:translateY(-6px);

    box-shadow:
    0 15px 35px rgba(var(--principal-rgb),.15);

}

.imagen-box{

    position:relative;

    overflow:hidden;

}

.imagen-producto{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:.3s;

}

.card-producto:hover .imagen-producto{

    transform:scale(1.04);

}

/* =========================
   STOCK
========================= */

.badge-stock{

    position:absolute;

    top:15px;

    right:15px;

    z-index:10;

    background:white;

    color:var(--principal);

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

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

}

/* =========================
   AGOTADO
========================= */

.texto-agotado{

    position:absolute;

    top:50%;

    left:50%;

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

    background:#dc3545;

    color:white;

    padding:12px 20px;

    border-radius:16px;

    font-size:14px;

    font-weight:700;

    z-index:20;

}

.imagen-agotado{

    filter:
    grayscale(100%)
    brightness(45%);

}

/* =========================
   BODY
========================= */

.card-body{

    padding:16px;

}

.nombre-producto{

    font-size:15px;

    font-weight:700;

    color:var(--secundario);

}

.modelo-texto{

    color:#64748B;

    font-size:14px;

    margin-bottom:15px;

}

.precio{

    font-size:18px;

    font-weight:700;

    color:var(--principal);

    margin-bottom:18px;

}

/* =========================
   TALLAS
========================= */

.talla-label{

    cursor:pointer;

    transition:.25s;

    border-radius:14px !important;

}

.talla-label input{

    display:none;

}

.talla-label.active{

    background:var(--principal) !important;

    color:white !important;

    border-color:var(--principal) !important;

}

/* =========================
   MODAL
========================= */

.modal-content{

    border:none;

    border-radius:28px;

    overflow:hidden;

}

.modal-header{

    border:none;

    padding:22px 25px;

    background:
    linear-gradient(
        135deg,
        var(--principal),
        var(--secundario)
    );

    color:white;

}

.modal-body{

    padding:25px;

}

.pagination .page-link{

    color: var(--principal);

    border: none;

    border-radius: 12px;

    margin: 0 4px;

    box-shadow: none;

}

.pagination .page-link:hover{

    background: var(--principal);

    color: white;

}

.pagination .page-item.active .page-link{

    background: var(--principal);

    border-color: var(--principal);

    color: white;

}

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

@media(max-width:768px){

    .imagen-producto{

        height:280px;

    }

}