/* ============================================
   RESET · HEAT & COLD CLUB
   variables.css — Identidad visual completa
   ============================================ */

:root {

  /* --- COLORES --- */

  /* Verdes principales */
  --color-bosque-nocturno: #1C2B1E;   /* Fondo principal */
  --color-musgo-profundo:  #243426;   /* Tarjetas y superficies */
  --color-bosque:          #3A5A3E;   /* Bordes y divisores */
  --color-dosel:           #5A8C5E;   /* Acento y etiquetas */
  --color-salvia:          #8AB88E;   /* Texto secundario */

  /* Texto */
  --color-blanco:          #FFFFFF;   /* Texto principal y logo */

  /* Acentos funcionales */
  --color-brasa:           #C9875A;   /* Calor — sauna seco */
  --color-brasa-fondo:     #3D2A1A;   /* Fondo para elementos de calor */
  --color-agua-fria:       #5A8FA8;   /* Frío — inmersión */
  --color-agua-fria-fondo: #1A2530;   /* Fondo para elementos de frío */

  /* --- TIPOGRAFÍA --- */

  --font-display: 'Archivo Black', sans-serif;  /* Titulares */
  --font-body:    'DM Sans', sans-serif;        /* Cuerpo y UI */

  /* Tamaños */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  38px;
  --text-3xl:  56px;
  --text-hero: clamp(3rem, 10vw, 5rem);

  /* Espaciado de letras */
  --tracking-tight:  0.02em;
  --tracking-normal: 0.04em;
  --tracking-wide:   0.12em;
  --tracking-wider:  0.22em;
  --tracking-widest: 0.28em;

  /* --- ESPACIADO --- */

  --space-xs:  0.5rem;   /*  8px */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* --- BORDES --- */

  --border-thin:   0.5px solid var(--color-bosque);
  --border-medium: 1px solid var(--color-bosque);
  --border-accent: 2px solid var(--color-dosel);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* --- TRANSICIONES --- */

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- LAYOUT --- */

  --max-width: 1100px;
  --container-padding: 1.5rem;
}


/* ============================================
   ESTILOS BASE
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: 1.7;
  background-color: var(--color-bosque-nocturno);
  color: var(--color-blanco);
  -webkit-font-smoothing: antialiased;
}

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

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


/* ============================================
   TIPOGRAFÍA — CLASES DE UTILIDAD
   ============================================ */

.display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  text-transform: uppercase;
}

.display-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  letter-spacing: var(--tracking-normal);
  line-height: 1;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-dosel);
}

.body-light {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.75;
  color: var(--color-salvia);
}


/* ============================================
   LAYOUT — CONTENEDOR
   ============================================ */

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--space-3xl) 0;
}


/* ============================================
   COMPONENTES BASE
   ============================================ */

/* Botón principal */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border: 1.5px solid var(--color-blanco);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-blanco);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.btn:hover {
  background: var(--color-blanco);
  color: var(--color-bosque-nocturno);
}

/* Botón acento */
.btn-acento {
  border-color: var(--color-dosel);
  color: var(--color-dosel);
}

.btn-acento:hover {
  background: var(--color-dosel);
  color: var(--color-bosque-nocturno);
}

/* Tarjeta */
.card {
  background: var(--color-musgo-profundo);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* Divisor */
.divider {
  width: 40px;
  height: 1px;
  background: var(--color-dosel);
  margin: var(--space-md) 0;
}

/* Badge calor */
.badge-calor {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-brasa-fondo);
  color: var(--color-brasa);
  border-radius: var(--radius-full);
  padding: 3px 12px;
}

/* Badge frío */
.badge-frio {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--color-agua-fria-fondo);
  color: var(--color-agua-fria);
  border-radius: var(--radius-full);
  padding: 3px 12px;
}


/* ============================================
   FORMULARIO — LISTA DE ESPERA
   ============================================ */

.form-espera {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.form-espera input[type="email"] {
  flex: 1;
  min-width: 240px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  padding: 0.85rem 1.25rem;
  background: var(--color-musgo-profundo);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  color: var(--color-blanco);
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-espera input[type="email"]::placeholder {
  color: var(--color-dosel);
  opacity: 0.7;
}

.form-espera input[type="email"]:focus {
  border-color: var(--color-dosel);
}


/* ============================================
   RESPONSIVE — BREAKPOINTS
   ============================================ */

@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
    --space-3xl: 2.5rem;
  }

  .display {
    font-size: var(--text-xl);
  }

  .form-espera {
    flex-direction: column;
  }

  .form-espera input[type="email"] {
    min-width: unset;
    width: 100%;
  }
}