@font-face {
    font-family: lato1;
    src: url(fonts/lato1.ttf);
}
@font-face {
    font-family: rubik1;
    src: url(fonts/rubik1.ttf);
}



.pagarContainer {
            max-width: 500px;
            background: #fff;
            margin: 40px auto;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #6f3c2b;
        }
        label {
            font-weight: bold;
            display: block;
            margin-top: 15px;
            color: #333;
        }
        select, input {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border-radius: 8px;
            border: 1px solid #ccc;
        }
        .payment-option {
            margin-top: 20px;
        }
        .codigo {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            background: #eee;
            padding: 10px;
            border-radius: 10px;
            letter-spacing: 2px;
        }
        .btn-pagar {
            width: 100%;
            margin-top: 25px;
            background: #a0522d;
            color: #fff;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-pagar:hover {
            background: #7a3d22;
        }
        .resumen {
            background: #f1e7df;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .resumen h3 { margin: 0 0 10px; }
        .item { display: flex; justify-content: space-between; margin: 5px 0; }
        #loader {
            display: none;
            text-align: center;
            margin-top: 20px;
        }
        #loader img {
            width: 80px;
        }
        #exito {
            display: none;
            text-align: center;
            font-size: 20px;
            color: green;
            margin-top: 20px;
        }

:root {
    /* Colores base del proyecto */
    --color-fondo-arena: #EBE4D5;    /* Arena Dorada (uso principal en body) */
    --color-fondo: #f5f5f5;           /* Blanco crema global (respaldo) */
    --color-texto-oscuro: #4A433E;   /* Café Oscuro (texto principal) */
    --color-principal-oscuro: #4A433E; /* Color principal (fallback igual al texto) */

    /* Acentos y variantes */
    --color-acento-ladrillo: #2C3639; /* Ladrillo quemado */
    --color-acento-fuerte: #bfbdab;   /* Acento fuerte (terracota / neutral) */
    --color-acento-oro: #a87932;     /* Oro viejo / bronce */
    --color-beige-claro: #D5CDBC;    /* Beige claro */
    --color-borde-suave: #e0e0e0;    /* Bordes sutiles */
    --color-exito-stock: #4CAF50;    /* Verde de estado / éxito */

    /* Tipografías (valores por defecto; puedes ajustarlos) */
    --fuente-serif: 'rubik1';
    --fuente-sans: Arial, Helvetica, sans-serif;
    --font-sans: 'Inter', sans-serif; /* usado en algunas reglas */
    --font-principal: 'Cormorant Garamond', serif;

	/* Otras variables */
	--header-height: 170px; /* ajustar si cambia el diseño del header (logo 150 + padding) */
}

/* estilos globales */
body {
    background-color: var(--color-fondo-arena);
    font-family: 'rubik1', Arial, Helvetica, sans-serif; /* cambio hecho: rubik1 */
    color: var(--color-texto-oscuro);
    margin: 0;
    padding: 0;
    padding-top: var(--header-height); /* Reservar espacio para header fixed */
}

/* header: barra superior fija y responsive */
/* --- ESTILOS DEL HEADER (BARRA DE NAVEGACIÓN SUPERIOR) --- */

.header-principal {
    /* *CLAVE 1: TRUCO PARA DOS FILAS SIN CONTENEDOR:* Permite múltiples líneas */
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: center; 
    
    /* Colores y Posición */
    background-color: #984949;
    color: #ffffff;
    position: fixed; /* cambiado a fixed para control por JS */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
    
    height: var(--header-height);
    padding: 10px 40px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
    overflow: hidden;
}

/* Ocultar header (se aplica cuando scrolleas hacia abajo) */
.header-principal.header-hidden {
    transform: translateY(-110%);
}

/* Ajustes para logo dentro del header fijo */
.logo {
    order: 1;
    flex-basis: auto;
    margin-right: 30px;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    height: 100%;
}
.logo a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4em;
    font-weight: 700;
    text-decoration: none;
    color: #ffffff;
}

/* Mantener el tamaño del logo en 150x150 como se pidió */
.logo-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    display: inline-block;
}

/* Buscador (2do elemento) */
.buscador-contenedor {
    order: 2; /* Posición 2 */
    flex-grow: 1; /* Crece para ocupar el espacio central */
    max-width: 700px; 
    height: 40px;
    margin: 0 30px; 
    padding-bottom: 10px; /* Alineación vertical */

    border: 2px solid var(--color-beige-claro);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    color: #D5CDBC;
}

/* Opciones/Iconos (3er elemento) */
.opcionesprin {
    order: 3; /* Posición 3 */
    flex-shrink: 0; 
    padding-bottom: 10px; /* Alineación vertical */

    /* Estilos para que los iconos y texto se apilen */
    display: flex; 
    align-items: center; 
    gap: 25px; 
}

/* *CLAVE 3: FORZAR EL MENÚ A LA SEGUNDA FILA Y OCUPAR EL ANCHO* */
.menu-nav {
    order: 4; /* Posición 4, forzando un salto de línea */
    width: 100%; /* Ocupa el 100% del ancho forzando la segunda fila */
    
    display: flex;
    justify-content: flex-start;
    gap: 30px;

    border-top: 1px solid var(--color-beige-claro); 
    padding: 10px 40px 15px; 
    margin: 0 -40px; /* Compensa el padding del header */
}

/* --- ESTILOS DE COMPONENTES --- */

.buscador-input {
    flex-grow: 1;
    border: none;
    padding: 0 15px;
    font-size: 1em;
    color: var(--color-texto-oscuro);
    background-color: white;
    outline: none;
}

