/* Generales */
body
{
   font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333;
    
}

                
                /* Barra Superior */


.top-bar 
{
    background-color: #800000; /* Rojo oscuro */
    color: #f4f9ef;
    text-align: center;
    padding: 8px 0;
    font-size: 0.9em;
}

/* Encabezado Principal */
.main-header 
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    
}

.header-left, .header-right 
{
    flex: 1;
    display: flex;
    align-items: center;
}

.header-left 
{
    justify-content: flex-start;
}

.header-center 
{
    flex: 1;
    text-align: center;
}

.header-right 
{
    justify-content: flex-end;
}


                    /* CCAJA DE BUSQUEDA*/



.search-box 
{
    display: flex;
    border: 2px solid #800000;
    border-radius: 20px;
    overflow: hidden;
    padding: 2px 5px;
    background-color: #fff; /*fondo del buscador*/
    width: 220px;
    height: auto;
}

.search-box input 
{
    border: none;
    outline: none;
    padding: 2px  5px;
    font-size: 0.9em;
    flex-grow: 1;
    background: transparent;
}

.search-box button
{
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 5px;
}

.search-box button img 
{
    height: 18px;
    width: 18px;
    vertical-align: middle;
}

                    /* CARRITO E INICIO DE SECCION*/

.icons 
{
    display: flex;
    align-items: center;
    gap: 35px;
}

.icons img {
    height: 24px;
    width: 24px;
}

.login-btn {
   
    color: #800000;
    padding: 8px 15px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
    
}

.menu-toggle {
    display: flex; /* Oculto por defecto en desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 100;
    margin-left: 15px;
}

.hamburger-icon {
    font-size: 2em;
    color: #800000;
    line-height: 1;
}




                /* BARRA DE NAVEGACION*/


/* --- Estilos de la Barra de Navegación --- */
.navbar
{  
    overflow: hidden;
    
        /* Centro */
    width: fit-content;
    margin-left: auto;
    margin-right: auto;                                  
}

.nav-list 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table; 
    font-size: 14px;

}

/* Estilos para cada elemento Lista */
.nav-list > li 
{
    float: left;
    margin-right: 40px;             /* Separación entre cada elemento de la lista */
    background-color: #91a6c9;      /* Color de fondo para que cada LI sea su propia caja */
    border-radius: 30px;       
   
}

.nav-list li a 
{
    display: block;
    color: #f4f9ef; 
    text-align: center;
    padding: 8px 50px;
    text-decoration: none;
    line-height: 1; 
    border-radius: 40px; 
}

.nav-list li a:hover:not(.dropbtn) 
{
    background-color: #800000;/*al pasar cambia color vino*/
    border-radius: 30px; 
}

/*  Estilos para el Desplegable */

.dropdown 
{
    float: left;
    overflow: visible;
}

.dropbtn {
    cursor: pointer;
}

.dropdown-content 
{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out; 
    
    /* Lista despegable */
    position: absolute;
    background-color: #91a6c9; /*despegable fondo*/ 
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 1;
    border-radius:  8px 8px;
    margin-top: 10px;

}

.dropdown-content a 
{
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;

}

.dropdown-content a:hover 
{
    background-color: #91a6c9;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;

}

.dropdown:hover .dropdown-content 
{
    max-height: 200px;
}

.dropdown:hover .dropbtn 
{
    background-color: #800000; /*lista del menu despegable*/
}


            /* BANNER Y SLOGAN */


.hero-section 
{
    margin-top: 10px;
    position: relative;
    text-align: center;
    color: #f4f9ef;
    padding: 100px 0; 
    background: url("../img/BANNER-PRINCIPAL.jpg") center no-repeat;
    min-height: 500px; /* Altura mínima para la sección */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}




.hero-content 
{
    
    position: relative;
    z-index: 1;
    margin-bottom: 80px;
}


