/* ================================================================
   Mobile First 
   
   - Los estilos base están diseñados para dispositivos móviles.
   - Al final de cada bloque de estilos se encuentran las Media Queries para tablet y escritorio.

   ÍNDICE MARCA.CSS:

   1.  Estilos marca.html
================================================================ */

.marca-page { 
  padding-top: var(--header-h); 
}

/* --- CONTENEDOR PRINCIPAL: EL LIENZO VERDE --- */
.marca-hero {
  background: #09231D;
  color: var(--color-white);
  position: relative !important;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
}

/* Contenedor interno: Mantiene la grilla/texto centrados hasta 1200px */
.marca-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto; /* Centra la caja global de 1200px */
  padding: var(--sp-8) var(--sp-6);
}

/* --- COLUMNA DE INFORMACIÓN (TEXTO) --- */
.marca-hero__info {
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

.marca-hero__nombre {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 7vw, 4.2rem);
  font-weight: 700;
  margin-bottom: var(--sp-3);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.marca-hero__badge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  justify-content: center; /* Centrado en móvil */
}

.marca-hero__badge-line {
  width: 40px;
  height: 1px;
  background-color: #c5a880;
  flex-shrink: 0;
}

.marca-hero__badge-text {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #c5a880;
  text-transform: uppercase;
}

.marca-hero__historia {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.75;
  margin: 0;
}

/* ================================================================
   BASE GENERAL MÓVIL Y TABLET (IMAGEN INYECTADA DE JS)
================================================================ */
.marca-hero__imagen-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: flex-end; /* Ancla al piso */
  justify-content: center;
  overflow: hidden
}

.marca-hero__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 115%;
  max-height: none;
  object-fit: contain;
  opacity: 0.22;
  filter: brightness(0.8) contrast(1.1);
  transform: translateY(50px);
}

/* ================================================================
   CONTENIDO INFERIOR Y CATÁLOGO
================================================================ */

.marca-content { 
  padding: var(--sp-12) 0; 
}

.marca-perfumes-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-6);
  color: var(--color-primary-light);
}


/* ================================================================
   BREAKPOINTS Y ADAPTACIONES
================================================================ */

/* 📱 PANTALLAS PEQUEÑAS (HASTA 625px) - TUS CONTROLES A OJO */
@media (max-width: 625px) {
  .marca-hero__img {
    /* ⚙️ AJUSTES A OJO PARA MÓVIL ESTRECHO:
       - Si la ves pequeña o grande, cambia la altura (ej: 110%, 130%, 140%).
       - Ajusta translateY para "hundir" o subir la base exactamente al borde verde. */
    height: 125%; 
    max-width: 180%;
    transform: translateY(140px); 
  }
}

/* 📐 TABLET (A partir de 640px) */
@media (min-width: 640px) {
  .marcas-lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 💻 DESKTOP (A partir de 993px) */
@media (min-width: 993px) {

  .marca-hero {
    min-height: 500px;
  }

  .marca-hero__inner {
    margin: 0 auto;
    padding: 0 var(--sp-6);
  }

  .marca-hero__info {
    margin: 0;
    text-align: left;
    max-width: 520px;
  }

  .marca-hero__badge {
    justify-content: flex-start;
  }

  .marca-hero__imagen-wrapper {
    left: auto;
    right: var(--sp-6);
    width: calc(55% - var(--sp-6));
    height: 100%;
    display: block;
    /* Configuración de la imagen desde CSS */
    background-image: url('../../assets/hero_imagenes/imagen_perfumes_sin_fondo_sin_base.webp');
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    opacity: 1;
    filter: drop-shadow(0px 0px 20px rgba(197, 168, 128, 0.3));

    /* ⚙️ CONTROLES MANUALES PARA MOVER LA IMAGEN EN PC A TU GUSTO:
       - El primer valor (0px) mueve a la izquierda (-) o derecha (+)
       - El segundo valor (20px) baja (+) o sube (-) la imagen
       - scale(1.1) te permite hacerla más grande (1.2, 1.3) o más chica (0.9) */
    transform: translate(-30px, 80px) scale(1);
    transform-origin: bottom center; /* Asegura que la escala crezca desde el piso */
  
  }

  .marca-hero__img {
    display: none !important;
  }

  .marcas-lista {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }
}