:root {
  /* FONDO BEIGE */
  --color-fondo: #F7F0E6;
  /* Beige Claro / Crema (Lienzo principal) */

  /* GAMA DE CAFÉS (Monocromático) */
  --color-texto: #4A352A;
  /* Café Oscuro Profundo (Texto principal) */
  --color-principal: #8B5E3C;
  /* Marrón Tierra (Botones, títulos) */
  --color-secundario: #C3976C;
  /* Camel Suave (Acentos de borde, líneas) */
  --color-texto-secundario: #7E6D5F;
  /* Taupe / Café-Grisáceo (Texto secundario) */
  --color-footer: #3D2C20;
  /* Marrón Muy Oscuro (Footer, anclaje) */

  /* ACENTO DE CAFÉ (Para iconos) */
  --color-acento: #A1662F;
  /* Marrón Cobre / Coñac (Iconos) */

  /* COMPLEMENTARIO */
  --color-blanco: #FFFFFF;
  /* Blanco puro (Para contrastes) */
}

/* ==============================
   2. ESTILOS GLOBALES / BODY
============================== */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  /* CAMBIO: El fondo de la página ahora es BLANCO */
  background-color: var(--color-blanco);
  color: var(--color-texto);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

/* ==============================
   3. NAVBAR
============================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 25px;
  background-color: var(--color-blanco);
  position: fixed;
  /* 🔹 Fijo en la pantalla */
  top: 0;
  left: 0;
  width: 100%;
  /* 🔹 Que abarque todo el ancho */
  z-index: 1000;
  /* 🔹 Encima de todo */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-container img {
  width: 50px;
  height: auto;
}

.logo-container h2 {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-texto);
  margin: 0;
}



header nav a {
  position: relative;
  /* Necesario para posicionar la línea */
  margin: 0 8px;
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 6px 10px;
  /* Eliminamos border-radius ya que no es un botón de fondo */
  transition: color 0.3s ease;
}

/* Esta es la configuración de la línea (inicialmente invisible/ancho 0) */
header nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  /* Grosor de la línea */
  bottom: 2px;
  /* Posición desde abajo */
  left: 50%;
  /* Para que crezca desde el centro (opcional) */
  background-color: var(--color-acento);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  /* Centrar el punto de origen */
}

/* Efecto Hover */
header nav a:hover,
header nav a:active {
  color: var(--color-acento);
  /* El texto cambia al color acento */
  background-color: transparent;
  /* Nos aseguramos de que no haya fondo */
}

/* Animación de la línea al hacer hover */
header nav a:hover::after,
header nav a:active::after {
  width: 100%;
  /* La línea se expande al 100% del ancho */
}

/* El botón CTA se mantiene igual, solo asegúrate de que no entre en conflicto */
.btn-cta {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.95rem;
}


/* Si quieres que el botón NO tenga la línea de abajo, añade esto: */


/* =========================================
   DISEÑO DEL DROPDOWN CON ANIMACIÓN CASCADA
   ========================================= */
/* 1. El contenedor del botón y el menú */

.dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;

  position: absolute;
  top: 110%;
  right: 0;              /* 🔥 clave */
  left: auto;            /* 🔥 quitamos el centrado */
  transform: translateY(-10px);

  width: 1000px;         /* ajusta si quieres */
  max-width: 95vw;

  padding: 30px;

  background: white;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);

  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 2000;
}


/* ACTIVACIÓN */
.dropdown-content.show {
 opacity: 1;
  visibility: visible;
  transform: translateY(10px);
}


/* COLUMNAS */
.mega-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* TÍTULOS */
.mega-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-acento);
  border-bottom: 1px solid rgba(166, 124, 82, 0.2);
  padding-bottom: 8px;
}

/* LINKS */
.dropdown-content a {
  color: var(--color-texto);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.25s ease;
  position: relative;
}

/* EFECTO MODERNO HOVER */
.dropdown-content a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 70%;
  background: var(--color-acento);
  border-radius: 2px;
  transition: transform 0.25s ease;
}

.dropdown-content a:hover::before {
  transform: translateY(-50%) scaleY(1);
}

.dropdown-content a:hover {
  background: #F7F0E6;
  color: var(--color-acento);
  padding-left: 18px;
}

/* BOTÓN ACTIVO */
.dropbtn.active-color {
  color: var(--color-acento);
}


/* =========================================
   HEADER Y NAV
   ========================================= */

.menu-toggle {
  display: none;
}

.nav-links {
  display: flex;
  gap: 25px;
  align-items: center;

  position: static;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  border: none;
  padding: 0;
}

.nav-links a {
  color: var(--color-texto);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 6px 10px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--color-acento);
}
.btn-volver {
  display: none;
}


/* ==============================
   HERO SECTION (BUSCADOR)
============================== */
/* =========================================
 1. HERO SECTION (FONDO DE BÚSQUEDA)
   ========================================= */
