/* Es natural ayudar a Caldas
   Sistema visual derivado del afiche oficial del Fondo Solidario por los Empresarios
   de Caldas. Los colores se muestrearon del archivo, no se eligieron a ojo:
   amarillo #FFCA05, teal de panel #098591, fondo #093A3E, verdes #25502F y #5B6822. */

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

:root {
  --teal-950: #052a2f;
  --teal-900: #093a3e;
  --teal-850: #0a464e;
  --teal-800: #0a4e58;
  --teal-700: #076b78;
  --teal-600: #098591;
  --verde-900: #1b3d22;
  --verde-700: #25502f;
  --verde-600: #2f5c30;
  --oliva-700: #4a5a1c;
  --azul-700: #0a5f80;
  --naranja-700: #96520f;
  --amarillo: #ffca05;
  --amarillo-osc: #c99a00;
  --crema: #f6f7f7;

  /* El afiche es diurno: azul cielo, verde luminoso, cyan brillante. La primera
     versión muestreó sus sombras y no su campo dominante, y la página quedó
     nocturna: casi negro en dos tercios del scroll, cero azul en pantalla con la
     vitrina vacía, y el "más colorcitos" cumplido solo en el CSS. Estos tres
     tonos traen de vuelta la mitad clara del afiche. */
  --cielo-teal: #d3edf0;
  --cielo-verde: #e0f1da;
  --cielo-azul: #d4e9f6;

  --ancho: 1180px;
  --radio: 26px;
  --radio-sm: 14px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: #fff;
  background: var(--teal-900);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--amarillo);
}

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--amarillo);
  color: #000;
  padding: 12px 20px;
  font-weight: 800;
  z-index: 99;
}
.saltar:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Barra institucional ---------- */

.institucional {
  background: var(--teal-950);
  padding: 11px 0;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  color: #9ec6cc;
}
.institucional .envoltura {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.institucional strong {
  color: var(--amarillo);
  font-weight: 800;
}

/* ---------- Portada ---------- */

.portada {
  position: relative;
  padding: 74px 0 64px;
  isolation: isolate;
  overflow: hidden;
}

/* Duotono: la foto va en escala de grises y el color lo pone el degradado encima,
   igual que en el afiche. Dos capas para que el teal domine y el verde entre por
   las esquinas bajas. */
/* Las dos capas del fondo son elementos reales, no ::before y ::after. Los
   pseudo-elementos se veían idénticos en el navegador pero desaparecían de toda
   captura DOM-render, así que la página quedaba imposible de verificar. */
.portada-foto,
.portada-velo {
  position: absolute;
  inset: 0;
}
.portada-foto {
  z-index: 0;
  background-image: url('/img/catedral.jpg');
  background-size: cover;
  background-position: 72% 22%;
  filter: grayscale(1) contrast(1.3) brightness(0.92);
}
/* Dos trabajos en una capa. El velo horizontal, que va encima, oscurece la
   izquierda para que el titular tenga contraste y deja ver la catedral a la
   derecha; debajo, el tinte teal y verde convierte la foto en duotono, como en
   el afiche. La asimetría es a propósito. */
.portada-velo {
  z-index: 1;
  background:
    linear-gradient(96deg, rgba(5, 42, 47, 0.94) 0%, rgba(5, 42, 47, 0.9) 32%, rgba(5, 42, 47, 0.5) 66%, rgba(5, 42, 47, 0.12) 100%),
    radial-gradient(120% 90% at 12% 6%, rgba(74, 90, 28, 0.55) 0%, rgba(9, 58, 62, 0) 60%),
    radial-gradient(110% 95% at 90% 96%, rgba(27, 61, 34, 0.62) 0%, rgba(9, 58, 62, 0) 58%),
    linear-gradient(158deg, rgba(9, 58, 62, 0.72) 0%, rgba(7, 107, 120, 0.66) 48%, rgba(37, 80, 47, 0.8) 100%);
}
.portada > .envoltura {
  position: relative;
  z-index: 2;
}

.marca {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amarillo);
  margin: 0 0 18px;
}

