/* Carga local de Chillax (proporcionada en assets/fonts/) */
@font-face {
    font-family: 'Chillax';
    src: url('../fonts/Chillax-Variable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}


:root{
    --font-sans: 'Chillax', 'Helvetica Neue', Arial;
}

.i4ewOd-pzNkMb-haAclf{
    display: none!important;
}

body{
    font-family: var(--font-sans);
    background: linear-gradient(180deg, #f8fafb 0%, var(--bg-1) 100%);
    color: var(--text);
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Tipografía: pesos y escala */
h1,h2,h3,h4,h5,h6{
    font-family: var(--font-sans);
    font-weight:600;
    color:var(--brand-primary);
    margin:0 0 0.5rem 0;
}
h1{ font-size:1.75rem; }
h2{ font-size:1.35rem; }
h3{ font-size:1.1rem; }
.small-title{ font-size:0.95rem; color:var(--muted); }


.navbar{
    padding: 0!important;
}


/* --- ESTILOS ESPECÍFICOS NAVBAR YOUSEE --- */

.color-purple {
    color: #d8b4fe; /* Morado claro del logo */
}

.color-purple-light {
    color: #A088EA; /* Morado del icono de bolsa */
}

.navbar-store {
    background: #ffffff;
    border-bottom: none;
}

.navbar-store .nav-link {
    color: #d8b4fe !important; /* Color de texto Inicio, Productos, Contacto */
    font-size: 1.1rem;
}

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

/* Botón Mi Cuenta */
.btn-yousee-account {
    background-color: #A088EA; /* Fondo morado sólido */
    color: #ffffff !important;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    padding: 10px 25px;
}

.btn-yousee-account:hover {
    background-color: #8b5cf6;
    transform: scale(1.05);
}

/* Badge del carrito (Rosado) */
.bg-pink-yousee {
    background-color: #fbcfe8 !important; /* Rosado pastel de la imagen */
    color: #db2777 !important;
    font-size: 0.7rem;
    padding: 0.4em 0.6em;
}

/* --- ESTILOS HERO SLIDER YOUSEE --- */

.hero-content-wrapper {
    height: 95vh; /* Altura del banner */
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Capa oscura suave opcional para mejorar legibilidad del texto */
.hero-content-wrapper::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.1); /* Muy sutil para no tapar el efecto holográfico */
    z-index: 1;
}

.hero-content-wrapper .container {
    position: relative;
    z-index: 2;
}

.hero-content-wrapper h1 {
    font-size: 4.5rem;
    line-height: 1;
    letter-spacing: -2px;
    font-weight: 600;
}

.italic {
    font-style: italic;
}

/* Botón Blanco YouSee */
.btn-white-yousee {
    background-color: #ffffff;
    color: #A088EA !important; /* El morado de la marca */
    font-weight: 700;
    font-size: 1.2rem;
    border: none;
    transition: all 0.3s ease;
}

.btn-white-yousee:hover {
    background-color: #f3f0ff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Ajuste de los controles del carrusel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

@media (max-width: 991px) {
    .hero-content-wrapper h1 {
        font-size: 3rem;
    }
    .hero-content-wrapper {
        height: 70vh;
    }
}

/* --- SECCIÓN BENEFICIOS YOUSEE --- */

.color-purple-yousee {
    color: #A088EA; /* El morado de los iconos en image_dfba12.png */
    letter-spacing: -0.3px;
}

.benefit-item {
    transition: transform 0.3s ease;
}

.benefit-item:hover {
    transform: translateY(-5px);
}

.benefit-item img {
    /* Si usas iconos con el color ya definido, esto no es necesario,
       pero ayuda a mantener la consistencia visual */
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

@media (max-width: 768px) {
    .benefit-item h6 {
        font-size: 0.95rem;
    }
}


/* --- ESTILOS PRODUCTOS DESTACADOS YOUSEE --- */


/* Ajuste de la Card */
.product-card-yousee {
    border-radius: 25px !important; /* Bordes redondeados como el PDF */
    transition: transform 0.3s ease;
}

.product-card-yousee:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(167, 139, 250, 0.1) !important;
}

/* El Botón "Agregar al Carrito" exacto de la imagen dfaa19 */
.btn-yousee-outline {
    border: 1.5px solid #A088EA !important;
    background-color: #ffffff !important;
    color: #A088EA !important;
    border-radius: 12px !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: none; /* No es todo mayúsculas en el diseño */
}

.btn-yousee-outline:hover {
    background-color: #A088EA !important;
    color: #ffffff !important;
}

/* Ajuste de tipografía general */
#featured-products h2 {
    letter-spacing: -1px;
    font-weight: 600;
}

.color-title-product{
    color: #000;
}

.text-description-limit {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Número exacto de líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Ajuste de altura para consistencia visual */
    min-height: 3.6em; /* (lh-sm suele ser ~1.2 * 3 líneas) */
}

.color-text-gray {
    color: #999999; /* El gris suave de las capturas de YouSee */
}

/* Alineación para la fila de encabezado de sección */
.row.mb-5 {
    display: flex;
    align-items: center; /* Alinea verticalmente el título con la cita */
    justify-content: space-between; /* Asegura el espacio entre las dos columnas */
}

/* Ajuste opcional para móviles: que se apilen y centren */
@media (max-width: 767px) {
    .row.mb-5 {
        text-align: center;
        flex-direction: column;
    }

    .col-md-5.text-md-end {
        text-align: center !important;
        margin-top: 1.5rem;
    }
}

/* --- SECCIÓN CATEGORÍAS YOUSEE --- */

.cat-card-yousee {
    transition: transform 0.3s ease;
}

.cat-img-wrapper {
    position: relative;
    height: 250px;
    border-radius: 30px; /* Bordes muy redondeados como la imagen df40e3 */
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.cat-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.cat-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(167, 139, 250, 0.8), rgba(167, 139, 250, 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Color azul específico para la tarjeta de Cuento Infantil */
.bg-blue-yousee {
    background: linear-gradient(to top, rgba(45, 212, 191, 0.8), rgba(45, 212, 191, 0.2));
}

.badge-proximamente {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffff00;
    color: #71d3d3;
    text-align: center;
    font-weight: bold;
    padding: 7px 0;
    z-index: 10;
    border-radius: 30px 30px 0 0;
    font-size: 1.4rem;
}

.cat-card-yousee:hover .cat-img-wrapper img {
    transform: scale(1.1);
}

.cat-card-yousee:hover {
    transform: translateY(-5px);
}

/* --- SECCIÓN PROMOCIONAL EXACTA --- */

.seccion-promo-yousee {
    background-image: url('../../assets/img/page/Plantilla exportados-11.png'); /* Tu imagen del sofá y la agenda */
    background-size: cover;
    background-position: center center;
    padding: 80px 0;
    position: relative;
}

.banner-contenedor-principal {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    min-height: 400px;
}

.bloque-morado-oferta {
    background-color: rgba(74, 45, 139, 0.95); /* Morado YouSee con leve transparencia */
    border-radius: 40px; /* Bordes muy redondeados */
    padding: 60px 50px 80px 50px;
    color: #ffffff;
    width: 100%;
    max-width: 850px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.txt-lanzamiento {
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: 5px;
}

.titulo-oferta {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.1;
}

.txt-codigo {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 40px;
}

.txt-codigo span {
    font-weight: 700;
}

.beneficios-banner {
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* Botón Blanco con texto Rosa exacto */
.btn-yousee-blanco-ovalado {
    background-color: #ffffff;
    color: #df80b5; /* El color rosa del texto según la imagen */
    padding: 15px 45px;
    border-radius: 60px; /* Forma totalmente ovalada */
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
    position: absolute;
    bottom: -50px; /* Sobresale un poco del bloque morado */
    right: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.btn-yousee-blanco-ovalado:hover {
    transform: scale(1.05);
    color: #c06095;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .bloque-morado-oferta {
        padding: 40px 20px 100px 20px;
        text-align: center;
    }
    .titulo-oferta {
        font-size: 2rem;
    }
    .btn-yousee-blanco-ovalado {
        position: relative;
        bottom: 40px;
        right: 0;
        display: block;
        width: fit-content;
        margin: 0 auto;
    }
}


/* --- SECCIÓN COMUNIDAD Y TESTIMONIOS --- */

.bg-light-yousee {
    background-color: #f9f8ff; /* Fondo sutilmente lila/blanco */
}

.color-purple-yousee {
    color: #4a2d8b; /* Morado profundo YouSee */
}

.testimonial-card-yousee {
    background: white;
    border-radius: 25px; /* Bordes redondeados del diseño */
    border: none;
    box-shadow: 0 10px 30px rgba(74, 45, 139, 0.05);
    position: relative;
}

.quote-mark {
    color: #A088EA; /* Lila claro para las comillas */
    font-size: 3rem;
    font-family: serif;
    line-height: 1;
    display: block;
    margin-bottom: -10px;
}

.avatar-yousee {
    width: 45px;
    height: 45px;
    background-color: #EAB2E4; /* Color lila del avatar en el diseño */
    border-radius: 50%;
}

.display-5 {
    letter-spacing: -1px;
}

/* --- SECCIÓN CONTACTO Y TIENDAS --- */

.titulo-contacto-yousee {
    color: #4a2d8b; /* Morado marca */
    font-weight: 800;
    line-height: 1.2;
}

.item-tienda {
    font-size: 0.95rem;
    color: #4a2d8b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.punto-rojo {
    height: 8px;
    width: 8px;
    background-color: #ff4d4d; /* El rojo del diseño */
    border-radius: 50%;
    display: inline-block;
    margin-right: 12px;
}

/* Inputs minimalistas como la imagen */
.input-yousee {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    font-size: 0.9rem;
}

.input-yousee:focus {
    box-shadow: none;
    border-color: #A088EA;
}

.btn-dark-yousee {
    background-color: #1a1a1a; /* Botón negro sólido ENVIAR */
    color: white;
    font-weight: 700;
    padding: 10px 40px;
    border-radius: 5px;
    border: none;
}

.mapa-yousee {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}


.footer-yousee {
    background-color: #A088EA; /* El morado exacto de la imagen 16  */
    color: white;
}

.footer-links li {
    margin-bottom: 5px;
}

.footer-links a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.9;
}

.footer-links a:hover {
    opacity: 1;
    text-decoration: underline;
}

.newsletter-group input {
    border-radius: 0;
    border: none;
    font-size: 0.9rem;
}

.btn-purple-dark {
    background-color: #4a2d8b; /* El botón oscuro de la newsletter  */
    width: 45px;
    border: none;
}

.social-icon {
    color: white;
    font-size: 2rem;
    text-decoration: none;
}

.extra-small {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* --- ESTILOS PARA TUS ICONOS PERSONALIZADOS --- */

.social-link-custom {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-link-custom:hover {
    transform: scale(1.1); /* Efecto de agrandado al pasar el mouse */
}

.img-social {
    width: 100px;  /* Ajusta el tamaño según tus imágenes originales */
    height: auto;
    display: block;
}

/* Alineación del texto de usuario */
.footer-yousee p.small {
    letter-spacing: 0.5px;
    margin-top: 5px;
}

.color-text-gray{
    color: #9B9B9B!important;
    font-weight: 400;
}

/* Color principal YouSee */
.color-purple-yousee {
    color: #A088EA; /* El morado vibrante de tus diseños */
}

.color-text-gray {
    color: #999999;
}

.border-purple-light {
    border-color: rgba(167, 139, 250, 0.2) !important;
}

/* Botón estilo YouSee */
.btn-yousee-purple {
    background-color: #A088EA;
    border: none;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.btn-yousee-purple:hover {
    background-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(167, 139, 250, 0.4);
}

/* Scrollbar estética */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #A088EA;
    border-radius: 10px;
}

.extra-small {
    font-size: 0.75rem;
}

/* --- PRODUCT PAGE YOUSEE --- */

.color-purple-yousee { color: #a78bfa; }

.main-img-container-yousee {
    background-color: #fcfbff;
    border-radius: 40px;
    padding: 20px;
}

.thumb-yousee {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.thumb-yousee.active, .thumb-yousee:hover {
    border-color: #a78bfa;
    transform: scale(1.05);
}

.btn-yousee-purple {
    background-color: #a78bfa;
    color: white;
    border: none;
    border-radius: 30px; /* Muy redondeado como el diseño */
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-yousee-purple:hover {
    background-color: #8b5cf6;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(167, 139, 250, 0.3);
}

.technical-box-yousee {
    background-color: white;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.1);
}

.extra-small {
    font-size: 10px;
    line-height: 1.2;
}

.trust-icons img {
    filter: opacity(0.8);
}

.container-images-products{
    background: #FFF;
    padding: 25px;
    border-radius: 10px;
}

/* --- SECCIÓN REVIEWS YOUSEE --- */

.color-purple-yousee { color: #a78bfa; }
.color-text-gray { color: #777777; }
.extra-small { font-size: 0.7rem; }

.review-card-yousee {
    background-color: #ffffff;
    border-radius: 25px; /* Redondeado suave como las tarjetas de comunidad */
    transition: transform 0.3s ease;
}

.review-card-yousee:hover {
    transform: translateY(-5px);
}

.avatar-review-yousee {
    width: 45px;
    height: 45px;
    background-color: #d1c4e9; /* Morado pastel */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 1.2rem;
}

.btn-yousee-outline {
    border: 2px solid #a78bfa;
    color: #a78bfa;
    background: transparent;
    transition: all 0.3s ease;
}

.btn-yousee-outline:hover {
    background-color: #a78bfa;
    color: white;
}

/* Paginación personalizada */
.pagination-yousee .page-link {
    color: #a78bfa;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-yousee .page-item.active .page-link {
    background-color: #a78bfa;
    color: white;
}

/* Estilo del Modal (opcional si lo necesitas) */
.modal-content {
    border-radius: 30px;
    border: none;
}

/* --- PAGINA PRODUCTOS YOUSEE --- */

.banner-products-yousee {
    background-image: url('../../assets/img/page/Plantilla exportados-03.png'); /* La imagen del banner de productos */
    background-size: cover;
    background-position: center;
    border-radius: 40px; /* Redondeado característico de YouSee */
}

.filter-sidebar-yousee {
    background-color: #ffffff;
    border-radius: 30px;
}

.product-card-yousee {
    border-radius: 0px; /* Diseño cuadrado según referencia */
    transition: all 0.3s ease;
}

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

.btn-yousee-dark {
    background-color: #212529;
    color: white;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.btn-outline-yousee {
    border: 2px solid #a78bfa;
    color: #a78bfa;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.btn-outline-yousee:hover {
    background-color: #a78bfa;
    color: white;
}

/* Range Input Personalizado */
.custom-range-yousee::-webkit-slider-thumb {
    background: #a78bfa;
}

.custom-range-yousee::-webkit-slider-runnable-track {
    background: #f0f0f0;
}

/* --- CHECKOUT STYLE YOUSEE --- */

/* Contenedores Principales */
.checkout-card {
    background: #ffffff;
    border-radius: 30px; /* Redondeado característico de YouSee */
    border: 1px solid rgba(167, 139, 250, 0.1);
    transition: all 0.3s ease;
}

/* Insignias de Pasos (1, 2, 3) */
.step-badge {
    background-color: #a78bfa;
    color: white;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
    margin-right: 12px;
}

/* Formulario Estilizado */
.form-control, .form-select {
    border-radius: 12px;
    padding: 12px 15px;
    border: 1.5px solid #f0f0f0;
    font-size: 0.9rem;
    color: #555;
    background-color: #fdfdff;
}

.form-control:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 0.25 margin-top: rgba(167, 139, 250, 0.1);
    background-color: #fff;
}

/* Opciones de Pago */
.payment-option {
    border: 2.5px solid #f0f0f0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 15px;
}

.payment-option.active-payment {
    border-color: #a78bfa;
    background-color: rgba(167, 139, 250, 0.05);
}

.payment-logo {
    height: 25px;
    width: auto;
}

/* Resumen de Compra */
.summary-card {
    position: sticky;
    top: 110px; /* Para que no se pierda al bajar */
}

.item-row {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed rgba(167, 139, 250, 0.2);
}

.item-row:last-child {
    border-bottom: none;
}

/* Botón Final */
.btn-pay {
    background-color: #a78bfa;
    color: white;
    border-radius: 50px;
    padding: 18px;
    font-weight: 800;
    letter-spacing: 1.5px;
    border: none;
    transition: all 0.3s ease;
}

.btn-pay:hover {
    background-color: #8b5cf6;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(167, 139, 250, 0.3);
    color: white;
}

.color-purple-yousee { color: #a78bfa; }

/* Estilo para el botón cuando está deshabilitado (Enviando) */
.btn-yousee-account:disabled {
    opacity: 0.85;
    cursor: not-allowed;
    background-color: #0F3C4C; /* Mantener tu color institucional */
    border-color: #0F3C4C;
}

/* Espaciado del spinner respecto al texto */
.btn-yousee-account .spinner-border {
    margin-right: 10px; /* Separación del texto "Enviando..." */
    vertical-align: middle;
    --bs-spinner-width: 1.1rem; /* Tamaño ligeramente más pequeño para elegancia */
    --bs-spinner-height: 1.1rem;
}

/* Animación de entrada suave para el texto */
.btn-yousee-account {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.newsletter-group .form-control.is-invalid {
    border: 1px solid #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.1);
}

.newsletter-group .btn-purple-dark {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
}

/* Evitar que el spinner deforme el botón pequeño */
.newsletter-group .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}