/* ================================================================
   FRAGRACIA 
  
   ÍNDICE:
   1.  Variables CSS (colores, tipografía, espaciados, sombras)
   2.  Reset y base
   3.  Utilidades generales
   4.  Botones
================================================================ */

/* ================================================================
   1. VARIABLES CSS
   Centraliza todos los valores de diseño.
   Cambia aquí y el cambio se aplica en toda la plataforma.
================================================================ */
:root {
  /* Paleta de marca */
  --color-primary:       #184D40;       /* Verde oscuro principal */
  --color-primary-light: #1f6554;       /* Verde un poco más claro (hover) */
  --color-primary-dark:  #09231D;       /* Verde utilizado en el Header*/
  --color-secondary:     #2C2C2A;       /* Casi negro, para textos y fondos */
  --color-bg:            #F4F3EF;       /* Fondo cálido, casi blanco */
  --color-surface:       #FFFFFF;       /* Fondo de tarjetas y paneles */
  --color-border:        #E5E3DC;       /* Bordes sutiles */
  --color-text:          #2C2C2A;       /* Texto principal */
  --color-text-muted:    #7A7972;       /* Texto secundario / apagado */
  --color-accent:        #C9A96E;       /* Dorado sutil para detalles */
  --color-white:         #FFFFFF;

  /* Tipografía */
  --font-serif: Georgia, 'Times New Roman', serif; /* Para títulos elegantes */
  --font-sans:  system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala de tamaños tipográficos */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-md:   1.125rem;  /*  18px */
  --text-lg:   1.25rem;   /*  20px */
  --text-xl:   1.5rem;    /*  24px */
  --text-2xl:  2rem;      /*  32px */
  --text-3xl:  2.5rem;    /*  40px */

  /* Espaciados (múltiplos de 4px) */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */

  /* Bordes redondeados */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.13);

  /* Transición estándar */
  --ease: 0.22s ease;

  /* Altura del header fija */
  --header-h: 60px;
}


/* ================================================================
   2. RESET Y BASE
   Normaliza diferencias entre navegadores.
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}


/* ================================================================
   3. UTILIDADES GENERALES
================================================================ */

/* Contenedor centrado con padding lateral */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* Oculta un elemento visualmente mientras sigue siendo leído por
   lectores de pantalla y motores de búsqueda. Se usa por ejemplo
   para el <h1> real de páginas donde el diseño no tiene espacio
   visual para un encabezado principal (ej: el hero con slider). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mensaje cuando no hay resultados en un grid */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--sp-12) var(--sp-4);
  font-size: var(--text-md);
  line-height: 1.6;
}

/* Estado de carga genérico */
.perfume-loading {
  padding: var(--sp-12) var(--sp-4);
  text-align: center;
  color: var(--color-text-muted);
}


/* ================================================================
   4. BOTONES
   Clases combinables: .btn + modificador de estilo + modificador de tamaño
   Ejemplo: <a class="btn btn--primary btn--lg">Ver catálogo</a>
================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn:active { transform: scale(0.98); }

/* Verde sólido */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

/* Contorno verde */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* WhatsApp */
.btn--whatsapp {
  background-color: var(--color-primary-light);
  color: var(--color-white);
  border-color: var(--color-primary-light);
}
.btn--whatsapp:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Oscuro / secundario */
.btn--dark {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border-color: var(--color-secondary);
}

/* Tamaños */
.btn--sm  { padding: 0.4rem 0.9rem; font-size: var(--text-sm); }
.btn--lg  { padding: 0.85rem 2rem;  font-size: var(--text-md); }
.btn--full { width: 100%; }