.buscador-btn {
    background-color: #ffffff;
    border: none;
    color: white;
    padding: 0 15px;
    cursor: pointer;
    font-size: 1.2em;
    transition: background-color 0.2s;

}

.buscador-btn:hover {
    background-color: #f7bcbc;
}

.buscador-btn img {
    height: 18px; 
    width: 18px;
    vertical-align: middle;
}

/* Íconos de Utilidad (opcionesprin) */
.opcionesprin a {
    /* Hace que la imagen esté arriba y el texto abajo */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-texto-oscuro);
    font-size: 0.85em;
    transition: color 0.3s;
}

.opcionesprin img {
    width: 24px; 
    height: 24px;
    margin-bottom: 3px;
}
.opcionesprin a:hover {
    color: var(--color-acento-ladrillo);
}


/* Estilo de los Enlaces de Navegación */
.menu-nav a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    padding: 5px 0;
    transition: color 0.3s
    
}

.menu-nav a:hover {
  color: #bfbdab;
  
}

.menu-nav{
    justify-content: center;
}

/* --- Otros Estilos (Banner, Categorías, Footer) --- */

/* ------------------------------
    BANNER PRINCIPAL
/* ------------------------------ */
.banner1 {
    position: relative;
    background-color: #F8F5EF; 
    height: 400px; 
    width: 100%;
    overflow: hidden;
}

/* ------------------------------
    CONTENEDOR GLOBAL DEL CARRUSEL
------------------------------ */
/* Contenedor del carrusel (pista donde se mueven los slides) */
.carrusel1 {
    width: 100%;
    height: 100%;
    display: flex;
   
}

/* Cada slide */
.carruselInicio {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* ------------------------------
    TEXTO Y LINK DEL SLIDE
------------------------------ */
.banner3 {
    font-family: 'Cormorant Garamond', serif; 
    font-size: 3.5em;
    color: #c6beba;
    margin-bottom: 20px;
}

.coleccion {
    display: block;
    margin-top: 25px;
    color: #c8ab96;
    text-decoration: underline;
    font-weight: 600;
    font-size: 1.1em;
}

/* ------------------------------
    FLECHAS DEL CARRUSEL
------------------------------ */
.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: white;
    border: none;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 15;
    font-size: 1.5em;
    line-height: 1;
    padding-bottom: 3px; 
}

.flecha-izq { left: 10px; }
.flecha-der { right: 10px; }

.flecha:hover {
    background-color: #f2f2f2;
}



.categorias1 {
    position: relative; 
    padding: 40px 0;
    margin-top: 30px;
    border-top: 1px solid var(--color-beige-claro); 
    border-bottom: 1px solid var(--color-beige-claro);
}

.titulocategoria {
    font-family: 'Cormorant Garamond', serif; 
    text-align: center;
    margin-bottom: 25px;
    font-size: 2em;
}

.categorias {
    display: flex; 
    overflow-x: scroll; 
    padding: 10px 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.categorias::-webkit-scrollbar { display: none; }

.categoria-item {
    flex-shrink: 0;
    width: 150px;
    text-align: center;
    margin: 0 15px;
    text-decoration: none;
    color: inherit;
}

.dcirculo {
    width: 130px;
    height: 130px;
    border-radius: 50%; 
    overflow: hidden; 
    margin: 0 auto 10px;
    background-color: var(--color-beige-claro); 
    border: 3px solid var(--color-acento-ladrillo); 
}

.dcirculo img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0.8;
}

.categoria-nombre {
    font-size: 1em;
    font-weight: 500;
}

/* --- ESTILOS DEL FOOTER (PIE DE PÁGINA) --- */

.footer-principal {
    background-color: #1C4036; /* actualizado conforme a tu petición */
    color: #F9F7F3;
    padding: 60px 40px;
    margin-top: 50px;
    
    display: flex;
    justify-content: space-between;
    gap: 30px; 
    flex-wrap: wrap; 
}

.footer-columna {
    width: 20%; 
    min-width: 200px;
}

.footer-columna h4, .footer-columna h5 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3em;
    margin-bottom: 20px;
    color: white;
}

.footer-columna p {
    font-size: 0.9em;
    line-height: 1.6;
}

.footer-columna ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-columna li {
    margin-bottom: 10px;
}

.footer-columna a {
    color: #CFCBC5;
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.2s;
}

.footer-columna a:hover {
    color: var(--color-acento-ladrillo);
}

.copyright {
    margin-top: 30px;
    font-size: 0.8em;
    color: #CFCBC5;
}

.social-links a {
    font-weight: 600;
    margin-right: 15px;
    font-size: 1em;
    color: white;
}

.newsletter-texto {
    margin-top: 25px;
    margin-bottom: 10px;
}

.newsletter-form {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
}

.newsletter-form input {
    flex-grow: 1;
    border: none;
    padding: 10px 15px;
    outline: none;
    font-size: 0.9em;
}

.newsletter-form button {
    background-color: var(--color-acento-ladrillo);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
}
/* ======================================================= */
/* --- MEDIA QUERY: TABLETS (900px y Menos) --- */
/* ======================================================= */
@media (max-width: 900px) {

    /* HEADER */
    .header-principal {
        padding: 15px 20px; /* Reduce el padding lateral */
        height: auto;
        flex-wrap: wrap; /* Permite que el contenido se envuelva si no cabe */
    }

    /* Ocultar los enlaces de navegación para dejar más espacio al buscador */
    .nav-links {
        display: none; 
    }

    /* Aumentar el espacio del buscador si los links se ocultan */
    .buscador-contenedor {
        order: 3; /* Mueve el buscador a la segunda fila */
        width: 100%;
        max-width: none;
        margin-top: 10px;
    }
    
    .logo {
        margin-right: 15px;
    }


    /* BANNER PRINCIPAL */
    .banner-titulo {
        font-size: 2.5em;
    }
    .flecha {
        display: none; /* Ocultar las flechas del banner en tablets/móviles (la gente prefiere deslizar) */
    }


    /* FOOTER */
    .footer-principal {
        /* Permite que el footer se apile en dos columnas */
        justify-content: space-around;
    }
    .footer-columna {
        width: auto; 
        margin-bottom: 20px;
    }

    /* CARRITO Y PRODUCTO (Los diseños de doble columna se apilan) */
    .carrito-layout, .detalle-producto-layout {
        flex-direction: column; /* Cambia a una columna vertical */
    }
    .carrito-productos, .carrito-resumen, .producto-galeria, .producto-info {
        width: 100%; /* Ocupan todo el ancho disponible */
    }
}

