/* ============================================================
   PENALTY CORNER — CSS Custom Properties
   Guía de estilo v1.0 · Junio 2026
   ============================================================ */

/* ── FUENTES (archivos locales) ──────────────────────────── */
@font-face {
  font-family: 'Boldonse';
  src: url('../Fonts/Boldonse-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('../Fonts/FamiljenGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../Fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ── FAMILIAS TIPOGRÁFICAS ─────────────────────────────── */
  --font-display:     'Boldonse', sans-serif;        /* Headings H1–H4 */
  --font-body:        'Familjen Grotesk', sans-serif; /* Cuerpo, subtítulos */
  --font-mono:        'JetBrains Mono', monospace;    /* Pre-titles, tags, código */


  /* ── ESCALA TIPOGRÁFICA — HEADINGS (Boldonse Regular) ──── */
  --text-h1-size:     65px;
  --text-h1-height:   1.4;     /* 140% */
  --text-h1-spacing:  0.03em;  /* 3% */

  --text-h2-size:     48px;
  --text-h2-height:   1.7;     /* 170% */
  --text-h2-spacing:  0.01em;  /* 1% */

  --text-h3-size:     36px;
  --text-h3-height:   1.5;     /* 150% */
  --text-h3-spacing:  0.01em;

  --text-h4-size:     24px;
  --text-h4-height:   1.5;
  --text-h4-spacing:  0.01em;


  /* ── SUBTÍTULO (Familjen Grotesk Bold) ─────────────────── */
  --text-subtitle1-size:    36px;
  --text-subtitle1-height:  1.0;     /* 100% */
  --text-subtitle1-spacing: 0.01em;
  --text-subtitle1-weight:  700;


  /* ── PRE-TITLE (JetBrains Mono Medium) ─────────────────── */
  --text-pretitle-size:     14px;
  --text-pretitle-height:   1.3;     /* 130% */
  --text-pretitle-spacing:  0.01em;
  --text-pretitle-weight:   500;


  /* ── BODY TEXT (Familjen Grotesk) ──────────────────────── */
  --text-body-size:         16px;
  --text-body-height:       1.25;    /* 125% */
  --text-body-spacing:      0.01em;

  --text-body-bold-weight:  700;
  --text-body-medium-weight:500;
  --text-body-regular-weight:400;


  /* ── HIGHLIGHTED TEXT (JetBrains Mono) ─────────────────── */
  --text-highlight-size:    16px;
  --text-highlight-height:  1.25;
  --text-highlight-spacing: 0.01em;

  --text-highlight-bold-weight:   700;
  --text-highlight-medium-weight: 500;
  --text-highlight-regular-weight:400;


  /* ── SMALL TEXT (Familjen Grotesk Regular) ──────────────── */
  --text-small-size:        14px;
  --text-small-height:      1.25;
  --text-small-spacing:     0.01em;
  --text-small-weight:      400;


  /* ── SMALL HIGHLIGHTED (JetBrains Mono Regular) ─────────── */
  --text-small-highlight-size:    14px;
  --text-small-highlight-height:  1.25;
  --text-small-highlight-spacing: 0.01em;
  --text-small-highlight-weight:  400;


  /* ── XS TEXT (Familjen Grotesk Regular) ─────────────────── */
  --text-xs-size:           12px;
  --text-xs-height:         1.25;
  --text-xs-spacing:        0.01em;
  --text-xs-weight:         400;


  /* ── XS HIGHLIGHTED (JetBrains Mono Regular) ────────────── */
  --text-xs-highlight-size:    12px;
  --text-xs-highlight-height:  1.25;
  --text-xs-highlight-spacing: 0.01em;
  --text-xs-highlight-weight:  400;


  /* ── PALETA DE COLOR — PRIMARIOS ────────────────────────── */
  --color-negro:        #18231C;
  --color-verde:        #77FF9B;
  --color-blanco:       #FCFBFC;


  /* ── PALETA DE COLOR — SECUNDARIOS ─────────────────────── */
  --color-gris-oscuro:  #595959;
  --color-gris-claro:   #959393;
  --color-verde-oscuro: #00AF76;


  /* ── ALIASES SEMÁNTICOS (TEMA CLARO — como el Figma) ────── */
  --color-bg:           var(--color-blanco);  /* fondo de página: blanco */
  --color-surface:      var(--color-blanco);  /* cards claras (#FCFBFC) */
  --color-surface-dark: var(--color-negro);   /* cards / paneles oscuros */
  --color-bg-surface:   #FCFBFC;              /* alias retro-compatibilidad */
  --color-text:         var(--color-negro);   /* texto principal: oscuro */
  --color-text-muted:   var(--color-gris-oscuro);
  --color-text-invert:  var(--color-blanco);  /* texto sobre superficies oscuras */
  --color-accent:       var(--color-verde);
  --color-accent-dark:  var(--color-verde-oscuro);
  --color-border:       var(--grid-line); /* marcos de módulos = mismo tono que la cuadrícula */
  --color-border-dark:  rgba(252, 251, 252, 0.16); /* borde sobre oscuro */
  --grid-line:          rgba(24, 35, 28, 0.045); /* líneas del fondo cuadriculado */


  /* ── ESPACIADO Y LAYOUT ─────────────────────────────────── */
  --margin-full:        24px;
  --margin-inner:       2px;    /* gap mínimo entre elementos */

  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   12px;


  /* ── ÍCONOS ─────────────────────────────────────────────── */
  --icon-size:          24px;   /* alto y ancho estándar */
  --icon-stroke:        1.5px;  /* grosor de trazo */


  /* ── INPUTS ─────────────────────────────────────────────── */
  --input-height:       48px;
  --input-padding-x:    16px;
  --input-padding-y:    12px;
  --input-border:       1px solid rgba(24, 35, 28, 0.18);
  --input-border-focus: 1px solid var(--color-verde-oscuro);
  --input-bg:           #FCFBFC;
  --input-text:         var(--color-negro);
  --input-placeholder:  var(--color-gris-claro);
  --input-radius:       var(--border-radius-md);


  /* ── TRANSICIONES ───────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;

}


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

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

body {
  background-color: var(--color-bg);
  /* fondo cuadriculado sutil (Cuadrille del Figma) sobre las secciones claras */
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-height);
  letter-spacing: var(--text-body-spacing);
  font-weight: var(--text-body-regular-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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


/* ============================================================
   CLASES DE TIPOGRAFÍA (listas para usar en el HTML)
   ============================================================ */

/* Headings */
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-height);
  letter-spacing: var(--text-h1-spacing);
  font-weight: 400;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-height);
  letter-spacing: var(--text-h2-spacing);
  font-weight: 400;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-height);
  letter-spacing: var(--text-h3-spacing);
  font-weight: 400;
}
.h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-height);
  letter-spacing: var(--text-h4-spacing);
  font-weight: 400;
}

