:root {
  --fondo: #0e1513;
  --tarjeta: #151f1c;
  --linea: #263530;
  --tinta: #eef3f1;
  --suave: #9fb2ac;
  --verde: #0b7a3b;
  --verde-claro: #12994b;
  --rojo: #d52b1e;
  --amarillo: #f9d616;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background:
    radial-gradient(ellipse 60% 40% at 50% 28%, #22332d 0%, transparent 70%),
    var(--fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.tarjeta {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--tarjeta);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 36px 24px 26px;
  text-align: center;
  overflow: hidden;
}

/* Franja con los colores de la bandera de Bolivia */
.bandera { position: absolute; inset: 0 0 auto 0; height: 6px; display: flex; }
.bandera i { flex: 1; }
.bandera i:nth-child(1) { background: var(--rojo); }
.bandera i:nth-child(2) { background: var(--amarillo); }
.bandera i:nth-child(3) { background: var(--verde-claro); }

/* Logo: inclinación 3D (JS) + giro de engranaje */
.escena {
  width: 190px;
  margin: 0 auto 18px;
  perspective: 700px;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.inclinar {
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
  will-change: transform;
}
.logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
  user-select: none;
  -webkit-user-drag: none;
}

h1 {
  margin: 0 0 6px;
  font-size: 1.9rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.colegio {
  margin: 0 auto 26px;
  max-width: 30ch;
  color: var(--suave);
  font-size: .95rem;
  line-height: 1.45;
}

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
}
.boton svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.boton:active { transform: scale(.98); }
.boton:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }

.principal { background: var(--verde); color: #fff; }
.principal:hover { background: var(--verde-claro); }

.secundario { color: var(--tinta); border: 2px solid var(--linea); }
.secundario:hover { border-color: var(--verde-claro); }

.estado {
  min-height: 1.4em;
  margin: 4px 0 0;
  font-size: .9rem;
  color: var(--amarillo);
}

.nota {
  margin: 14px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: .85rem;
  line-height: 1.45;
  color: var(--suave);
}

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