@media (max-width: 480px) {
    :root { --header-height: 100px; }
    .header-principal {
        padding: 10px 12px;
        height: var(--header-height);
        align-items: flex-start;
    }
    .logo-img {
        width: 80px;
        height: 80px;
    }


    .buscador-contenedor {
        order: 3;
        width: 100%;
        margin: 8px 0;
        max-width: none;
        padding: 0 8px;
        background: transparent;
        align-items: center;
        z-index: 1002;
    }


    .opcionesprin {
        gap: 12px;
        font-size: 0.75em;
    }

    /* Collapse the main menu into a centered row with smaller gaps */
    .menu-nav {
        order: 4;
        padding: 8px 12px;
        gap: 12px;
        justify-content: center;
        font-size: 0.95em;
    }

    /* Make the search input clearly visible and usable on phones */
    .buscador-contenedor {
        display: flex;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid var(--color-borde-suave);
        padding: 6px 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    .buscador-input {
        flex: 1;
        padding: 8px 10px;
        font-size: 15px;
        background: transparent;
        color: var(--color-texto-oscuro);
    }

    .buscador-btn {
        width: 44px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 0;
    }

    .buscador-btn img { width: 20px; height: 20px; }

    /* Ensure header expands to fit search without clipping */
    .header-principal {
        height: auto !important;
        padding-bottom: 12px;
        align-items: flex-start;
    }

    /* keep body padding to avoid content under fixed header */
    body { padding-top: calc(var(--header-height) + 10px); }

    /* Product cards: smaller images and tighter padding */
    .producto-card img, .producto-card img {
        height: 160px;
    }
    .producto-card-info {
        padding: 10px 12px 8px;
    }

    /* Reduce banner height on small screens */
    .banner1, .banner {
        height: 240px;
    }
    .banner-titulo, .banner3 {
        font-size: 1.6em;
    }

    /* Footer spacing */
    .footer-principal {
        padding: 30px 16px;
    }

    /* Forms and cards full-width */
    .form-card, .preview-card, .registro {
        width: 100%;
        max-width: 420px;
        margin: 12px auto;
        padding: 18px;
    }

    /* Ensure grids collapse to single column where necessary */
    .productos-grid {
        grid-template-columns: 1fr !important;
        gap: 18px;
        padding: 18px 12px;
    }

    /* Arrange logo + search on a single row and make search compact */
    .header-principal {
        flex-wrap: wrap;
        align-items: center;
    }

    .logo {
        order: 1;
        flex: 0 0 auto;
        margin-right: 8px;
        display: flex;
        align-items: center;
        height: auto;
    }

    .logo-img {
        width: 56px;
        height: 56px;
    }

    .buscador-contenedor {
        order: 2;
        flex: 1 1 180px; /* grow but prefer compact width */
        max-width: 220px;
        width: auto;
        margin: 0 6px 0 0;
        padding: 6px 8px;
        align-items: center;
    }

    .buscador-input { font-size: 14px; padding: 6px 8px; }

    .opcionesprin {
        order: 3;
        margin-left: auto;
    }

    .menu-nav {
        order: 4;
        width: 100%;
        margin-top: 8px;
        padding: 6px 12px;
    }
}

/* Estilos del Menú Principal: Inicio, Colecciones, etc. */
.menu-nav {
    display: flex;
    gap: 25px; /* Espacio entre los enlaces */
    margin-right: auto; /* Mueve el menú a la izquierda del header */
    padding-left: 5%; /* Pequeño espacio para separarlo del logo */
}

.menu-nav a {
    text-decoration: none;
    color: #ffffff;
    font-size: 1em;
    font-family: var(--font-sans);
    font-weight: 500;
    padding: 5px 0;
    position: relative;
}

/* Efecto Hover elegante para los enlaces */
.menu-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--color-acento-fuerte); /* Terracota */
    transition: width 0.3s ease-in-out;
}

.menu-nav a:hover::after {
    width: 100%;
}

/* Contenedor de Opciones: Mi Cuenta, Favoritos, Carrito */
.opcionesprin {
    display: flex;
    gap: 25px; /* Espacio entre los grupos de iconos */
    align-items: center;
}

.opcionesprin a {
    display: flex;
    flex-direction: column; /* Icono arriba, texto abajo */
    align-items: center;
    text-decoration: none;
    font-size: 0.8em;
    color: #ffffff;
    font-weight: 500;
    transition: color 0.2s;
}

/* Estilo al pasar el mouse por las opciones */
.opcionesprin a:hover {
    color: var(--color-acento-fuerte); /* Color Terracota al pasar el mouse */
}

/* Estilos de la imagen del icono */
.opcionesprin img {
    width: 24px; /* Tamaño estándar del icono */
    height: 24px;
    margin-bottom: 3px; /* Espacio entre icono y texto */
    /* Nota: Si los iconos son SVG, podrías usar filter: para cambiar su color */
}