.busqueda_fondo {
  position: relative;
  
  /* CAMBIO 1: Color de fondo más suave (menos pesado visualmente) */
  /* Puedes usar un gris muy claro (#f4f4f4) o un beige suave (#fcfbf9) si vendes pisos */
  background-color: #f4f4f4; 
  
  /* He comentado los degradados para que se vea más limpio. 
     Si quieres activarlos de nuevo, borra los "/*" y "*/
  /*
  background-image: 
    radial-gradient(at 0% 0%, rgba(211, 84, 0, 0.1) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(0, 0, 0, 0.05) 0px, transparent 50%);
  */
    
  /* CAMBIO 2: Altura mucho más pequeña */
  min-height: 160px; /* Antes era 350px */
  
  margin-top: 60px; /* Mantiene el espacio de tu header */
  padding: 0 20px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  /* Sombra interna sutil en el borde superior (opcional) */
  box-shadow: inset 0 10px 30px -10px rgba(0,0,0,0.05);
}

/* =========================================
   2. CONTENEDOR PRINCIPAL (ESTILO CÁPSULA MINIMALISTA)
   ========================================= */
.busqueda_contenedor {
  /* ANCHO: Más corto, centrado y elegante */
  width: 90%; 
  max-width: 600px; /* Reducido de 800px */
  
  /* ALTURA: Compacta */
  height: 50px; 
  
  background: var(--color-blanco);
  /* Bordes totalmente redondos */
  border-radius: 50px; 
  
  /* Padding interno para que los elementos no toquen los bordes */
  padding: 5px; 
  
  /* Sombra suave y difusa (muy elegante) */
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  
  display: flex; 
  align-items: center;
  
  /* Animación */
  transform: translateY(20px);
  opacity: 0;
  animation: subirEntrada 0.6s ease-out forwards;
}

@keyframes subirEntrada {
  to { transform: translateY(0); opacity: 1; }
}

/* =========================================
   3. ESTRUCTURA INTERNA
   ========================================= */
.busqueda_texto {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%; 
  margin: 0;
}

/* =========================================
   2. CONTENEDOR PRINCIPAL (ESTRUCTURA LIMPIA)
   ========================================= */
.busqueda_contenedor {
  width: 90%; 
  max-width: 600px; /* Ancho elegante y corto */
  height: 50px; 
  
  background: var(--color-blanco);
  border-radius: 50px; 
  
  /* IMPORTANTE: Padding en 0 para que las líneas divisorias toquen los bordes */
  padding: 0; 
  overflow: hidden; /* Asegura que nada se salga de las curvas */
  
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra suave */
  
  display: flex; 
  align-items: center;
  
  /* Animación de entrada */
  transform: translateY(20px);
  opacity: 0;
  animation: subirEntrada 0.6s ease-out forwards;
}

/* =========================================
   ELEMENTOS INTERNOS
   ========================================= */

/* A. BOTÓN FILTRO (IZQUIERDA) */
#filtro {
  height: 100%; 
  width: 60px; /* Espacio cómodo para el icono */
  
  background: transparent;
  border: none;
  
  /* LÍNEA DIVISORIA 1: Separa el filtro del input */
  border-right: 1px solid #ececec; 
  
  cursor: pointer;
  color: #888; 
  
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s;
  
  /* Ajuste para compensar visualmente la curva del borde izquierdo */
  padding-left: 8px; 
}

#filtro:hover {
  background-color: #fafafa;
  color: var(--color-principal);
}

/* B. INPUT (CENTRO) */
.busqueda_input {
  flex: 1; 
  height: 100%; 
  background: transparent;
  border: none;
  outline: none;
  
  padding: 0 20px; 
  font-size: 0.95rem; 
  color: #444; 
  font-weight: 400;
}

.busqueda_input::placeholder {
  color: #aaa;
  font-weight: 300;
}

/* C. BOTÓN BUSCAR (DERECHA - LUPA COLOR CAFÉ) */
.busqueda_boton {
  width: 60px; /* Mismo ancho que el filtro para simetría */
  height: 100%;
  
  /* FONDO TRANSPARENTE (mismo que la barra) */
  background-color: transparent; 
  
  /* ICONO COLOR CAFÉ (Toma tu variable principal) */
  color: var(--color-principal); 
  
  border: none;
  
  /* LÍNEA DIVISORIA 2: Separa el input de la lupa */
  border-left: 1px solid #ececec;
  
  cursor: pointer;
  transition: background-color 0.2s ease;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Ajuste para compensar visualmente la curva del borde derecho */
  padding-right: 8px;
}

.busqueda_boton svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5; /* Hace el icono un poquito más gordito/visible */
}

.busqueda_boton:hover {
  background-color: #fafafa; /* Un gris muy sutil al pasar el mouse */
}
/* =========================================
   RESPONSIVE (MÓVIL - ESTILO APP)
   ========================================= */
