/* src/styles/rics-global.css */
/* Fontes (Google Fonts: Cal Sans + Google Sans Flex, latin e latin-ext) */
@font-face { font-family: 'Cal Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/calsans/v2/fdN99sWUv3gWqXxqqRBStFs04A.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cal Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/calsans/v2/fdN99sWUv3gWqXxqqRBctFs.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/googlesansflex/v23/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwGpVd4AZzz0v6lJ4qFXNZhGjLvDSkV4USKMo6qQzwliVdHAy8xxxg2a2c.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/googlesansflex/v23/t5s6IQcYNIWbFgDgAAzZ34auoVyXkJCOvp3SFWJbN5hF8Ju1x6sKCyp0l9sI40swNJwGpVd4AZzz0v6lJ4qFXNZhGjLvDSkV4USKMo6qQzwliVdHAy8xyRg2.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Tokens ===== */
:root {
  --c-bg: var(--cream, #f3efe6);
  --c-bg-glow: var(--sand, #d4c8af);
  --c-bg-soft: var(--mint, #d6e3db);
  --c-text: var(--ink, #171715);
  --c-heading: var(--forest, #236b43);
  --c-body: var(--stone, #57554f);
  --c-muted: var(--fog, #c8c5bc);
  --c-on-accent: #ffffff;
  --f-display: "Cal Sans", "Google Sans Flex", system-ui, sans-serif;
  --f-body: "Google Sans Flex", system-ui, sans-serif;
}

/* ===== Fundo com gradiente que se move com o scroll ===== */
/* Registrar as variáveis como porcentagem faz o navegador interpolar os valores */
@property --posX { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
@property --posY { syntax: '<percentage>'; inherits: false; initial-value: 20%; }

@keyframes rics-bg-slide {
  0%   { --posX: 10%; --posY: 20%; }
  25%  { --posX: 85%; --posY: 35%; }
  50%  { --posX: 20%; --posY: 80%; }
  75%  { --posX: 90%; --posY: 15%; }
  100% { --posX: 50%; --posY: 90%; }
}

/* overflow-x: clip (e não hidden) evita rolagem lateral sem quebrar o position: sticky no Safari/iPhone */
html { background-color: var(--c-bg); overflow-x: clip; }
body {
  margin: 0;
  color: var(--c-text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  background-color: var(--c-bg);
  background-attachment: fixed;
  background-image: radial-gradient(circle at var(--posX) var(--posY), var(--c-bg-glow), var(--c-bg) 60%);
  animation: rics-bg-slide linear;
  animation-timeline: scroll();
  overflow-x: clip;
}

/* Animações usadas na Home */
@keyframes rx-blink { 50% { opacity: 0; } }

/* Cursor piscando no fim dos títulos com efeito de digitação (“Algumas vezes|”) */
.rx-type::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.04em;
  vertical-align: -0.08em;
  background-color: currentColor;
  animation: rx-blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rx-type::after { animation: none; }
}

/* Bolinha verde do botão “Agendar um horário” */
.rx-btn::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--c-heading);
  transition: background-color 0.2s ease;
}
.rx-btn:hover::before { background-color: #3fae6f; }

/* Bolinha verde ao lado de “Também atendemos agências” */
.rx-agencies__head::before {
  content: "";
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--c-heading);
}

/* Depoimentos — mobile: as aspas do fundo ocupam a largura do slide (sem cortar) e o slide
   tem no mínimo a altura delas; texto por cima, foto embaixo à direita */
@media (max-width: 767px) {
  .rx-quote { display: grid; grid-template-columns: 100%; width: 100%; }
  .rx-quote .rx-quote__bg { position: relative; left: 0; top: 0; grid-area: 1 / 1; width: 100%; height: auto; align-self: start; }
  .rx-quote .rx-quote__body { grid-area: 1 / 1; padding: 96px 8px 24px 24px; max-width: none; }
  .rx-quote .rx-quote__photo { grid-area: 2 / 1; justify-self: end; margin-top: -48px; }
}

/* Depoimentos — desktop: depoimento longo ocupa mais largura (Figma: Component 1/Group 20) */
@media (min-width: 1024px) {
  .rx-quote.rx-quote--wide { width: min(100%, 1100px); }
  .rx-quote--wide .rx-quote__body { width: 100%; max-width: none; box-sizing: border-box; padding: 123px 0 0 100px; }
  .rx-quote--wide .rx-quote__text { max-width: 1001px; }
  .rx-quote--wide .rx-quote__role { max-width: 164px; }
  .rx-quote--wide .rx-quote__photo { align-self: flex-start; margin-left: 281px; margin-top: -80px; }
}

@media (min-width: 768px) {
  .rx-btn::before { width: 20px; height: 20px; }
  .rx-agencies__head::before { width: 41px; height: 41px; margin-top: 12px; }
}
@keyframes rx-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* Carrossel de logos: contínuo, sem relação com a rolagem da página.
   Mobile: bem mais rápido e nunca para. Desktop: pausa só com o mouse em cima.
   Sem script: a faixa inteira anda. Com script (.is-ready): cada logo anda sozinha —
   camadas pequenas, porque o Safari/iPhone descarta pedaços de camadas animadas muito largas
   (era isso que fazia as logos “sumirem e aparecerem”). */
/* Carrossel: sem JS anima por CSS com máscara; com JS (is-ready) o script move a faixa e esmaece as bordas por opacidade (sem mask, que some no iOS) */
.rx-marquee .rx-marquee__track { animation: rx-marquee 60s linear infinite; }
.rx-marquee:not(.is-ready) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rx-marquee.is-ready { -webkit-mask-image: none; mask-image: none; }
.rx-marquee.is-ready .rx-marquee__track { animation: none; }

/* =====================================================================
   Estados interativos (ativados pelo script rics-home.js)
   Ficam aqui, e não nas classes do editor, porque o Instatic não aplica
   de forma confiável regras compostas como “.bloco.is-ready .item”.
   Sem o script (ex.: dentro do editor) nada disso entra e o conteúdo aparece estático.
   ===================================================================== */

/* --- Foto do hero: quadros no canvas + hero preso enquanto envelhece --- */
.rx-hero__photo .rx-hero__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.rx-hero__photo.is-frames .rx-hero__canvas { opacity: 1; }
.rx-hero__photo.is-frames .rx-hero__img { opacity: 0; transition: none; }
.rx-hero-track { position: relative; }
.rx-hero-track.is-pinned .rx-hero { position: sticky; top: calc(var(--rx-hero-top, 0) * 1px); }

/* --- Serviços: serviços + seção seguinte presos juntos (a página “pausa”),
       com o serviço ativo no meio da tela e o conteúdo de baixo já no lugar --- */
.rx-svc .rx-svc__item::before { content: ""; position: absolute; left: 0; top: 8px; width: 25px; height: 25px; border-radius: 50%; background: var(--c-heading); transition: transform 0.4s ease; }
.rx-svc .rx-svc__dots { display: none; }
.rx-svc-track { position: relative; }
.rx-svc-track.is-pinned .rx-svc-pin { position: sticky; top: calc(var(--rx-svc-top, 0) * 1px); }
.rx-svc.is-ready .rx-svc__stage { position: relative; height: var(--stage-h); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.rx-svc.is-ready .rx-svc__list { position: relative; height: 100%; display: block; }
.rx-svc.is-ready .rx-svc__item { position: absolute; top: 0; left: 0; right: 0; transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px)); opacity: var(--o, 1); transition: transform 0.6s cubic-bezier(.2, .7, .2, 1), opacity 0.4s ease; }
.rx-svc.is-ready .rx-svc__item:not(.is-active) .rx-svc__name { color: var(--c-muted); }
.rx-svc.is-ready .rx-svc__item:not(.is-active)::before { transform: scale(0); }
/* só o serviço ativo mostra o texto; os demais mostram apenas o título */
.rx-svc.is-ready .rx-svc__desc { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
.rx-svc.is-ready .rx-svc__item.is-active .rx-svc__desc { opacity: 1; visibility: visible; transition: opacity 0.35s ease 0.3s, visibility 0s linear 0s; }
@media (min-width: 1100px) {
  .rx-svc .rx-svc__item::before { top: 50%; width: 33px; height: 33px; margin-top: -16px; }
}
@media (max-width: 1099px) {
  .rx-svc.is-ready .rx-svc__stage { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .rx-svc.is-ready .rx-svc__item { visibility: hidden; transition: transform 0.5s ease, opacity 0.2s ease, visibility 0s linear 0.2s; }
  .rx-svc.is-ready .rx-svc__item.is-active { visibility: visible; transition: transform 0.5s ease, opacity 0.35s ease 0.25s, visibility 0s linear 0s; }
  .rx-svc.is-ready .rx-svc__item::before { display: none; }
  .rx-svc.is-ready .rx-svc__dots { display: flex; position: absolute; left: 0; top: 0; width: 25px; margin: 0; padding: 0; list-style: none; flex-direction: column; align-items: center; transform: translateY(calc(var(--dy, 0) * 1px)); transition: transform 0.5s cubic-bezier(.2, .7, .2, 1); }
  .rx-svc.is-ready .rx-svc__dots span { display: block; flex: none; width: 10px; height: 10px; margin: 7px 0; border-radius: 50%; background: var(--c-muted); transition: width 0.4s ease, height 0.4s ease, margin 0.4s ease, background 0.4s ease; }
  .rx-svc.is-ready .rx-svc__dots span.is-on { width: 25px; height: 25px; margin: 0; background: var(--c-heading); }
}

/* --- Sobre: cards subindo e empilhando --- */
.rx-about.is-ready .rx-about__stage { position: sticky; top: calc(var(--rx-about-top, 0) * 1px); }
.rx-about.is-ready .rx-about__cards { gap: 0; }
.rx-about.is-ready .rx-about__card { grid-area: 1 / 1; transform: translateY(calc(var(--ty, 0) * 1px)) rotate(var(--rot, -4deg)); background-color: color-mix(in srgb, var(--c-bg-soft) calc(var(--cover, 0) * 100%), var(--c-heading)); will-change: transform; }
.rx-about.is-ready .rx-about__card p { opacity: calc(1 - var(--cover, 0)); }

/* --- Depoimentos: slider (bolinhas em cima, clique ou arraste) --- */
.rx-trust .rx-trust__dots { display: none; }
.rx-trust.is-ready .rx-trust__dots { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: -16px; }
.rx-trust.is-ready .rx-trust__dots button { display: block; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--c-heading); opacity: 0.25; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; }
.rx-trust.is-ready .rx-trust__dots button:hover { opacity: 0.6; }
.rx-trust.is-ready .rx-trust__dots button.is-on { opacity: 1; transform: scale(1.4); }
.rx-trust.is-ready .rx-trust__dots button:focus-visible { outline: 2px solid var(--c-heading); outline-offset: 4px; }
.rx-trust.is-ready .rx-trust__slider { overflow: hidden; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; transition: height 0.45s ease; }
.rx-trust.is-ready .rx-trust__slider.is-dragging { cursor: grabbing; }
.rx-trust.is-ready .rx-trust__track { display: flex; gap: 0; align-items: flex-start; transform: translateX(calc(var(--k, 0) * -100% + var(--dx, 0) * 1px)); transition: transform 0.55s cubic-bezier(.2, .7, .2, 1); }
.rx-trust.is-ready .rx-trust__slider.is-dragging .rx-trust__track { transition: none; }
.rx-trust.is-ready .rx-trust__slide { flex: 0 0 100%; }
.rx-trust.is-ready .rx-trust__slide img { -webkit-user-drag: none; pointer-events: none; }