/* ====== Marca y escala ====== */
:root{
  --udelar: #004A82;
  --bg: #f6f7f9;
  --white: #fff;
  --text: #111;

  /* Tamaños ajustables */
  --card-max: 520px;         /* antes 720px */
  --card-pad-min: 16px;      /* antes 20px */
  --card-pad-max: 24px;      /* antes 36px */
  --brand-min: 150px;        /* antes 180px */
  --brand-max: 260px;        /* antes 260px */
  --title-min: 1.05rem;      /* antes 1.15rem */
  --title-max: 1.35rem;      /* antes 1.5rem */
  --btn-pad-y: 10px;         /* antes 14px */
  --btn-pad-x: 14px;         /* antes 16px */
  --btn-radius: 10px;        /* antes 12px */
  --btn-font: 1rem;          /* antes 1rem (se mantiene) */
  --btn-sub-font: .86rem;    /* antes .9rem */
  --gap: 12px;               /* antes 18px */
}

/* ====== Reset mínimo ====== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* ====== Layout ====== */
.page { display: grid; place-items: center; min-height: 100dvh; padding: 16px; }
.shell { width: min(var(--card-max), 100%); }

/* ====== Card central ====== */
.card{
  background: var(--udelar);
  color: var(--white);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
  padding: clamp(var(--card-pad-min), 4vw, var(--card-pad-max));
  display: grid;
  justify-items: center;
  gap: var(--gap);
  text-align: center;
}

.brand{
  display:block;
  height:auto;
  width: clamp(var(--brand-min), 40vw, var(--brand-max));
}

.title{
  margin: 4px 0 2px;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(var(--title-min), 1rem + .6vw, var(--title-max));
}

.nowrap{ white-space: nowrap; }

/* ====== Botones ====== */
.actions{ width: 100%; display: grid; gap: 10px; }

.btn{
  --btn-bg: var(--white);
  --btn-fg: var(--udelar);
  display: inline-grid;
  place-items: center;
  gap: 3px;
  width: 100%;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: var(--btn-font);
  border: 0;
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .04s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
  cursor: pointer;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline: 3px solid rgba(255,255,255,.4); outline-offset: 2px; }

.btn-sub{
  display:block;
  font-weight: 500;
  font-size: var(--btn-sub-font);
  opacity: .95;
}

/* Primario: blanco sobre card azul */
.btn-primary{}

/* Secundario: borde claro y fondo translúcido */
.btn-secondary{
  --btn-bg: rgba(255,255,255,.08);
  --btn-fg: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}

/* ====== Formulario ====== */
.form{ width: 100%; display: grid; gap: 12px; }

.field{ text-align: left; }
.field label{
  display: inline-block;
  margin: 0 0 6px;
  font-weight: 600;
  color: #eef5fb;
}
.field input{
  width: 100%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 1rem;
  outline: none;
}
.field input::placeholder{ color: rgba(255,255,255,.78); }
.field input:focus{
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

.help, .alt{ margin: 2px 0 0; text-align: center; }
.link{ color:#fff; text-underline-offset: 3px; }
.link:hover{ text-decoration: underline; }

@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}