/* ==========================================
   BLESS - DESIGN SYSTEM 2026
   ========================================== */

:root {
    /* Paleta Principal */
    --verde-oliva: #7C9070;
    --verde-profundo: #4A5D45;
    --crema-base: #FDFCF9;
    --blanco-puro: #FFFFFF;
    
    /* Tipografía */
    --texto-titulo: #1A1F16;
    --texto-cuerpo: #4A4F45;
    --texto-soft: #7A8075;

    /* Variables de UI */
    --radius-lg: 24px;
    --radius-md: 16px;
    --shadow-soft: 0 8px 30px rgba(26, 31, 22, 0.05);
    --glass: rgba(255, 255, 255, 0.85);
    
    /* Tamaños fluidos (se adaptan a la pantalla) */
    --step-0: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
    --step-2: clamp(1.5rem, 1.35rem + 0.75vw, 2.2rem);
    --step-5: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
}

/* Reset Moderno */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Lato', system-ui, sans-serif;
    background-color: var(--crema-base);
    color: var(--texto-cuerpo);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    color: var(--texto-titulo);
    line-height: 1.2;
}

/* --- HEADER --- */
/* Añade esto a tu styles.css */
.tarjeta-producto img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Garantiza que el espacio se reserve antes de cargar la foto */
    object-fit: cover;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 5%;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(124, 144, 112, 0.1);
}

.logo { height: 60px; transition: transform 0.3s ease; }
.logo:hover { transform: scale(1.05); }

.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
    text-decoration: none;
    color: var(--texto-titulo);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s;
}
.nav-links a:hover { color: var(--verde-oliva); }

/* --- BOTONES --- */
.btn-primary {
    background-color: var(--verde-oliva);
    color: var(--blanco-puro);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 20px rgba(124, 144, 112, 0.2);
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-3px);
    background-color: var(--verde-profundo);
    box-shadow: 0 15px 25px rgba(124, 144, 112, 0.3);
}

.btn-primary:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secundario {
    background-color: transparent;
    color: var(--verde-oliva);
    border: 1px solid var(--verde-oliva);
    padding: 0.8rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-secundario:hover {
    background-color: var(--verde-oliva);
    color: var(--blanco-puro);
}

.btn-carrito {
    background-color: var(--texto-titulo);
    color: var(--blanco-puro);
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s;
}

/* --- HERO SECTION --- */
.hero {
    position: relative; /* Asegura que el canvas se contenga aquí */
    overflow: hidden;
    min-height: 80vh;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 2rem;
    background: linear-gradient(to bottom, rgba(249,248,243,0.5), var(--crema-base)), url('https://naturalmentevivo.com/wp-content/uploads/2024/08/Coleccion-de-jabones-naturales-artesanales-decorados-con-flores-secas.jpg') center/cover;
}

.hero h1 { font-size: var(--step-5); margin-bottom: 1.5rem; }
.hero p { font-size: var(--step-0); max-width: 60ch; margin: 0 auto 2.5rem; color: var(--texto-soft); }
#canvas-esencia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* Permite que el cursor interactúe con el fondo sin bloquear los botones */
}
.hero-content {
    position: relative;
    z-index: 1; /* Mantiene el texto y el botón por encima de la animación */
}
/* --- CATÁLOGO Y FILTROS --- */
.seccion-catalogo { 
    padding: 4rem 5%; 
    text-align: center; 
}

/* Contenedor principal que evita que el menú y submenú choquen */
.contenedor-filtros-completo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 2rem 0 3rem;
}

/* Fila de botones con scroll horizontal táctil para móviles */
.filtros {
    display: flex;
    flex-wrap: nowrap; /* Evita que salten a una segunda línea */
    gap: 1rem;
    justify-content: flex-start; /* Permite que empiecen desde la izquierda */
    padding-bottom: 1rem;
    overflow-x: auto; /* Activa el scroll horizontal */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Scroll suave en móviles */
    scrollbar-width: none; /* Oculta la barra en Firefox */
    margin: 0; /* Reseteamos margen porque ahora manda el contenedor padre */
}

/* Oculta la barra de scroll visualmente en navegadores webkit */
.filtros::-webkit-scrollbar {
    display: none;
}

/* Botón individual del filtro */
.btn-filtro {
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
    flex-shrink: 0; /* Evita que los botones se aplasten cuando la pantalla es pequeña */
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--texto-soft);
    cursor: pointer;
    padding-bottom: 5px;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.btn-filtro.activo, 
.btn-filtro:hover { 
    color: var(--verde-oliva); 
    border-bottom-color: var(--verde-oliva); 
}

/* --- SUBMENÚ DE FILTROS --- */
.sub-filtros {
    padding-top: 1rem;
    border-top: 1px dashed rgba(124, 144, 112, 0.3); /* Línea sutil divisoria */
}

.sub-filtro {
    font-size: 0.9rem; /* Letra un poco más pequeña */
    color: var(--verde-oliva);
}

.sub-filtro.activo, 
.sub-filtro:hover {
    border-bottom: 2px solid var(--verde-oliva);
    color: var(--verde-profundo);
}

/* --- GRID Y TARJETA DE PRODUCTO --- */
.grid-productos {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 3rem; 
    text-align: left;
}