/* Estilo del contador del carrito (si lo agregas al HTML) */
.carrito {
    position: relative;
    /* Necesitarás una clase 'cart-badge' o similar para el contador */
}

/* EJEMPLO: Si usas un badge, asígnale el color fuerte */
.cart-badge {
    position: absolute;
    top: 0px; 
    right: 0px; 
    background-color: var(--color-acento-fuerte); /* Terracota para el badge */
    color: white;
    border-radius: 50%;
    padding: 2px 5px;
    font-size: 0.7em;
    font-weight: 700;
}





/*NUEVO CSS*/







.banner {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Evita que algo sobresalga */
}

/* Imagen de fondo */
.banner-imagen {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: transform 0.5s ease-in-out;
}



/* Contenido del banner */
.banner-contenido {
    position: relative;
    z-index: 2; /* Encima de la imagen */
    text-align: center;
    background: rgba(255, 255, 255, 0.6); /* Fondo semitransparente suave */
    padding: 20px 40px;
    border-radius: 12px;
    backdrop-filter: blur(6px);
}

/* Título */
.banner-titulo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4em;
    color: #523a2e;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin: 0;
}

/* ========================================= */
/* === 1. LAYOUT DEL GRID DE PRODUCTOS === */
/* ========================================= */

.contenedor-tienda {
    max-width: 1250px; /* Ancho máximo para el contenido de la tienda */
    margin: 30px auto;
    padding: 0 20px;
}

.productos-grid {
    display: grid;
    /* Layout responsivo: Mínimo 280px por columna */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px; /* Espacio entre las tarjetas */
    padding: 30px 0;
}

/* ========================================= */
/* === 2. ESTILO DE LA TARJETA COMPLETA === */
/* ========================================= */

.producto-card {
    /* Estructura Limpia */
    display: flex; 
    flex-direction: column;
    text-decoration: none;
    color: var(--color-principal-oscuro); 
    background-color: #FFFFFF;
    border: 1px solid #EFEFEF; /* Borde muy sutil (limpieza) */
    border-radius: 10px; 
    overflow: hidden; 
    padding-bottom: 15px; 
    
    /* Efecto Lujoso */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* Sombra muy ligera */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.producto-card:hover {
    /* Efecto "WOW" al pasar el ratón */
    transform: translateY(-5px); /* Se levanta */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Sombra intensa al flotar */
}

.producto-card .precio{
    color: #2E3A46
}
/* ========================================= */
/* === 3. IMAGEN Y TEXTO === */
/* ========================================= */

.producto-card img {
    width: 100%;
    height: 250px; 
    object-fit: cover; 
    border-bottom: 1px solid #F7F7F7; /* Separador */
}

.producto-card-info {
    padding: 15px 20px 0; 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.producto-card-info h3 {
    /* Título Moderno */
    font-family: 'Montserrat', sans-serif; /* Puedes cambiar por otra sans-serif */
    font-size: 1.1em;
    margin: 5px 0 8px;
    line-height: 1.3;
    color: #3d3c3c;
    font-weight: 600; 
    min-height: 48px; /* Asegura espacio para títulos de 2 líneas */
}


/* ========================================= */
/* === 4. BOTÓN AÑADIR AL CARRITO === */
/* ========================================= */

.btn-agregar-carrito {
    background-color: var(--color-principal-oscuro); /* El color de tu marca */
    color: rgb(129, 120, 106);
    border: none;
    padding: 10px 15px;
    margin-top: auto; /* Lo empuja hacia abajo */
    border-radius: 50px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #e0dbcc;
    
    transition: background-color 0.3s ease, transform 0.1s;
}

.btn-agregar-carrito:hover {
    background-color:#bfbdab;
}

.btn-agregar-carrito:active {
    transform: scale(0.98); /* Efecto de 'clic' */
}

/* --- ESTILOS PARA PRODUCTOS DESTACADOS EN INDEX --- */

.productos-destacados-index {
    padding: 50px 40px;
    background-color: #dcd7c9; 
    margin-top: 40px;
}
.productos-destacados-index .precio{
    color: #2E3A46
}

.titulo-destacados {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-texto-oscuro);
}

.productos-grid {
    /* CLAVE: Define la cuadrícula con 4 columnas que se ajustan */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 30px; 
    max-width: 1200px;
    margin: 0 auto; 
}

/* Agrega todos los estilos para .producto-card, .producto-card img, .btn-agregar-carrito, etc. */
/* (Ver respuesta anterior para el CSS completo de las tarjetas de producto) */




/* VARIABLES GLOBALES: (Definidas arriba) - bloque duplicado eliminado para evitar redefinición accidental */

/* Estilos Generales (Las propiedades de BODY se han quitado aquí) */

/* --- Layout Principal: 2 Columnas (Imagen | Info) --- */
.contenedor-producto {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 60px; 
    max-width: 1400px;
    margin: 80px auto;
    padding: 0 5%;
    font-family: var(--fuente-sans);
    color: var(--color-texto-oscuro);
}

/* --- Responsive para dispositivos móviles --- */
@media (max-width: 900px) {
    .contenedor-producto {
        grid-template-columns: 1fr; 
        margin: 40px auto;
        padding: 0 20px;
    }
}

/* --- Columna 1: Galería de Imágenes (VERTICAL) --- */
.galeria-producto {
    display: flex;
    max-height: 80vh; 
}
.miniaturas-nav {
    display: flex;
    flex-direction: column; /* Miniaturas verticales */
    gap: 15px;
    width: 80px; 
    margin-right: 25px;
}
.miniatura {
    width: 100%;
    height: 80px;
    cursor: pointer;
    border: 1px solid var(--color-borde-suave);
    transition: border-color 0.3s, opacity 0.3s;
    overflow: hidden;
    background-color: white;
    opacity: 0.7;
}
.miniatura:hover, .miniatura.active {
    border-color: var(--color-acento-oro);
    opacity: 1;
}
.miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.imagen-principal-contenedor {
    flex-grow: 1;
    background-color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); 
    display: flex;
    align-items: center;
    justify-content: center;
}
.imagen-principal-contenedor img {
    width: 100%;
    max-width: 480px;
    max-height: 480px;
    height: auto;
    object-fit: contain;
    display: block;
}


