/* Manual de marca Municipalidad de Maipú:
   azul corporativo #10174A · tipografía Rubik Black (principal) y Medium (bajada)
   acentos: magenta #E51081 · amarillo #FAB624 · turquesa #41BBBE · etiqueta #1ECECA */

@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --azul: #10174A;
  --blanco: #FFFFFF;
  --magenta: #E51081;
  --amarillo: #FAB624;
  --turquesa: #41BBBE;
  --etiqueta: #1ECECA;
  --texto-suave: rgba(255, 255, 255, 0.78);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--azul);
  color: var(--blanco);
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Franja tricolor corporativa */
.franja {
  display: flex;
  height: 8px;
  flex-shrink: 0;
}
.franja span { flex: 1; }
.franja span:nth-child(1), .progreso span:nth-child(1) { background: var(--magenta); }
.franja span:nth-child(2), .progreso span:nth-child(2) { background: var(--amarillo); }
.franja span:nth-child(3), .progreso span:nth-child(3) { background: var(--turquesa); }

.contenido {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(40px, 8vh, 96px) 24px;
}

/* Logo con área de seguridad >= 10 % de su tamaño */
.logo { display: block; width: min(440px, 78vw); }
.logo img { display: block; width: 100%; height: auto; }

.etiqueta {
  margin: clamp(44px, 7vh, 72px) 0 0;
  padding: 6px 14px;
  background: var(--etiqueta);
  color: var(--azul);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  margin: 20px 0 0;
  font-weight: 900;
  font-size: clamp(2.1rem, 6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.bajada {
  margin: 18px 0 0;
  max-width: 34ch;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  line-height: 1.4;
  color: var(--texto-suave);
  text-wrap: balance;
}
.bajada strong { color: var(--blanco); font-weight: 900; letter-spacing: 0.02em; }

/* Barra de avance: la franja tricolor que se "construye" */
.progreso {
  display: flex;
  width: min(360px, 70vw);
  height: 6px;
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.progreso span {
  flex: 1;
  transform-origin: left center;
  animation: construir 3.6s ease-in-out infinite;
}
.progreso span:nth-child(2) { animation-delay: 0.3s; }
.progreso span:nth-child(3) { animation-delay: 0.6s; }

@keyframes construir {
  0%       { transform: scaleX(0); }
  35%, 75% { transform: scaleX(1); }
  100%     { transform: scaleX(0); transform-origin: right center; }
}

@media (prefers-reduced-motion: reduce) {
  .progreso span { animation: none; }
}

.pie {
  flex-shrink: 0;
  padding: 20px 24px 28px;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.pie p { margin: 0; }

@media (max-width: 600px) {
  .logo { width: min(230px, 60vw); }
  .etiqueta { font-size: 0.85rem; }
}