/* ============================================================================
   Tu Piel · Centro de Capacitación Estética — Fuentes locales
   Bajadas desde Google Fonts (vía gwfh.mranftl.com) el 2026-05-25.
   Todas las fuentes son SIL Open Font License 1.1 — uso comercial libre.

   USO EN HTML:
     <link rel="stylesheet" href="vistas/dist/fonts/tu-piel/tu-piel-fonts.css">

   USO EN CSS:
     h1 { font-family: 'Cormorant Garamond', Georgia, serif; }
     body { font-family: 'Manrope', system-ui, sans-serif; }
     code, .microcopy { font-family: 'JetBrains Mono', monospace; }

   FAMILIAS CARGADAS:
     CORE (default Tu Piel):
       • Cormorant Garamond  — display serif italiano (400, 500, 600 + italics)
       • Manrope             — sans humanista moderno (300, 400, 500, 600, 700, 800)
       • JetBrains Mono      — microcopy técnico (400, 500, 400italic)

     COMPLEMENTARIAS (segundo nivel):
       • Playfair Display    — alt serif fashion (400, 500, 600, 700 + italics)
       • Inter               — alt sans clínico (400, 500, 600, 700)
       • Lora                — serif texto cálido (400, 500, 600 + italics)
       • Plus Jakarta Sans   — sans contemporáneo (400, 500, 600, 700)

   font-display: swap → usa fuente del sistema mientras carga la web font,
   evita FOIT (flash of invisible text).
   ============================================================================ */

/* ─────── Cormorant Garamond ─────── */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('cormorant-garamond/cormorant-garamond-400.woff2') format('woff2'),
         url('cormorant-garamond/cormorant-garamond-400.ttf')   format('truetype');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('cormorant-garamond/cormorant-garamond-500.woff2') format('woff2'),
         url('cormorant-garamond/cormorant-garamond-500.ttf')   format('truetype');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('cormorant-garamond/cormorant-garamond-600.woff2') format('woff2'),
         url('cormorant-garamond/cormorant-garamond-600.ttf')   format('truetype');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('cormorant-garamond/cormorant-garamond-400italic.woff2') format('woff2'),
         url('cormorant-garamond/cormorant-garamond-400italic.ttf')   format('truetype');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('cormorant-garamond/cormorant-garamond-500italic.woff2') format('woff2'),
         url('cormorant-garamond/cormorant-garamond-500italic.ttf')   format('truetype');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('cormorant-garamond/cormorant-garamond-600italic.woff2') format('woff2'),
         url('cormorant-garamond/cormorant-garamond-600italic.ttf')   format('truetype');
}

/* ─────── Manrope ─────── */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('manrope/manrope-300.woff2') format('woff2'),
         url('manrope/manrope-300.ttf')   format('truetype');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('manrope/manrope-400.woff2') format('woff2'),
         url('manrope/manrope-400.ttf')   format('truetype');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('manrope/manrope-500.woff2') format('woff2'),
         url('manrope/manrope-500.ttf')   format('truetype');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('manrope/manrope-600.woff2') format('woff2'),
         url('manrope/manrope-600.ttf')   format('truetype');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('manrope/manrope-700.woff2') format('woff2'),
         url('manrope/manrope-700.ttf')   format('truetype');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('manrope/manrope-800.woff2') format('woff2'),
         url('manrope/manrope-800.ttf')   format('truetype');
}

/* ─────── JetBrains Mono ─────── */

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('jetbrains-mono/jetbrains-mono-400.woff2') format('woff2'),
         url('jetbrains-mono/jetbrains-mono-400.ttf')   format('truetype');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('jetbrains-mono/jetbrains-mono-500.woff2') format('woff2'),
         url('jetbrains-mono/jetbrains-mono-500.ttf')   format('truetype');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('jetbrains-mono/jetbrains-mono-400italic.woff2') format('woff2'),
         url('jetbrains-mono/jetbrains-mono-400italic.ttf')   format('truetype');
}

/* ─────── Playfair Display ─────── */

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('playfair-display/playfair-display-400.woff2') format('woff2'),
         url('playfair-display/playfair-display-400.ttf')   format('truetype');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('playfair-display/playfair-display-500.woff2') format('woff2'),
         url('playfair-display/playfair-display-500.ttf')   format('truetype');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('playfair-display/playfair-display-600.woff2') format('woff2'),
         url('playfair-display/playfair-display-600.ttf')   format('truetype');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('playfair-display/playfair-display-700.woff2') format('woff2'),
         url('playfair-display/playfair-display-700.ttf')   format('truetype');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('playfair-display/playfair-display-400italic.woff2') format('woff2'),
         url('playfair-display/playfair-display-400italic.ttf')   format('truetype');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('playfair-display/playfair-display-500italic.woff2') format('woff2'),
         url('playfair-display/playfair-display-500italic.ttf')   format('truetype');
}

/* ─────── Inter ─────── */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('inter/inter-400.woff2') format('woff2'),
         url('inter/inter-400.ttf')   format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('inter/inter-500.woff2') format('woff2'),
         url('inter/inter-500.ttf')   format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('inter/inter-600.woff2') format('woff2'),
         url('inter/inter-600.ttf')   format('truetype');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('inter/inter-700.woff2') format('woff2'),
         url('inter/inter-700.ttf')   format('truetype');
}

/* ─────── Lora ─────── */

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('lora/lora-400.woff2') format('woff2'),
         url('lora/lora-400.ttf')   format('truetype');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('lora/lora-500.woff2') format('woff2'),
         url('lora/lora-500.ttf')   format('truetype');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('lora/lora-600.woff2') format('woff2'),
         url('lora/lora-600.ttf')   format('truetype');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('lora/lora-400italic.woff2') format('woff2'),
         url('lora/lora-400italic.ttf')   format('truetype');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('lora/lora-500italic.woff2') format('woff2'),
         url('lora/lora-500italic.ttf')   format('truetype');
}

/* ─────── Plus Jakarta Sans ─────── */

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('plus-jakarta-sans/plus-jakarta-sans-400.woff2') format('woff2'),
         url('plus-jakarta-sans/plus-jakarta-sans-400.ttf')   format('truetype');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('plus-jakarta-sans/plus-jakarta-sans-500.woff2') format('woff2'),
         url('plus-jakarta-sans/plus-jakarta-sans-500.ttf')   format('truetype');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('plus-jakarta-sans/plus-jakarta-sans-600.woff2') format('woff2'),
         url('plus-jakarta-sans/plus-jakarta-sans-600.ttf')   format('truetype');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('plus-jakarta-sans/plus-jakarta-sans-700.woff2') format('woff2'),
         url('plus-jakarta-sans/plus-jakarta-sans-700.ttf')   format('truetype');
}

/* ============================================================================
   UTILIDADES — classes helper para usar las fuentes sin redefinir font-family
   ============================================================================ */

.font-display      { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-display-alt  { font-family: 'Playfair Display', 'Cormorant Garamond', serif; }
.font-serif        { font-family: 'Lora', 'Cormorant Garamond', Georgia, serif; }
.font-sans         { font-family: 'Manrope', system-ui, -apple-system, sans-serif; }
.font-sans-alt     { font-family: 'Inter', 'Manrope', system-ui, sans-serif; }
.font-sans-modern  { font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif; }
.font-mono         { font-family: 'JetBrains Mono', 'Courier New', monospace; }

/* Microcopy uppercase tracking (signature Tu Piel) */
.tp-microcopy {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85em;
}

/* Display italic editorial Tu Piel */
.tp-display-italic {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
}