.info-compra {
    padding-right: 20px;
    display: flex;
    flex-direction: column; 
}

/* BLOQUE DE COMPRA (STCKY) */
.acciones-compra-contenedor {
    position: sticky; /* HACE QUE SE PEGUE */
    top: 20px; 
    
    border: 1px solid var(--color-borde-suave);
    padding: 25px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 10;
    margin-bottom: 40px; 
}

/*móviles */
@media (max-width: 900px) {
    .acciones-compra-contenedor {
        position: static;
        top: auto;
        margin-bottom: 20px;
    }
}

/* Estilos de Bloques Estáticos */
.info-encabezado {
    margin-bottom: 25px;
}
.descripcion-detalles-contenedor {
    padding-top: 20px;
}

/* Títulos y Marca */
.marca-producto {
    font-family: var(--fuente-sans);
    font-size: 15px;
    letter-spacing: 3px; 
    text-transform: uppercase;
    color: var(--color-acento-oro);
    margin-bottom: 5px;
}
.titulo-producto {
    font-family: var(--fuente-serif); 
    font-size: 48px;
    font-weight: 700;
    color: var(--color-texto-oscuro);
    margin: 0 0 20px 0;
    line-height: 1.1;
}

/* Precio y Rating */
.precio-producto {
    font-family: var(--fuente-serif); 
    font-size: 44px;
    font-weight: 500;
    color: #413b2c;
    margin-bottom: 20px; 
}
.rating-reseñas {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--color-borde-suave);
    padding-bottom: 15px;
}
.rating-estrellas {
    color: var(--color-acento-oro);
    font-size: 22px;
    margin-right: 15px;
    letter-spacing: 3px;
}
.numero-reseñas {
    font-size: 14px;
    color: #777;
    text-transform: uppercase;
}

/* Descripción y Detalles Premium */
.descripcion-producto p, .detalles-premium p {
    line-height: 1.8;
    color: #444;
    margin-bottom: 12px;
}
.detalles-premium {
    margin-top: 20px;
    border-top: 1px solid var(--color-borde-suave);
    padding-top: 15px;
}

/* Stock y Cantidad */
.stock-info {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-acento-oro); 
    margin-bottom: 20px;
}
.cantidad-selector {
    margin-bottom: 30px;
}
.cantidad-selector label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--color-texto-oscuro);
}
.cantidad-selector select {
    padding: 12px 15px;
    border: 1px solid var(--color-borde-suave);
    background-color: white;
    font-size: 16px;
    width: 100%; 
}

/* Botones de Acción de Lujo */
.botones-accion {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .botones-accion {
        flex-direction: column;
    }
}
.btn-lujo {
    font-family: var(--fuente-sans);
    padding: 18px 25px; 
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 0;
}
.btn-adquirir { 
    background-color: var(--color-acento-oro);
    color: white;
    box-shadow: 0 4px 10px rgba(168, 121, 50, 0.4);
}
.btn-adquirir:hover {
    background-color: #92642c;
}
.btn-coleccion { 
    background-color: transparent;
    color: var(--color-texto-oscuro);
    border: 2px solid var(--color-texto-oscuro);
}
.btn-coleccion:hover {
    background-color: var(--color-texto-oscuro);
    color: white;
}

/* Información de Venta */
.info-venta {
    border-top: 1px solid var(--color-borde-suave);
    padding-top: 15px;
}
.info-venta p {
    font-size: 13px; 
    color: #777;
    margin-bottom: 8px;
}
.info-venta strong {
    font-weight: 600;
    color: var(--color-texto-oscuro);
}

/* --- Estilos para el Zoom de la Imagen Principal --- */

/* Contenedor de la imagen principal. Debe ocultar el exceso del zoom. */
.imagen-principal-contenedor {
    /* ... (tus estilos existentes) ... */
    overflow: hidden; /* Oculta la parte de la imagen que se agranda */
    cursor: zoom-in; /* Indica al usuario que puede hacer zoom */
}

/* Imagen principal */
#imagen-principal {
    
    transition: transform 0.2s ease-out; /* Hace la transición de zoom suave */
  
    transform: scale(1); 
    display: block; /* Necesario para transformaciones correctas */
}

.btn-principal {
    background-color: var(--color-acento-fuerte);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.btn-principal:hover {
    background-color: #8a412f; /* Un tono más oscuro */
}


.banner2 {
    text-align: center;
    z-index: 10; 
    padding: 20px; /* Añadir padding para separación */
}

.banner3 {
    font-family: 'Cormorant Garamond', serif; 
    font-size: 3.5em;
    color: white; /* Color de texto predeterminado sobre el overlay */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
    margin-bottom: 20px;
}

.coleccion {
    display: block;
    margin-top: 25px;
    color: white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    text-decoration: underline;
    font-weight: 600;
    font-size: 1.1em;
    transition: color 0.3s;
}
.coleccion:hover {
    color: #FDFDFB;
}

/* Estilos de las flechas de Swiper */
.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 15;
    font-size: 1.5em;
    line-height: 1;
    padding-bottom: 3px; 
    transition: background-color 0.2s;
    display: flex; /* Para centrar el ">" o "<" */
    justify-content: center;
    align-items: center;
    color: var(--color-texto-oscuro);
}
.flecha:hover {
    background-color: white;
}
.flecha-izq { left: 10px; }
.flecha-der { right: 10px; }