/* Subtítulo */
.subtitle-1 {
  font-family: var(--font-body);
  font-size: var(--text-subtitle1-size);
  line-height: var(--text-subtitle1-height);
  letter-spacing: var(--text-subtitle1-spacing);
  font-weight: var(--text-subtitle1-weight);
}

/* Pre-title (ej: "/Familia 01") */
.pre-title {
  font-family: var(--font-mono);
  font-size: var(--text-pretitle-size);
  line-height: var(--text-pretitle-height);
  letter-spacing: var(--text-pretitle-spacing);
  font-weight: var(--text-pretitle-weight);
  color: var(--color-accent);
  text-transform: uppercase;
}

/* Variante "etiqueta": barra en verde secundario + texto en gris oscuro */
.pre-title--label {
  color: var(--color-gris-oscuro);
  text-transform: none;
}
.pre-title__slash { color: var(--color-accent-dark); }

/* Body text */
.body-bold    { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-height); letter-spacing: var(--text-body-spacing); font-weight: var(--text-body-bold-weight); }
.body-medium  { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-height); letter-spacing: var(--text-body-spacing); font-weight: var(--text-body-medium-weight); }
.body-regular { font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-height); letter-spacing: var(--text-body-spacing); font-weight: var(--text-body-regular-weight); }

