/* Etiqa — como funciona (arquitetura), garantias e a etiqueta (hardware, ficha, layouts). */

/* ------------------------------------------------------------------ arquitetura */

.arquitetura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  margin-top: var(--e6);
}

.camada {
  position: relative;
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--r-painel);
  background: var(--fundo-alto);
}

/* Cada camada com a cor do seu significado: nuvem violeta, loja teal, prateleira papel. */
.camada--nuvem {
  border-color: var(--nuvem);
  background: linear-gradient(180deg, var(--nuvem-tenue), var(--fundo-alto) 60%);
}

.camada--loja {
  border-color: var(--marca-media);
  background: linear-gradient(180deg, var(--marca-tenue), var(--fundo-alto) 60%);
}

.camada--prateleira {
  border-color: var(--papel-borda-tenue);
  background: linear-gradient(180deg, var(--papel-tenue), var(--fundo-alto) 60%);
}

.camada__titulo {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--t-5);
  line-height: 1;
  color: var(--texto-forte);
}

.camada__onde {
  margin-top: var(--e1);
  margin-bottom: var(--e3);
  font-size: var(--t-1);
  color: var(--texto-fraco);
}

.camada p:last-child {
  font-size: var(--t-1);
}

.enlace {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(5rem, 2rem + 7vw, 11rem);
}

.enlace::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: var(--linha);
}

/* Os feixes só mexem em transform e opacity; o fio fica parado. */
.enlace__feixe {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.enlace__feixe--desce {
  background: linear-gradient(90deg, transparent, var(--marca-clara));
}

.enlace--https .enlace__feixe--desce {
  background: linear-gradient(90deg, transparent, var(--nuvem-clara));
}

.enlace__feixe--sobe {
  background: linear-gradient(90deg, var(--marca-clara), transparent);
  transform-origin: right center;
}

.em-vista .enlace__feixe--desce {
  animation: feixe-desce 3.6s var(--saida) infinite;
}

.em-vista .enlace__feixe--sobe {
  animation: feixe-sobe 3.6s var(--saida) infinite;
}

@keyframes feixe-desce {
  0% { transform: scaleX(0); opacity: 1; }
  30% { transform: scaleX(1); opacity: 1; }
  45% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes feixe-sobe {
  0%, 50% { transform: scaleX(0); opacity: 1; }
  80% { transform: scaleX(1); opacity: 1; }
  92% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}

.enlace__rotulo {
  position: absolute;
  left: 50%;
  top: calc(50% + 0.75rem);
  width: calc(100% - 0.5rem);
  transform: translateX(-50%);
  font-size: var(--t-0);
  line-height: 1.3;
  text-align: center;
  color: var(--texto-fraco);
}

@media (max-width: 62em) {
  .arquitetura {
    grid-template-columns: minmax(0, 1fr);
  }

  .enlace {
    width: auto;
    height: 7rem;
  }

  .enlace::before,
  .enlace__feixe {
    left: 2rem;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    margin-top: 0;
  }

  .enlace__feixe {
    transform: scaleY(0);
    transform-origin: center top;
  }

  .enlace__feixe--desce {
    background: linear-gradient(180deg, transparent, var(--marca-clara));
  }

  .enlace--https .enlace__feixe--desce {
    background: linear-gradient(180deg, transparent, var(--nuvem-clara));
  }

  .enlace__feixe--sobe {
    background: linear-gradient(180deg, var(--marca-clara), transparent);
    transform-origin: center bottom;
  }

  .em-vista .enlace__feixe--desce {
    animation-name: feixe-desce-v;
  }

  .em-vista .enlace__feixe--sobe {
    animation-name: feixe-sobe-v;
  }

  .enlace__rotulo {
    left: 3.5rem;
    top: 50%;
    width: auto;
    max-width: calc(100% - 4rem);
    transform: translateY(-50%);
    text-align: left;
  }
}

@keyframes feixe-desce-v {
  0% { transform: scaleY(0); opacity: 1; }
  30% { transform: scaleY(1); opacity: 1; }
  45% { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 0; }
}

@keyframes feixe-sobe-v {
  0%, 50% { transform: scaleY(0); opacity: 1; }
  80% { transform: scaleY(1); opacity: 1; }
  92% { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 0; }
}

.garantias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--e4) var(--e5);
  margin-top: var(--e6);
  font-size: var(--t-1);
  color: var(--texto-fraco);
}

.garantias li {
  padding-top: var(--e3);
  border-top: 1px solid var(--linha);
}

/* ------------------------------------------------------------------ hardware */

.hardware {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
  margin-top: var(--e6);
}

.pilha {
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--r-painel);
  background: var(--fundo-alto);
}

.pilha__desenho {
  width: 100%;
  height: auto;
}

.pilha__rotulo {
  font: 700 13px var(--fonte-corpo);
  fill: var(--texto-forte);
}

.pilha__medida {
  font: 400 12px var(--fonte-mono);
  fill: var(--texto-fraco);
}

.pilha__base {
  stroke: var(--linha);
  stroke-dasharray: 4 4;
}

.pilha figcaption {
  margin-top: var(--e3);
  font-size: var(--t-0);
  color: var(--texto-fraco);
}

.ficha__item {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--e3);
  padding-block: var(--e3);
  border-top: 1px solid var(--linha-fraca);
}

.ficha__item:last-child {
  border-bottom: 1px solid var(--linha-fraca);
}

.ficha dt {
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--t-4);
  line-height: 1.1;
  color: var(--marca-clara);
}

.ficha dd {
  font-size: var(--t-1);
}

@media (max-width: 62em) {
  .hardware {
    grid-template-columns: minmax(0, 1fr);
  }

  .ficha__item {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }
}

@media (max-width: 30em) {
  .ficha__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e1);
  }
}

/* ------------------------------------------------------------------ os três layouts */

.layouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e5) var(--e4);
  margin-top: var(--e5);
}

.layouts__item h4 {
  margin-top: var(--e4);
  font-family: var(--fonte-display);
  font-weight: 700;
  font-size: var(--t-4);
  line-height: 1;
  color: var(--texto-forte);
}

.layouts__item p {
  margin-top: var(--e2);
  font-size: var(--t-1);
  color: var(--texto-fraco);
}

@media (max-width: 52em) {
  .layouts {
    grid-template-columns: minmax(0, 1fr);
    max-width: 30rem;
  }
}