/* Sobrescribir estilos de Swiper para que las flechas tengan las clases personalizadas */
.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 15;
    font-size: 1.5em;
    line-height: 1;
    padding-bottom: 3px; 
    transition: background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-texto-oscuro);
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: white;
}
/* Eliminar el default svg de Swiper si usas texto */
.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}
.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }


/* --- CATEGORÍAS (SLIDER HORIZONTAL) --- */
.categorias1 {
    position: relative; 
    padding: 40px 0;
    margin-top: 30px;
    border-top: 1px solid var(--color-beige-claro); 
    border-bottom: 1px solid var(--color-beige-claro);
}

.titulocategoria {
    font-family: 'Cormorant Garamond', serif; 
    text-align: center;
    margin-bottom: 25px;
    font-size: 2em;
    color: var(--color-principal-oscuro);
}

.categorias-slider {
    display: flex;
    overflow-x: scroll; 
    flex-wrap: nowrap; 
    padding: 10px 0;
    margin: 0 40px;
    scroll-snap-type: x mandatory; 
    -ms-overflow-style: none; 
    scrollbar-width: none;
}
.categorias-slider::-webkit-scrollbar {
    display: none;
}

.categoria-item {
    flex-shrink: 0;
    width: 150px;
    text-align: center;
    margin-right: 25px; 
    text-decoration: none;
    color: var(--color-texto-oscuro);
    scroll-snap-align: start;
    transition: transform 0.2s;
}
.categoria-item:hover {
    transform: translateY(-3px);
}

.dcirculo {
    width: 130px;
    height: 130px;
    border-radius: 50%; 
    overflow: hidden; 
    margin: 0 auto 10px;
    background-color: var(--color-beige-claro); 
    border: 3px solid var(--color-acento-ladrillo); 
}

.dcirculo img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0.9;
}

.categoria-nombre {
    font-size: 1em;
    font-weight: 500;
}


/* --- LISTADO DE PRODUCTOS (listado.html) --- */
.contenedor-listado {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
}
.contenedor-listado h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5em;
    color: var(--color-principal-oscuro);
    text-align: center;
    margin-bottom: 40px;
}
.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}
.producto-card {
    background-color: #FAF8F3;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-texto-oscuro);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.producto-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--color-beige-claro);
}
.producto-card-info {
    padding: 15px;
}
.producto-card-info h3 {
    font-family: 'lato1', sans-serif;
    font-size: 1.2em;
    margin: 0 0 10px;
    color: var(--color-principal-oscuro);
}
.producto-card-info p.precio {
    font-size: 1.1em;
    font-weight: bold;
    color: #2E3A46;
    margin: 0;
}


/* --- DETALLES DE PRODUCTO (producto.html) --- */
.contenedor-producto-detalles {
    max-width: 1000px;
    margin: 50px auto;
    padding: 30px;
    background-color: #FAF8F3;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.producto-imagen {
    flex: 1;
    min-width: 300px;
}
.producto-imagen img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.producto-info {
    flex: 1.5;
    min-width: 350px;
}
.producto-info h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8em;
    color: var(--color-principal-oscuro);
    margin-top: 0;
    margin-bottom: 15px;
}
.producto-info .producto-precio {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--color-acento-fuerte);
    margin-bottom: 25px;
}
.producto-info .producto-descripcion {
    font-size: 1.1em;
    line-height: 1.7;
    color: var(--color-texto-oscuro);
    margin-bottom: 30px;
}
.opciones-compra {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}
.opciones-compra label {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--color-principal-oscuro);
}
.opciones-compra input[type="number"] {
    width: 60px;
    padding: 8px;
    border: 1px solid var(--color-beige-claro);
    border-radius: 5px;
    font-size: 1em;
    text-align: center;
}
.opciones-compra .btn-principal {
    margin-left: 10px;
    padding: 10px 25px;
}

/* --- CARRITO DE COMPRAS (carrito.html) --- */
.contenedor-principal-carrito {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1fr; /* Lista de productos y resumen */
    gap: 40px;
}
.productos-en-carrito h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5em;
    color: var(--color-principal-oscuro);
    margin-bottom: 30px;
}
.item-carrito {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-beige-claro);
}
.item-carrito:last-child {
    border-bottom: none;
}
.item-carrito img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}
.item-detalles {
    flex-grow: 1;
}
.item-detalles h3 {
    font-family: 'lato1', sans-serif;
    font-size: 1.2em;
    margin: 0 0 5px;
    color: var(--color-principal-oscuro);
}
.item-detalles p {
    margin: 0;
    font-size: 0.95em;
    color: var(--color-texto-oscuro);
}
.item-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
}
.item-acciones input[type="number"] {
    width: 50px;
    padding: 5px;
    border: 1px solid var(--color-beige-claro);
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em;
}
.item-acciones .btn-accion {
    background: none;
    border: 1px solid var(--color-beige-claro);
    color: var(--color-texto-oscuro);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s, color 0.2s;
}
.item-acciones .btn-accion:hover {
    background-color: var(--color-beige-claro);
}
.item-acciones .btn-eliminar {
    color: #a63232; /* Rojo para eliminar */
    border-color: #a63232;
}
.item-acciones .btn-eliminar:hover {
    background-color: #a63232;
    color: white;
}
.item-precio-total {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color-acento-fuerte);
    margin-left: 20px;
    min-width: 80px; /* Para que los precios se alineen */
    text-align: right;
}