.hero-content h1 
{
    font-family: "Basic", sans-serif;
    font-weight: 400font-style: normal;
    font-size: 2.5em;
    margin-bottom: 240px;
    color: #f4f9ef;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}


.hero-content p 
{
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;  
    font-size: 1.8em;
  margin-top: -240px;
    color: #f4f9ef;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/*BANNER-BOTON*/
.btn 
{
    display: inline-block;
    letter-spacing: 2px;
    margin-right: -2px;
    text-transform: uppercase;
    text-decoration: none;

}

.cta-btn 
{
    font-size: 1rem;
    background-color: #800000;
    padding: 1rem 8rem;
    color: #f4f9ef;
    border-radius: 10rem;
    padding-bottom: -350px;
}
/*. Al pasar cambia*/

.cta-btn:hover {
    color: #f4f9ef;
    background-color: #91a6c9;
    
}

@media (max-width: 992px) {
    /* Ajustes generales para pantallas medianas (tabletas) */
    .hero-section {
        min-height: 400px; /* Reducir la altura mínima */
        padding: 80px 0;
    }

    .hero-content h1 {
        font-size: 3em; /* Reducir tamaño de título */
        margin-bottom: 200px; /* Ajustar margen */
    }

    .hero-content p {
        font-size: 1.5em; /* Reducir tamaño de eslogan */
        margin-top: -180px; /* Ajustar margen */
    }

    .cta-btn {
        padding: 1rem 6rem; /* Reducir el padding del botón */
    }
}

@media (max-width: 768px) {
    /* Ajustes para pantallas pequeñas (móviles) */
    .hero-section {
        min-height: 350px;
        padding: 60px 0;
        /* Asegurarse de que el background sea visible */
        background-size: cover; 
    }
    
    .hero-content {
        margin-bottom: 50px; /* Reducir margen inferior del contenido */
        padding: 0 15px; /* Añadir padding horizontal para evitar que el texto toque los bordes */
    }

    .hero-content h1 {
        font-size: 2.5em; /* Reducción mayor para el título */
        margin-bottom: 120px; /* Ajuste más drástico del margen */
    }

    .hero-content p {
        font-size: 1.3em; /* Reducción mayor para el eslogan */
        margin-top: -90px; /* Ajuste más drástico del margen */
    }

    /* Modificar los márgenes del contenido para que no se superpongan tanto en móvil */
    .hero-content {
        /* Puedes necesitar probar diferentes valores según la altura de tu imagen */
        margin-top: 0; 
        margin-bottom: 40px; 
    }
    
    .cta-btn {
        font-size: 0.9rem;
        padding: 0.8rem 4rem; /* Reducir el padding del botón en móviles */
        display: block; /* Opcional: Hacer que el botón ocupe todo el ancho disponible para mejor pulsación */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    /* Ajustes específicos para móviles muy pequeños */
    .hero-content h1 {
        font-size: 2em;
    }

    .hero-content p {
        font-size: 1.1em;
    }
    
    .cta-btn {
        padding: 0.7rem 3rem;
        font-size: 0.8rem;
    }
}




                /*PAGINA PRINCIPAL*/                                    
                    /*  PRODUCTOS DESTACADOS */

                /*PAGINA PRINCIPAL*/

/* subtitulo de Productos destacados */
.section-title 
{
    font-family: "Basic", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    margin-top: 40px;
}

.section-title h2 {
    font-size: 2em;
    color: #800000; 
    margin: 0 20px;
    font-weight: 700;
    letter-spacing: 1px;
}
.dot {
    width: 8px;
    height: 8px;
    background-color: #91a6c9; 
    border-radius: 50%;
    margin: 0 4px;
}
.modern-product-gallery {
    padding: 60px 5%;
    background-color: white;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Tres columnas */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 40px;

}

.product-item-modern {
    text-align: left;
    transition: box-shadow 0.3s ease;
    margin-left: 20px;
    margin-right: 20px;
   
}

.product-item-modern:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-image-wrapper {
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
    border-radius: 4px;
    background-color: #91a6c9; /* Fondo muy claro para el área de la imagen */
}

.product-img-modern {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.product-item-modern:hover .product-img-modern {
    transform: scale(1.05);
}

.personalized-tag {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #800000; 
    color: white;
    padding: 5px 10px;
    font-size: 0.8em;
    font-weight: 600;
    z-index: 10;
}

.product-title-modern {
    font-size: 1.1em;
    font-weight: 400;
    color: #555;
    margin-bottom: 5px;
    line-height: 1.4;
    min-height: 3.3em; /* Asegura espacio para títulos largos */
    margin-left: 10px;
    text-decoration-style: none;
}

.product-price-modern {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-left: 20px;
}


@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en tabletas */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 15px;
    }
    
    .product-item-modern {
        text-align: center; /* Centra el texto en móvil */
    }
}

hr
{
    color: #800000;
    margin-top: 40px;
}
                                
                                        /*PAGINA PRINCIPAL*/

                                /* QUIERO PERSONALIZAR MI REGALO*/

                                        /*PAGINA ´RINCIPAL*/


.how-it-works-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 5%;
     position: relative;
    overflow: hidden;
}

.how-it-works-content {
    flex: 1; /* Ocupa el espacio restante */
    max-width: 550px; /* Limita el ancho del contenido de texto */
    text-align: left;
    padding-right: 40px; /* Espacio entre el texto y la imagen */
}

.main-tagline 
{   font-family: "Basic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.2em;
    color: #91a6c9; /* Color del texto principal */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.sub-tagline {
    font-size: 1.1em;
    color: #800000; /* Color rojo del texto secundario */
    font-weight: 600;
    margin-bottom: 25px;
}

.steps-list 
{
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal; 
    list-style: none; /* Elimina los puntos predeterminados */
    padding: 0;
    margin-bottom: 35px;
}

.steps-list li {
    font-size: 1.1em;
    color: #91a6c9;
    margin-bottom: 15px;
    padding-left: 25px; /* Espacio para el número */
    position: relative;
}

.steps-list li::before {
    
    counter-increment: step-counter; /* Incrementa el contador */
    content: counter(step-counter) "."; /* Muestra el número y un punto */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color: #800000; /* Color rojo para los números */
    width: 20px; /* Ancho fijo para alinear */
}

.how-it-works-content ol {
    counter-reset: step-counter;
}
               

.personalize-button {
    display: inline-flex; /* Para alinear texto e icono */
    align-items: center;
    background-color: #800000; /* Color rojo del botón */
    color: #f4f9ef;
    padding: 12px 25px;
    border-radius: 30px; /* Bordes suaves */
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.personalize-button:hover {
    background-color: #91a6c9;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.personalize-button img {
    height: 18px; /* Tamaño del icono */
    margin-left: 10px;
    
}

.how-it-works-image {
    flex: 0 0 auto; /* No crece ni encoge, toma su tamaño */
    width: 400px; /* Ancho fijo de la imagen */
    height: 400px; /* Altura fija para que sea cuadrada */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Fondo si la imagen no llena todo */
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.gift-box-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Asegura que la imagen se vea completa dentro de su contenedor */
    border-radius: 10px;
}


@media (max-width: 992px) {
    .how-it-works-section {
        flex-direction: column; /* Apila el contenido y la imagen en pantallas pequeñas */
        padding: 40px 5%;
    }

    .how-it-works-content {
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
    }

    .main-tagline {
        font-size: 1.8em;
    }

    .sub-tagline {
        font-size: 1em;
    }

    .steps-list 
    {
        font-family: "Dosis", sans-serif;
        font-optical-sizing: auto;
        font-weight: <weight>;
        font-style: normal; 
        margin: 0 auto 30px auto; /* Centra la lista */
        max-width: 300px;
    }
    
    .steps-list li {
        text-align: left; /* Alinea el texto de la lista a la izquierda */
    }

    .how-it-works-image {
        width: 100%;
        max-width: 350px; /* Tamaño máximo para la imagen en móvil */
        height: auto; /* Altura automática para mantener proporción */
    }
}

@media (max-width: 600px) {
    .main-tagline {
        font-size: 1.5em;
    }
    .personalize-button {
        font-size: 0.9em;
        padding: 10px 20px;
    }
}


                            /* PAGINA PRINCIPAL*/
                    /* DESCUBRE MAS SOBRE NOSTROS */
                            /* PAGINA PRINCIPAL */

.purpose-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 5%;
    background-color: white; /* Fondo blanco liso */
    gap: 40px; /* Espacio entre la imagen y el texto */
}

/* El resto del CSS de esta sección se mantiene igual, ya que solo añadimos párrafos */
/* ... (El resto de las reglas como .purpose-image-container, .purpose-content, etc. siguen igual) ... */

.purpose-image-container {
    flex: 0 0 45%;
    max-width: 450px;
}

.purpose-gift-box-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.purpose-content {
    flex: 0 0 50%;
    max-width: 550px;
    text-align: left;
}

.purpose-title {

    font-family: "Basic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5em;
    color: #91a6c9;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.purpose-description 
{
    font-family: "Dosis", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal; 
    font-size: 1.1em;
    color: #333;
    line-height: 1.5;
    margin-bottom: 25px; /* Añadido un margen inferior para separar los párrafos */
}

/* Lista de Características (con checkmarks) */
.purpose-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.purpose-list li {
    font-size: 1em;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.check-mark {
    color: #8B0000;
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 10px;
    line-height: 1;
}

/* Botón "Descubre más" */
.discover-button {
    display: inline-block;
    color: #8B0000;
    padding: 10px 25px;
    border: 2px solid #8B0000;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.discover-button:hover {
    background-color: #8B0000;
    color: white;
}

@media (max-width: 992px) {
    .purpose-section {
        flex-direction: column;
        padding: 50px 5%;
    }

    .purpose-image-container {
        flex: 1;
        max-width: 80%;
        margin-bottom: 30px;
    }

    .purpose-content {
        flex: 1;
        max-width: 100%;
        text-align: center;
    }

    .purpose-list {
        text-align: left;
        display: inline-block;
    }
}

@media (max-width: 600px) {
    .purpose-title {
        font-size: 1.3em;
    }
    .purpose-description {
        font-size: 1em;
    }
}


                        /* PAGINA PRINCIPAL */

                        /* INFORMACION */

                        /* PAGINA PRINCIPAL */

.contact-info-section 
{

    padding-top: 20px;
    background-color: #800000; /* Fondo rojo oscuro para la sección completa */
    color: white;
    text-align: center;
    padding-bottom: 40px;
}

/* Título de la Sección de Información (similar a productos destacados) */
.info-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.info-title-container h2 {
    font-size: 2em;
    color: white; 
    margin: 0 20px;
    font-weight: 700;
    letter-spacing: 2px;
}

.info-dot {
    width: 8px;
    height: 8px;
    background-color: #f4f9ef; /* Puntos blancos */
    border-radius: 50%;
    margin: 0 4px;
}

/* Contenedor principal de la tarjeta de información */
.info-card-container {
    display: flex;
    justify-content: center;
    padding: 0 5%;
    margin-bottom: 10px; /* Espacio antes del mapa */
}

/* La tarjeta con el color azul/gris y forma ovalada */
.info-card {
    background-color: #91a6c9; /* Tono azul */
    color: white;
    border-radius: 100px; 
    padding: 30px 40px;
    max-width: 900px;
    width: 100%;
    display: flex;
    justify-content: space-around; /* Distribuye las columnas de Ubicación, Contactos, Horarios */
    align-items: flex-start;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.info-group {
    text-align: center;
    padding: 0 15px;
}
.gmail
{
    color: #f4f9ef;
}
.contactos
{
    color: #f4f9ef;
}

.info-group h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5); /* Línea divisoria sutil */
    padding-bottom: 5px;
}

.info-group p {
    font-size: 1em;
    margin: 5px 0;
}

/* Iconos Sociales */

.social-icons  .facebook
{
    margin-top: 15px;
    display: inline-flex;
    justify-content: center;
    gap: 15px;
    padding: px;

}
.social-icons .facebook img
{
    width: 15px;
    height: 24px;

}

.social-icons img {
    width: 24px;
    height: 24px;
    padding: 10px;
    transition: transform 0.2s ease;
}

.social-icons a:hover img {
    transform: scale(1.1);
}

/* Contenedor del Mapa */
.map-container {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0px;
}

.map-container iframe {
    display: block;
    width: 100%;
    height: 450px; /* Altura del mapa */
    border: none;
    border-radius: 8px;
}

@media (max-width: 800px) {
    .info-card {
        flex-direction: column; /* Apila las columnas en pantallas pequeñas */
        align-items: center;
        border-radius: 20px; /* Menos ovalado en móvil */
        padding: 30px 20px;
    }
    
    .info-group {
        width: 100%;
        margin-bottom: 20px;
    }

    .info-group:last-child {
        margin-bottom: 0;
    }
}


                        /* PAGINA PRINCIPAL */

                        /* PIE DE PAGINA*/

                        /* PAGINA PRINCIPAL*/

footer {
    background-color: #f4f9ef; /* Color beige fondo */
    color: #800000;
    text-align: center;
    padding: 10px ;
    position: relative;
    
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Flecha "Volver al Inicio" */
.back-to-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #91a6c9;
    
}


.arrow-up {
    
    font-size: 1em;
    font-weight: bold ;
    line-height: 1; /* Asegura que la flecha esté centrada */
    margin-bottom: 5px;
}

.footer-link-text {
    font-size: 0.5em;
    
    margin: 5px 0 10px 0;
    color: #91a6c9;
    
}

.footer-credits {
    font-size: 0.9em;
    margin: 0;
    color: #800000;
}

                /*PAGINA 22222222*/

                            /*1111111111111111*/

            /*ESTILOS PARA REGALOS POR CELEBRACION ( Y PERSONALIZADOS )*/

                             /*1111111111111111*/

                /*PAGINA 22222*/


.special-dates-section
 {
    padding: 20px 5%;
    text-align: center;
    background-color: white; /* Fondo blanco liso */
}

/* El título `section-title` con los puntos ya lo tienes definido.
   Si necesitas que los puntos sean del color gris/azul claro como en la imagen,
   asegúrate de que los .dot en esta sección sean blancos o un gris muy claro.
   Por ahora, usa los dots generales, que son grises. */

.special-dates-section .section-title {
    margin-bottom: 20px; /* Reduce el margen inferior del título */
}

.special-dates-section .section-description {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.products-grid-special {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 30px;
    max-width: 1200px; /* Ancho máximo para la cuadrícula */
    margin: 0 auto;
}

.product-card-special {
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.product-card-special:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.product-image-special {
    width: 100%;
    height: auto;
    max-height: 250px; /* Altura máxima para las imágenes */
    object-fit: cover; /* Recorta la imagen para que cubra el área */
    border-radius: 6px;
    margin-bottom: 15px;
}

.product-title-special {
    font-size: 1.1em;
    color: #333;
    margin-bottom: 5px;
    height: 3.2em; /* Altura fija para el título si tiene 2 líneas */
    overflow: hidden; /* Oculta texto que desborde */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a 2 líneas */
    -webkit-box-orient: vertical;
}

.product-price-special {
    font-size: 1.1em;
    color: #8B0000; /* Color rojo para el precio */
    font-weight: bold;
    margin-bottom: 15px;
}

.more-options-btn {
    display: inline-block;
    background-color: #8B0000;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.more-options-btn:hover {
    background-color: #a00000;
}

@media (max-width: 992px) {
    .products-grid-special {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tabletas */
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .products-grid-special {
        grid-template-columns: 1fr; /* 1 columna en móviles */
        gap: 15px;
    }

    .section-description {
        font-size: 1em;
    }

    .product-card-special {
        padding: 10px;
    }

    .product-image-special {
        max-height: 200px;
    }

    .product-title-special {
        font-size: 1em;
    }
}

                                /* 1111111111111111111111111111 */
                            /* Sección: ¿CÓMO PERSONALIZAR MI REGALO? */
                                    /* 111111111111111111111 */

.personalization-process-section {
    padding: 50px 5%;
  
    text-align: center;
}

/* Encabezado y Línea de Tiempo del Título */
.process-header {
    margin-bottom: 40px;
}

.process-line-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    position: relative;
}

.process-line-top h2 {
    font-size: 1.8em;
    color: #91a6c9; 
    margin: 0 15px;
}




/* Contenedor de Pasos (Barra de fondo roja/rosada) */
.process-steps-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* Espacio entre las tarjetas */
    position: relative;
    padding: 50px 0; /* Espacio vertical para la barra de fondo */
    max-width: 1200px;
    margin: 0 auto 40px auto;
}

.process-timeline-background {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 100%; /* La barra cubre la altura de los pasos */
    background-color: #b88d8b; /* Color de fondo de la línea de tiempo */
    border-radius: 10px;
    transform: translateY(-50%); /* Centra verticalmente */
    z-index: 0;
    max-width: 1000px; /* Limita el ancho de la barra de fondo */
    margin: 0 auto;
}

/* Estilo de cada Paso */
.process-step {
    flex: 1 1 200px; /* Asegura que todos tengan un ancho similar */
    max-width: 25%;
    position: relative;
    z-index: 1; /* Pone las tarjetas sobre el fondo */
}

.step-card {
    background-color: white;
    border: 3px solid; /* El color del borde se define en las clases específicas */
    padding: 20px 10px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    height: 150px; /* Altura fija para que todas se vean iguales */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Colores de las tarjetas */
.step-card-blue {
    border-color: #92a8c3; /* Borde azul/gris */
    background-color: #c9d5e3; /* Fondo de la tarjeta (el color claro de la imagen) */
}

.step-card-red {
    border-color: #800000; /* Borde rojo oscuro */
    background-color: #b30000; /* Fondo de la tarjeta (el color oscuro de la imagen) */
    color: white;
}
.step-card-red .step-text {
    color: white;
}


.step-icon {
    width: 60px; /* Tamaño del icono/imagen placeholder */
    height: 40px; 
    object-fit: contain;
    margin-bottom: 5px;
    /* Ajusta si usas una imagen PNG transparente. Para el placeholder, usa filtros: */
    /* filter: invert(0.5); */ 
}

.step-text {
    font-size: 0.95em;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

/* Botón de Contacto */
.contact-button {
    display: inline-flex;
    align-items: center;
    background-color: #800000;
    color: white;
    padding: 15px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.contact-button:hover {
    background-color: #b30000;
}

@media (max-width: 768px) {
    .process-steps-container {
        flex-direction: column; /* Apila los pasos verticalmente */
        padding: 20px 0;
    }

    .process-step {
        max-width: 90%;
        margin: 10px auto;
    }

    .process-timeline-background {
        width: 90%; /* La línea de tiempo se vuelve vertical */
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .step-card {
        height: auto;
        min-height: 120px;
        padding: 15px;
    }

    .contact-button {
        font-size: 1em;
        padding: 12px 25px;
    }
}

                        /*PAGINA 333333333*/

                                    /*SOBRE NOSTROS*/

                        /*PAGINA 333333*/

.about-andrea-section {
    padding: 60px 5%;
    background-color: #f7f7f7; /* Fondo blanco muy ligero o el que uses de base */
    color: #333;
    text-align: center;
}

.about-andrea-container {
    max-width: 1200px;
    margin: 0 auto;
}

.about-andrea-title {
    font-size: 1.8em;
    font-weight: 400;
    color: #ce9f9f; /* Color rosado/púrpura claro del título */
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.about-andrea-content {
    display: flex;
    align-items: flex-start; /* Alinea el texto con la parte superior de la imagen */
    gap: 40px;
    text-align: left;
}

.about-andrea-text {
    flex: 2; /* El texto ocupa más espacio que la imagen */
    padding-right: 20px;
}

.about-andrea-text p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Estilos de énfasis específicos */
.about-andrea-text p strong {
    color: #800000; /* Color vino para resaltar "contacto conmigo" o enlaces */
    font-weight: 600;
}

.about-andrea-image {
    flex: 1; /* La imagen toma el espacio restante */
    max-width: 350px;
}

.andrea-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* Pequeño borde */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
    .about-andrea-content {
        flex-direction: column; /* Apila el texto y la imagen verticalmente */
        align-items: center;
    }
    
    .about-andrea-text {
        order: 2; /* El texto va después de la imagen */
        padding-right: 0;
        margin-top: 20px;
    }

    .about-andrea-image {
        order: 1; /* La imagen va arriba */
        max-width: 80%;
    }
    
    .about-andrea-title {
        font-size: 1.5em;
    }
}

@media (max-width: 600px) {
    .about-andrea-text p {
        font-size: 1em;
    }
}

                            /* PAGINA 3333*/

                            /* Sección: MI TALLER */

                            /* PAGINA 3333 */

.my-workshop-section {
    padding: 60px 5%;
    background-color: white; /* Fondo blanco */
    color: #333;
    text-align: center;
}

.my-workshop-container {
    max-width: 1200px;
    margin: 0 auto;
}

.my-workshop-title {
    font-size: 2em;
    font-weight: 400;
    color: #ce9f9f; /* Color rosado/púrpura claro del título */
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.my-workshop-content {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    text-align: left;
}

.my-workshop-image {
    flex: 1; 
    max-width: 50%;
    /* Asegura que la imagen sea la mitad en escritorio */
}

.workshop-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.my-workshop-text {
    flex: 1; /* El texto ocupa el espacio restante */
}

.my-workshop-text p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #5aa6bf; /* Color verde azulado/turquesa para el texto principal */
}

.techniques-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.techniques-list li {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 5px;
    color: #5aa6bf; /* Color verde azulado/turquesa */
}

@media (max-width: 800px) {
    .my-workshop-content {
        flex-direction: column; 
        align-items: center;
    }
    
    .my-workshop-image {
        max-width: 100%; /* Imagen ocupa todo el ancho */
        margin-bottom: 20px;
    }

    .my-workshop-text {
        text-align: center;
    }
    
    .techniques-list {
        text-align: left;
        padding-left: 20px;
    }
}


                    /* PAGINA 333 */
                    /* Sección: MIS COMIENZOS */
                    /* PAGINA 333 */

.my-beginnings-section {
    padding: 60px 5%;
    background-color: white; /* Fondo blanco */
    color: #333;
    text-align: center;
}

.my-beginnings-container {
    max-width: 1200px;
    margin: 0 auto;
}

.my-beginnings-title {
    font-size: 2em;
    font-weight: 400;
    color: #ce9f9f; /* Color rosado/púrpura claro del título */
    text-align: left; /* Alineado a la izquierda */
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.my-beginnings-content {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    text-align: left;
    flex-direction: row-reverse; /* Invierte el orden: Imagen a la derecha, Texto a la izquierda */
}

.my-beginnings-image {
    flex: 1; 
    max-width: 40%;
    /* La imagen es un poco más ancha que la del taller */
}

.beginnings-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.my-beginnings-text {
    flex: 2; /* El texto ocupa la mayor parte del espacio */
}

.my-beginnings-text p {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 10px;
    color: #5aa6bf; /* Color verde azulado/turquesa para el texto principal */
}

@media (max-width: 800px) {
    .my-beginnings-content {
        flex-direction: column; /* Apila verticalmente */
        align-items: center;
    }
    
    .my-beginnings-title {
        text-align: center; /* Centra el título en móvil */
    }

    .my-beginnings-image {
        max-width: 80%; /* Imagen más grande en móvil */
        margin-bottom: 20px;
        order: 1;
    }

    .my-beginnings-text {
        text-align: left;
        order: 2;
    }
}

                /*PAGINA 44444444444*/

                            /*CONTACTOS*/

                 /*PAGINA  4444444*/

.consultation-form-section {
    padding: 60px 5%;
    display: flex;
    justify-content: center;
}

.form-container {
    max-width: 700px; /* Limita el ancho del formulario */
    width: 100%;
    padding: 30px;
}

.form-title {
    font-size: 2.5em;
    font-weight: bold;
    color: #800000; 
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 2px;
}

.consultation-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre las filas del formulario */
}

/* Grupos para dos campos en línea */
.form-group-inline {
    display: flex;
    gap: 20px;
    width: 100%;
}

.input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Grupos para campos de ancho completo (Teléfono y Comentario) */
.form-group-full {
    width: 100%;
}

.consultation-form label {
    font-size: 0.85em;
    color: #555; /* Color del texto de la etiqueta */
    font-weight: 600;
    margin-bottom: 5px;
    text-align: left;
}

.consultation-form input[type="text"],
.consultation-form input[type="email"],
.consultation-form input[type="tel"],
.consultation-form textarea
 {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: none;
    border: 2px solid #91a6c9; /* Borde azul claro */
    border-radius: 5px;
    background-color: transparent;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.consultation-form input:focus,
.consultation-form textarea:focus {
    outline: none;
    border-color: #800000; /* Borde más oscuro al hacer clik en el formulario */
}

.consultation-form textarea {
    resize: vertical; /* Permite redimensionar solo verticalmente */
    min-height: 150px;
}

/* Estilo del botón ENVIAR */
.submit-btn {
    display: block;
    width: 180px;
    margin: 30px 0 0 auto; /* Márgen a la izquierda automático para empujarlo a la derecha */
    background-color: #800000; /* Color azul/gris del botón */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.submit-btn:hover {
    background-color: #91a6c9;
}

@media (max-width: 600px) {
    .form-title {
        font-size: 2em;
    }

    .form-group-inline {
        flex-direction: column; /* Apila los campos Nombre y Correo */
        gap: 0;
    }

    .input-wrapper {
        margin-bottom: 20px;
    }
    
    .submit-btn {
        width: 100%; /* El botón ocupa todo el ancho */
        margin: 20px 0 0 0; 
    }
}

                    /*ffffffffffffffffffffffffffffffffffffff*/
                     
                     /*FORMULARIO PARA CADA PRODUCTO */

                     /*FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF*/

.product-detail-section {
    padding: 40px 5%;
    background-color: white;
}

.product-detail-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* --- Columna 1: Galería de Imágenes --- */
.product-gallery {
    flex: 1;
    max-width: 50%;
    text-align: center;
}

.main-image {
    margin-bottom: 10px;
}

.main-product-img {
    width: 100%;
    height: auto;
    display: block;
}



/* --- Columna 2: Información y Opciones --- */
.product-options {
    flex: 1;
    max-width: 50%;
    text-align: left;
    padding-top: 20px;
}

.product-title-detail {
    font-size: 1.8em;
    font-weight: 500;
    color: #91a6c9; 
    line-height: 1.3;
    margin-bottom: 20px;
}

.product-price-detail {
    font-size: 2em;
    font-weight: 700;
    color: #333; /* Precio en negro */
    margin-bottom: 30px;
}

/* --- Formulario de Personalización --- */
.personalization-form-detail {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group-detail {
    display: flex;
    flex-direction: column;
}

.input-group-detail label {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px;
}

.input-group-detail input[type="text"] {
    padding: 10px;
    border: 1px solid #ce9f9f; /* Borde del campo de personalización rosado/púrpura */
    font-size: 1em;
}

.char-count {
    align-self: flex-end;
    font-size: 0.8em;
    color: #888;
    margin-top: 5px;
}

/* --- Cantidad Selector --- */
.quantity-group {
    display: flex;
    flex-direction: column;
    width: 150px; /* Ancho fijo para el selector de cantidad */
}

.quantity-selector {
    display: flex;
    border: 1px solid #ce9f9f;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}

.quantity-selector input[type="number"] {
    width: 40px;
    text-align: center;
    border: none;
    padding: 5px 0;
    font-size: 1em;
    -moz-appearance: textfield; /* Oculta flechas en Firefox */
}

.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Oculta flechas en Chrome/Safari */
    margin: 0;
}

.qty-btn {
    background-color: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1.2em;
    color: #555;
    transition: background-color 0.2s;
}

.qty-btn:hover {
    background-color: #f0f0f0;
}

/* --- Botones de Acción --- */
.add-to-cart-btn,
.buy-now-btn {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: opacity 0.2s;
}

.add-to-cart-btn {
    background-color: #800000; /* Verde claro/menta para Añadir al Carrito */
    color: white;
}

.buy-now-btn {
    background-color: #91a6c9; /* azul para Comprar Ahora */
    color: white;
}

.add-to-cart-btn:hover,
.buy-now-btn:hover {
    opacity: 0.9;
}

@media (max-width: 900px) {
    .product-detail-container {
        flex-direction: column;
        align-items: center;
    }

    .product-gallery,
    .product-options {
        max-width: 100%;
    }

    .product-options {
        text-align: center;
    }
    
    .product-title-detail {
        text-align: center;
    }

    .quantity-group {
        width: 100%;
        max-width: 250px;
        margin: 0 auto; /* Centra el selector de cantidad */
    }
}