@media (max-width: 768px) {
  
  /* 1. FONDO: Más bajito para no ocupar toda la pantalla del cel */
  .busqueda_fondo {
     min-height: 120px; 
     padding: 0 15px; /* Un poco de margen a los lados */
  }

  /* 2. CONTENEDOR: Mantenemos la cápsula horizontal */
  .busqueda_contenedor {
     width: 100%; /* Ocupa el ancho disponible */
     height: 50px; /* Buena altura para dedos (touch friendly) */
     
     /* IMPORTANTE: No apilamos (column), mantenemos fila (row) */
     flex-direction: row; 
     padding: 0; 
     border-radius: 50px;
     overflow: hidden;
  }

  .busqueda_texto {
     flex-direction: row; /* Aseguramos que sigan alineados */
     gap: 0;
     width: 100%;
  }

  /* 3. ELEMENTOS INTERNOS: Ajuste de espacios */

  /* Filtro: Un poco más compacto */
  #filtro {
     width: 45px; /* Reducimos ancho */
     height: 100%;
     border-right: 1px solid #ececec; /* Mantenemos la división elegante */
     border-bottom: none; /* Quitamos borde abajo del código viejo */
     padding: 0; /* Centrado total */
  }

  /* Input: El protagonista */
  .busqueda_input {
     flex: 1; /* Que ocupe todo el espacio sobrante */
     height: 100%;
     font-size: 16px; /* 16px evita que el iPhone haga zoom al escribir */
     padding: 0 10px;
     
     /* Quitamos estilos "viejos" si los hubiera */
     background-color: transparent; 
     border-radius: 0;
     text-align: left; 
  }

  /* Botón Buscar: Compacto y limpio */
  .busqueda_boton {
     width: 45px; /* Reducimos ancho */
     height: 100%;
     border-left: 1px solid #ececec; /* División elegante */
     border-radius: 0;
     
     /* Mantenemos estilo transparente y café */
     background-color: transparent;
     color: var(--color-principal);
  }
}
/* ==============================
   MODAL DE FILTROS (PANEL LATERAL DESLIZANTE)
============================== */
.modal {
    display: none; /* Se activa con JS */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    /* Alineación: Todo a la izquierda en vez del centro */
     /* Necesario para alinear el hijo */
    justify-content: flex-start; 
    align-items: stretch; /* Ocupar toda la altura */
    
    background-color: rgba(61, 44, 32, 0.4); /* Fondo un poco más sutil */
    backdrop-filter: blur(5px);
    
    /* Animación del fondo (fade in) */
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* EL PANEL BLANCO (SIDEBAR) */
.modal_contenido {
    background-color: var(--color-blanco);
    
    /* TAMAÑO Y POSICIÓN */
    width: 85%;
    max-width: 400px; /* Un poco más angosto para elegancia */
    height: 100%;     /* Altura completa */
    margin: 0;        /* Sin margenes flotantes */
    padding: 40px 30px;
    
    /* ESTÉTICA */
    /* Solo redondeamos los bordes derechos */
    border-radius: 0 25px 25px 0; 
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
    
    /* PARA QUE LOS BOTONES QUEDEN ABAJO SIEMPRE */
    display: flex;
    flex-direction: column; 
    
    /* ANIMACIÓN DE ENTRADA (DESLIZAR DESDE IZQUIERDA) */
    transform: translateX(-100%);
    animation: deslizarIzquierda 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Animación suave estilo iOS/Android */
@keyframes deslizarIzquierda {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* BOTÓN CERRAR (X) */
.cerrar {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 1.5rem;
    color: #bbb;
    cursor: pointer;
    transition: 0.3s;
    
    /* Círculo suave al hover */
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.cerrar:hover {
    background-color: #f5f5f5;
    color: var(--color-principal);
}

/* TÍTULO DEL MODAL (Ajuste visual) */
.modal_contenido h3 {
    font-size: 1.5rem;
    color: var(--color-principal);
    margin-bottom: 30px;
    font-weight: 700;
    /* Aseguramos la fuente */
    font-family: inherit; 
}

/* LISTA DE FILTROS */
.busqueda_filtros {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 10px;
    
    /* Si hay muchos filtros, esto permite scroll solo en los filtros */
    overflow-y: auto; 
    flex: 1; /* Ocupa el espacio disponible */
    padding-right: 5px; /* Espacio para scrollbar si aparece */
}

/* LABELS */
.busqueda_filtros label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px; /* Más elegante */
    font-weight: 600;
    color: #999; /* Color más suave que el principal */
    margin-bottom: 8px;
    font-family: inherit;
}

/* SELECTS (INPUTS) */
.filtro_select {
    width: 100%;
    padding: 14px 15px;
    
    /* IMPORTANTE: Heredar la fuente de tu sitio */
    font-family: inherit; 
    font-size: 0.95rem;
    color: #333;
    
    background-color: #FAFAFA;
    border: 1px solid #eee; /* Borde más sutil */
    border-radius: 12px;
    cursor: pointer;
    
    outline: none;
    transition: all 0.2s;
    
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B5E3C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 14px;
}

.filtro_select:hover, .filtro_select:focus {
    background-color: #fff;
    border-color: var(--color-principal);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* BOTONES DE ACCIÓN (Pegados al fondo) */
.acciones_modal {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.acciones_modal button {
    flex: 1;
    padding: 14px;
    border-radius: 50px; /* Botones cápsula más modernos */
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: transform 0.2s;
    font-family: inherit; /* Hereda fuente */
}

.acciones_modal button:active {
    transform: scale(0.98);
}

#limpiarFiltros {
    background: #f5f5f5;
    color: #666;
}
#limpiarFiltros:hover {
    background: #e0e0e0;
}

#cancelarFiltros { /* Este sería "Aplicar" o "Cerrar" */
    background: var(--color-principal);
    color: #fff;
    box-shadow: 0 5px 15px rgba(61, 44, 32, 0.3);
}
#cancelarFiltros:hover {
    background: var(--color-acento); /* Si tienes esta variable, si no usa un color similar */
    opacity: 0.9;
}

/* =========================
   MODAL MÁS ANGOSTO EN MÓVIL
========================= */
@media (max-width: 768px) {

  .modal_contenido {
    width: 65%;       /* 🔥 Antes era 85% */
    max-width: 280px; /* Más compacto */
  }

}
/* ==============================
   GRID DE PRODUCTOS (4 COLUMNAS)
============================== */
.productos_contenedor {
    display: flex;
    flex-direction: column; /* <--- ESTO ES LA CLAVE: apila los elementos verticalmente */
    align-items: center;
    justify-content: center;
    padding: 60px 30px; /* Espacio arriba por el buscador */
    background-color: var(--color-fondo);
}

.productos {
    display: grid;
    /* 4 columnas equitativas que ocupan todo el ancho */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    width: 100%;
    max-width: 1600px;
}

/* TARJETA DE PRODUCTO MAESTRA */
.tarjeta_producto {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-blanco);
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid rgba(0,0,0,0.02);
}

