/* ==========================================================================
   Housing Project — main.css
   Tema, variables de marca, reset, tipografía y utilidades base.
   Paleta y escala extraídas de docs/06-diseno-ui.md y docs/02-arquitectura.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fuentes auto-hospedadas (subset latin: cubre castellano y catalán)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/manrope-400.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope-500.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend Deca";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/lexend-deca-500.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend Deca";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/lexend-deca-600.woff2") format("woff2");
}
@font-face {
  font-family: "Lexend Deca";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lexend-deca-700.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Custom properties (design tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Colores de marca (extraídos del logo: azul marino + dorado) */
  --hp-color-primary: #0e2440;
  --hp-color-primary-700: #0a1b30;
  --hp-color-primary-500: #1a3a6b;
  --hp-color-primary-100: #e4eaf3;
  --hp-color-accent: #e8c547;
  --hp-color-accent-600: #c9a538;
  /* Dorado oscuro SOLO para texto/símbolos sobre fondo claro (contraste AA ≥ 4.5:1) */
  --hp-color-accent-700: #8a6a16;
  --hp-color-accent-100: #fbf2cf;
  --hp-color-success: #16a34a;
  --hp-color-success-600: #128a3e;
  --hp-color-dark: #0a1b30;
  --hp-color-text: #172033;
  --hp-color-muted: #5b6477;
  --hp-color-line: #e2e5ec;
  --hp-color-bg: #ffffff;
  --hp-color-bg-alt: #f6f8fb;

  /* Tipografía */
  --hp-font-display: "Lexend Deca", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hp-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --hp-fs-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8rem);
  --hp-fs-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
  --hp-fs-base: clamp(1rem, 0.95rem + 0.2vw, 1.075rem);
  --hp-fs-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --hp-fs-xl: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  --hp-fs-2xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
  --hp-fs-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --hp-fs-4xl: clamp(2.75rem, 2rem + 3vw, 4.5rem);

  --hp-lh-tight: 1.1;
  --hp-lh-snug: 1.25;
  --hp-lh-normal: 1.5;
  --hp-lh-relaxed: 1.65;

  /* Espaciado */
  --hp-space-1: 0.25rem;
  --hp-space-2: 0.5rem;
  --hp-space-3: 0.75rem;
  --hp-space-4: 1rem;
  --hp-space-6: 1.5rem;
  --hp-space-8: 2rem;
  --hp-space-12: 3rem;
  --hp-space-16: 4rem;
  --hp-space-24: 6rem;
  --hp-space-32: 8rem;
  --hp-space-section: clamp(4rem, 6vw, 8rem);

  /* Layout */
  --hp-container: 1240px;
  --hp-container-narrow: 880px;
  --hp-radius-sm: 0.375rem;
  --hp-radius: 0.75rem;
  --hp-radius-lg: 1.5rem;
  --hp-shadow-sm: 0 1px 3px rgb(11 20 34 / 0.08);
  --hp-shadow-md: 0 6px 24px -8px rgb(11 20 34 / 0.18);
  --hp-shadow-lg: 0 24px 60px -20px rgb(11 20 34 / 0.25);

  --hp-header-h: 80px;
  --hp-transition: 0.2s ease;
}

/* --------------------------------------------------------------------------
   3. Modo de color
   El tema oscuro automático queda DESACTIVADO en Fase 1: la paleta clara tiene
   sus contrastes validados a WCAG AA (ver docs/06 §2). Un tema oscuro pulido
   (con tokens de cabecera/superficie independientes) se podrá añadir después.
   Forzamos esquema claro para evitar el modo oscuro del navegador en formularios.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   4. Reset moderno
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa el header sticky al saltar a anclas internas */
  scroll-padding-top: calc(var(--hp-header-h) + 1rem);
}

body {
  font-family: var(--hp-font-body);
  font-size: var(--hp-fs-base);
  line-height: var(--hp-lh-relaxed);
  color: var(--hp-color-text);
  background-color: var(--hp-color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--hp-color-primary-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--hp-color-primary-700);
}

ul,
ol {
  list-style-position: inside;
}

h1,
h2,
h3,
h4 {
  font-family: var(--hp-font-display);
  color: var(--hp-color-primary);
  line-height: var(--hp-lh-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--hp-fs-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--hp-fs-2xl);
  font-weight: 700;
  line-height: var(--hp-lh-snug);
}
h3 {
  font-size: var(--hp-fs-xl);
  font-weight: 600;
  line-height: var(--hp-lh-snug);
}
h4 {
  font-size: var(--hp-fs-lg);
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

:target {
  scroll-margin-top: calc(var(--hp-header-h) + 1rem);
}

/* --------------------------------------------------------------------------
   5. Accesibilidad: foco visible, skip link, contenido oculto
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--hp-color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--hp-color-primary);
  color: #fff;
  border-radius: var(--hp-radius-sm);
  font-weight: 600;
  transition: top var(--hp-transition);
}
.skip-link:focus {
  top: 1rem;
  color: #fff;
}

/* --------------------------------------------------------------------------
   6. Layout: contenedor y secciones
   -------------------------------------------------------------------------- */
.container-hp {
  width: 100%;
  max-width: var(--hp-container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.container-narrow {
  max-width: var(--hp-container-narrow);
}

.section {
  padding-block: var(--hp-space-section);
}
.section--alt {
  background-color: var(--hp-color-bg-alt);
}
.section--dark {
  background-color: var(--hp-color-primary);
  color: #fff;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: #fff;
}

.section__head {
  max-width: 46rem;
  margin-bottom: var(--hp-space-12);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--hp-font-display);
  font-weight: 600;
  font-size: var(--hp-fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-color-accent-700);
  margin-bottom: var(--hp-space-3);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--hp-color-accent);
}
.section__head--center .eyebrow::before {
  display: none;
}

.lead {
  font-size: var(--hp-fs-lg);
  color: var(--hp-color-muted);
}

/* --------------------------------------------------------------------------
   7. Utilidades
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-accent { color: var(--hp-color-accent-700); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flow > * + * { margin-top: var(--hp-space-4); }
.flow-lg > * + * { margin-top: var(--hp-space-8); }

.grid {
  display: grid;
  gap: var(--hp-space-6);
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.i-12 { width: 12px; height: 12px; }
.i-16 { width: 16px; height: 16px; }

@media (max-width: 1099px) {
  .d-none-mobile { display: none !important; }
}

.chip {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  background: var(--hp-color-primary-100);
  color: var(--hp-color-primary);
  font-size: var(--hp-fs-sm);
  font-weight: 600;
  text-decoration: none;
}
a.chip:hover {
  background: var(--hp-color-accent);
  color: var(--hp-color-dark);
}

/* --------------------------------------------------------------------------
   8. Reducción de movimiento (WCAG 2.2 — respeta preferencia del usuario)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}