/* ==========================================================================
   BASE — Reset, Variables CSS, Estilos Globales
   Proyecto: Conoce Tu Magia — Bárbara Helueni
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Reset mínimo
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   2. Variables CSS — Paleta, Tipografía, Tokens de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Colores principales */
  --dark:          #1e1a17;
  --brown:         #8b7355;
  --light-brown:   #c4a882;

  /* Fondos */
  --pink-bg:       #f5e8e0;
  --gray-bg:       #f0eeeb;
  --testimonios-bg:#f3ede8;
  --white:         #ffffff;

  /* Colores de texto secundario */
  --text-body:     #3d3530;
  --text-muted:    #888888;
  --text-subtle:   #999999;

  /* Tipografías */
  --serif:         'Cormorant Garamond', serif;
  --sans:          'Montserrat', sans-serif;

  /* Espaciado base (múltiplos de 8px) */
  --space-xs:      0.5rem;    /* 8px  */
  --space-sm:      1rem;      /* 16px */
  --space-md:      1.5rem;    /* 24px */
  --space-lg:      2.5rem;    /* 40px */
  --space-xl:      4rem;      /* 64px */
  --space-xxl:     6rem;      /* 96px */

  /* Radios de borde */
  --radius-sm:     2px;
  --radius-md:     16px;
  --radius-pill:   50px;

  /* Transiciones */
  --transition-fast:   0.2s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.3s ease;

  /* Sombras */
  --shadow-nav:    0 1px 24px rgba(0, 0, 0, 0.07);
}


/* --------------------------------------------------------------------------
   3. Estilos globales del documento
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* Mejora de rendering tipográfico */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  color: var(--dark);
  /* Previene scroll horizontal por desbordamientos accidentales */
  overflow-x: hidden;
  /* Line-height base para legibilidad óptima */
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   4. Componentes de botón reutilizables
   -------------------------------------------------------------------------- */

/* Botón pill con borde blanco — usado en Hero */
.btn-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--white);
  border: 1.5px solid var(--white);
  border-radius: var(--radius-pill);
  padding: 0.95rem 3rem;
  text-decoration: none;
  transition: background var(--transition-normal), color var(--transition-normal);
}

.btn-pill:hover,
.btn-pill:focus-visible {
  background: var(--white);
  color: var(--dark);
}

/* Botón de carrito / acción secundaria — usado en tarjetas de producto */
.btn-cart {
  margin-top: var(--space-sm);
  display: inline-block;
  background: var(--dark);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-normal);
  /* Accesibilidad: el outline de foco usa el color de acento */
  outline-offset: 2px;
}

.btn-cart:hover,
.btn-cart:focus-visible {
  background: var(--brown);
}


/* --------------------------------------------------------------------------
   5. Título de sección reutilizable
   -------------------------------------------------------------------------- */
.section-title {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: var(--xl, 4rem);
  color: var(--dark);
}


/* --------------------------------------------------------------------------
   6. Accesibilidad — Focus visible global
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 3px;
}

/* Ocultar outline solo cuando se navega con mouse */
:focus:not(:focus-visible) {
  outline: none;
}