/* Páginas públicas de Huellario (inicio, privacidad y condiciones). Paleta "Parque" de la app. */
@font-face { font-family: 'Fredoka'; font-weight: 400; font-display: swap; src: url('fuentes/fredoka-400.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('fuentes/fredoka-600.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('fuentes/fredoka-700.woff2') format('woff2'); }

:root {
  --fondo: #faf7f0;
  --tarjeta: #ffffff;
  --tinta: #1b2a23;
  --tinta-suave: rgba(27, 42, 35, 0.72);
  --borde: #e7e0d2;
  --sol: #ffc23d;
  --sol-sombra: #d99a1c;
  --marca: #1fa971;
  --tierra: #a8e6a1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.55;
}

a { color: #12784c; font-weight: 600; }

.contenido { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* Barra de arriba */
.barra { border-bottom: 3px solid var(--borde); background: var(--tarjeta); }
.barra .contenido { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-size: 24px; font-weight: 700; }
.marca img { width: 44px; height: 44px; border-radius: 11px; }
.barra nav { display: flex; gap: 16px; font-size: 16px; }
.barra nav a { color: var(--tinta-suave); text-decoration: none; }
.barra nav a:hover { color: var(--tinta); }

/* Inicio */
.portada { text-align: center; padding: 40px 0 24px; }
.portada .duo { display: flex; justify-content: center; }
.portada .duo img { width: 170px; height: 170px; object-fit: contain; }
.portada .duo img + img { margin-left: -26px; }
.portada h1 { margin: 6px 0 0; font-size: 52px; line-height: 1.1; }
.portada .lema { margin: 6px 0 0; font-size: 24px; font-weight: 600; color: #12784c; }
.portada p { max-width: 560px; margin: 14px auto 0; color: var(--tinta-suave); }
.pronto {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--sol);
  box-shadow: 0 6px 0 var(--sol-sombra);
  font-size: 20px;
  font-weight: 700;
}

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 32px 0; }
.tarjeta {
  padding: 18px;
  border-radius: 22px;
  border: 3px solid var(--borde);
  background: var(--tarjeta);
  box-shadow: 0 5px 0 var(--borde);
}
.tarjeta h3 { margin: 0 0 6px; font-size: 20px; }
.tarjeta p { margin: 0; color: var(--tinta-suave); font-size: 17px; }
.tarjeta .icono { font-size: 28px; line-height: 1; margin-bottom: 8px; }

.familias { margin: 8px 0 40px; padding: 22px; border-radius: 22px; background: #fff8e6; border: 3px solid #f6deaa; }
.familias h2 { margin: 0 0 8px; }
.familias ul { margin: 0; padding-left: 22px; }

/* Documentos (privacidad y condiciones) */
.documento { padding-top: 32px; padding-bottom: 48px; }
.documento h1 { margin: 0 0 4px; font-size: 38px; line-height: 1.15; }
.documento .fecha { margin: 0 0 22px; color: var(--tinta-suave); font-size: 16px; }
.documento h2 { margin: 32px 0 8px; font-size: 24px; }
.documento h3 { margin: 18px 0 6px; font-size: 19px; }
.documento ul { padding-left: 22px; }
.documento li { margin: 4px 0; }
.resumen { padding: 18px 20px; border-radius: 20px; background: var(--tarjeta); border: 3px solid var(--borde); box-shadow: 0 5px 0 var(--borde); }
.resumen h2 { margin-top: 0; }

/* Pie */
.pie { border-top: 3px solid var(--borde); padding: 20px 0 32px; color: var(--tinta-suave); font-size: 16px; }
.pie .contenido { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
.pie nav { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .barra nav { gap: 12px; font-size: 15px; }
  .marca { font-size: 21px; }
  .portada h1 { font-size: 42px; }
  .portada .duo img { width: 130px; height: 130px; }
  .documento h1 { font-size: 31px; }
}