/* Prelo — cuerpo UI */
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Hairline.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Hairline Italic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-ExtraLight Italic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Light Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Book Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Medium Italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-SemiBold Italic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Bold Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-ExtraBold Italic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo";
  src: url("../fonts/Prelo-Black Italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Prelo Slab — titulares */
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Hairline.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Hairline Italic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-ExtraLight Italic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Light Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Book Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Medium Italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-SemiBold Italic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Bold Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-ExtraBold Italic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Prelo Slab";
  src: url("../fonts/PreloSlab-Black Italic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Pridi — acento / titulares alternativos */
@font-face {
  font-family: "Pridi";
  src: url("../fonts/Pridi-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pridi";
  src: url("../fonts/Pridi-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pridi";
  src: url("../fonts/Pridi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pridi";
  src: url("../fonts/Pridi-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pridi";
  src: url("../fonts/Pridi-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pridi";
  src: url("../fonts/Pridi-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typography: Prelo, Prelo Slab, Pridi */
  --font-family-prelo: "Prelo", ui-sans-serif, system-ui, sans-serif;
  --font-family-prelo-slab: "Prelo Slab", "Prelo", ui-serif, serif;
  --font-family-pridi: "Pridi", ui-serif, serif;
  --font-family-base: var(--font-family-prelo);
  --font-family-heading: var(--font-family-prelo-slab);
  --font-family-accent: var(--font-family-pridi);
  --font-size-xs: 0.82rem;
  --font-size-sm: 0.92rem;
  --font-size-md: 0.95rem;
  --font-size-lg: 1.8rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --line-height-base: 1.4;

  /* Text colors */
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-inverse: #ffffff;
  --color-text-link: #1d4ed8;
  --color-text-error: #dc2626;
  --color-text-success: #16a34a;

  /* Surface colors */
  --color-surface-page-start: #ffdd00;
  --color-surface-page-end: #FFCC00;
  --color-surface-card: #ffffff;
  --color-surface-muted: #f8fafc;

  /* Border colors */
  --color-border-default: #cbd5e1;
  --color-border-accent: #1d4ed8;

  /* Action colors */
  --color-action-primary: #FFCC00;
  --color-action-primary-text: #0f265c;

  /* Admin sidebar (superAdmin) */
  --color-admin-nav-bg: #ffffff;
  --color-admin-nav-button: #dfe0e2;

  /* Layout spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 18px;
  --space-6: 24px;
  --space-7: 28px;

  /* Radius and shadows */
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 20px 60px rgba(2, 6, 23, 0.35);
  --shadow-button: 0 4px 14px rgba(15, 23, 42, 0.12);
  --shadow-button-hover: 0 12px 32px rgba(15, 23, 42, 0.22);

  /* Motion (used by JS / GSAP) */
  --motion-button-duration-in: 0.28;
  --motion-button-duration-out: 0.32;
  --motion-button-scale-hover: 1.02;
  --motion-button-y-hover: -2px;

  /* Sizing */
  --auth-card-max-width: 460px;
}

/* Tipografia global */
body {
  font-family: var(--font-family-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
}

.auth-brand h1,
.admin-brand {
  font-family: var(--font-family-accent);
}