/* ---------- Colores (modo claro) ---------- */
:root {
  --fondo: #E8F0EC;
  --texto: #1F2D3A;
  --suave: #5B6B78;
  --acento: #2F6FDB;
  --acento-hover: #2259B8;
  --acento-texto: #FFFFFF;
  --tarjeta: #FFFFFF;
}

/* ---------- Colores (modo oscuro) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fondo: #14201B;
    --texto: #E6EEE9;
    --suave: #9AAAA2;
    --acento: #7FA9F0;
    --acento-hover: #A3C2F5;
    --acento-texto: #10223F;
    --tarjeta: #1D2C25;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

main {
  width: 100%;
  max-width: 36rem;
}

h1 {
  font-size: clamp(2.6rem, 9vw, 4.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
}

p {
  font-size: 1.15rem;
  color: var(--suave);
  margin-bottom: 2rem;
}

/* ---------- Botón interactivo ---------- */
.boton {
  display: inline-block;
  list-style: none;            /* quita el triángulo por defecto */
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--acento);
  color: var(--acento-texto);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.boton::-webkit-details-marker { display: none; } /* Safari */

/* Al pasar el ratón */
.boton:hover {
  background: var(--acento-hover);
  transform: translateY(-2px);
}

/* Al hacer clic */
.boton:active {
  transform: translateY(1px) scale(0.97);
}

/* Al navegar con teclado */
.boton:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 3px;
}

/* El texto del botón cambia cuando está abierto */
.desplegable[open] .boton {
  font-size: 0;                /* oculta "Empezar" */
}

.desplegable[open] .boton::after {
  content: "Ocultar";
  font-size: 1rem;
}

/* Mensaje que aparece al pulsar */
.mensaje {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--tarjeta);
  animation: aparecer 0.25s ease;
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

footer {
  margin-top: 3rem;
  font-size: 0.9rem;
  color: var(--suave);
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .boton, .mensaje { transition: none; animation: none; }
}