/* 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;
  }

  /* Asegura que todos los elementos tengan un box-sizing consistente */
    /* Estilos generales */
  body, h1, h2, p {
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina padding por defecto */
  }

  /* Asegura que los enlaces no tengan subrayado y hereden el color del texto */
  a {
    text-decoration: none; /* Elimina subrayado de enlaces */
    color: inherit; /* Hereda el color del texto del elemento padre */
  } 

  /* Asegura que las imágenes y videos se ajusten a su contenedor */
  img, video { max-width: 100%; height: auto; display: block; } /* Asegura que las imágenes y videos no desborden sus contenedores */

  /* Asegura que los elementos de formulario tengan un estilo consistente */
  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*/
body {
    overflow: visible; /* 👈 esto permite que el scroll funcione normalmente */
    background-image: url('../IMAGENES/INICIO/centro\ comercial.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: 'BaseMoon', sans-serif; /* Usa la fuente personalizada */
    background-color: #f3e7ef;         /* Color de fondo rosado pastel claro, suave para la vista */
    color: #000000; 
    
  }

  /* SECCIÓN DEL 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%;  
    z-index: 1000;           /* Hace que el header ocupe todo el ancho de la pantalla */
    background-color: #ffffff; /* Color de fondo blanco para el header */
    height: 91px;            /* 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: center; /* Centra horizontalmente los elementos dentro del header */
    padding: 0 30px;         /* Espacio interno a los lados del header */
    background-image: url('../IMAGENES/header.png'); /* Fondo con imagen */
  }
  
/* SECCIÓN DEL LOGO */
.mundo img {
    height: 67px;   /* suficientemente grande para destacar */
    width: auto;
  }

.letras img {
    height: 67px;   /* suficientemente grande para destacar */
    width: auto;
  }


/* SECCIÓN DEL MENÚ */        
h1 {
position: absolute;
left: 34%;
transform: translateX(4%);
font-size: clamp(1.4rem, 2.2vw + 0.8rem, 2.4rem); /* Tamaño de fuente adaptable */
position: static;
text-align: center;
font-size: clamp(1rem, 2.2vw + 0.6rem, 2rem);
font-weight: bold;
color: #000000;
margin: 0;
}
     
  /* SECCION DEL CONTENIDO PRINCIPAL */
      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: 73px; /* Desplaza el contenido hacia abajo para no quedar tapado por el header */
    }

/* SECCIÓN DE LAS PUERTAS */
  .locales { 
    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;  /* Espacio interno alrededor de las tarjetas */    
    max-width: 1200px;  /* Ancho máximo para que no se extienda demasiado en pantallas grandes */
    margin: 0 auto;/* Centrado horizontal */
  }
/* SECCIÓN DE LAS TARJETAS DE PRODUCTOS */  
.puertas {
  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;
  }
  
/* Efecto hover para las tarjetas */
    .puertas:hover {
    transform: translateY(-6px);  /* Efecto de elevación al pasar el mouse */
    box-shadow: 0 8px 20px rgba(107, 142, 35, 0.3); /* Sombra más pronunciada al hacer hover */
  } 
 
/* SECCIÓN DE LAS IMÁGENES DE LOS PRODUCTOS */
    .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;
      }

      /* Asegura que las imágenes se ajusten al contenedor sin recortarse */
    .imagen-producto img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;       /* Muestra toda la imagen sin recortarla */
      }

      
/* SECCIÓN DE LOS TITULOS Y DESCRIPCIONES DE LOS PRODUCTOS */
    .puertas h2 {
    color: #000000; /* Verde hoja */
    font-size: 20px;
    margin-bottom: 8px;
  }

  /* SECCIÓN DE LAS DESCRIPCIONES DE LOS PRODUCTOS */
    .puertas p {
    color: #5D473A;
    font-size: 14px;
    margin-bottom: 8px;
  }

/* SECCIÓN DE LOS BOTONES DE COMPRA */
    .boton-compra {
    background-color: #8a2c74; /* Color morado del logo */
    color: white; /* Texto en blanco para contraste */
    padding: 10px 20px; /* Espacio interno del botón */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    font-size: 16px; /* Tamaño de letra del botón */
    transition: background-color 0.3s ease; /* Transición suave al cambiar el color de fondo */
  }
  
  
footer {
    background-color: #8a2c74;  /* Color de fondo del pie de página (mismo tono morado del logo para coherencia visual) */
    color: white;   /* 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
  }