/* =========================================================================
   Cursos 3D — capa propia sobre `base.css` (la hoja de la casa).

   Lo único que cambia del sistema Summr es el **acento**: el reproductor es
   violeta con coral y verde, y la landing habla en ese idioma para que quien
   llegue desde una captura reconozca el producto. La estructura —nav, hero,
   secciones, pie, entradas— viene tal cual de la familia.
   ========================================================================= */

:root {
  /* Acentos del propio reproductor, tomados de su interfaz. */
  --aqua: #A78BFA;
  --cian: #7C5CF5;
  --marea: #6D4AEE;
  --oceano: #5B3FD6;
  --grad: linear-gradient(118deg, #A78BFA 0%, #7C5CF5 46%, #6D4AEE 100%);
  --coral: #F4674F;
  --verde: #22B07D;

  /* Fondo: violeta muy profundo en vez del casi negro marino. */
  --abismo: #120A2A;
  --hondo: #1B1140;
  --marina: #2E1F63;
  --claro: #F2EEFF;
  --claro-medio: #BDB0EA;
  --claro-tenue: #7E71B5;

  /* Papel apenas lila, para que las capturas del reproductor no floten. */
  --papel: #FBFAFF;
  --hueso: #F2EFFC;
  --filete: #E0DAF5;
  --tinta: #221A44;
  --tinta-suave: #5E5680;
  --tinta-tenue: #8B85A8;
}

/* La aurora del hero en la clave del producto. */
.hero::before { background: radial-gradient(circle, rgba(124, 92, 245, .8), transparent 68%); }
.hero::after { background: radial-gradient(circle, rgba(244, 103, 79, .38), transparent 68%); }
.cierre::before { background: radial-gradient(circle, rgba(124, 92, 245, .62), transparent 66%); }

/* ---------------------------------------------------------- teléfonos --- */
/* Las capturas son verticales (720×1280): se muestran como tres teléfonos en
   abanico, que es como se usa de verdad el reproductor. */
.fonos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(16px, 3vw, 34px); align-items: end;
}
.fono { margin: 0; }
.fono img {
  width: 100%; border-radius: 22px; border: 1px solid var(--filete);
  background: #fff; box-shadow: 0 30px 50px -34px rgba(34, 26, 68, .7);
  transition: transform .45s var(--ease);
}
.fono:hover img { transform: translateY(-8px); }
.fono figcaption {
  margin-top: 12px; text-align: center; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-tenue);
}
@media (min-width: 900px) {
  .fonos .fono:nth-child(odd) { transform: translateY(18px); }
  .fonos .fono:nth-child(odd):hover { transform: translateY(10px); }
}

/* ------------------------------------------------------------- clase --- */
.clase {
  margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--filete);
  background: #fff;
}
.clase img { width: 100%; }
.clase figcaption {
  padding: 14px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-tenue); border-top: 1px solid var(--filete);
}

/* ------------------------------------------------------------ cursos --- */
.cursos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.curso {
  background: var(--papel); border: 1px solid var(--filete); border-radius: var(--r);
  padding: 26px 24px 28px; border-top: 3px solid var(--marea);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.curso:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -30px rgba(34, 26, 68, .6); }
.curso--coral { border-top-color: var(--coral); }
.curso--verde { border-top-color: var(--verde); }
.curso h3 { font-size: 22px; margin-bottom: 8px; }
.curso p { color: var(--tinta-suave); font-size: 15px; }
.curso__meta {
  margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oceano);
}

/* ------------------------------------------------------- anatomía ------ */
/* Tres niveles del contenido: curso → tema → diapositiva. */
.niveles { display: grid; gap: 14px; }
.nivel {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start;
  padding: 20px 22px; background: var(--papel); border: 1px solid var(--filete); border-radius: var(--r);
}
.nivel__n {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: #fff;
  background: var(--grad); padding: 6px 10px; border-radius: 8px;
}
.nivel h3 { font-size: 19px; margin-bottom: 6px; }
.nivel p { color: var(--tinta-suave); font-size: 15px; }

/* -------------------------------------------------------- descarga ---- */
/* Bloque de descarga: una tarjeta por plataforma. Hoy solo hay Android —el
   proyecto de Godot únicamente define ese preset de exportación—, así que en
   vez de un botón muerto de escritorio se dice qué falta y por qué. */
.bajadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.bajada {
  background: var(--papel); border: 1px solid var(--filete); border-radius: var(--r);
  padding: 28px 26px 30px; display: flex; flex-direction: column;
}
.bajada--lista { border-top: 3px solid var(--marea); }
.bajada--pendiente { background: transparent; border-style: dashed; }
.bajada__plataforma {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-tenue);
}
.bajada__plataforma svg { color: var(--marea); flex: none; }
.bajada h3 { font-size: 22px; margin-bottom: 8px; }
.bajada p { color: var(--tinta-suave); font-size: 15px; }
.bajada .btn { margin-top: 20px; align-self: flex-start; }
.bajada__datos {
  margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--tinta-tenue);
}
.bajada__datos b { color: var(--tinta); font-weight: 700; }

/* Los tres pasos de instalación fuera de la tienda: es lo que más dudas genera
   al descargar un APK, así que se explica en vez de darlo por sabido. */
.instalar { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 12px; max-width: 70ch; }
.instalar li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
  color: var(--tinta-suave); font-size: 15px;
}
.instalar { list-style: none; padding: 0; }
.instalar b { font-family: var(--mono); font-size: 12px; color: var(--marea); letter-spacing: .1em; }