/* Paleta compartida con la app, para que la entrada y el interior no parezcan
   dos productos distintos. */
:root {
  --fondo: #f7f7f5;
  --panel: #ffffff;
  --panel-2: #f0efec;
  --texto: #1d1c1a;
  --suave: #6b6862;
  --borde: #e2e0db;
  --acento: #9a3f1f;
  --acento-claro: #f5e7e0;
  --ok: #2f6b46;
  --mal: #a13b32;
  --sombra: 0 1px 2px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16151a;
    --panel: #1e1d23;
    --panel-2: #26252c;
    --texto: #e9e7e2;
    --suave: #a09c95;
    --borde: #33313a;
    --acento: #e08b62;
    --acento-claro: #33231c;
    --ok: #6fbf8e;
    --mal: #e08585;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--acento); }

.rombo {
  display: inline-block; width: 22px; height: 22px; flex: 0 0 auto;
  background: var(--acento); transform: rotate(45deg); border-radius: 4px;
}

/* ── Cabecera ─────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; gap: 12px;
  max-width: 1060px; margin: 0 auto; padding: 22px 24px;
}
.barra .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.2px; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14.5px; }
.barra nav a { color: var(--suave); text-decoration: none; }
.barra nav a:hover { color: var(--texto); }
/* El enlace de navegación teñía también el botón: más específico que `.boton`. */
.barra nav a.boton { color: var(--fondo); }
.barra nav a.boton:hover { color: var(--fondo); }

.boton {
  display: inline-block; padding: 10px 18px; border: 0; border-radius: 8px;
  background: var(--acento); color: var(--fondo);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none;
  cursor: pointer; transition: filter .12s;
}
.boton:hover { filter: brightness(1.08); }
.boton:disabled { opacity: .55; cursor: default; }
.boton.suave {
  background: transparent; color: var(--texto);
  border: 1px solid var(--borde);
}

/* ── Landing ──────────────────────────────────────────── */
main { max-width: 1060px; margin: 0 auto; padding: 0 24px 80px; }

.portada { padding: 56px 0 40px; max-width: 760px; }
.portada h1 {
  margin: 0 0 18px; font-size: clamp(34px, 5.4vw, 54px); line-height: 1.1;
  letter-spacing: -1.2px; font-weight: 700;
}
.portada .entradilla { margin: 0 0 30px; font-size: 19px; color: var(--suave); }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.portada .nota { margin-top: 16px; font-size: 13.5px; color: var(--suave); }

.rejilla {
  display: grid; gap: 16px; margin: 44px 0;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.tarjeta {
  padding: 22px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--panel); box-shadow: var(--sombra);
}
.tarjeta h3 { margin: 0 0 8px; font-size: 16.5px; }
.tarjeta p { margin: 0; font-size: 14.5px; color: var(--suave); }
.tarjeta .icono { display: block; margin-bottom: 12px; font-size: 20px; color: var(--acento); }

h2.seccion {
  margin: 56px 0 6px; font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--acento);
}
h2.seccion + p { margin: 0 0 8px; font-size: 24px; font-weight: 600; letter-spacing: -.4px; }

.privacidad {
  margin: 40px 0; padding: 24px; border-radius: 12px;
  border: 1px solid var(--borde); background: var(--acento-claro);
}
.privacidad h3 { margin: 0 0 8px; font-size: 17px; }
.privacidad p { margin: 0; font-size: 14.5px; color: var(--texto); opacity: .85; }

footer {
  border-top: 1px solid var(--borde); margin-top: 40px;
  padding: 24px; font-size: 13.5px; color: var(--suave);
}
footer div { max-width: 1060px; margin: 0 auto; display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--suave); }

/* ── Entrada ──────────────────────────────────────────── */
.centro { display: grid; place-items: center; min-height: calc(100vh - 88px); padding: 24px; }
.caja {
  width: 100%; max-width: 400px; padding: 32px;
  border: 1px solid var(--borde); border-radius: 14px;
  background: var(--panel); box-shadow: var(--sombra);
}
.caja h1 { margin: 0 0 6px; font-size: 23px; letter-spacing: -.4px; }
.caja .sub { margin: 0 0 24px; font-size: 14.5px; color: var(--suave); }

label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--suave); }
input {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--texto); font: inherit; font-size: 15px;
}
input:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }
.caja .boton { width: 100%; margin-top: 6px; }

.cambiar { margin: 18px 0 0; font-size: 14px; color: var(--suave); text-align: center; }
.cambiar button {
  border: 0; background: none; padding: 0; color: var(--acento);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline;
}

.recado {
  margin: 16px 0 0; padding: 11px 13px; border-radius: 8px;
  font-size: 14px; line-height: 1.45;
}
.recado[hidden] { display: none; }
.recado.mal { background: var(--acento-claro); color: var(--mal); }
.recado.bien { background: var(--acento-claro); color: var(--ok); }
.recado.info { background: var(--panel-2); color: var(--suave); }