@font-face {
  font-family:'PP Mori';
  src:url('../fonts/PPMori-Extralight.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'PP Mori';
  src:url('../fonts/PPMori-Regular.woff2') format('woff2'),url('../fonts/PPMori-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'PP Mori';
  src:url('../fonts/PPMori-RegularItalic.woff2') format('woff2'),url('../fonts/PPMori-RegularItalic.woff') format('woff');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

@font-face {
  font-family:'PP Mori';
  src:url('../fonts/PPMori-SemiBold.woff2') format('woff2'),url('../fonts/PPMori-SemiBold.woff') format('woff');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'PP Mori';
  src:url('../fonts/PPMori-SemiBoldItalic.woff2') format('woff2'),url('../fonts/PPMori-SemiBoldItalic.woff') format('woff');
  font-weight:600;
  font-style:italic;
  font-display:swap;
}

*,*::before,*::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}

:root {
  --verde-urbano:#275C49;
  --verde-hero:#0A3231;
  --violeta-urbano:#4A2E47;
  --arena:#F7F1D4;
  --maiz:#F0DB91;
  --negro:#1A1A1A;
  --blanco:#FFFFFF;
  --offwhite:#F9F7EC;
  --verde-rgb:10,50,49;
  --verde-urbano-rgb:39,92,73;
  --arena-rgb:247,241,212;
  --violeta-rgb:74,46,71;
  --maiz-rgb:240,219,145;
  --negro-rgb:26,26,26;
  --blanco-rgb:255,255,255;
  --overlay-hero:rgba(var(--verde-rgb),0.82);
  --verde-translucido:rgba(var(--verde-rgb),0.88);
  --blanco-opaco:rgba(var(--blanco-rgb),0.88);
  --blanco-translucido:rgba(var(--blanco-rgb),0.45);
  --negro-sombra:rgba(var(--negro-rgb),0.15);
  --maiz-translucido:rgba(var(--maiz-rgb),0.35);
  --gris-medio:#696969;
  --gris-medio-translucido:rgba(105,105,105,0.35);
  --sombra-suave:0 8px 32px var(--negro-sombra);
  --sombra-card:0 20px 40px rgba(var(--negro-rgb),0.12);
  --font-primary:'PP Mori',Arial,sans-serif;
  --font-secondary:'PP Mori',Arial,sans-serif;
  --transition:0.35s ease;
  --radius:12px;
  --max-width:1400px;
  --padding-x:4vw;
}

html {
  scroll-behavior:smooth;
  overflow-x:hidden
}

body {
  font-family:var(--font-primary);
  background:var(--offwhite);
  color:var(--negro);
  overflow-x:hidden
}

section,footer,#banner,nav {
  width:100%;
  max-width:100vw
}

/* ===== SECCIONES COMUNES ===== */
section {
  padding:8rem var(--padding-x)
}

.section-label {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.5rem;
}

.section-label-line {
  width:32px;
  height:1px;
  background:var(--verde-urbano)
}

.section-label-text {
  font-size:0.7rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--verde-urbano);
  font-weight:500;
}

.section-title {
  font-family:var(--font-secondary);
  font-size:clamp(2.4rem,4.5vw,4rem);
  font-weight:400;
  line-height:1.1;
  color:var(--verde-hero);
  margin-bottom:1.5rem;
}

.section-title em {
  font-style:italic;
  color:var(--verde-urbano)
}

.section-container {
  width:100%;
  max-width:var(--max-width);
  margin:0 auto
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

/* ===== ACCESIBILIDAD (WCAG 2.2 AA) ===== */

/* Foco visible para navegación por teclado */
:focus-visible {
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* Skip link: visible solo al recibir foco */
.skip-link {
  position:fixed;
  top:-100px;
  left:1rem;
  z-index:3000;
  background:var(--verde-hero);
  color:var(--arena);
  padding:0.75rem 1.25rem;
  border-radius:0 0 10px 10px;
  font-size:0.85rem;
  text-decoration:none;
  transition:top .2s ease;
}

.skip-link:focus {
  top:0;
}

/* Reduced motion: colapsa animaciones no esenciales a su estado final.
   Único uso permitido de !important en el proyecto. */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }

  html {
    scroll-behavior:auto
  }

}