/* Importar la fuente personalizada */
@font-face {
  font-family: 'BaseMoon';
  src: url('../FUENTES/transfonter/BaseMoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ===== Responsivo básico ===== */
@media (max-width: 768px) {
  header { height: 64px; }
  main { margin-top: 64px; }
  /* Evita saltos raros en móvil si el fondo está en fixed */
  body { background-attachment: scroll; }
}

/* Reset general */
  * {
      margin: 0;
      padding: 0; 
      box-sizing: border-box; 
    }
  
  /* Body CONFIGURACIONES APLICADAS AL HTML Y BODY*/
    html, body {
      height: 100%; /* Hace que el HTML y el body ocupen el 100% de la altura del navegador */
      margin: 0;/* Elimina los márgenes por defecto del navegador */
      padding: 0;/* Elimina el espacio interno por defecto */
      
    }

      /*SECCION DEL BODY TODO EL CUERPO DE LA PAGINA Y QUE APLICA*/    
    body.fondo-glamping {
        overflow: visible; /* 👈 esto permite que el scroll funcione normalmente */
        background-image: url('../IMAGENES/GLAMPLING/fondo.webp'); /* Fondo con imagen */
        background-repeat: no-repeat;        /* Evita que la imagen se repita */
        background-size: cover;              /* Hace que la imagen cubra toda la pantalla */
        background-position: center;         /* Centra la imagen */
        background-attachment: fixed;        /* Opcional: hace que el fondo no se mueva al hacer scroll */
        font-family: 'Georgia', serif;  /* Usa la fuente Arial para todo el texto. Si no está disponible, usa cualquier otra fuente sin serifas (sin patitas) */
        background-color: #FAF3E0; /* Tono beige claro */
        color: #4B3B2A;                                /* Color del texto general: gris oscuro para buena legibilidad */
      }

      
      h1.titulo-glampling {
    margin-top: 86px; /* Cambiado de 100px a 80px para subir aún más */
    margin-bottom: -18px; /* Mantén el margen inferior para evitar superposición */
    width: 92%;/* Cambiado de 67% a 50% para hacerlo más estrecho */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente para mejorar legibilidad */
    padding: 20px; /* Espacio interno */
    border-radius: 41px; /* Bordes redondeados */
    text-align: center; /* Centrado del texto */
    color: white; /* Color del texto en blanco para buen contraste */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */
    font-size: 39px; /* Tamaño grande para destacar el título */
    font-family: Georgia, serif; /* Fuente cursiva para un toque elegante */
    margin-left: 22px; /* Centrado horizontal */

    }

        body.fondo-artesanias {
        overflow: visible; /* 👈 esto permite que el scroll funcione normalmente */
        background-image: url('../IMAGENES/ARTESANIAS/fondo.png'); /* Fondo con imagen */
        background-repeat: no-repeat;        /* Evita que la imagen se repita */
        background-size: cover;              /* Hace que la imagen cubra toda la pantalla */
        background-position: center;         /* Centra la imagen */
        background-attachment: fixed;        /* Opcional: hace que el fondo no se mueva al hacer scroll */
        font-family: 'Georgia', serif;  /* Usa la fuente Arial para todo el texto. Si no está disponible, usa cualquier otra fuente sin serifas (sin patitas) */
        background-color: #FAF3E0; /* Tono beige claro */
        color: #4B3B2A;                                /* Color del texto general: gris oscuro para buena legibilidad */
      }

        
    h1.titulo-artesanias {
    margin-top: 86px; /* Cambiado de 100px a 80px para subir aún más */
    margin-bottom: -18px; /* Mantén el margen inferior para evitar superposición */
    width: 92%;/* Cambiado de 67% a 50% para hacerlo más estrecho */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente para mejorar legibilidad */
    padding: 20px; /* Espacio interno */
    border-radius: 41px; /* Bordes redondeados */
    text-align: center; /* Centrado del texto */
    color: white; /* Color del texto en blanco para buen contraste */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */
    font-size: 39px; /* Tamaño grande para destacar el título */
    font-family: Georgia, serif; /* Fuente cursiva para un toque elegante */
    margin-left: 22px; /* Centrado horizontal */
    }

      
        body.fondo-camisas {
        overflow: visible; /* 👈 esto permite que el scroll funcione normalmente */
        background-image: url('../IMAGENES/GOLDEN PLAZA/fondo.webp'); /* Fondo con imagen */
        background-repeat: no-repeat;        /* Evita que la imagen se repita */
        background-size: cover;              /* Hace que la imagen cubra toda la pantalla */
        background-position: center;         /* Centra la imagen */
        background-attachment: fixed;        /* Opcional: hace que el fondo no se mueva al hacer scroll */
        font-family: 'Georgia', serif;  /* Usa la fuente Arial para todo el texto. Si no está disponible, usa cualquier otra fuente sin serifas (sin patitas) */
        background-color: #FAF3E0; /* Tono beige claro */
        color: #4B3B2A;                                /* Color del texto general: gris oscuro para buena legibilidad */
      }

      h1.titulo-camisas {
     margin-top: 86px; /* Cambiado de 100px a 80px para subir aún más */
    margin-bottom: -18px; /* Mantén el margen inferior para evitar superposición */
    width: 92%;/* Cambiado de 67% a 50% para hacerlo más estrecho */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente para mejorar legibilidad */
    padding: 20px; /* Espacio interno */
    border-radius: 41px; /* Bordes redondeados */
    text-align: center; /* Centrado del texto */
    color: white; /* Color del texto en blanco para buen contraste */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */
    font-size: 39px; /* Tamaño grande para destacar el título */
    font-family: Georgia, serif; /* Fuente cursiva para un toque elegante */
    margin-left: 22px; /* Centrado horizontal */
    }
      
      body.fondo-dhg {
        overflow: visible; /* 👈 esto permite que el scroll funcione normalmente */
        background-image: url('../IMAGENES/DHG/imagen\ fondo.webp'); /* Fondo con imagen */
        background-repeat: no-repeat;        /* Evita que la imagen se repita */
        background-size: cover;              /* Hace que la imagen cubra toda la pantalla */
        background-position: center;         /* Centra la imagen */
        background-attachment: fixed;        /* Opcional: hace que el fondo no se mueva al hacer scroll */
        font-family: 'Georgia', serif;  /* Usa la fuente Arial para todo el texto. Si no está disponible, usa cualquier otra fuente sin serifas (sin patitas) */
        background-color: #FAF3E0; /* Tono beige claro */
        color: #4B3B2A;                                /* Color del texto general: gris oscuro para buena legibilidad */
      }

    h1.titulo-dhg {
    margin-top: 86px; /* Cambiado de 100px a 80px para subir aún más */
    margin-bottom: -18px; /* Mantén el margen inferior para evitar superposición */
    width: 92%;/* Cambiado de 67% a 50% para hacerlo más estrecho */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente para mejorar legibilidad */
    padding: 20px; /* Espacio interno */
    border-radius: 41px; /* Bordes redondeados */
    text-align: center; /* Centrado del texto */
    color: white; /* Color del texto en blanco para buen contraste */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */
    font-size: 39px; /* Tamaño grande para destacar el título */
    font-family: Georgia, serif; /* Fuente cursiva para un toque elegante */
    margin-left: 22px; /* Centrado horizontal */
    }

      body.fondo-marielle {
        overflow: visible; /* 👈 esto permite que el scroll funcione normalmente */
        background-image: url('../IMAGENES/MARIELLE/fondo.webp'); /* Fondo con imagen */
        background-repeat: no-repeat;        /* Evita que la imagen se repita */
        background-size: cover;              /* Hace que la imagen cubra toda la pantalla */
        background-position: center;         /* Centra la imagen */
        background-attachment: fixed;        /* Opcional: hace que el fondo no se mueva al hacer scroll */
        font-family: 'Georgia', serif;  /* Usa la fuente Arial para todo el texto. Si no está disponible, usa cualquier otra fuente sin serifas (sin patitas) */
        background-color: #FAF3E0; /* Tono beige claro */
        color: #4B3B2A;                                /* Color del texto general: gris oscuro para buena legibilidad */
      }

    h1.titulo-marielle {
    margin-top: 86px; /* Cambiado de 100px a 80px para subir aún más */
    margin-bottom: -18px; /* Mantén el margen inferior para evitar superposición */
    width: 92%;/* Cambiado de 67% a 50% para hacerlo más estrecho */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semitransparente para mejorar legibilidad */
    padding: 20px; /* Espacio interno */
    border-radius: 41px; /* Bordes redondeados */
    text-align: center; /* Centrado del texto */
    color: white; /* Color del texto en blanco para buen contraste */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */
    font-size: 39px; /* Tamaño grande para destacar el título */
    font-family: Georgia, serif; /* Fuente cursiva para un toque elegante */
    margin-left: 22px; /* Centrado horizontal */
    }
  /* SECCION DEL HEADER O ENCABEZADO*/
    
    header {
      position: fixed;         /* Fija el encabezado en la parte superior de la ventana, permanece visible al hacer scroll */
      top: 0;                  /* Lo ancla exactamente en la parte superior (0 píxeles desde arriba) */
      width: 100%;             /* Hace que el header ocupe todo el ancho de la pantalla */
      z-index: 1000;           /* Asegura que esté por encima de otros elementos en la página */
      background-color: #ffffff; /* Color de fondo blanco para el header */
      height: 80px;            /* Altura fija del header, útil para empujar el contenido con margen */
      display: flex;           /* Usa Flexbox para organizar el contenido horizontalmente (logo a la izquierda, menú a la derecha) */
      align-items: center;     /* Centra verticalmente los elementos dentro del header */
      justify-content: space-between; /* Separa los elementos al máximo: uno a la izquierda y otro a la derecha */
      padding: 0px 30px;       /* Espacio interno: 0 arriba/abajo y 30px izquierda/derecha */
      background-image: url('../IMAGENES/header.png'); /* Fondo con imagen */
    }

  /* SECCION DEL LOGO EN EL ENCABEZADO*/

    nav ul {
      list-style: none; /* Quita los punticos de la lista (<ul>) */
      display: flex; /* Pone los elementos del menú en línea horizontal */
      gap: 30px; /* Espacio entre cada enlace */
    }

    nav ul li a {
    font-family: "Lobster", sans-serif;
    color: rgb(0, 0, 0); /* Color del texto de los enlaces */
    text-decoration: none;/* Quita el subrayado de los enlaces */
    font-weight: bold;    /* Texto en negrita */
    font-size: 20px;      /* Tamaño del texto */
    transition: color 0.3s ease; /* Efecto suave al pasar el mouse */
  }

  nav ul li a:hover {
      color: #ff69b4; /* Cambia el color al pasar el mouse */
    }

  /* SECCION DEL CONTENIDO PRINCIPAL LO QUE ESTA EN EL MAIN*/
      main {
      flex: 1; /* Le indica al contenedor (el body con flexbox) que el main debe ocupar todo el espacio restante entre el header y el footer */
      overflow: visible; /* 👈 asegúrate que el main no limite el scroll */
      margin-top: 11px; /* Desplaza el contenido hacia abajo para no quedar tapado por el header */
    }




.productos { 
    display: grid;                      /* Activa grid para la sección */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas automáticas según espacio en las pantallas*/
    gap: 20px;                          /* Espacio entre tarjetas */
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;                     /* Centrado horizontal */
  }
  
.catalogo {
  background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Sombra suave */
    text-align: center;
    transition: transform 0.3s ease;
  }
  

    .catalogo:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(107, 142, 35, 0.3);
  } 

    .imagen-producto {
        height: 246px;              /* Puedes ajustar según tus imágenes */
        overflow: hidden;
        border-radius: 8px;
        display: flex;
        align-items: flex-start;    /* Cambia de center a flex-start para mostrar parte superior */
        justify-content: center;
      }

    .imagen-producto img {
        max-height: 97%;
        max-width: 100%;
        object-fit: contain;       /* Muestra toda la imagen sin recortarla */
      }
      

    .catalogo h2 {
    color: #6B8E23; /* Verde hoja */
    font-size: 20px;
    margin-bottom: 8px;
  }

    .catalogo p {
    color: #5D473A;
    font-size: 14px;
    margin-bottom: 8px;
  }
      
/* SECCION DEL FOOTER O PIDE DEPAGINA*/
    footer {
      background-color: #6B8E23;
      color: #fff;   /* Color del texto en blanco para contraste y legibilidad */
      text-align: center; /* Centra horizontalmente el texto dentro del footer */
      padding: 20px; /* Espacio interno en todos los lados del footer */
      font-size: 14px;  /* Tamaño de letra más pequeño que el cuerpo para marcar que es información secundaria */
      font-family: cursive
    }  
    
/* SECCION DEL VISOR DE IMAGENES */
    .visor {
  position: fixed; /* Fija el visor en toda la pantalla */
  top: 0;  /* Ancla el visor en la parte superior */
  left: 0;    /* Ancla el visor en la parte izquierda */
  width: 100%;  /* Ocupa todo el ancho de la pantalla */
  height: 100%;  /* Ocupa toda la altura de la pantalla */
  background: rgba(0, 0, 0, 0.8); /* Fondo oscuro */
  display: flex;  /* Usa Flexbox para centrar el contenido */
  justify-content: center;  /* Centra horizontalmente */
  align-items: center;  /* Centra verticalmente */
  z-index: 9999;  /* Asegura que el visor esté por encima de otros elementos */    
}

.visor img {
  max-width: 90%;  /* Limita el ancho máximo de la imagen al 90% del visor */   
  max-height: 90%;  /* Limita la altura máxima de la imagen al 90% del visor */ 
  border-radius: 10px; /* Bordes redondeados para la imagen */
  box-shadow: 0 0 20px #000; /* Sombra para darle profundidad */
}

.oculto {
  display: none; /* Oculta el visor por defecto */
}

.visor:hover {
  cursor: zoom-out; /* Cambia el cursor al pasar por encima del visor */
}

/* Botón de WhatsApp */  
.boton-whatsapp {
  display: inline-block;
  background-color: #25d366;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.boton-whatsapp:hover {
  background-color: #1ebe57;
}
   
/* Botón flotante nuestros contactos*/
.btn-contacto {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #8a2c74; /* Color que combine con tu web */
  color: white;
  padding: 12px 18px;
  border: none;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.btn-contacto:hover {
  background-color: #6b215c;
}

/* Panel flotante */
#panel-contacto {
  display: none; /* Oculto por defecto */
  position: fixed;
  bottom: 80px;
  right: 20px;
  background-color: white;
  width: 260px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1001;
}

.panel-contenido {
  padding: 15px;
  font-family: sans-serif;
}

.panel-contenido h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.cerrar {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 18px;
  cursor: pointer;
}

.redes-sociales {
  text-align: center; /* Centra los iconos de redes sociales */
  margin-top: 5px; /* Espacio entre el formulario y las redes sociales */
}

.redes-sociales a {
  text-decoration: none; /* Quita el subrayado de los enlaces */
  display: inline-block; /* Permite aplicar estilos de bloque a los enlaces */
}

.icono-red {
  width: 50px; /* Ancho de los iconos de redes sociales */
  height: auto;   /* Mantiene la proporción del icono */
  margin: 0 10px; /* Espacio entre los iconos */
  transition: transform 0.3s ease; /* Efecto suave al pasar el mouse */
  cursor: pointer; /* Cambia el cursor al pasar sobre el icono */
}