/* ==========================================================
   Secção "Produtos" e ligação do herói ao DrillRH.
   Cada produto é um <article class="product">. Para acrescentar outro, copia o artigo do DrillRH
   dentro de .product-list e muda o conteúdo. A paleta do cartão é a do produto (marinho e ciano do
   DrillRH), de propósito: o cartão tem a cara do produto, e a página a da Drilldown.
   ========================================================== */

.products{ background: var(--paper); }
.products .section-head p{ color: var(--muted); }

.product-list{ display: grid; gap: 28px; }

.product{
  --dr-marinho: #041125;
  --dr-marinho-2: #0b2447;
  --dr-ciano: #0ba1d9;
  --dr-ciano-claro: #7fd3f2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
  color: #fff;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(11,161,217,.30), transparent 56%),
    linear-gradient(155deg, var(--dr-marinho-2), var(--dr-marinho) 62%);
  box-shadow: 0 40px 90px rgba(4,17,37,.28);
}
/* grelha fina, como nas secções escuras do resto da página */
.product::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(120deg, transparent 12%, #000 78%);
  mask-image: linear-gradient(120deg, transparent 12%, #000 78%);
}
/* o arco do logótipo, a rodar devagar */
.product::after{
  content: "";
  position: absolute;
  z-index: -1;
  right: -200px;
  bottom: -260px;
  width: 540px;
  height: 540px;
  border: 46px solid rgba(11,161,217,.15);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  animation: arco-gira 60s linear infinite;
}

.product-tag{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--dr-ciano-claro);
}
.product-tag::before{
  content: "";
  width: 28px;
  height: 1px;
  background: var(--dr-ciano-claro);
}
.product-logo{ display: block; width: auto; height: 46px; margin: 22px 0 8px; }
.product h3{
  font: 600 clamp(2rem, 3.5vw, 3.2rem)/1.04 var(--serif);
  letter-spacing: -.035em;
  margin: 18px 0 18px;
  max-width: 620px;
}
.product h3 em{ font-style: normal; color: var(--dr-ciano); }
.product-lead{ margin: 0; max-width: 560px; color: #c8d9ea; font-size: 1.08rem; }

.product-points{ list-style: none; padding: 0; margin: 28px 0 0; max-width: 560px; }
.product-points li{
  position: relative;
  padding: 12px 0 12px 30px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .93rem;
  color: #e3edf7;
}
.product-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 11px;
  height: 11px;
  border: 2px solid var(--dr-ciano);
  border-radius: 50%;
}
.product-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: 20px 30px; margin-top: 34px; }
.product .button.primary{ background: var(--dr-ciano); color: var(--dr-marinho); }
.product .button.primary span{ color: var(--dr-marinho); }
.product .text-link{ color: #dbe8f5; border-color: #4d6b8c; }

/* ---------------------------------------------------------- as maquetas do DrillRH */
.product-visual{
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.dr-window{
  width: min(300px, 100%);
  flex: none;
  overflow: hidden;
  color: #1d2a3a;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  transform: translate3d(calc(var(--px, 0) * -9px), calc(var(--py, 0) * -7px), 0);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  animation: dr-flutua 8s ease-in-out infinite;
}
.dr-bar{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #f6f9fc;
  border-bottom: 1px solid rgba(4,17,37,.07);
}
.dr-bar i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(4,17,37,.14); }
.dr-bar span{ margin-left: 8px; color: #566a80; font-size: .78rem; }
.dr-body{ padding: 18px 16px 20px; }
.dr-title{ margin: 0; font: 700 1rem var(--sans); color: #041125; }
.dr-sub{ margin: 2px 0 0; color: #566a80; font-size: .8rem; }
.dr-list{ list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.dr-list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #f6f9fc;
  border: 1px solid rgba(4,17,37,.07);
  border-radius: 11px;
}
.dr-list li.espera{ opacity: .66; }
.dr-mod{ display: flex; align-items: center; gap: 9px; min-width: 0; }
.dr-mod b{ font-size: .85rem; line-height: 1.2; color: #041125; }
.dr-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  color: #064d70;
  background: rgba(9,116,166,.09);
  border: 1px solid rgba(9,116,166,.28);
  border-radius: 8px;
}
.dr-ico svg{ width: 16px; height: 16px; }
.dr-pill{ flex: none; padding: 3px 9px; font-size: .72rem; font-weight: 700; white-space: nowrap; border-radius: 999px; }
.dr-pill.ok{ color: #3b5e2e; background: rgba(79,122,63,.12); }
.dr-pill.curso{ color: #064d70; background: rgba(9,116,166,.10); }
.dr-pill.breve{ color: #566a80; background: #edf2f8; }

.dr-phone{
  width: 190px;
  flex: none;
  margin-top: 96px;
  padding: 8px;
  background: #0f2d52;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  transform: translate3d(calc(var(--px, 0) * 16px), calc(var(--py, 0) * 12px), 0) rotate(2deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  animation: dr-flutua 9s ease-in-out -3s infinite;
}
.dr-screen{ padding: 16px 12px 14px; color: #1d2a3a; background: #fff; border-radius: 23px; }
.dr-top{ display: flex; align-items: center; gap: 8px; }
.dr-top img{ width: 22px; height: auto; }
.dr-top b{ font-size: .82rem; color: #041125; }
.dr-hello{ margin: 14px 0 0; font: 700 .92rem var(--sans); color: #041125; }
.dr-tiles{ list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 7px; }
.dr-tiles li{
  display: grid;
  gap: 5px;
  justify-items: start;
  padding: 10px 11px;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.25;
  color: #041125;
  background: #f6f9fc;
  border: 1px solid rgba(4,17,37,.12);
  border-radius: 10px;
}
.dr-tiles li.ativo{ background: rgba(9,116,166,.09); border-color: rgba(9,116,166,.28); }
.dr-tiles li.espera{ opacity: .68; }
.dr-legenda{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  text-align: center;
  color: rgba(255,255,255,.55);
  font-size: .78rem;
}

/* ---------------------------------------------------------- o herói liga aos produtos */
.hero-novidade{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 9px 18px 9px 14px;
  color: #d6e4ea;
  font-size: .9rem;
  font-weight: 600;
  background: rgba(67,169,220,.08);
  border: 1px solid rgba(135,216,247,.28);
  border-radius: 999px;
  transition: background .25s, border-color .25s, transform .25s;
}
.hero-novidade::before{
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--blue);
  border-radius: 50%;
  animation: pulso 2.4s ease-out infinite;
}
.hero-novidade b{ color: #fff; }
.hero-novidade:hover,
.hero-novidade:focus-visible{ background: rgba(67,169,220,.18); border-color: var(--blue); transform: translateY(-2px); outline: none; }

@keyframes dr-flutua{ 50%{ translate: 0 -10px; } }
@keyframes arco-gira{ to{ transform: rotate(360deg); } }
@keyframes pulso{
  0%{ box-shadow: 0 0 0 0 rgba(67,169,220,.6); }
  70%{ box-shadow: 0 0 0 10px rgba(67,169,220,0); }
  100%{ box-shadow: 0 0 0 0 rgba(67,169,220,0); }
}

@media (max-width: 1000px){
  .product{ grid-template-columns: 1fr; }
  .product-visual{ min-height: 0; padding: 8px 0 34px; }
  .dr-phone{ margin-top: 70px; }
}
@media (max-width: 560px){
  .product{ padding: 28px 20px 26px; }
  .dr-window{ display: none; }
  .dr-phone{ margin-top: 0; }
  .product h3{ font-size: 2.1rem; }
  .hero-novidade{ font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce){
  .product::after, .dr-window, .dr-phone, .hero-novidade::before{ animation: none; }
  .dr-window, .dr-phone{ transition: none; }
}