:root {
  color-scheme: light dark;
  --fondo: #f6f5f2;
  --tarjeta: #ffffff;
  --texto: #1f2328;
  --texto-suave: #57606a;
  --borde: #e3e1dc;
  --cono: #e8590c;
  --franja: #fff4e6;
  --base: #495057;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #15171a;
    --tarjeta: #1d2024;
    --texto: #e6e8eb;
    --texto-suave: #a3abb5;
    --borde: #2e3238;
    --cono: #f0743a;
    --franja: #fde8d7;
    --base: #868e96;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.tarjeta {
  width: 100%;
  max-width: 30rem;
  padding: 40px 32px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  text-align: center;
}

.icono {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
}

.c-cono { fill: var(--cono); }
.c-franja { fill: var(--franja); }
.c-base { fill: var(--base); }

h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h2 {
  margin: 0 0 6px;
  font-size: 1.125rem;
  line-height: 1.3;
}

p {
  margin: 0;
  color: var(--texto-suave);
}

hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--borde);
}

@media (max-width: 400px) {
  .tarjeta { padding: 32px 20px; }
}