/* La página de descuentos de temporada.

   Cada temporada trae su par de colores y su dibujo; el resto de la página es
   igual siempre. Los colores de temporada viven acá y no en base.css porque
   sólo existen en esta página. */

:root {
  --temporada-carnaval: #f5b8d0;
  --temporada-carnaval-2: #ffd48a;
  --temporada-fin-verano: #ffd48a;
  --temporada-fin-verano-2: #f5a173;
  --temporada-inicio-otono: #efb182;
  --temporada-inicio-otono-2: #e08b5a;
  --temporada-dia-trabajo: #a9cdf0;
  --temporada-dia-trabajo-2: #89b6dd;
  --temporada-fin-otono: #e3a97c;
  --temporada-fin-otono-2: #c98c63;
  --temporada-inicio-invierno: #c4e6f5;
  --temporada-inicio-invierno-2: #8fcfe8;
  --temporada-receso: #cfe3e8;
  --temporada-receso-2: #a8c6cf;
  --temporada-dia-utn: #bcd6f5;
  --temporada-dia-utn-2: #eef3fa;
  --temporada-fin-invierno: #d8e9f7;
  --temporada-fin-invierno-2: #aecbe2;
  --temporada-inicio-primavera: #f8c6da;
  --temporada-inicio-primavera-2: #bfe6ad;
  --temporada-dia-estudiante: #f4d689;
  --temporada-dia-estudiante-2: #bfe6ad;
  --temporada-fin-primavera: #ffe293;
  --temporada-fin-primavera-2: #bfe6ad;
  --temporada-fiestas: #ffe09a;
  --temporada-fiestas-2: #f39b93;
}

.temporada--carnaval { --temporada: var(--temporada-carnaval); --temporada-2: var(--temporada-carnaval-2); }
.temporada--fin-verano { --temporada: var(--temporada-fin-verano); --temporada-2: var(--temporada-fin-verano-2); }
.temporada--inicio-otono { --temporada: var(--temporada-inicio-otono); --temporada-2: var(--temporada-inicio-otono-2); }
.temporada--dia-trabajo { --temporada: var(--temporada-dia-trabajo); --temporada-2: var(--temporada-dia-trabajo-2); }
.temporada--fin-otono { --temporada: var(--temporada-fin-otono); --temporada-2: var(--temporada-fin-otono-2); }
.temporada--inicio-invierno { --temporada: var(--temporada-inicio-invierno); --temporada-2: var(--temporada-inicio-invierno-2); }
.temporada--receso { --temporada: var(--temporada-receso); --temporada-2: var(--temporada-receso-2); }
.temporada--dia-utn { --temporada: var(--temporada-dia-utn); --temporada-2: var(--temporada-dia-utn-2); }
.temporada--fin-invierno { --temporada: var(--temporada-fin-invierno); --temporada-2: var(--temporada-fin-invierno-2); }
.temporada--inicio-primavera { --temporada: var(--temporada-inicio-primavera); --temporada-2: var(--temporada-inicio-primavera-2); }
.temporada--dia-estudiante { --temporada: var(--temporada-dia-estudiante); --temporada-2: var(--temporada-dia-estudiante-2); }
.temporada--fin-primavera { --temporada: var(--temporada-fin-primavera); --temporada-2: var(--temporada-fin-primavera-2); }
.temporada--fiestas { --temporada: var(--temporada-fiestas); --temporada-2: var(--temporada-fiestas-2); }

/* El cartel: lámina oscura, el dibujo de la temporada al costado y un
   resplandor de su segundo color. Es lo único que cambia de una a otra. */
.cartel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-block: var(--e-5);
  padding: var(--e-5);
  border-radius: var(--radio-grande);
  /* La primera línea es el respaldo: sin `color-mix` —Chrome viejo, Safari
     anterior al 16— el navegador descarta la regla entera, y el texto crema
     quedaría sobre el fondo de la página. */
  background: var(--panel);
  background:
    radial-gradient(120% 100% at 85% 0%, color-mix(in srgb, var(--temporada-2) 30%, transparent), transparent 60%),
    var(--panel);
}

.cartel__motivo {
  width: 5.5rem;
  height: 5.5rem;
  flex: none;
  color: var(--temporada);
}

.cartel__nombre {
  margin-bottom: var(--e-2);
  color: var(--temporada);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cartel__bajada {
  margin: 0;
  max-width: 55ch;
  color: var(--texto-suave);
  font-size: 1.1rem;
}

.cartel h1 {
  margin-bottom: var(--e-3);
}

@media (min-width: 40em) {
  .cartel {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-6);
    padding: var(--e-6);
  }

  .cartel__motivo {
    width: 8rem;
    height: 8rem;
  }
}

/* ---- los descuentos ---------------------------------------------------- */

.descuentos {
  display: grid;
  gap: var(--e-4);
  margin-block: var(--e-4);
}

.descuento {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  padding: var(--e-4);
  /* El pastel de la temporada se pierde sobre el papel crema. Mezclado con el
     color del texto se oscurece en el tema claro y se aclara en el oscuro, sin
     una segunda lista de trece colores. */
  --marca: color-mix(in srgb, var(--temporada, var(--acento)) 55%, var(--texto));
  background: var(--fondo-alto);
  background: color-mix(in srgb, var(--marca) 10%, var(--fondo-alto));
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  border-top: 0.4rem solid var(--acento);
  border-top: 0.4rem solid var(--marca);
}

.descuento__numero {
  margin: 0;
  flex: none;
  min-width: 4.5rem;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--acento);
}

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

@media (min-width: 55em) {
  .descuentos {
    grid-template-columns: repeat(3, 1fr);
  }

  .descuento {
    flex-direction: column;
    gap: var(--e-2);
  }
}

.acciones-pagina {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

/* Los trece dibujos viven en el documento y no se ven: sólo se muestra el que
   apunta el <use> del cartel. */
.simbolos {
  display: none;
}