/* ==========================================================================
   Facultad de Diseño — Universidad del Azuay
   Base: tokens de diseño, elementos base y utilidades propias
   Paleta estricta blanco y negro (las imágenes y videos conservan su color)
   Requiere Bootstrap 5.3
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Escala de grises — única fuente de color de la interfaz */
  --ink-000: #ffffff;
  --ink-050: #f5f5f5;
  --ink-100: #e8e8e8;
  --ink-200: #d4d4d4;
  --ink-300: #a3a3a3;
  --ink-400: #737373;
  --ink-500: #525252;
  --ink-700: #262626;
  --ink-900: #0a0a0a;

  /* Tokens semánticos */
  --color-bg: var(--ink-000);
  --color-bg-alt: var(--ink-050);
  --color-bg-inverse: var(--ink-900);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-text-inverse: var(--ink-000);
  --color-border: var(--ink-200);
  --color-border-strong: var(--ink-900);

  /* Tipografía institucional: Rubik para títulos y encabezados,
     Raleway para todo lo demás */
  --font-display: "Rubik", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* Ritmo */
  --section-pad-y: clamp(3.5rem, 8vw, 6.5rem);
  --radius: 0;

  /* Sobrescritura de variables Bootstrap */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-link-color: var(--color-text);
  --bs-link-hover-color: var(--ink-500);
  --bs-border-color: var(--color-border);
  --bs-border-radius: 0;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* Valor de respaldo: main.js lo recalcula con la altura real de la cabecera */
  scroll-padding-top: 120px;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ink-900);
  color: var(--ink-000);
}

h1, h2, h3, .display-font {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-text);
}

a {
  color: var(--color-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover { color: var(--ink-500); }

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

/* Enlace de salto para teclado / lector de pantalla */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--ink-900);
  color: var(--ink-000);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
  color: var(--ink-000);
  outline: 3px solid var(--ink-000);
  outline-offset: -6px;
}

/* Foco visible coherente en toda la interfaz */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
[tabindex]:focus-visible {
  outline: transparent;
  outline-offset: 3px;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. Utilidades propias
   -------------------------------------------------------------------------- */
.bg-alt { background-color: var(--color-bg-alt); }
.bg-inverse { background-color: var(--color-bg-inverse); color: var(--color-text-inverse); }
.text-muted-ink { color: var(--color-text-muted) !important; }

.section { padding-block: var(--section-pad-y); }

/* Etiqueta pequeña sobre títulos de sección */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 0.5rem;
}

.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.section-head .rule {
  width: 72px;
  height: 3px;
  background: var(--ink-900);
  margin-top: 1.25rem;
}