.resumen-compra {
    background-color: #FAF8F3;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: fit-content; /* Para que la altura se ajuste al contenido */
    position: sticky; /* Se mantiene visible al hacer scroll */
    top: 120px; /* Ajustar según la altura de tu header */
}
.resumen-compra h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2em;
    color: var(--color-principal-oscuro);
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}
.resumen-linea {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 1.05em;
    color: var(--color-texto-oscuro);
}
.resumen-linea.total {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--color-principal-oscuro);
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--color-beige-claro);
}
.resumen-compra .btn-principal {
    width: 100%;
    margin-top: 30px;
}


/* --- FOOTER (Básico, puedes expandir el tuyo) --- */
.footer-principal {
    background-color: #1C4036; /* actualizado conforme a tu petición */
    color: #F9F7F3;
    padding: 60px 40px;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    font-family: var(--font-principal);
    text-align: center; /* Centrar el texto en este ejemplo simple */
}
.footer-principal p {
    width: 100%; /* Ocupa todo el ancho */
    margin: 0;
}


/* --- MEDIA QUERY --- */
@media (max-width: 900px) {
    .header-principal {
        padding: 15px 20px 0;
        flex-wrap: wrap;
    }
    .header-top-row {
        margin-bottom: 10px;
    }
    .menu-nav {
        order: 4;
        justify-content: space-around;
        gap: 10px;
    }
    .buscador-contenedor {
        order: 3;
        width: 100%;
        max-width: none;
        margin: 10px 0;
    }
    .logo { margin-right: 15px; }
    .opcionesprin { gap: 15px; }
    
    /* Ocultar flechas del Swiper en móvil para usar el gesto de deslizar */
    .swiper-button-prev, .swiper-button-next { display: none; } 
    .categorias-slider { margin: 0 20px; } /* Reducir margen lateral en móvil */

    /* Listado y Detalles */
    .contenedor-listado, .contenedor-producto-detalles {
        padding: 0 15px;
    }
    .contenedor-producto-detalles {
        flex-direction: column;
    }
    .producto-imagen, .producto-info {
        min-width: unset; /* Eliminar el min-width en móviles */
    }

    /* Carrito */
    .contenedor-principal-carrito {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 30px;
        padding: 0 15px;
    }
    .resumen-compra {
        position: static; /* No sticky en móvil */
    }
    .item-carrito {
        flex-wrap: wrap; /* Envolver ítems del carrito */
        justify-content: center;
        text-align: center;
    }
    .item-acciones {
        width: 100%; /* Ocupar todo el ancho para acciones */
        justify-content: center;
        margin-top: 10px;
    }
    .item-precio-total {
        width: 100%;
        text-align: center;
        margin-left: 0;
        margin-top: 10px;
    }
}

/* --- ESTILO DE NOTIFICACIÓN TOAST (Snackbar) --- */
.toast-notification {
    visibility: hidden; /* Oculto por defecto */
    min-width: 280px;
    background-color: var(--color-principal-oscuro); 
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 16px;
    position: fixed; /* Fijo en la pantalla */
    z-index: 1000;
    left: 50%; /* Centrado horizontalmente */
    transform: translateX(-50%);
    bottom: 30px; /* Abajo de la pantalla */
    font-size: 1.05em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.toast-notification.show {
    visibility: visible;
    /* Animación: se mueve hacia arriba desde un poco más abajo */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animación de entrada */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

/* Animación de salida */
@-webkit-keyframes fadeout {
    from {opacity: 1;} 
    to {opacity: 0;}
}
@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0;}
}

/* --- PRODUCTOS RELACIONADOS / RECOMENDACIONES --- */
.productos-relacionados {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    border-top: 1px solid var(--color-beige-claro);
    padding-top: 40px;
}

.productos-relacionados h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2em;
    color: var(--color-principal-oscuro);
    text-align: center;
    margin-bottom: 30px;
}.buser {
    background-color: #7E8A5E;
}

.user {
    background: #d9e6b6;
    padding: 40px;
}

.cuenta {
    text-align: center;
}

.registro {
  background-color: white;
  width: 320px;
  margin: 40px auto;   
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15); 
}


.registro input {
  width: 100%;
  padding: 10px;
  margin: 8px 0 18px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
  box-sizing: border-box;
}


.bun {
  background-color: #7E8A5E;
  color: white;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}

.bun:hover {
  background-color: #6e7a52;
}


.flechaiz{
 position: relative;
 top: -60px; 
 left: 20px; 
}

.fuser{
    background-color:white;
    padding: 20px;
    margin: 0px;
}