/* El titular repite el gesto del afiche: una parte en blanco, la otra sobre un
   bloque amarillo. No va centrado. */
.titular {
  font-weight: 800;
  font-size: clamp(2.6rem, 8.4vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin: 0 0 26px;
  max-width: 15ch;
}
.titular .resalte {
  display: inline-block;
  background: var(--amarillo);
  color: var(--teal-950);
  padding: 0.02em 0.16em 0.08em;
  border-radius: 10px;
  margin-top: 0.08em;
}

.entrada {
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  max-width: 52ch;
  margin: 0 0 12px;
  color: #eaf6f7;
}
.entrada b {
  color: var(--amarillo);
  font-weight: 800;
}

.corte {
  font-size: 14px;
  color: #a8ccd1;
  margin: 0 0 34px;
}

/* ---------- Los tres accesos ---------- */

/* No son tres pastillas iguales. El de la vitrina pesa el doble porque es la
   razon de ser del sitio; donar y censo son secundarios. */
.accesos {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr;
  gap: 14px;
}

.acceso {
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: var(--radio);
  padding: 26px 24px 24px;
  border: 0;
  min-height: 132px;
  position: relative;
  transition: transform 0.14s ease;
}
.acceso:hover {
  transform: translateY(-3px);
}
.acceso:focus-visible {
  outline: 4px solid var(--amarillo);
  outline-offset: 3px;
}
.acceso .rotulo {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
  display: block;
  margin-bottom: 8px;
}
.acceso .frase {
  font-size: clamp(1.25rem, 3.1vw, 1.85rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  display: block;
}
.acceso .pie {
  font-size: 14px;
  opacity: 0.9;
  margin-top: 10px;
  display: block;
  line-height: 1.35;
}

.acceso.comprar {
  background: var(--amarillo);
  color: var(--teal-950);
}
.acceso.comprar .rotulo {
  opacity: 0.72;
}
.acceso.donar {
  background: var(--teal-700);
}
.acceso.censo {
  background: var(--verde-600);
}

/* ---------- Secciones ---------- */

.seccion {
  padding: 66px 0;
}
.seccion.clara {
  background: var(--crema);
  color: var(--teal-950);
}
/* Las dos secciones bajo el pliegue van en la luz del afiche, no en su sombra.
   El texto es oscuro sobre el degradado y los paneles siguen saturados, así que
   el contraste sube en vez de bajar. El azul que pidió el cliente vive aquí, y
   no en la rotación de fichas, para que exista aunque la vitrina esté vacía. */
.seccion.cielo {
  background: linear-gradient(155deg, var(--cielo-teal) 0%, var(--cielo-verde) 100%);
  color: var(--teal-950);
}
.seccion.cielo-azul {
  background: linear-gradient(155deg, var(--cielo-azul) 0%, var(--cielo-teal) 62%, var(--cielo-verde) 100%);
  color: var(--teal-950);
}
.seccion.honda {
  background: var(--teal-950);
}

.encabezado {
  margin: 0 0 30px;
}
.encabezado h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.encabezado p {
  margin: 0;
  max-width: 58ch;
  font-size: 1.05rem;
}
.seccion.clara .encabezado p,
.seccion.cielo .encabezado p,
.seccion.cielo-azul .encabezado p {
  color: #2c4f54;
}

/* ---------- Vitrina ---------- */

.vitrina {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada ficha es un rotulo de puesto de mercado: la foto llega a los bordes y el
   texto vive sobre un bloque de color liso. El color rota, que es lo que pidio
   el cliente cuando dijo "mas colorcitos". */
.ficha {
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--teal-700);
  color: #fff;
}
.ficha:nth-child(5n + 2) {
  background: var(--verde-600);
}
.ficha:nth-child(5n + 3) {
  background: var(--azul-700);
}
.ficha:nth-child(5n + 4) {
  background: var(--oliva-700);
}
.ficha:nth-child(5n + 5) {
  background: var(--naranja-700);
}

/* height:auto no es decorativo: los atributos width y height del <img> están ahí
   para reservar el espacio y no mover la página al cargar, pero mientras el alto
   sea un número, aspect-ratio no manda y la foto sale con el alto del atributo. */
.ficha .foto {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--teal-900);
}

.ficha .cuerpo {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
/* Blanco y no amarillo. A 12px hace falta 4,5:1 y el amarillo sobre la ficha
   naranja daba 3,23:1; oscurecer las fichas lo habría arreglado empujando la
   página hacia donde no queremos. El amarillo se queda donde manda de verdad,
   que es el botón. */
.ficha .negocio {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.ficha .producto {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}
.ficha .detalle {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.45;
  color: #eef7f8;
}
.ficha .lugar {
  font-size: 13px;
  font-weight: 600;
  color: #d3ecef;
  margin: 0;
}
.ficha .acciones {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ficha .boton {
  background: var(--amarillo);
  color: var(--teal-950);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ficha .boton.segundo {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.ficha .boton:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ---------- Vitrina vacia ---------- */

.vacia {
  border: 2px dashed #9fc0c4;
  border-radius: var(--radio);
  padding: 40px 30px;
  text-align: left;
  background: #fff;
  color: var(--teal-950);
}
.vacia h3 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.vacia p {
  margin: 0 0 10px;
  max-width: 60ch;
  color: #34575c;
}

/* ---------- Panel de datos, calcado del afiche ---------- */

.panel {
  background: var(--teal-700);
  border-radius: var(--radio);
  padding: 34px 32px;
}
.panel.verde {
  background: var(--verde-700);
}

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px 30px;
  margin: 0;
}
.datos div {
  min-width: 0;
}
.datos dt {
  font-size: 14px;
  font-weight: 400;
  color: #d5ecef;
  margin: 0 0 2px;
}
.datos dd {
  margin: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 800;
  color: var(--amarillo);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.linea {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  margin: 26px 0;
}

.nota {
  font-size: 14px;
  color: #d5ecef;
  margin: 0;
  max-width: 68ch;
}
.nota + .nota {
  margin-top: 8px;
}

/* Bloque amarillo macizo con texto oscuro, que es el gesto del afiche, en vez
   del recuadro con borde izquierdo de color. Ese patrón viene de la caja de
   "nota" de la documentación y es de los que más delatan un texto generado. */
.aviso {
  background: var(--amarillo);
  color: #2a2100;
  border-radius: var(--radio-sm);
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  margin: 22px 0 0;
}
.aviso a {
  color: #2a2100;
}

.boton-grande {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  background: var(--amarillo);
  color: var(--teal-950);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 13px;
  margin-top: 22px;
}
.boton-grande:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
}

/* ---------- Cierre ---------- */

/* La franja institucional es el lockup oficial de la campaña, recortado del
   afiche. Va como una sola imagen para no recomponer una firma ajena. */
.respaldo {
  background: #fff;
  border-radius: var(--radio);
  padding: 22px 26px;
}
.respaldo img {
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
}

.pie-pagina {
  background: var(--teal-950);
  padding: 46px 0 60px;
  font-size: 14px;
  line-height: 1.5;
  color: #a9cdd2;
}
.legales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 8px 40px;
}
.pie-pagina h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amarillo);
  margin: 18px 0 6px;
}
.pie-pagina p {
  margin: 0;
  font-size: 13.5px;
}
.pie-pagina a {
  color: #fff;
}
.emergencia {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 30px;
  padding-top: 22px;
  font-size: 15px;
  color: #cfe8eb;
}
.emergencia strong {
  color: var(--amarillo);
}

@media (max-width: 860px) {
  .accesos {
    grid-template-columns: 1fr;
  }
  .portada {
    padding: 52px 0 48px;
  }
  .seccion {
    padding: 48px 0;
  }
  .panel {
    padding: 26px 22px;
  }
  /* Nada de alto fijo aquí. Un `height` numérico peleando con `width: 100%`
     estiraba el lockup institucional hasta 14,63:1 contra su 5,58 natural, o
     sea los logos de las tres cámaras y del Gobierno de Caldas aplastados 2,6
     veces, y justo en el teléfono, que es por donde va a circular esto. */
  .respaldo {
    padding: 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .acceso {
    transition: none;
  }
  .acceso:hover {
    transform: none;
  }
}