/* Tokens tomados de designsystem/theme/Color.kt, para que el sitio y la app se vean de la
   misma familia. */
:root {
  --azul: #2b91f7;
  --azul-oscuro: #040c3e;
  --ambar: #ffc107;
  --verde: #4b914d;
  --gris-fondo: #f7f7f7;
  --gris-borde: #d8d8d8;
  --gris-texto: #787878;
  --tinta: #2b2a29;
  --radio: 16px;
  --sombra: 0 2px 12px rgba(4, 12, 62, 0.08);
  --ancho: 1080px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }

.cabecera {
  background: var(--azul-oscuro);
  color: #fff;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.cabecera .contenedor { display: flex; align-items: center; gap: 24px; }
.cabecera nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.cabecera a { color: #fff; text-decoration: none; }
.cabecera img { height: 36px; }
.cabecera__marca { display: flex; align-items: center; gap: 10px; }
.cabecera__eslogan { font-size: 13px; color: rgba(255, 255, 255, 0.75); white-space: nowrap; }

.boton {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--radio);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton:disabled { background: var(--gris-borde); color: var(--gris-texto); cursor: not-allowed; }
.boton--ambar { background: var(--ambar); color: var(--tinta); }
.boton--peligro { background: #c62828; }

.seccion { padding: 56px 0; }
.seccion--gris { background: var(--gris-fondo); }
.seccion h2 { font-size: 30px; margin: 0 0 8px; }

.tarjetas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tarjeta {
  background: #fff;
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px;
}

.legal { max-width: 760px; margin: 0 auto; padding: 40px 16px; }
.legal h1 { font-size: 30px; }
.legal h2, .legal h3 { font-size: 21px; margin-top: 32px; }

.pie { background: var(--azul-oscuro); color: #fff; padding: 36px 0; margin-top: 40px; }
.pie a { color: #fff; }

input[type="email"], input[type="text"] {
  width: 100%;
  padding: 14px;
  font-size: 17px;
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .seccion { padding: 36px 0; }
  .seccion h2 { font-size: 25px; }
  .cabecera__eslogan { display: none; }
}