/* ============================================================
   ADOS Presupuesto — descargas del complemento de Revit
   Pareja de descargas.js.

   La sección vive en index.html (#descargas) y va sobre el mismo
   fondo que «Comprar», así que las tarjetas se ven igual que las de
   los planes: borde fino, fondo navy-950 y el botón pegado al fondo
   para que las tres queden a la misma altura aunque una tenga una
   línea más.

   Dos estados, escritos en data-estado de cada tarjeta:

     espera — no hay instalador publicado para ese año. El botón se
              queda sin href: no es un enlace, no recibe el foco y no
              se puede pulsar. Así nace el marcado.
     listo  — lo hay. descargas.js le pone el href y lo enciende en
              ámbar.
   ============================================================ */

/* ------------------------------------------------------------
   1. La rejilla de años
   ------------------------------------------------------------ */
.descargas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* Tres tarjetas de 40 px de cifra no caben en una tableta estrecha
   sin partir el año en dos líneas. Mismo corte que .planes. */
@media (max-width: 820px) {
  .descargas { grid-template-columns: 1fr; }
}

.descarga {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--ados-navy-950);
  padding: 32px;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-out);
}

/* Solo se levanta la que se puede descargar: mover una tarjeta que
   no lleva a ningún sitio es prometer algo que no hay. */
.descarga[data-estado="listo"]:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

.descarga .marca {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.descarga .anio {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ados-white);
  margin-top: 10px;
}

/* La versión y el peso. Nace diciendo que todavía no está publicado;
   descargas.js lo cambia por «Versión 1.4.0 · 3,2 MB». */
.descarga .estado {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 16px 0 28px 0;
}

/* ------------------------------------------------------------
   2. El botón
   Mismo botón que el de los planes, para que se lea como la misma
   familia de acciones.
   ------------------------------------------------------------ */
.descarga .cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: none;
  height: 48px;
  margin-top: auto;
  border-radius: var(--radius-ui);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border-strong);
  color: var(--ados-white) !important;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.descarga .cta .icono { width: 17px; height: 17px; flex: none; }

.descarga[data-estado="listo"] .cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent) !important;
}
.descarga[data-estado="listo"] .cta:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Apagado. Se reconoce por no tener href — que es también lo que le
   quita el foco y el clic, sin necesidad de deshabilitar nada. */
.descarga .cta:not([href]) {
  background: transparent;
  border-color: var(--border);
  color: var(--text-faint) !important;
  cursor: default;
}
.descarga .cta:not([href]) .icono { display: none; }

/* ------------------------------------------------------------
   3. Lo que va debajo: la aclaración y los tres pasos
   ------------------------------------------------------------ */
.descargas-pie {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-faint);
  margin: 20px 0 0 0;
  max-width: 78ch;
}

.descargas-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--border);
}
@media (max-width: 820px) {
  .descargas-pasos { grid-template-columns: 1fr; gap: 30px; }
}

.descargas-paso .num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.descargas-paso .titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ados-white);
  margin-top: 12px;
}
.descargas-paso p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 10px 0 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .descarga { transition: none; }
  .descarga[data-estado="listo"]:hover { transform: none; }
}