.tarjeta-producto {
    background: var(--blanco-puro); 
    border-radius: var(--radius-md); 
    padding: 1.5rem;
    box-shadow: var(--shadow-soft); 
    border: 1px solid transparent; 
    transition: all 0.3s ease;
}

.tarjeta-producto:hover { 
    border-color: rgba(124, 144, 112, 0.3); 
    transform: translateY(-10px); 
}

.tarjeta-producto img { 
    width: 100%; 
    aspect-ratio: 1 / 1; 
    object-fit: cover; 
    border-radius: 8px; 
    margin-bottom: 1.5rem; 
}
/* --- CREADOR DE JABONES --- */
.seccion-creador { padding: 4rem 5%; }
.creador-container { display: flex; gap: 4rem; max-width: 1200px; margin: 0 auto; }
.pasos-creador { flex: 2; }
.paso { margin-bottom: 3rem; }
.paso h3 { margin-bottom: 1.5rem; font-size: 1.3rem; }

.opciones-grid { display: flex; flex-wrap: wrap; gap: 15px; }
.btn-opcion-creador { flex: 1 1 calc(50% - 15px); padding: 1rem; text-align: center; }
/* Clase dinámica para ingredientes múltiples seleccionados */
.btn-opcion-creador.activo-multi {
    background-color: var(--verde-oliva) !important;
    color: var(--blanco-puro) !important;
    border-color: var(--verde-oliva) !important;
}

/* CORRECCIÓN: Resumen Vivo sin scroll ni altura fija */
.resumen-vivo {
    flex: 1;
    background-color: var(--blanco-puro);
    border: 2px dashed var(--verde-oliva);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    align-self: flex-start; /* Evita que se estire o necesite scroll */
}
.resumen-vivo ul { margin: 1.5rem 0; padding-left: 1rem; line-height: 2; }
.alerta-sinergia {
    background-color: rgba(124, 144, 112, 0.1); border-left: 4px solid var(--verde-oliva);
    padding: 1rem; margin-top: 1rem; font-size: 0.9rem; border-radius: 0 8px 8px 0;
}

/* --- TIPS DE PIEL --- */
.seccion-tips { padding: 5rem 5%; background-color: rgba(124, 144, 112, 0.05); }
.encabezado-tips { text-align: center; margin-bottom: 3rem; }
.grid-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; max-width: 1200px; margin: 0 auto; }
.tarjeta-tip { background: var(--blanco-puro); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: transform 0.3s; }
.tarjeta-tip:hover { transform: translateY(-8px); }
.imagen-tip { height: 220px; position: relative; overflow: hidden; }
.imagen-tip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.tarjeta-tip:hover .imagen-tip img { transform: scale(1.05); }
.etiqueta-categoria { position: absolute; top: 15px; left: 15px; background: var(--blanco-puro); color: var(--verde-oliva); padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
.contenido-tip { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; }
.contenido-tip h3 { margin-bottom: 1rem; }
.contenido-tip p { color: var(--texto-soft); margin-bottom: 1.5rem; flex-grow: 1; }
.enlace-leer-mas { color: var(--verde-oliva); font-weight: bold; text-decoration: none; }

/* --- FOOTER --- */
.footer { background-color: var(--texto-titulo); color: var(--crema-base); padding: 5rem 5% 2rem; }
.footer-container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; }
.footer-logo { height: 70px; margin-bottom: 1.5rem; }
.footer-col h4 { color: var(--blanco-puro); margin-bottom: 1.5rem; position: relative; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.8rem; }
.footer-col a { color: rgba(255,255,255,0.8); text-decoration: none; transition: color 0.3s; }
.footer-col a:hover { color: var(--verde-oliva); }
.metodos-pago { display: flex; gap: 10px; margin-top: 1rem; }
.tag-pago { background: rgba(255,255,255,0.1); padding: 5px 12px; border-radius: 4px; font-size: 0.8rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 4rem; padding-top: 2rem; text-align: center; font-size: 0.9rem; opacity: 0.6; }

/* --- VENTANA MODAL DEL CARRITO --- */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 31, 22, 0.8); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 2000; }
.modal.oculto { display: none; }
.modal-contenido { background: var(--crema-base); width: 90%; max-width: 500px; padding: 2.5rem; border-radius: var(--radius-lg); position: relative; }
.cerrar-modal { position: absolute; top: 20px; right: 25px; font-size: 2rem; cursor: pointer; color: var(--texto-soft); }
.contenedor-items-carrito { max-height: 40vh; overflow-y: auto; margin-bottom: 1.5rem; padding-right: 10px; }
.item-carrito { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(124,144,112,0.2); }
.btn-eliminar { background: none; border: none; color: #c97a7e; cursor: pointer; font-weight: bold; }
.modal-footer { text-align: center; border-top: 2px solid rgba(124,144,112,0.2); padding-top: 1.5rem; }

/* --- ANIMACIONES SCROLL --- */
.oculto-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.visible-scroll { opacity: 1; transform: translateY(0); }
.oculto { display: none !important; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .header { flex-direction: column; padding: 1rem; gap: 1rem; }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
    .btn-carrito { width: 100%; margin-top: 0.5rem; }
    .creador-container { flex-direction: column; }
    .btn-opcion-creador { flex: 1 1 100%; }
    .footer-container { grid-template-columns: 1fr; text-align: center; }
    .metodos-pago { justify-content: center; }
    .resumen-vivo { padding: 1.5rem; }
}