/* Highlighted text (mono) */
.highlight-bold    { font-family: var(--font-mono); font-size: var(--text-highlight-size); line-height: var(--text-highlight-height); letter-spacing: var(--text-highlight-spacing); font-weight: var(--text-highlight-bold-weight); }
.highlight-medium  { font-family: var(--font-mono); font-size: var(--text-highlight-size); line-height: var(--text-highlight-height); letter-spacing: var(--text-highlight-spacing); font-weight: var(--text-highlight-medium-weight); }
.highlight-regular { font-family: var(--font-mono); font-size: var(--text-highlight-size); line-height: var(--text-highlight-height); letter-spacing: var(--text-highlight-spacing); font-weight: var(--text-highlight-regular-weight); }

/* Small text */
.small-regular    { font-family: var(--font-body); font-size: var(--text-small-size); line-height: var(--text-small-height); letter-spacing: var(--text-small-spacing); font-weight: var(--text-small-weight); }
.small-highlight  { font-family: var(--font-mono); font-size: var(--text-small-highlight-size); line-height: var(--text-small-highlight-height); letter-spacing: var(--text-small-highlight-spacing); font-weight: var(--text-small-highlight-weight); }

/* XS text */
.xs-regular   { font-family: var(--font-body); font-size: var(--text-xs-size); line-height: var(--text-xs-height); letter-spacing: var(--text-xs-spacing); font-weight: var(--text-xs-weight); }
.xs-highlight { font-family: var(--font-mono); font-size: var(--text-xs-highlight-size); line-height: var(--text-xs-highlight-height); letter-spacing: var(--text-xs-highlight-spacing); font-weight: var(--text-xs-highlight-weight); }


/* ============================================================
   CLASES DE COLOR UTILITARIAS
   ============================================================ */
.text-accent      { color: var(--color-accent); }
.text-muted       { color: var(--color-text-muted); }
.text-dark        { color: var(--color-gris-oscuro); }
.bg-surface       { background-color: var(--color-bg-surface); }
.bg-accent        { background-color: var(--color-accent); color: var(--color-negro); }


/* ============================================================
   INPUTS BASE
   ============================================================ */
.input {
  width: 100%;
  height: var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  letter-spacing: var(--text-body-spacing);
  transition: border-color var(--transition-fast);
  outline: none;
}
.input::placeholder {
  color: var(--input-placeholder);
}
.input:focus {
  border: var(--input-border-focus);
}

textarea.input {
  height: auto;
  min-height: 120px;
  resize: vertical;
}


/* ============================================================
   BOTONES BASE
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 600;
  letter-spacing: var(--text-body-spacing);
  border-radius: 10px;
  transition: opacity var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { opacity: 0.85; }

/* Flecha → integrada en los botones */
.btn .btn__arrow,
.btn::after { transition: transform var(--transition-fast); }

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-negro);
  border: 2px solid var(--color-accent);
}

/* Outline para fondo CLARO (texto/borde oscuro) */
.btn-outline {
  background-color: transparent;
  color: var(--color-negro);
  border: 2px solid var(--color-negro);
}
.btn-outline:hover {
  background-color: var(--color-negro);
  color: var(--color-blanco);
  opacity: 1;
}

/* Outline para fondo OSCURO (texto/borde claro) */
.btn-outline-light {
  background-color: transparent;
  color: var(--color-blanco);
  border: 2px solid var(--color-blanco);
}
.btn-outline-light:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  opacity: 1;
}

/* Botón de texto subrayado (ej: "Ver DEMO" del hero) */
.btn-underline {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  padding: 6px 2px;
  color: var(--color-blanco);
}

/* ── SKIP LINK (accesibilidad) ──────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 12px 20px;
  background-color: var(--color-negro);
  color: var(--color-verde);
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}
.btn-underline:hover { color: var(--color-accent); opacity: 1; }