/* ════════════════════════════════════════════════════
   PHSICO STUDIOS — style.css
   Estilos globales. Se linkea desde todas las páginas.
   Los estilos específicos de cada página van en su
   propio <style> dentro del HTML.
════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   SISTEMA DE COLOR
   Usar siempre estas variables. Nunca hex directos.
   ────────────────────────────────────────────────────
   --black     #1a1a19   Negros / texto principal
   --white     #f7f7f5   Blancos / fondos
   --middle-0  #696765   Neutros suaves (placeholders, metadata)
   --middle-1  #c7c7c7   Grises claros  (uso ocasional)
   --middle-2  #333332   Grises oscuros (uso ocasional)
   --special-1 #ffee76   Hover ítems de menú
═══════════════════════════════════════════════════ */
:root {
  --black:     #1a1a19;
  --white:     #f7f7f5;
  --middle-0:  #696765;   /* Neutros suaves: porcentaje loader, placeholders */
  --middle-1:  #c7c7c7;
  --middle-2:  #333332;
  --special-1: #ffee76;   /* Hover ítems de menú */
}


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

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "panel-mono", monospace;
  color: var(--black);
}


/* ═══════════════════════════════════════════════════
   SISTEMA TIPOGRÁFICO — Desktop
═══════════════════════════════════════════════════ */

/* DISPLAY — Texto de impacto grande */
.display {
  font-size: 64px;
  font-weight: 500;
  letter-spacing: -4px;
  line-height: 70px;
}

/* H1 — Título de sección o proyecto */
.h1 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -2px;
  line-height: 40px;
}

/* P — Cuerpo de texto, descripciones, chat */
p {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 22px;
  margin-bottom: 15px;
}

/* LABEL — Etiquetas, categorías, metadata */
.label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 16px;
  text-transform: uppercase;
}

/* MODIFICADORES — combinables con cualquier clase */
.bold   { font-weight: 600; letter-spacing: -0.1px; }
.italic { font-style: italic; letter-spacing: -0.3px; }


/* ═══════════════════════════════════════════════════
   SISTEMA TIPOGRÁFICO — Mobile (max 768px)
   Ajustar aquí sin tocar los valores desktop.
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .display {
    font-size: 36px;
    letter-spacing: -0.5px;
    line-height: 40px;
  }

  .h1 {
    font-size: 24px;
    letter-spacing: 0px;
    line-height: 30px;
  }

  p {
    font-size: 14px;
    letter-spacing: 0.8px;
    line-height: 21px;
  }

  .label {
    font-size: 10px;
    letter-spacing: 2px;
  }

}


/* ─────────────────────────────────────────────────
   CONTENEDOR PRINCIPAL
   Máximo 700px, siempre centrado.
───────────────────────────────────────────────── */
.contenedor {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}

@media (max-width: 768px) {
  .contenedor {
    margin-left: 7%;
    margin-right: 7%;
    padding-left: 25px;
    padding-right: 25px;
  }
}