.unon{
     width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgb(73, 126, 73);
  background: #ffffff;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}

.uen{
     width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgb(73, 126, 73);
  background: #ffffff;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}

.uap{
     width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgb(73, 126, 73);
  background: #ffffff;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}

.uemp{
     width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgb(73, 126, 73);
  background: #ffffff;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}

.uem{
     width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgb(73, 126, 73);
  background: #ffffff;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}

.utel{
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgb(73, 126, 73);
  background: #ffffff;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}

.ucont{
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgb(73, 126, 73);
  background: #ffffff;
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}

.bun{
    border-radius: 8px;
    background-color: #c5db87;
}


.ppregun{
    text-align: center;
    color: black;
}

.conte{
text-align: center;
}

.lincrea{
    
    color:#7E8A5E;
}

.ppregunt{
text-align: center;
color: black;
}

.cont{
    text-align: center;

}

.lincre{
    color: #7E8A5E;
}

/* subir productos */
/* subir_producto.css */
* {
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  background: #f5f6fa;
  color: #333;
}

.header {
  background:#e1f1b2;
  padding: 15px 20px;
  text-align: center;
  color: #111;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.contenedor {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 30px;
  gap: 30px;
}

/* Tarjeta del formulario */
.form-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  padding: 25px;
  width: 420px;
}

.form-card h2 {
  text-align: center;
  margin-top: 0;
}

label {
  display: block;
  margin-top: 12px;
  font-weight: 500;
}

input, textarea, select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 5px;
  font-family: inherit;
  font-size: 14px;
}

textarea {
  resize: vertical;
}

.btn-publicar {
  background:#854229;
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  width: 100%;
  transition: background 0.3s;
}

.btn-publicar:hover {
  background: #2968c8;
}

/* Vista previa del producto */
.preview-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  padding: 25px;
  width: 320px;
  text-align: center;
}

.preview-card h2 {
  margin-top: 0;
}

.producto img {
  width: 100%;
  max-width: 250px;
  border-radius: 10px;
  margin-top: 10px;
  object-fit: cover;
}

.producto h3 {
  margin: 10px 0 5px;
}

.producto p {
  font-size: 14px;
  color: #555;
}

.producto span {
  display: block;
  font-weight: bold;
  margin-top: 8px;
  font-size: 16px;
}

.producto small {
  color: #888;
  display: block;
  margin-top: 4px;
}

@media (max-width: 800px) {
  .contenedor {
    flex-direction: column;
    align-items: center;
  }
}



/* Paleta de Colores Luxory Sport (Coherencia con tu tienda) */
:root {
    --color-background-main: #F4F6F9;        /* Fondo muy suave del body */
    --color-text-dark: #2E3A46;             /* Negro/Azul oscuro */
    --color-accent-gold: #413b2c;           /* Goldenrod (Acento de lujo) */
    --color-accent-sport: #108A7C;          
    --color-shadow-medium: rgba(0, 0, 0, 0.15);

}

/* 1. Contenedor Principal de la Calculadora (.container) */
body > .container {
    /* Centrado y Espaciado para estar entre Header y Footer */
    background-color: var(--color-card-bg);
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--color-shadow-medium); /* Sombra elegante */
    padding: 40px;
    width: 90%;
    max-width: 450px; /* Tamaño de tarjeta */
    text-align: center;
    /* CLAVE: Centra horizontalmente y crea espacio vertical */
    margin: 60px auto; 
    transition: transform 0.3s ease-in-out;
}

.container:hover {
    transform: translateY(-5px); /* Efecto sutil 3D */
}

.container h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--color-accent-gold); /* Título en color de acento principal (Lujo) */
}

/* 2. Inputs y Labels */
.input-group {
    text-align: left;
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-dark);
}

.input-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 1rem;
    color: var(--color-text-dark);
    transition: border-color 0.3s ease;
}

.input-group input:focus {
    border-color: var(--color-accent-sport); /* Borde esmeralda al enfocar */
    outline: none;
    box-shadow: 0 0 5px rgba(16, 138, 124, 0.2);
}

/* 3. Botones */
#btn-calcular, #btn-limpiar {
    font-family: inherit; /* Hereda la fuente de tu body */
    padding: 12px 25px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    text-transform: uppercase;
}

#btn-calcular {
    background-color: var(--color-accent-sport); /* Color Deportivo/Esmeralda */
    color: white;
    box-shadow: 0 4px 10px rgba(16, 138, 124, 0.4);
}

#btn-calcular:hover {
    background-color: #0D6F63;
    transform: translateY(-2px);
}

#btn-limpiar {
    background-color: #E0E0E0;
    color: var(--color-texto-oscuro);
}



.valor {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.categoria {
    font-size: 1.2rem;
    font-weight: 600;
}




.contact-page { padding: 24px 16px 60px; }
.contact-container {
    max-width: 1100px;
    margin: 18px auto;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
    padding: 0 20px;
}
.contact-form-card, .contact-info-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.contact-form-card h2 { margin-top: 0; color: var(--color-principal-oscuro); }
.contact-form .lead { margin-bottom: 12px; color: #666; }
.contact-form label { display:block; margin-top:12px; font-weight:600; }
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
    margin-top: 6px;
    font-size: 14px;
    resize: vertical;
}
.contact-form textarea { min-height: 120px; }
.contact-form .btn-publicar {
    margin-top: 16px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 700;
}
.contact-info-card h3 { margin-top: 0; }
.map-placeholder { margin-top: 12px; }
.contact-small-note { text-align: center; margin-top: 14px; color: #666; }

/* Toast override: center small message for contact page */
.toast-notification {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 20px !important;
}

/* Responsive: mobile first adjustments */
@media (max-width: 900px) {
    .contact-container {
        grid-template-columns: 1fr;
        padding: 0 14px;
        gap: 14px;
    }
    .contact-info-card { order: 2; }
    .contact-form-card { order: 1; }
    .contact-form textarea { min-height: 140px; }
}

@media (max-width: 480px) {
    .contact-container { gap: 12px; }
    .contact-form input, .contact-form textarea { font-size: 15px; padding: 12px; }
    .logo-img { width: 110px; height: 110px; }
    .header-principal { padding: 10px 16px; }
}


.valoracion {
    position: relative;
    overflow: hidden;
    display: inline-block;
    direction: rtl; /* Importante para que el hover funcione de derecha a izquierda */
}
.valoracion input { position: absolute; top: -100px; }
.valoracion label {
    float: right;
    color: #c1b8b8;
    font-size: 35px;
    cursor: pointer;
    transition: color 0.2s;
}
.valoracion label:hover,
.valoracion label:hover ~ label,
.valoracion input:checked ~ label {
    color: #ffff00;
    text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
}