.tarjeta_producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Imagen en tarjeta */
.producto_imagen {
    width: 100%;
    height: 220px; /* Altura fija */
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.producto_imagen .imagenPiso {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tarjeta_producto:hover .imagenPiso {
    transform: scale(1.1); /* Zoom */
}

.logo_marca {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 5;
}

/* Textos Tarjeta */
.tipo_piso {
    margin-top: 15px;
    font-size: 0.75rem;
    color: var(--color-secundario);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    text-align: center;
}

.nombre_producto {
    margin: 5px 0 10px 0;
    padding: 0 15px;
    font-size: 1.1rem;
    color: var(--color-texto);
    text-align: center;
    font-weight: 600;
    line-height: 1.3;
}

/* Botón Tarjeta (Siempre al fondo) */
.producto_informacion {
    width: 100%;
    padding: 0 15px 20px 15px;
    margin-top: auto; 
    display: flex;
    justify-content: center;
}

.boton_informacion {
    width: 100%;
    padding: 10px 0;
    background-color: transparent;
    color: var(--color-principal);
    border: 2px solid var(--color-principal);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.boton_informacion:hover {
    background-color: var(--color-principal);
    color: #fff;
    transform: translateY(-2px);
}

/* Elementos ocultos (usados por JS) */
.colores_grid { display: none; }
.boton_color { 
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    cursor: pointer; 
    border: 1px solid #ddd; 
}

/* GALERÍA EN TARJETA (JS) */
.card_gallery {
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery_dots { 
    display: flex; 
    gap: 5px; 
    margin-bottom: 2px; 
}

.gallery_dot { 
    width: 6px; 
    height: 6px; 
    background: #ddd; 
    border-radius: 50%; 
    cursor: pointer; 
}

.gallery_dot.active { 
    background: var(--color-principal); 
    transform: scale(1.2); 
}

.estilos_contador { 
    font-size: 0.75rem; 
    color: #999; 
}

.gallery_prev, 
.gallery_next {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    width: 28px; 
    height: 28px; 
    border-radius: 50%;
    background: rgba(255,255,255,0.9); 
    border: none;
    cursor: pointer; 
    z-index: 10; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: var(--color-texto); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    opacity: 0.6; 
    transition: opacity 0.3s;
}

.producto_imagen:hover .gallery_prev, 
.producto_imagen:hover .gallery_next { 
    opacity: 1; 
}

.gallery_prev { left: 10px; }
.gallery_next { right: 10px; }

/* RESPONSIVE GRID */
@media (max-width: 1200px) { 
    .productos { grid-template-columns: repeat(3, 1fr); } 
}
@media (max-width: 900px) { 
    .productos { grid-template-columns: repeat(2, 1fr); } 
}
@media (max-width: 600px) { 
    .productos { grid-template-columns: 1fr; } 
}

/* ==============================
   PAGINACIÓN ESTILO "TARJETA"
============================== */
.paginacion_contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Espacio entre botones */
    margin-top: 50px;
    margin-bottom: 40px;
    width: 100%;
    flex-wrap: wrap;
}

.btn-pagina {
    /* 1. Estilo Base idéntico a las tarjetas */
    background-color: var(--color-blanco);
    width: 50px; 
    height: 50px;
    
    /* 2. Bordes y Sombras (Clave del diseño) */
    border: none; /* Quitamos borde gris */
    border-radius: 12px; /* Redondeado igual que tus tarjetas (no círculo) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra suave */
    
    /* 3. Tipografía */
    color: var(--color-texto);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    
    cursor: pointer;
    transition: all 0.3s ease; /* Transición suave */
    
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Efecto Hover: Se eleva como las tarjetas */
.btn-pagina:hover {
    transform: translateY(-5px); /* Se levanta */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Sombra crece */
    color: var(--color-principal); /* Texto color café */
}

/* Estado Activo (Página actual) */
.btn-pagina.activo {
    background-color: var(--color-principal);
    color: #fff;
    box-shadow: 0 10px 25px rgba(139, 94, 60, 0.4); /* Sombra color café */
    transform: scale(1.1); /* Un poquito más grande */
}

/* Botones Anterior/Siguiente */
.btn-nav {
    width: auto; /* Ancho automático para el texto */
    padding: 0 25px; /* Más relleno a los lados */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botón deshabilitado (cuando no puedes ir atrás/adelante) */
.btn-pagina:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
    box-shadow: none;
    background-color: #f0f0f0;
}
/* ==============================
   MODAL INFORMACIÓN PRODUCTO (FINAL MIXTO)
============================== */
.informacion_contenedor {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.informacion {
    background: var(--color-blanco);
    padding: 30px 40px;
    border-radius: 20px;
    max-width: 1300px; /* Ancho grande */
    width: 95%;
    max-height: 95vh;
    position: relative;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Título Superior Visible */
.titulo_informacion {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.titulo_informacion h2 {
    font-size: 1.2rem;
    color: var(--color-principal);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    font-weight: 700;
}

.separador_informacion { display: none; }

.cerrar_informacion {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f4f4;
    border: none;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s;
    z-index: 100;
}

.cerrar_informacion:hover {
    background: var(--color-principal);
    color: #fff;
    transform: rotate(90deg);
}

/* Estructura de 2 Columnas */
.cuerpo_informacion {
    display: flex;
    gap: 40px;
    align-items: stretch;
    height: 100%;
}

/* --- COLUMNA IZQUIERDA (IMAGEN + COLORES PREMIUM) --- */
.columna_imagen_colores {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.imagen_cota {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    background: #f9f9f9;
}

.imagen_cota img.imagen_modal {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-height: 450px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Caja de Colores (Gris y ordenada) */
.colores_informacion {
    width: 100%;
    margin-top: 25px;
}

.contenedor-colores-modal {
    background: #FAFAFA;
    border: 1px solid #EEE;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.titulo-colores {
    width: 100%;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    text-align: center;
}

/* BOTONES DE COLOR EN EL MODAL (Cuadrados) */
/* BOTONES DE COLOR EN EL MODAL (Textura con Zoom) */
.modal_color_btn {
    width: 45px !important;
    height: 45px !important;
    border-radius: 6px !important; /* Cuadrado redondeado */
    border: 2px solid #fff !important;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1) !important;
    
    /* CAMBIO CLAVE: 300% para hacer zoom a la textura */
    background-size: 300% !important; 
    background-position: center !important;
    
    transition: transform 0.2s;
}

.modal_color_btn:hover {
    transform: scale(1.15);
    border-color: var(--color-principal) !important;
    z-index: 2;
}
/* --- COLUMNA DERECHA (DATOS) --- */
.datos_informacion {
    flex: 1;
    padding: 0 20px 20px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.titulo-modal {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 5px 0;
    color: var(--color-texto);
}

.subtitulo-modal {
    font-weight: 600;
    color: var(--color-principal);
    margin-bottom: 15px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.descripcion-modal {
    margin-bottom: 25px;
    line-height: 1.7;
    color: #555;
    font-size: 1rem;
    text-align: justify; /* JUSTIFICADO */
}

/* --- ÁREAS DE USO (ESTILO "ETIQUETAS/CHIPS") --- */
.seccion-areas {
    margin-top: auto;
    padding: 20px;
    background: #F7F0E6;
    border-radius: 14px;
    border: 1px solid rgba(139, 94, 60, 0.1);
}

.seccion-areas strong {
    display: block;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 700;
}

.lista-areas {
    /* Estilo Flex fluido para etiquetas */
    display: flex;
    flex-wrap: wrap; 
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.item-area {
    background: #fff;
    padding: 8px 16px; /* Forma de pastilla */
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-texto);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    border: 1px solid rgba(255,255,255,0.6);
    transition: 0.2s;
}

.item-area:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(139, 94, 60, 0.15);
    color: var(--color-principal);
}

.item-area i {
    color: var(--color-principal) !important;
    font-size: 1rem;
    margin: 0;
}
/* ==============================
   RESPONSIVE MODAL (CORREGIDO PARA SCROLL)
============================== */
@media (max-width: 900px) {
    
    /* 1. Contenedor Principal del Modal */
    .informacion {
        padding: 20px;
        width: 95%; /* Un poco de margen a los lados */
        height: auto; /* Altura automática según contenido */
        max-height: 90vh; /* Máximo el 90% de la pantalla */
        border-radius: 15px; /* Mantener bordes redondos */
        
        /* IMPORTANTE: Esto habilita el scroll general */
        overflow-y: auto; 
        display: block; /* Cambiamos a block para evitar problemas de flex en altura */
    }

    /* Título en móvil */
    .titulo_informacion {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    
    .titulo_informacion h2 {
        font-size: 1rem; /* Un poco más chico */
    }

    /* 2. Cuerpo interno (Columna) */
    .cuerpo_informacion {
        display: flex;
        flex-direction: column; /* Elementos uno debajo del otro */
        gap: 20px;
        height: auto; /* Permitir que crezca */
    }

    /* 3. Columna Imagen + Colores */
    .columna_imagen_colores {
        width: 100%;
        flex: 0 0 auto;
        margin-bottom: 10px;
    }

    /* REDUCIR TAMAÑO DE IMAGEN EN MÓVIL (CLAVE) */
    .imagen_cota img.imagen_modal {
        max-height: 250px; /* Limitamos la altura para que se vea el resto */
    }

    /* 4. Columna Datos (Texto) */
    .datos_informacion {
        width: 100%;
        flex: 1 1 auto;
        padding: 0;
        overflow: visible; /* Quitamos scroll interno para usar el general */
    }

    /* Ajuste de textos en móvil */
    .titulo-modal {
        font-size: 1.8rem;
    }
    
    /* Ajuste de botón cerrar */
    .cerrar_informacion {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
        background: #f0f0f0; /* Asegurar que se vea sobre blanco */
    }

    /* Ajuste de lista de áreas */
    .lista-areas {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Más pequeños en móvil */
    }
}


/*ANIMACION DEL MODAL/*
/* Animación base para los elementos */
@keyframes aparecerCascada {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplicamos la animación a los elementos del modal */
.imagen_informacion, 
.colores_informacion, 
.titulo-modal, 
.subtitulo-modal, 
.descripcion-modal, 
.seccion-areas,
.contenedor-boton-cotizar {
    opacity: 0; /* Empiezan invisibles */
    animation: aparecerCascada 0.6s ease-out forwards;
}

/* Definimos los retrasos (delays) para el efecto cascada */
.imagen_informacion { animation-delay: 0.1s; }
.colores_informacion { animation-delay: 0.2s; }
.titulo-modal { animation-delay: 0.3s; }
.subtitulo-modal { animation-delay: 0.4s; }
.descripcion-modal { animation-delay: 0.5s; }
.seccion-areas { animation-delay: 0.6s; }
.contenedor-boton-cotizar { animation-delay: 0.7s; }

/* Efecto de entrada suave para el fondo oscuro */
.informacion_contenedor {
    transition: opacity 0.3s ease;
}
/*ZOOM DE LA IMAGEN*/

/* Cursor de lupa en la imagen del modal */
.imagen_modal {
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.imagen_modal:hover {
    transform: scale(1.02);
}

/* El visor de pantalla completa */
.zoom-visor {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 5000; /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

.zoom-visor img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
    transform: scale(0.7); /* Empieza pequeño para la animación */
    transition: transform 0.3s ease;
}

/* Cuando se activa */
.zoom-visor.activo {
    display: flex;
}

.zoom-visor.activo img {
    transform: scale(1); /* Crece suavemente */
}

.cerrar-zoom {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 50px;
    cursor: pointer;
}

/* Lupa en la imagen del modal original */
.imagen_modal {
    cursor: zoom-in;
    transition: 0.3s;
}

.imagen_modal:hover {
    filter: brightness(0.9);
}
/* ==============================
   FOOTER
============================== */
.footer {
  background-color: var(--color-footer);
  color: var(--color-secundario);
  padding: 50px 0;
  margin-top: 50px;
  font-family: 'Poppins', sans-serif;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-column {
  flex: 1;
  min-width: 250px;
  max-width: 320px;
  text-align: center;
}

.footer-column h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-blanco);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: var(--color-principal);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}

.footer-column ul li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-column ul li a {
  color: var(--color-blanco);
  opacity: 0.75;
  text-decoration: none;
  transition: all 0.3s;
}

.footer-column ul li a:hover {
  opacity: 1;
  transform: translateX(5px);
}

.footer-socials {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 100%;
}

.footer-socials a {
  color: var(--color-blanco);
  background-color: var(--color-principal);
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.2rem;
  text-decoration: none;
  transition: all 0.3s;
}

.footer-socials a:hover {
  background-color: var(--color-secundario);
  transform: translateY(-5px);
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--color-principal);
}

.footer-bottom p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-blanco);
}

/* ==============================
   UTILIDADES / RESPONSIVE GLOBAL
============================== */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

@media (max-width: 768px) {

    /* NAV */
  header {
    padding: 5px 15px;
    height: 50px;
  }

  .logo-container img {
    width: 35px;
  }

  .logo-container h2 {
    font-size: 1rem;
  }

  .menu-toggle {
    display: block;
  }

  .nav-links {
    display: none;
  }
  /* --- A. Botón Hamburguesa --- */
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 2rem;
    /* Importante: Color claro o cobre para que contraste si el menú pasa por debajo */
    color: var(--color-principal);
    cursor: pointer;
    z-index: 1001;
    /* Debe ser mayor que el menú para que siempre puedas cerrarlo */
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .menu-toggle.active {
    color: var(--color-fondo);
    /* Cambia a claro cuando el menú oscuro está abierto */
    transform: rotate(90deg);
  }

  /* --- B. Menú Sidebar (Modificado) --- */
  .nav-links {
    /* 1. ALTURA COMPLETA */
    position: fixed;
    /* 'fixed' es mejor para full screen */
    top: 0;
    /* Desde arriba del todo */
    right: 0;
    width: 70%;
    max-width: 300px;
    height: 100vh;
    /* Ocupa toda la altura de la pantalla */

    /* 2. FONDO CAFÉ TRANSPARENTE */
    /* Usamos el RGB de tu color #3D2C20 (61, 44, 32) con 0.9 de opacidad */
    background-color: rgba(61, 44, 32, 0.95);

    /* Efecto de cristal borroso (Opcional, le da un toque moderno 'glassmorphism') */
    backdrop-filter: blur(5px);

    /* Sombra y Borde */
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
    border-left: 1px solid var(--color-principal);
    /* Borde sutil */

    /* 3. LAYOUT INTERNO */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    /* Mucho padding arriba para que los links no queden tapados por el botón cerrar */
    padding: 100px 20px 20px;
    gap: 15px;

    /* 4. ANIMACIÓN DE ENTRADA/SALIDA */
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.4s ease,
      visibility 0.4s;
    z-index: 1000;
  }

  /* --- C. Estado Activo --- */
  .nav-links.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* --- D. Estilo de Enlaces (Adaptado a fondo oscuro) --- */
  .nav-links a {
    width: 100%;
    font-size: 1.2rem;
    padding: 12px 10px;

    /* CAMBIO: Texto claro (Beige) porque el fondo es oscuro */
    color: var(--color-fondo);

    /* Borde separador sutil y claro */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
  }

  .nav-links a:hover {
    /* Fondo blanco semitransparente */
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-secundario);
    /* Camel al pasar el mouse */
    padding-left: 25px;
    border-left-color: var(--color-secundario);
    border-bottom-color: transparent;
  }

  /* ==============================================
     E. DROPDOWN MÓVIL (ESTILO APP / DRILL-DOWN)
     ============================================== */

 /* ==============================================
     E. DROPDOWN MÓVIL (ESTILO APP / DRILL-DOWN)
     ============================================== */

  /* 1. Contenedor base (¡CLAVE: position static para liberar a la nueva pantalla!) */
  .dropdown {
    position: static ; /* Esto evita que el menú se quede atrapado en el botón */
    width: 100% ;
    display: block ;
    margin: 0 ;
    padding: 0 ;
  }

  .dropbtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 2. El contenido desplegable (¡AHORA SÍ CUBRE EL 100% DEL MENÚ!) */
  .dropdown-content {
    position: absolute; 
    top: 0;
    left: 0;
    
    /* Gracias al position:static de arriba, esto ahora mide lo mismo que tu menú principal */
    width: 100%; 
    height: 100%; 
    
    /* Para que el padding no desborde el tamaño */
    box-sizing: border-box; 
    
    /* Fondo oscuro sólido para tapar los botones de atrás */
    background-color: rgb(61, 44, 32); 
    
    /* Flexbox para acomodar los productos */
    display: flex;
    flex-direction: column;
    padding: 100px 20px 20px;
    gap: 8px;
    
    /* Scroll si hay muchos productos */
    overflow-y: auto; 
    
    /* Empieza oculto a la derecha */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0.3s;
    z-index: 1002;
  }

  /* 3. Clase SHOW (Activa la pantalla) */
  .dropdown-content.show {
    transform: translateX(0);
    visibility: visible;
  }

  /* 4. Estilo del botón "Volver" */
  .btn-volver {
    display: block; 
    color: var(--color-secundario) !important;
    font-size: 1.2rem;
    font-weight: bold;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--color-secundario) !important;
    text-transform: uppercase;
  }

  /* 5. Estilo de los Sub-Enlaces (Pisos) */
  .dropdown-content a {
    font-size: 0.95rem;
    padding: 8px 10px; 
    
    color: var(--color-fondo);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
  }
  /* 6. Hover/Touch en los enlaces de productos */
  .dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-secundario);
    padding-left: 25px;
    border-left-color: var(--color-secundario);
    border-bottom-color: transparent;
  }
}

  @media (max-width: 768px) {
  .footer-content {
    align-items: center;
    text-align: center;
  }
  .footer-column {
    min-width: 100%;
  }
  .footer-column ul {
    display: inline-block;
    text-align: left;
  }
  .footer-column h3::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .footer-column ul li {
    justify-content: center;
  }
}
/* --- CORRECCIÓN DE COLUMNA DERECHA (Para que el botón quede abajo) --- */
.columna-derecha-contenido {
    flex: 1; /* Toma todo el espacio sobrante */
    display: flex;
    flex-direction: column; /* Ordena: Texto arriba, Botón abajo */
    justify-content: space-between;
}

/* --- ESTILO DEL BOTÓN "SOLICITAR COTIZACIÓN" --- */
.contenedor-boton-cotizar {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0; /* Línea separadora */
    width: 100%;
    text-align: center;
}

.btn-cotizar {
    background-color: var(--color-principal); /* Tu Marrón Tierra */
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 30px;
    border: none;
    border-radius: 50px; /* Redondo */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(139, 94, 60, 0.3);
    transition: transform 0.2s;
    width: 100%;
    max-width: 300px;
}
.btn-cotizar:hover {
    background-color: var(--color-footer);
    transform: translateY(-3px);
}

/* --- ESTILO DEL MODAL DE SELECCIÓN (WhatsApp / Correo) --- */
.modal-seleccion {
    display: none; /* Oculto inicio */
    position: fixed;
    z-index: 5000; /* Encima de todo */
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(61, 44, 32, 0.85); /* Fondo oscuro */
    backdrop-filter: blur(3px);
    justify-content: center; align-items: center;
}

.modal-seleccion-content {
    background-color: var(--color-fondo); /* Beige */
    padding: 30px; border-radius: 20px;
    width: 90%; max-width: 400px; text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: aparecer 0.3s ease;
}
@keyframes aparecer { from {transform: scale(0.9); opacity:0;} to {transform: scale(1); opacity:1;} }

.opciones-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px;
}

.btn-opcion {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 15px; background: #fff; border-radius: 12px;
    border: none; cursor: pointer; transition: 0.3s; color: var(--color-texto);
}
.btn-opcion:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.btn-opcion i { font-size: 28px; margin-bottom: 8px; }

/* MENU VENDEDORES */

/* =======================================================
   ESTILOS FALTANTES: MENÚ DE VENDEDORES (Widget)
   ======================================================= */

/* =======================================================
   WIDGET DE WHATSAPP (DISEÑO MODERNO & MINIMALISTA)
   ======================================================= */

/* Contenedor general */
.whatsapp-widget {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 4000;
    font-family: 'Poppins', sans-serif;
}

/* 1. EL MENÚ (La tarjeta que se despliega) */
.whatsapp-menu {
    position: absolute;
    bottom: 80px; /* Separación del botón */
    right: 0;
    width: 320px;
    
    /* Fondo blanco limpio */
    background-color: #fff;
    
    /* Bordes muy redondeados para modernidad */
    border-radius: 20px;
    
    /* Sombra de alta calidad (difusa y suave) */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 5px 15px rgba(147, 116, 116, 0.05);
    
    overflow: hidden;
    
    /* Animación de entrada: Crece desde la esquina inferior derecha */
    transform-origin: bottom right;
    transform: scale(0); 
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efecto rebote sutil */
    
    z-index: 4001;
}

/* Estado Activo */
.whatsapp-menu.active {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

/* 2. ENCABEZADO (Gradiente elegante) */
.menu-header {
    /* Gradiente usando tus colores de marca */
    background: linear-gradient(135deg, var(--color-footer), var(--color-principal));
    color: #fff;
    padding: 25px 20px;
    text-align: left; /* Alineado a la izquierda es más moderno */
}

.menu-header h3 { 
    margin: 0; 
    font-size: 1.2rem; 
    font-weight: 700; 
    letter-spacing: 0.5px;
}

.menu-header p { 
    margin: 5px 0 0; 
    font-size: 0.85rem; 
    opacity: 0.9; 
    font-weight: 400;
}

/* 3. CUERPO DEL MENÚ */
.menu-body {
    padding: 15px;
    background-color: #fff; /* Blanco puro para limpieza */
}

/* 4. TARJETAS DE ASESORES (Minimalistas) */
.agent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* Sin color de fondo inicial, solo al hover */
    background-color: transparent; 
    padding: 15px;
    margin-bottom: 5px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--color-texto);
    
    /* Transición suave */
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: none; /* Quitamos bordes viejos */
}

/* Efecto Hover en Asesores */
.agent:hover {
    background-color: var(--color-fondo); /* Tu beige suave */
    transform: translateX(5px); /* Pequeño desplazamiento a la derecha */
}

.agent-info { 
    display: flex; 
    flex-direction: column; 
}

.agent-name { 
    font-weight: 600; 
    font-size: 0.95rem; 
    color: #333;
}

.agent-status { 
    font-size: 0.75rem; 
    color: #25D366; /* Verde WA */
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Pequeño punto verde pulsando al lado de "En línea" */
.agent-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #25D366;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(37, 211, 102, 0.5);
}

.agent img {
    /* Sombra suave al icono de WA del agente */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    transition: transform 0.3s;
}

.agent:hover img {
    transform: scale(1.1) rotate(-10deg);
}

/* 5. BOTÓN FLOTANTE PRINCIPAL (Con animación) */
.whatsapp-btn {
display: none !important;
}

/* Icono blanco puro */
.whatsapp-btn img {
    filter: brightness(0) invert(1);
    width: 38px;
    height: 38px;
}

.whatsapp-btn:hover {
    background-color: var(--color-footer);
    transform: scale(1.05) rotate(15deg); /* Efecto divertido al pasar mouse */
    box-shadow: 0 12px 30px rgba(61, 44, 32, 0.5);
}

/* =========================================
   ANIMACIÓN DE ENTRADA (Al filtrar)
   ========================================= */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Empieza 30px abajo */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Termina en su lugar */
    }
}

.animar-entrada {
    /* La animación dura 0.5 segundos */
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0; /* Oculto al inicio para evitar parpadeos */
}