/* ==========================================================================
   RioGráfica · Design tokens
   Gerado a partir das collections Figma «Primitives» (142) e «Semantic» (73).
   Ficheiro: RioGráfica · Website — 21/09/2026

   REGRA: nenhum valor deste ficheiro se escreve à mão noutro sítio.
   Widgets Elementor usam Variables v4; CSS custom usa var().
   Se um valor aqui divergir da variável no Figma, a variável ganha.

   CARREGAMENTO: este ficheiro é enfileirado APENAS nas páginas listadas em
   riografica-ds.php (o novo site em rascunho). A página de manutenção em
   produção não o recebe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRIMITIVAS
   -------------------------------------------------------------------------- */

:root {

  /* --- Cor · teal (institucional) --- */
  --color-teal-50:  #f3f9f8;
  --color-teal-100: #e5f5f2;
  --color-teal-200: #c6f1e9;
  --color-teal-300: #9cefdf;
  --color-teal-400: #5ff2d6;
  --color-teal-500: #00b996;
  --color-teal-600: #009176;
  --color-teal-700: #006e59;
  --color-teal-800: #004b3c;
  --color-teal-900: #003b30;
  --color-teal-950: #0a231e;

  /* --- Cor · neutral --- */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8f9f9;
  --color-neutral-100: #f3f4f4;
  --color-neutral-200: #e4e7e6;
  --color-neutral-300: #d2d6d5;
  --color-neutral-400: #b4bbba;
  --color-neutral-500: #939f9c;
  --color-neutral-600: #73827f;
  --color-neutral-700: #5b6765;
  --color-neutral-800: #424c4a;
  --color-neutral-900: #2a3230;
  --color-neutral-950: #0a231e;

  /* --- Cor · cyan (acento de ação) --- */
  --color-cyan-50:  #f3ffff;
  --color-cyan-100: #e5ffff;
  --color-cyan-200: #c6ffff;
  --color-cyan-300: #80ffff;
  --color-cyan-400: #33ffff;
  --color-cyan-500: #00ffff;
  --color-cyan-600: #00c8c9;
  --color-cyan-700: #009897;
  --color-cyan-800: #006766;
  --color-cyan-900: #005152;
  --color-cyan-950: #003033;

  /* --- Cor · magenta (quadricromia, uso gráfico) --- */
  --color-magenta-50:  #fff3ff;
  --color-magenta-100: #ffe5ff;
  --color-magenta-200: #ffc6ff;
  --color-magenta-300: #ff66ff;
  --color-magenta-400: #ff33ff;
  --color-magenta-500: #ff00ff;
  --color-magenta-600: #c800c9;
  --color-magenta-700: #980097;
  --color-magenta-800: #670066;
  --color-magenta-900: #510052;
  --color-magenta-950: #300033;

  /* --- Cor · yellow (quadricromia, uso gráfico) --- */
  --color-yellow-50:  #fffff3;
  --color-yellow-100: #ffffe5;
  --color-yellow-200: #ffffc6;
  --color-yellow-300: #ffff66;
  --color-yellow-400: #ffff33;
  --color-yellow-500: #ffff00;
  --color-yellow-600: #c8c900;
  --color-yellow-700: #989700;
  --color-yellow-800: #676600;
  --color-yellow-900: #515200;
  --color-yellow-950: #303300;

  /* --- Cor · feedback (rampas parciais) --- */
  --color-green-50:  #f3f7f5;
  --color-green-100: #e9f5ef;
  --color-green-200: #d3ebdf;
  --color-green-500: #1e9e6a;
  --color-green-700: #13714b;

  --color-amber-50:  #f8f6f2;
  --color-amber-500: #e0a400;
  --color-amber-700: #9d7300;

  --color-red-50:  #f7f3f3;
  --color-red-500: #d64545;
  --color-red-700: #a52121;

  --color-blue-50:  #f3f5f7;
  --color-blue-500: #2f80b9;
  --color-blue-700: #1e5a84;

  /* --- Espaçamento --- */
  --space-0:   0px;
  --space-4:   4px;
  --space-8:   8px;
  --space-12:  12px;
  --space-16:  16px;
  --space-20:  20px;
  --space-24:  24px;
  --space-32:  32px;
  --space-40:  40px;
  --space-48:  48px;
  --space-64:  64px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;

  /* --- Raios --- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* --- Larguras de borda --- */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 4px;

  /* --- Breakpoints (documentação / JS) --- */
  --breakpoint-sm:  480px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;
  --breakpoint-2xl: 1440px;

  /* --- Camadas --- */
  --z-index-base:     0;
  --z-index-dropdown: 1000;
  --z-index-sticky:   1100;
  --z-index-overlay:  1200;
  --z-index-modal:    1300;
  --z-index-toast:    1400;

  /* --- Tipografia · família --- */
  --font-family-primary:  "Amulya";
  --font-family-fallback: "Amulya Fallback", Arial;
  --font-stack: var(--font-family-primary), var(--font-family-fallback), sans-serif;

  /* --- Tipografia · pesos --- */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* --- Tipografia · tamanhos em bruto --- */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-64: 64px;

  /* --- Tipografia · line-height e letter-spacing --- */
  --font-line-height-tight:   1;
  --font-line-height-snug:    1.2;
  --font-line-height-normal:  1.4;
  --font-line-height-relaxed: 1.5;
  --font-line-height-loose:   1.6;

  --font-letter-spacing-tight:  -0.5px;
  --font-letter-spacing-normal: 0px;
  --font-letter-spacing-wide:   0.5px;
  --font-letter-spacing-wider:  1px;

  /* --- Movimento --- */
  --motion-duration-fast:   100ms;
  --motion-duration-base:   200ms;
  --motion-duration-slow:   300ms;
  --motion-duration-slower: 500ms;

  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-in:       cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-out:      cubic-bezier(0, 0, 0.2, 1);
  --motion-easing-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. SEMÂNTICOS
   -------------------------------------------------------------------------- */

:root {

  /* --- Surface (9) --- */
  --color-surface-base:         var(--color-neutral-0);
  --color-surface-subtle:       var(--color-neutral-50);
  --color-surface-sunken:       var(--color-neutral-100);
  --color-surface-raised:       var(--color-neutral-0);
  --color-surface-inverse:      var(--color-teal-950);
  --color-surface-brand:        var(--color-teal-800);
  --color-surface-brand-subtle: var(--color-teal-50);
  --color-surface-menu:         var(--color-surface-inverse);
  --color-surface-green-subtle: var(--color-green-100);

  /* --- Text (8) --- */
  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary:  var(--color-neutral-600);
  --color-text-inverse:   var(--color-neutral-0);
  --color-text-on-brand:  var(--color-neutral-0);
  --color-text-brand:     var(--color-teal-800);
  --color-text-link:      var(--color-teal-700);
  --color-text-disabled:  var(--color-neutral-400);

  /* --- Brand (7) — o verde é o botão SECUNDÁRIO --- */
  --color-brand-primary:         var(--color-teal-800);
  --color-brand-primary-hover:   var(--color-teal-900);
  --color-brand-primary-active:  var(--color-teal-950);
  --color-brand-secondary:       var(--color-teal-500);
  --color-brand-secondary-hover: var(--color-teal-600);
  --color-brand-secondary-active:var(--color-teal-700);
  --color-brand-on-primary:      var(--color-neutral-0);

  /* --- Border (6) --- */
  --color-border-subtle:       var(--color-neutral-100);
  --color-border-default:      var(--color-neutral-200);
  --color-border-strong:       var(--color-neutral-300);
  --color-border-focus:        var(--color-teal-600);
  --color-border-brand:        var(--color-teal-800);
  --color-border-green-subtle: var(--color-green-200);

  /* --- Action (6) — o ciano é o botão PRIMÁRIO --- */
  --color-action-primary:         var(--color-cyan-500);
  --color-action-primary-hover:   var(--color-cyan-600);
  --color-action-primary-pressed: var(--color-cyan-700);
  --color-action-on-primary:      var(--color-teal-950);
  --color-action-disabled:        var(--color-neutral-200);
  --color-action-on-disabled:     var(--color-neutral-500);

  /* --- Feedback (12) --- */
  --color-feedback-success-bg:   var(--color-green-50);
  --color-feedback-success-base: var(--color-green-500);
  --color-feedback-success-fg:   var(--color-green-700);

  --color-feedback-warning-bg:   var(--color-amber-50);
  --color-feedback-warning-base: var(--color-amber-500);
  --color-feedback-warning-fg:   var(--color-amber-700);

  --color-feedback-error-bg:     var(--color-red-50);
  --color-feedback-error-base:   var(--color-red-500);
  --color-feedback-error-fg:     var(--color-red-700);

  --color-feedback-info-bg:      var(--color-blue-50);
  --color-feedback-info-base:    var(--color-blue-500);
  --color-feedback-info-fg:      var(--color-blue-700);

  /* --- Overlay --- */
  --color-overlay-scrim: rgba(0, 0, 0, 0.5);

  /* --- Espaçamento semântico · layout (desktop) --- */
  --space-layout-section-y:   var(--space-96);
  --space-layout-section-x:   var(--space-120);
  --space-layout-section-gap: var(--space-48);
  --space-layout-hero-gap:    var(--space-64);
  --space-layout-band-y:      var(--space-64);
  --space-layout-nav-x:       var(--space-48);
  --space-layout-nav-y:       var(--space-20);

  /* --- Espaçamento semântico · composição --- */
  --space-container:    var(--space-24);
  --space-stack:        var(--space-16);
  --space-inline:       var(--space-8);
  --space-card-padding: var(--space-20);
  --space-card-gap:     var(--space-8);
  --space-card-gap-lg:  var(--space-16);

  /* --- Tipografia · papéis (tamanho) --- */
  --font-size-heading-xl:  var(--font-size-48);
  --font-size-heading-l:   var(--font-size-40);
  --font-size-heading-m:   var(--font-size-36);
  --font-size-heading-s:   var(--font-size-32);
  --font-size-heading-xs:  var(--font-size-24);
  --font-size-heading-xxs: var(--font-size-20);
  --font-size-body-l:      var(--font-size-18);
  --font-size-body-m:      var(--font-size-16);
  --font-size-body-s:      var(--font-size-14);
  --font-size-caption:     var(--font-size-12);

  /* --- Contentor e grelha --- */
  --layout-content-width: 1200px;
  --layout-reading-width: 792px;
  --layout-gutter:        var(--space-24);
  --layout-columns:       12;

  /* --- Elevação --- */
  --elevation-md:
    0 2px 4px -1px rgba(10, 35, 30, 0.08),
    0 4px 8px -1px rgba(10, 35, 30, 0.10);
}

/* --------------------------------------------------------------------------
   3. MODO MOBILE (< 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {

    --color-overlay-scrim: rgba(10, 35, 30, 0.5);

    --space-layout-section-y:   var(--space-48);
    --space-layout-section-x:   var(--space-24);
    --space-layout-section-gap: var(--space-32);
    --space-layout-hero-gap:    var(--space-32);
    --space-layout-band-y:      var(--space-40);
    --space-layout-nav-x:       var(--space-16);
    --space-layout-nav-y:       var(--space-12);

    --space-container:    var(--space-16);
    --space-stack:        var(--space-12);
    --space-card-padding: var(--space-16);
    --space-card-gap-lg:  var(--space-12);

    --font-size-heading-xl:  var(--font-size-32);
    --font-size-heading-l:   var(--font-size-28);
    --font-size-heading-m:   var(--font-size-26);
    --font-size-heading-s:   var(--font-size-24);
    --font-size-heading-xs:  var(--font-size-20);
    --font-size-heading-xxs: var(--font-size-18);
    --font-size-body-l:      var(--font-size-16);

    --layout-content-width: 342px;
    --layout-gutter:        var(--space-16);
    --layout-columns:       4;
  }
}

/* --------------------------------------------------------------------------
   4. PAPÉIS TIPOGRÁFICOS — classes utilitárias
   -------------------------------------------------------------------------- */

.t-heading-xl,
.t-heading-l,
.t-heading-m,
.t-heading-s,
.t-heading-xs,
.t-heading-xxs,
.t-body-l,
.t-body-m,
.t-body-s,
.t-caption,
.t-label {
  font-family: var(--font-stack);
}

.t-heading-xl {
  font-size: var(--font-size-heading-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: var(--font-letter-spacing-tight);
}

.t-heading-l {
  font-size: var(--font-size-heading-l);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--font-letter-spacing-tight);
}

.t-heading-m {
  font-size: var(--font-size-heading-m);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-snug);
  letter-spacing: -0.25px;
}

.t-heading-s {
  font-size: var(--font-size-heading-s);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-snug);
  letter-spacing: -0.25px;
}

.t-heading-xs {
  font-size: var(--font-size-heading-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: var(--font-letter-spacing-normal);
}

.t-heading-xxs {
  font-size: var(--font-size-heading-xxs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-normal);
}

.t-body-l {
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-relaxed);
  letter-spacing: var(--font-letter-spacing-normal);
}

.t-body-m {
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-relaxed);
  letter-spacing: var(--font-letter-spacing-normal);
}

.t-body-s {
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-normal);
  letter-spacing: var(--font-letter-spacing-normal);
}

.t-caption {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-normal);
  letter-spacing: 0.25px;
}

.t-label {
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-snug);
  letter-spacing: var(--font-letter-spacing-normal);
}

/* --------------------------------------------------------------------------
   5. BASE
   -------------------------------------------------------------------------- */

body.rg-ds {
  font-family: var(--font-stack);
  font-size: var(--font-size-body-m);
  line-height: var(--font-line-height-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-surface-base);
}

/* Anel de focus único do projeto. */
body.rg-ds :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-width-md) solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Links em texto corrido. */
body.rg-ds .entry-content a:not([class]) {
  color: var(--color-text-link);
  text-decoration: underline;
}

/* Alvos de toque em mobile. */
@media (max-width: 767px) {
  body.rg-ds :where(a, button, [role="button"], input[type="submit"]) {
    min-block-size: 44px;
  }
}

/* --------------------------------------------------------------------------
   6. ACORDEÃO (widget v3 nested-accordion)
   O acordeão não tem equivalente atómico em v4, por isso usa-se o widget v3.
   Sem estas regras herda a tipografia dos Global Colors/Fonts v3 do site
   (os da página de manutenção) em vez dos tokens do projeto.
   -------------------------------------------------------------------------- */

body.rg-ds .e-n-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

body.rg-ds .e-n-accordion-item {
  border-block-end: var(--border-width-sm) solid var(--color-border-default);
}

body.rg-ds .e-n-accordion-item-title {
  font-family: var(--font-stack);
  font-size: var(--font-size-heading-xxs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  color: var(--color-text-primary);
  padding-block: var(--space-16);
}

body.rg-ds .e-n-accordion-item > .e-con,
body.rg-ds .e-n-accordion-item .elementor-widget-text-editor {
  font-family: var(--font-stack);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-relaxed);
  color: var(--color-text-secondary);
}

body.rg-ds .e-n-accordion-item > .e-con {
  padding-block-end: var(--space-16);
}

/* --------------------------------------------------------------------------
   7. CARTOES DE PRODUTO (shortcode [riografica_produtos])
   O markup vem do plugin RioGrafica - Produtos e reutiliza as Global Classes
   do design system (rg-card-flush, rg-t-*, rg-btn-secondary). Aqui fica so
   o layout da grelha e das zonas internas do cartao.
   -------------------------------------------------------------------------- */

body.rg-ds .rg-produtos-grupo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  inline-size: 100%;
}

body.rg-ds .rg-produtos-grupo-titulo {
  text-wrap: balance;
  /* Era heading-s/500 e destoava: todos os H2 de seccao do site usam a
     global class rg-t-heading-l (heading-l / 700). Alinhado. */
  font-family: var(--font-stack);
  font-size: var(--font-size-heading-l);
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin: 0;
}

body.rg-ds .rg-produtos-grelha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  width: 100%;
}

body.rg-ds .rg-produtos-grelha[data-colunas="1"] { grid-template-columns: minmax(0, 1fr); }
body.rg-ds .rg-produtos-grelha[data-colunas="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.rg-ds .rg-produtos-grelha[data-colunas="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Entre o desktop e o telemovel ha o tablet: quatro colunas a 800px dao
   cartoes de 180px, estreitos demais para o titulo e o preco respirarem.
   Passa a duas. */
@media (max-width: 1024px) {

  body.rg-ds .rg-produtos-grelha[data-colunas="4"],
  body.rg-ds .rg-produtos-grelha[data-colunas="3"],
  body.rg-ds .rg-produtos-grelha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* O cartao nao depende das Global Classes do Elementor: o Elementor so emite
   CSS das classes em uso nos elementos do documento, e este markup vem do
   plugin. Tudo aqui sai dos tokens - zero valores hardcoded. */
body.rg-ds .rg-produto-card {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  background-color: var(--color-surface-base);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--elevation-md);
}

body.rg-ds .rg-produto-titulo {
  font-family: var(--font-stack);
  font-size: var(--font-size-heading-xxs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-line-height-normal);
  margin: 0;
}

body.rg-ds .rg-produto-descricao {
  font-family: var(--font-stack);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-normal);
  margin: 0;
}

body.rg-ds .rg-produto-preco-rotulo {
  font-family: var(--font-stack);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-normal);
}

body.rg-ds .rg-produto-preco-valor {
  font-family: var(--font-stack);
  font-size: var(--font-size-heading-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
}

body.rg-ds .rg-produto-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-inline);
  font-family: var(--font-stack);
  font-size: var(--font-size-body-s);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-full);
  background-color: var(--color-brand-secondary);
  color: var(--color-text-on-brand);
  border: 0;
}

body.rg-ds .rg-produto-botao:hover  { background-color: var(--color-brand-secondary-hover); }
body.rg-ds .rg-produto-botao:active { background-color: var(--color-brand-secondary-active); }

body.rg-ds .rg-produto-media {
  block-size: 225px;
  flex: 0 0 225px;
  background-color: var(--color-surface-sunken);
  overflow: hidden;
}

body.rg-ds .rg-produto-media a,
body.rg-ds .rg-produto-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

body.rg-ds .rg-produto-conteudo {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-card-gap);
  padding: var(--space-card-padding);
}

body.rg-ds .rg-produto-titulo { color: var(--color-text-primary); }

body.rg-ds .rg-produto-titulo a {
  color: inherit;
  text-decoration: none;
}

body.rg-ds .rg-produto-titulo a:hover { text-decoration: underline; }

body.rg-ds .rg-produto-descricao { color: var(--color-text-secondary); }

body.rg-ds .rg-produto-preco {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: 0;
  padding-block-start: var(--space-8);
}

body.rg-ds .rg-produto-preco-rotulo { color: var(--color-text-tertiary); }
body.rg-ds .rg-produto-preco-valor  { color: var(--color-text-primary); }

body.rg-ds .rg-produto-cta {
  padding-inline: var(--space-card-padding);
  padding-block-end: var(--space-card-padding);
}

body.rg-ds .rg-produto-botao {
  inline-size: 100%;
  text-decoration: none;
}

/* Carrossel horizontal em mobile - regra geral do projeto para fiadas de cards. */
@media (max-width: 767px) {
  body.rg-ds .rg-produtos-grelha,
  body.rg-ds .rg-produtos-grelha[data-colunas] {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    gap: var(--space-12);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  body.rg-ds .rg-produtos-grelha > * { scroll-snap-align: start; }
}

/* Respeitar quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
  body.rg-ds *,
  body.rg-ds *::before,
  body.rg-ds *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   8. FALLBACK METRICO DA AMULYA

   Familia sintetica a partir da Arial, ajustada as metricas reais da Amulya
   (unitsPerEm 1000 - ascender 1040, descender 350, lineGap 90,
   xAvgCharWidth 564 - lidas do proprio ficheiro Amulya-Regular.ttf).

   Com font-display: swap o texto pinta logo na fallback e so depois troca.
   Sem estes overrides essa troca mexe o layout e conta como CLS. Com eles,
   a fallback ocupa praticamente o mesmo espaco que a Amulya e a troca
   passa despercebida.

   size-adjust = 56.4%% (Amulya) / 55.6%% (Arial) = 101.4%%
   Os restantes overrides estao divididos por esse 1.014, porque o
   size-adjust ja reescala o em da fallback.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Amulya Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 101.4%;
  ascent-override: 102.5%;
  descent-override: 34.5%;
  line-gap-override: 8.9%;
}


/* --------------------------------------------------------------------------
   9. NAVEGACAO PRINCIPAL

   Markup vindo do shortcode [riografica_nav], por isso o CSS vive aqui e nao
   nas Global Classes do Elementor: o Elementor so emite CSS das classes que
   estao em uso nos elementos do documento, e este markup nasce em PHP.
   Mesma decisao, mesma razao, que nos cartoes de produto.

   Um so markup serve desktop e mobile. Abaixo de 768px o painel passa a
   overlay lateral; acima disso e uma linha simples.
   -------------------------------------------------------------------------- */

body.rg-ds .rg-nav {
  display: flex;
  align-items: center;
}

body.rg-ds .rg-nav-lista {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-32);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rg-ds .rg-nav-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rg-ds .rg-nav-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-stack);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-normal);
  color: var(--color-text-on-brand);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

/* Sublinhado so no hover: o header e denso e sublinhar tudo em permanencia
   competiria com os dois botoes, que sao a accao que queremos. */
body.rg-ds .rg-nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

body.rg-ds .rg-nav-link.is-atual {
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

body.rg-ds .rg-nav-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 3px;
}

/* Botao e fundo so existem em mobile. */
body.rg-ds .rg-nav-toggle {
  display: none;
}

body.rg-ds .rg-nav-fundo {
  display: none;
}

/* --------------------------------------------------------------------------
   9.1 Menu mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

  body.rg-ds .rg-nav-toggle {
    position: relative;
    z-index: calc(var(--z-index-modal) + 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-on-brand);
    cursor: pointer;
    border-radius: var(--radius-sm);
  }

  body.rg-ds .rg-nav-toggle:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
  }

  /* Tres barras desenhadas em CSS - sem icon font, sem SVG a carregar. */
  body.rg-ds .rg-nav-toggle-barras,
  body.rg-ds .rg-nav-toggle-barras::before,
  body.rg-ds .rg-nav-toggle-barras::after {
    display: block;
    inline-size: 22px;
    block-size: 2px;
    background-color: currentColor;
    border-radius: var(--radius-full);
    transition: transform 180ms ease, opacity 120ms ease;
  }

  body.rg-ds .rg-nav-toggle-barras::before,
  body.rg-ds .rg-nav-toggle-barras::after {
    content: "";
    position: absolute;
  }

  body.rg-ds .rg-nav-toggle-barras::before {
    transform: translateY(-7px);
  }

  body.rg-ds .rg-nav-toggle-barras::after {
    transform: translateY(7px);
  }

  /* Com a gaveta aberta o X passa a fixo no canto dela. Sem isto o botao
     fica onde o flex do header o deixou - a meio do ecra, por cima do
     painel, sem relacao visivel com nada. */
  body.rg-ds .rg-nav.is-aberto .rg-nav-toggle {
    position: fixed;
    inset-block-start: var(--space-16);
    inset-inline-end: var(--space-16);
  }

  body.rg-ds .rg-nav.is-aberto .rg-nav-toggle-barras {
    background-color: transparent;
  }

  body.rg-ds .rg-nav.is-aberto .rg-nav-toggle-barras::before {
    transform: rotate(45deg);
  }

  body.rg-ds .rg-nav.is-aberto .rg-nav-toggle-barras::after {
    transform: rotate(-45deg);
  }

  body.rg-ds .rg-nav-fundo {
    display: block;
    position: fixed;
    inset: 0;
    background-color: var(--color-overlay-scrim);
    z-index: var(--z-index-overlay);
  }

  body.rg-ds .rg-nav-fundo[hidden] {
    display: none;
  }

  body.rg-ds .rg-nav-painel {
    position: fixed;
    inset-block-start: 0;
    inset-inline-end: 0;
    block-size: 100dvh;
    inline-size: min(86vw, 360px);
    z-index: var(--z-index-modal);
    padding: var(--space-96) var(--space-24) var(--space-24);
    background-color: var(--color-surface-menu);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 240ms;
  }

  body.rg-ds .rg-nav.is-aberto .rg-nav-painel {
    transform: translateX(0);
    visibility: visible;
    transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  body.rg-ds .rg-nav-lista {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  /* Alvo de toque completo: a linha inteira e clicavel, nao so o texto. */
  body.rg-ds .rg-nav-link {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    inline-size: 100%;
    padding-block: var(--space-8);
    font-size: var(--font-size-heading-xxs);
    font-weight: var(--font-weight-medium);
  }

  body.rg-nav-bloqueado {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {

  body.rg-ds .rg-nav-painel,
  body.rg-ds .rg-nav-toggle-barras,
  body.rg-ds .rg-nav-toggle-barras::before,
  body.rg-ds .rg-nav-toggle-barras::after {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   10. IMAGENS

   Markup vindo do shortcode [riografica_imagem], logo CSS aqui e nao em
   Global Classes — mesma razao do menu e dos cartoes de produto.

   Tres papeis, e so tres:
   · rg-imagem          — o <picture>, bloco normal no fluxo
   · rg-media-fundo     — imagem de fundo de uma seccao ou cartao
   · rg-scrim-*         — o degrade que garante contraste do texto por cima
   -------------------------------------------------------------------------- */

/* O <picture> so estica a altura quando a imagem vem do nosso shortcode e
   preenche um slot de medida fixa. As miniaturas dos cartoes de produto,
   que o filtro do WebP tambem embrulha em <picture>, mantem a altura
   natural - esticar essas partia o cartao. */
body.rg-ds .rg-imagem {
  display: block;
  inline-size: 100%;
}

body.rg-ds .rg-imagem:has(> .rg-imagem-ficheiro) {
  block-size: 100%;
}

body.rg-ds .rg-imagem > img:not(.rg-imagem-ficheiro) {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

body.rg-ds .rg-imagem-ficheiro {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Ponto focal do recorte.

   Com object-fit: cover o browser corta pelo centro, e o centro geometrico
   de uma fotografia raramente e o centro do assunto. Numa fotografia de
   equipa isso corta cabecas: o slot e mais baixo do que a imagem e os 50%
   por omissao tiram metade de cima e metade de baixo.

   Passa-se pelo atributo `classe` do shortcode, junto da imagem, que e
   onde a decisao pertence - e nao em CSS por pagina, que ninguem encontra
   quando a fotografia for trocada.

   Nota: so manda no eixo em que ha corte. Se o recorte for horizontal,
   como acontece nos heros em mobile, o valor vertical nao faz nada. */
body.rg-ds .rg-foco-topo > .rg-imagem-ficheiro    { object-position: 50% 0%; }
body.rg-ds .rg-foco-alto > .rg-imagem-ficheiro    { object-position: 50% 25%; }
body.rg-ds .rg-foco-baixo > .rg-imagem-ficheiro   { object-position: 50% 75%; }
body.rg-ds .rg-foco-base > .rg-imagem-ficheiro    { object-position: 50% 100%; }
body.rg-ds .rg-foco-esquerda > .rg-imagem-ficheiro { object-position: 0% 50%; }
body.rg-ds .rg-foco-direita > .rg-imagem-ficheiro  { object-position: 100% 50%; }

/* Uma seccao ou cartao que recebe imagem de fundo. O isolation cria um
   contexto de mistura proprio: sem ele o mix-blend-mode do scrim sangrava
   para o que estivesse por baixo na pagina. */
body.rg-ds .rg-com-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.rg-ds .rg-media-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* O conteudo tem de subir acima da imagem e do scrim. */
body.rg-ds .rg-sobre-media {
  position: relative;
  z-index: 2;
}

/* Scrim do hero: transparente em cima, surface/menu em baixo.
   multiply em vez de opacidade simples mantem os pretos da fotografia
   sem lavar as cores a meio do degrade. */
/* Duas camadas, nao uma. O texto do hero assenta a esquerda, mas o scrim
   original so escurecia de cima para baixo: onde o titulo estava, a
   fotografia podia ser clara e o branco perdia contraste. A camada
   horizontal garante o fundo sob o texto; a vertical assenta o pé do bloco.
   Deixou de usar mix-blend-mode: multiply porque o multiply tinge a
   fotografia de verde e o resultado depende da imagem — com alfa explicito
   o mimimo de contraste e previsivel e verificavel. */
body.rg-ds .rg-scrim-hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* O degrade so ganha peso no terco inferior, onde o titulo assenta. O
     topo fica limpo porque e la que esta o assunto da fotografia - no
     Sobre, as caras da equipa. Um veu que arranca a 0.4 e fecha a 1 dava
     contraste de sobra ao texto e escurecia a imagem toda para o
     conseguir: pagava-se com a fotografia o que se resolve com o degrade.

     Os valores nao sao de gosto. No ponto onde o H1 assenta (~78% da
     altura do bloco) o alfa interpolado e ~0.64, o que da um fundo
     equivalente a #5F706C no pior caso - uma fotografia branca por baixo -
     e cerca de 5:1 contra texto branco. O titulo e Heading XL, que pelo
     WCAG AA precisa de 3:1, por isso ha folga mesmo na imagem mais clara
     que la venha a ser posta. */
  background-image:
    linear-gradient(
      to bottom,
      rgba(10, 35, 30, 0) 0%,
      rgba(10, 35, 30, 0.05) 45%,
      rgba(10, 35, 30, 0.45) 68%,
      rgba(10, 35, 30, 0.82) 88%,
      rgba(10, 35, 30, 0.92) 100%
    );
}

/* O mix-blend-mode: multiply saiu daqui. O comentario acima ja dizia que
   tinha saido - o codigo e que nao tinha acompanhado. Multiply tinge a
   fotografia de verde, multiplica-se com o alfa do proprio degrade e faz
   o resultado depender da imagem: a mesma regra escurecia muito mais uma
   fotografia clara do que uma escura. Com alfa explicito o contraste
   minimo e previsivel e verificavel. */

/* Em mobile o bloco e mais baixo (280px contra 420px) e o titulo ocupa a
   largura toda, por isso o peso tem de subir mais cedo - mas sem fechar a
   1, que era o que tapava a fotografia por completo no pe do bloco. */
@media (max-width: 767px) {

  body.rg-ds .rg-scrim-hero {
    background-image:
      linear-gradient(
        to bottom,
        rgba(10, 35, 30, 0) 0%,
        rgba(10, 35, 30, 0.1) 35%,
        rgba(10, 35, 30, 0.55) 62%,
        rgba(10, 35, 30, 0.88) 85%,
        rgba(10, 35, 30, 0.94) 100%
      );
  }
}

/* A coluna de texto do hero para nos 52% — e a proporcao do Figma. Nao e
   so composicao: o scrim lateral cobre a metade esquerda, e texto que
   atravessasse o bloco todo acabava por cair na zona limpa da fotografia,
   onde o contraste deixa de estar garantido. Limitar a coluna e o que
   permite um scrim mais suave e deixar a fotografia respirar. */
body.rg-ds .rg-hero-bloco > .rg-sobre-media {
  max-inline-size: 52%;
}

@media (max-width: 1024px) {

  body.rg-ds .rg-hero-bloco > .rg-sobre-media {
    max-inline-size: 100%;
  }
}
/* Scrim para blocos de texto centrado (os CTA). O scrim lateral do hero
   nao serve aqui: escurecia so um lado e deixava o texto centrado sobre a
   zona clara da fotografia. Veu uniforme, que e o que um bloco simetrico
   pede, com reforco ao centro onde o texto assenta. */
body.rg-ds .rg-scrim-centro {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* O Figma define aqui color/overlay/scrim: preto a 50% em multiply,
     uniforme. O veu esverdeado com reforco radial que estava aqui era
     invencao minha — mais escuro e com um centro que o design nao pede. */
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: multiply;
}
/* Scrim do cartao editorial: preto a subir do fundo ate 54% da altura,
   que e onde o texto do cartao comeca. */
body.rg-ds .rg-scrim-cartao {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 54%);
}

/* Cartao editorial (Card-artigo do Figma): a imagem e o cartao inteiro,
   o texto assenta em baixo sobre o scrim. */
body.rg-ds .rg-cartao-editorial {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-block-size: 489px;
  padding: var(--space-card-padding);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-md);
}

/* --------------------------------------------------------------------------
   6.1 SETA DOS CARTOES EDITORIAIS (icon-button do Figma)

   No Figma e um icon-button: circulo de 40px em brand/secondary com a seta
   a 24px, encostado a direita por baixo do texto. Aqui e um pseudo-elemento
   e nao markup porque, enquanto o cartao nao tiver destino, a seta e
   affordance visual e nao um controlo: assim nao acrescenta um alvo vazio
   a navegacao por teclado nem ruido a quem usa leitor de ecra. Quando os
   destinos estiverem decididos, o cartao inteiro passa a link e a seta
   continua a servir tal como esta.

   O SVG vai embutido em data-URI: um pedido HTTP para duas linhas nao se
   justifica, e assim a seta nao pisca ao carregar.
   -------------------------------------------------------------------------- */

body.rg-ds .rg-cartao-editorial::after {
  content: "";
  align-self: flex-end;
  flex: none;
  margin-block-start: var(--space-8);
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 6L19 12L13 18' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;

  /* O scrim do cartao esta em z-index 1; sem isto a seta ficava por baixo. */
  position: relative;
  z-index: 2;
}

@media (max-width: 767px) {

  body.rg-ds .rg-cartao-editorial {
    min-block-size: 300px;
  }
}

/* --------------------------------------------------------------------------
   10.1 O widget do Elementor entre o contentor e o <picture>

   O shortcode e renderizado dentro do wrapper do widget. Sem isto o wrapper
   fica com altura automatica e a imagem de fundo colapsa para 0.
   -------------------------------------------------------------------------- */

/* O Elementor envolve o shortcode em dois a tres divs (elementor-element >
   elementor-widget-container > elementor-shortcode). Contar niveis com
   "> * > *" partia assim que o Elementor mudava o wrapper, e o e-con do
   contentor de fundo ainda acrescentava 10px de padding a toda a volta —
   era esse recuo que deixava ver o fundo do bloco por dentro do canto
   arredondado. Solucao independente da profundidade: os wrappers deixam de
   existir para o layout (display:contents) e o <picture> passa a ancorar
   directamente no contentor. */

body.rg-ds .rg-media-fundo {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body.rg-ds .rg-media-fundo .elementor-element,
body.rg-ds .rg-media-fundo .elementor-widget-container,
body.rg-ds .rg-media-fundo .elementor-shortcode {
  display: contents;
}

body.rg-ds .rg-media-fundo .rg-imagem {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

body.rg-ds .rg-media-fundo .rg-imagem-ficheiro {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Mesmo problema nos slots de fotografia que nao sao fundo (cartoes da
   equipa, blocos de processo): o padding do e-con encolhia a imagem por
   dentro do proprio raio do slot. */

body.rg-ds .rg-slot-media {
  padding: 0;
  overflow: hidden;
}

body.rg-ds .rg-slot-media .elementor-element,
body.rg-ds .rg-slot-media .elementor-widget-container,
body.rg-ds .rg-slot-media .elementor-shortcode {
  display: contents;
}

body.rg-ds .rg-slot-media .rg-imagem,
body.rg-ds .rg-slot-media .rg-imagem-ficheiro {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   11. LINHA DO TEMPO (Marcos)

   O ponto e a linha sao desenhados em CSS. No Figma o ponto e um SVG, mas
   um pedido HTTP para um circulo cheio nao se justifica.
   -------------------------------------------------------------------------- */

body.rg-ds .rg-marco-trilho {
  position: relative;
  inline-size: 100%;
  block-size: 16px;
}

body.rg-ds .rg-marco-trilho::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  block-size: 2px;
  background-color: var(--color-text-inverse);
  opacity: 0.5;
}

body.rg-ds .rg-marco-trilho::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-inverse);
}

@media (max-width: 767px) {

  /* Em coluna a linha horizontal deixa de fazer sentido: fica so o ponto. */
  body.rg-ds .rg-marco-trilho::before {
    inset-inline-end: auto;
    inline-size: 48px;
  }
}

/* --------------------------------------------------------------------------
   12. BLOCO DE PESQUISA DE PRODUTOS (Figma: Section / Produtos)

   O campo e as pills sao, para ja, so aparencia: o desenho esta fechado mas
   a pesquisa e a filtragem ainda nao existem. Ficam com semantica de botao
   para que, quando ganharem comportamento, nao seja preciso mexer no markup.
   -------------------------------------------------------------------------- */

body.rg-ds .rg-pesquisa {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  inline-size: 560px;
  max-inline-size: 100%;
  padding-inline-start: var(--space-20);
  padding-inline-end: var(--space-8);
  padding-block: var(--space-8);
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  text-align: start;
  cursor: pointer;
}

body.rg-ds .rg-pesquisa-texto {
  flex: 1 0 0;
  min-inline-size: 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-body-m);
  line-height: 1.5;
}

body.rg-ds .rg-pesquisa-icone {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-full);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11 18C14.866 18 18 14.866 18 11C18 7.13401 14.866 4 11 4C7.13401 4 4 7.13401 4 11C4 14.866 7.13401 18 11 18Z' stroke='%23004B3C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M21 21L16.7 16.7' stroke='%23004B3C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

body.rg-ds .rg-pills {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  inline-size: 880px;
  max-inline-size: 100%;
}

body.rg-ds .rg-pill {
  /* Os containers do Elementor nascem com width:100%. Sem isto cada pill
     ocupava uma linha inteira e o flex-wrap nao tinha nada que fazer. */
  inline-size: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  block-size: 32px;
  padding-inline: 16px;
  padding-block: 8px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

/* O estado activo do Figma: fundo branco e anel de 2px. A borda passa de 1
   para 2px, por isso descontam-se 1px em cada lado do padding - sem isto a
   pill activa ficava 2px mais larga e a linha de pills saltava. */
body.rg-ds .rg-pill.is-ativa {
  border-width: 2px;
  border-color: var(--color-border-focus);
  padding-inline: 15px;
  background-color: var(--color-surface-base);
  color: var(--color-action-on-primary);
}

@media (max-width: 767px) {

  body.rg-ds .rg-pills {
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   13. HEADER EM MOBILE E TABLET

   A maquete mobile troca os dois botoes por um icone de perfil ao lado do
   hamburguer. Com os botoes ligados, o logotipo ficava por baixo deles num
   ecra de 390px — nao era falta de espaco entre eles, era sobreposicao.
   -------------------------------------------------------------------------- */

/* Nome acessivel para controlos que sao so um icone. */
body.rg-ds .rg-so-leitor {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.rg-ds .rg-header-perfil {
  display: none;
}

@media (max-width: 1024px) {

  /* Os dois CTA saem do header: a accao principal passa a viver dentro da
     gaveta, onde ha espaco para eles a largura toda. */
  body.rg-ds .rg-header-actions > .rg-btn-primary,
  body.rg-ds .rg-header-actions > .rg-btn-secondary {
    display: none;
  }

  body.rg-ds .rg-header-perfil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-sm);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 21C4 16.6 7.6 14 12 14C16.4 14 20 16.6 20 21' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
  }

  body.rg-ds .rg-header-perfil:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
  }

  /* O Figma poe 32px entre o perfil e o hamburguer; os 44px de alvo de toque
     ja incluem folga, por isso o gap visual fica nos 32 com os alvos a
     tocarem-se sem se sobreporem. */
  body.rg-ds .rg-header-actions {
    gap: var(--space-16);
  }
}

/* --------------------------------------------------------------------------
   14. CARROSSEL EM MOBILE

   Em mobile as filas de cartoes passam a deslizar na horizontal em vez de
   encolherem. A grelha de produtos ja fazia isto pelo seu lado; aqui fica
   como padrao reutilizavel para qualquer fila de cartoes.

   A sangria negativa leva o carrossel ate ao limite do ecra e devolve o
   recuo por padding: sem isto o primeiro cartao comecava alinhado mas o
   ultimo ficava a meio, com a fila a parecer cortada por engano em vez de
   continuada.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* Sangria lateral partilhada pelos dois carrosseis.
     --rg-inset e a distancia do limite do ecra ate a coluna de conteudo, ou
     seja a posicao do titulo da seccao. Ate 390px vale 24px (padding da
     seccao) + 10px (padding default do e-con). Acima disso o container tem
     max-inline-size: 342px e fica centrado, por isso o recuo cresce com a
     largura -- e era esse caso que faltava cobrir.

     Valores em px e nao em %: numa scroll container a % do scroll-padding
     resolve contra o scrollport (100vw) e dava 0, o que fazia o snap colar o
     primeiro cartao ao limite e anular o padding. */
  body.rg-ds .rg-carrossel,
  body.rg-ds .rg-produtos-grelha,
  body.rg-ds .rg-produtos-grelha[data-colunas] {
    --rg-inset: 34px;
    inline-size: 100vw;
    margin-inline-start: calc(var(--rg-inset) * -1);
    margin-inline-end: 0;
    padding-inline-start: var(--rg-inset);
    padding-inline-end: 0;
    scroll-padding-inline-start: var(--rg-inset);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  body.rg-ds .rg-carrossel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-12);
  }

  body.rg-ds .rg-carrossel > * {
    flex: 0 0 300px;
    scroll-snap-align: start;
  }

  /* Largura fixa em vez de 80%: com a sangria a caixa de conteudo passou a
     ser o ecra inteiro e a percentagem dava cartoes fora da escala do Figma. */
  body.rg-ds .rg-produtos-grelha,
  body.rg-ds .rg-produtos-grelha[data-colunas] {
    grid-auto-columns: 277px;
  }

  body.rg-ds .rg-produtos-grelha > * {
    scroll-snap-align: start;
  }
}

/* Acima de 390px o container de conteudo atinge o max-inline-size de 342px e
   passa a estar centrado: o recuo deixa de ser fixo e cresce com o ecra. */
@media (min-width: 391px) and (max-width: 767px) {

  body.rg-ds .rg-carrossel,
  body.rg-ds .rg-produtos-grelha,
  body.rg-ds .rg-produtos-grelha[data-colunas] {
    --rg-inset: calc((100vw - 342px) / 2 + 10px);
  }
}

/* --------------------------------------------------------------------------
   15. SEM SCROLL HORIZONTAL

   A gaveta do menu vive fora do ecra a direita (translateX(100%)) e, apesar
   de fixed e invisivel, a caixa transformada continua a contar para a area
   de scroll do documento: ficavam ~312px de largura a mais e via-se uma
   faixa vazia ao lado do conteudo em mobile.

   clip e nao hidden: hidden faria da raiz um contentor de scroll e partia o
   position:sticky do header. clip corta sem criar esse contentor.
   -------------------------------------------------------------------------- */

html:has(body.rg-ds) {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   16. BREADCRUMB

   Tres niveis, com o percurso navegavel a verde (text/link) e o nivel atual
   em text/secondary — e a hierarquia do Figma: o que e clicavel le-se como
   accao, o que e a posicao atual le-se como etiqueta.
   -------------------------------------------------------------------------- */

body.rg-ds .rg-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  font-size: 14px;
  line-height: normal;
}

body.rg-ds .rg-breadcrumb > * {
  inline-size: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

body.rg-ds .rg-breadcrumb .s-bc-inicio,
body.rg-ds .rg-breadcrumb .s-bc-produtos,
body.rg-ds .rg-breadcrumb .s-bc-todos {
  font-weight: 500;
}

body.rg-ds .rg-breadcrumb .s-bc-sep,
body.rg-ds .rg-breadcrumb .s-bc-sep-2 {
  font-weight: 400;
}

/* O link herda a cor do span para a cor ficar definida num sitio so. */
body.rg-ds .rg-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

body.rg-ds .rg-breadcrumb a:hover {
  text-decoration: underline;
}

body.rg-ds .rg-breadcrumb a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   17. SOBRE — BLOCO COMERCIAL EM MOBILE

   Na maquete mobile a faixa do Comercial ocupa a largura toda do ecra e os
   cartoes correm na horizontal, com o seguinte a espreitar na margem direita.
   Em desktop mantem-se como cartao inserido na coluna de 1200.

   A sangria e de 24px: e o gutter da seccao nesta pagina, ja sem os 10px
   default do e-con, que foram zerados nos dados do Elementor.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  body.rg-ds .rg-comercial-banda {
    inline-size: 100vw;
    margin-inline-start: -24px;
    padding-inline: 24px;
    border-radius: 0;
  }

  body.rg-ds .rg-comercial-cartoes {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    inline-size: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* o fim da fila encosta ao limite do ecra, como no Figma */
    margin-inline-end: -24px;
    padding-inline-end: 0;
  }

  body.rg-ds .rg-comercial-cartoes > * {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }
}

/* =========================================================
   18. PADRAO DECORATIVO CMYK — Home / Produtos em destaque
   Ficheiro: home/destaques-padrao-cmyk.png (744x814), ja recortado
   a medida do que e visivel na maquete (Figma: seccao 1440x961,
   padrao de x=696 ate a margem direita e de y=0 ate y=814).
   Encosta sempre a direita para nunca abrir folga; ate 1440 segue
   a coluna de conteudo e sangra para fora, cortado pelo overflow.
   ========================================================= */
@media (min-width: 768px) {
  body.rg-ds .s-home-destaques {
    position: relative;
    overflow: hidden;
  }

  body.rg-ds .s-home-destaques > .rg-padrao-decor {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    inline-size: 744px;
    block-size: 814px;
    inset-block-start: 0;
    inset-inline-start: max(calc(50% - 600px + 576px), calc(100% - 744px));
    padding: 0;
    margin: 0;
  }

  body.rg-ds .s-home-destaques > .rg-padrao-decor > .elementor-element,
  body.rg-ds .s-home-destaques > .rg-padrao-decor .elementor-shortcode,
  body.rg-ds .s-home-destaques > .rg-padrao-decor .rg-imagem {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
  }

  body.rg-ds .s-home-destaques > .rg-padrao-decor .rg-imagem img {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
    object-position: top right;
    display: block;
  }

  /* o conteudo fica sempre por cima do padrao */
  body.rg-ds .s-home-destaques-in {
    position: relative;
    z-index: 1;
  }
}

/* Em mobile o padrao nao existe na maquete. Nao aplicamos overflow
   hidden a seccao para nao cortar o carrossel de 100vw (ver 14). */
@media (max-width: 767px) {
  body.rg-ds .s-home-destaques > .rg-padrao-decor { display: none; }
}

/* =========================================================
   19. FAQs — acordeao (Home)
   Chevron em vez de +/-, do lado direito. Tracco 1.5 em caixa
   24 (convencao de icones do DS). Pintado com mask +
   currentColor, para herdar a cor do texto em todos os estados.
   ========================================================= */
body.rg-ds .s-home-faqs {
  --rg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body.rg-ds .s-home-faqs .e-n-accordion-item-title {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-inline: 0;
}

body.rg-ds .s-home-faqs .e-n-accordion-item-title-header {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* o icone passa para o fim da linha, encostado a direita */
body.rg-ds .s-home-faqs .e-n-accordion-item-title-icon {
  order: 2;
  flex: 0 0 24px;
  inline-size: 24px;
  block-size: 24px;
  margin-inline-start: auto;
  display: grid;
  place-items: center;
}

/* esconde o + / - do Elementor sem lhe mexer na marcacao */
body.rg-ds .s-home-faqs .e-n-accordion-item-title-icon > span > svg {
  display: none;
}

body.rg-ds .s-home-faqs .e-n-accordion-item-title-icon > span {
  inline-size: 24px;
  block-size: 24px;
  display: block;
  background-color: currentColor;
  -webkit-mask-image: var(--rg-chevron);
  mask-image: var(--rg-chevron);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  transition: transform 150ms ease;
}

/* aberto: a seta aponta para cima */
body.rg-ds .s-home-faqs .e-n-accordion-item[open] .e-n-accordion-item-title-icon > span {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  body.rg-ds .s-home-faqs .e-n-accordion-item-title-icon > span {
    transition: none;
  }
}

/* --- 19b. Bordas do acordeao ---------------------------------
   O widget n-accordion do Elementor desenha DUAS caixas fechadas
   por item: uma a volta do titulo
     .elementor-widget-n-accordion .e-n-accordion-item-title
       { border-width: var(--n-accordion-border-width) }   (1px, 4 lados)
   e outra a volta do painel da resposta
     :where(... .e-n-accordion-item > .e-con) { border: 1px ... }
   A maquete tem so uma linha por baixo do item inteiro (titulo +
   resposta). Anulamos as duas caixas e pomos a linha no <details>,
   que envolve os dois.
   ------------------------------------------------------------- */
body.rg-ds .s-home-faqs .e-n-accordion-item-title,
body.rg-ds .s-home-faqs .e-n-accordion-item > .e-con {
  border: 0;
  border-radius: 0;
}

body.rg-ds .s-home-faqs .e-n-accordion-item {
  border-block-end: 1px solid var(--color-border-default);
  border-radius: 0;
}

/* a resposta alinha com o titulo: sem os 10px do widget */
body.rg-ds .s-home-faqs .e-n-accordion-item > .e-con {
  padding-inline: 0;
}

/* =========================================================
   20. Pagina Empresa (299)
   ========================================================= */

/* --- 20a. Padrao decorativo CMYK na seccao Equipa ---------
   Mesmo recorte da Home (744x814). Encosta a direita para
   nunca abrir folga; ate 1440 segue a coluna de conteudo e
   sangra para fora, cortado pelo overflow da seccao.
   ---------------------------------------------------------- */
@media (min-width: 768px) {
  body.rg-ds .s-emp-equipa {
    position: relative;
    overflow: hidden;
  }

  body.rg-ds .s-emp-equipa > .rg-padrao-decor {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    inline-size: 744px;
    block-size: 814px;
    inset-block-start: 0;
    inset-inline-start: max(calc(50% - 600px + 576px), calc(100% - 744px));
    padding: 0;
    margin: 0;
  }

  body.rg-ds .s-emp-equipa > .rg-padrao-decor > .elementor-element,
  body.rg-ds .s-emp-equipa > .rg-padrao-decor .elementor-shortcode,
  body.rg-ds .s-emp-equipa > .rg-padrao-decor .rg-imagem {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    padding: 0;
  }

  body.rg-ds .s-emp-equipa > .rg-padrao-decor .rg-imagem img {
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
    object-position: top right;
    display: block;
  }

  body.rg-ds .s-emp-equipa-in {
    position: relative;
    z-index: 1;
  }
}

/* Em mobile nao ha padrao e a seccao NAO leva overflow hidden,
   senao cortava a banda comercial de 100vw (ver 17). */
@media (max-width: 767px) {
  body.rg-ds .s-emp-equipa > .rg-padrao-decor { display: none; }
}

/* --- 20b. Impressao em mobile -----------------------------
   No desktop o bloco e foto | texto. Em mobile a maquete tem
   titulo e texto primeiro e a foto por baixo, como nos outros
   dois blocos. So trocamos a ordem visual; a ordem do DOM
   mantem-se, por isso a leitura e a tabulacao nao mudam.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  body.rg-ds .s-emp-imp-texto { order: 0; }
  body.rg-ds .s-emp-imp-media { order: 1; }
}

/* =========================================================
   21. Pagina Sustentabilidade (301) — mobile
   ========================================================= */

@media (max-width: 767px) {

  /* --- 21a. Certificacoes em carrossel --------------------
     Sangria calculada, nao fixa: calc(50% - 50vw) encosta a
     caixa a margem do ecra seja qual for o padding da seccao,
     e o padding simetrico repoe o primeiro cartao alinhado
     com o texto. Snap "proximity" porque % em scroll-padding
     resolve contra o scrollport, nao contra o pai.
     -------------------------------------------------------- */
  body.rg-ds .rg-cert-carrossel {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-12);
    inline-size: 100vw;
    margin-inline-start: calc(50% - 50vw);
    margin-inline-end: calc(50% - 50vw);
    padding-inline-start: calc(50vw - 50%);
    padding-inline-end: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Em px: % em scroll-padding resolve contra o scrollport, nao
       contra o pai. Ate 390 a coluna e o ecra menos 24 de cada lado;
       acima disso bate no max-inline-size de 342 e passa a ser
       centrada, por isso a margem cresce (ver a media query abaixo).
       Sem isto o snap encosta o primeiro cartao ao ecra. */
    scroll-padding-inline-start: 24px;
  }

  body.rg-ds .rg-cert-carrossel > * {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }

  /* --- 21b. Linha do tempo em coluna ----------------------
     Ponto e linha a esquerda, ano e rotulo a direita, como na
     maquete. Cada marco e uma grelha de 2 colunas; o trilho
     ocupa a coluna 1 em toda a altura e a linha prolonga-se
     ate ao ponto seguinte. O ultimo marco nao desenha linha.
     -------------------------------------------------------- */
  body.rg-ds .s-sus-marcos-linha > * {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: var(--space-16);
    row-gap: var(--space-4);
    align-items: start;
    padding-inline-end: 0;
  }

  body.rg-ds .s-sus-marcos-linha .rg-marco-trilho {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: stretch;
    inline-size: 16px;
    block-size: auto;
  }

  body.rg-ds .s-sus-marcos-linha [class*="s-sus-marco-ano-"] {
    grid-column: 2;
    grid-row: 1;
  }

  body.rg-ds .s-sus-marcos-linha [class*="s-sus-marco-rot-"] {
    grid-column: 2;
    grid-row: 2;
  }

  /* linha vertical: do centro do ponto ate ao ponto seguinte */
  body.rg-ds .s-sus-marcos-linha .rg-marco-trilho::before {
    inset-inline: 50%;
    inset-block-start: 8px;
    inset-block-end: calc(var(--space-24) * -1);
    translate: -50% 0;
    inline-size: 2px;
    block-size: auto;
  }

  body.rg-ds .s-sus-marcos-linha > *:last-child .rg-marco-trilho::before {
    display: none;
  }

  /* ponto encostado ao topo, alinhado com a linha do ano */
  body.rg-ds .s-sus-marcos-linha .rg-marco-trilho::after {
    inset-inline-start: 0;
    inset-block-start: 0;
    translate: none;
  }
}

/* --- 21c. Correccao da linha do tempo ---------------------
   A linha passa a ser desenhada pelo proprio marco, nao pelo
   trilho: o trilho e um item de grelha e nao estica de forma
   fiavel para as duas linhas, o que deixava a linha a acabar
   a meio. Assim a linha cobre sempre a altura do marco mais
   o intervalo ate ao ponto seguinte. O trilho fica so com o
   ponto, com 16px fixos para o ponto e a linha ficarem
   concentricos.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  body.rg-ds .s-sus-marcos-linha > * {
    position: relative;
  }

  body.rg-ds .s-sus-marcos-linha > *::before {
    content: "";
    position: absolute;
    inset-inline-start: 7px;
    inset-block-start: 8px;
    inset-block-end: calc(var(--space-24) * -1);
    inline-size: 2px;
    background-color: var(--color-text-inverse);
    opacity: 0.5;
    pointer-events: none;
  }

  body.rg-ds .s-sus-marcos-linha > *:last-child::before {
    content: none;
  }

  body.rg-ds .s-sus-marcos-linha .rg-marco-trilho {
    inline-size: 16px;
    min-inline-size: 16px;
    max-inline-size: 16px;
    block-size: 16px;
    align-self: start;
  }

  /* a linha horizontal do desktop nao existe em coluna */
  body.rg-ds .s-sus-marcos-linha .rg-marco-trilho::before {
    content: none;
  }

  body.rg-ds .s-sus-marcos-linha .rg-marco-trilho::after {
    inset-inline-start: 0;
    inset-block-start: 0;
    translate: none;
  }
}

/* Acima de 390 a coluna de conteudo fica centrada nos 342 do Figma,
   por isso a margem lateral deixa de ser 24 e passa a crescer. */
@media (min-width: 391px) and (max-width: 767px) {
  body.rg-ds .rg-cert-carrossel {
    scroll-padding-inline-start: calc((100vw - 342px) / 2);
  }
}

/* =========================================================
   22. Pagina Contactos (302) — indicador de passos
   A linha entre os dois passos cresce para ocupar o espaco
   livre; os passos nao encolhem.
   ========================================================= */
body.rg-ds .rg-passos > .rg-passos-linha {
  flex: 1 1 auto;
  min-inline-size: var(--space-24);
  align-self: center;
}

@media (max-width: 767px) {
  /* Em ecra estreito os dois rotulos mais a linha nao cabem.
     Mantem-se a linha, mais curta, para nao partir a metafora. */
  body.rg-ds .rg-passos {
    gap: var(--space-8);
  }

  body.rg-ds .rg-passos > .rg-passos-linha {
    min-inline-size: var(--space-12);
  }
}

/* --- 22b. Passos: largura pelo conteudo ---------------------
   O e-div-block do Elementor nasce com width:100%, por isso os
   dois passos esticavam e empurravam a linha para o meio. A
   largura tem de vir do conteudo; so a linha e que cresce.
   Fica em CSS e nao nos estilos do Elementor porque a
   propriedade width la so aceita medidas, nao "auto".
   ------------------------------------------------------------ */
body.rg-ds .rg-passos > .s-cont-passo-1,
body.rg-ds .rg-passos > .s-cont-passo-2 {
  inline-size: auto;
  flex: 0 0 auto;
}

/* o circulo do numero tem de ser mesmo redondo: sem isto o
   min-inline-size automatico do flex alarga-o para 30px */
body.rg-ds .rg-passo-num {
  inline-size: 24px;
  min-inline-size: 24px;
  max-inline-size: 24px;
  block-size: 24px;
  flex: 0 0 24px;
}

/* o rotulo nao parte a meio */
body.rg-ds .rg-passos > * > [class*="s-cont-passo-"][class*="-t"] {
  white-space: nowrap;
}

/* =========================================================
   23. Lista de conteudos (Mestria no processo)
   Componente do Figma «Lista de conteudos»: um Destaque em
   card com imagem inteira e tres Linhas compactas.
   Markup do shortcode [riografica_conteudos], logo CSS aqui.
   ========================================================= */
body.rg-ds .rg-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  inline-size: 100%;
}

/* --- Destaque ------------------------------------------- */
body.rg-ds .rg-destaque {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  block-size: 489px;
  inline-size: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  text-decoration: none;
  box-shadow:
    0 2px 4px -1px rgba(10, 35, 30, 0.08),
    0 4px 8px -1px rgba(10, 35, 30, 0.10);
}

body.rg-ds .rg-destaque-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-surface-sunken);
}

body.rg-ds .rg-destaque-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* Scrim so no terco inferior: o Figma pede preto a subir ate
   54% da altura, em multiply. */
body.rg-ds .rg-destaque-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 54%);
  mix-blend-mode: multiply;
}

body.rg-ds .rg-destaque-conteudo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  inline-size: 100%;
}

body.rg-ds .rg-destaque-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  color: var(--color-text-inverse);
}

body.rg-ds .rg-destaque-categoria {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
}

body.rg-ds .rg-destaque-titulo {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

body.rg-ds .rg-destaque-cta {
  display: flex;
  justify-content: flex-end;
  padding-block-start: var(--space-8);
}

body.rg-ds .rg-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-brand-secondary);
  color: var(--color-text-inverse);
  flex: 0 0 40px;
}

body.rg-ds .rg-destaque:hover .rg-icon-button {
  background-color: var(--color-brand-secondary-hover);
}

body.rg-ds .rg-destaque:focus-visible,
body.rg-ds .rg-linha:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* --- Linhas --------------------------------------------- */
body.rg-ds .rg-linhas {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

body.rg-ds .rg-linha {
  display: flex;
  gap: var(--space-20);
  align-items: flex-start;
  padding-block: var(--space-20);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

body.rg-ds .rg-linha-media {
  flex: 0 0 120px;
  inline-size: 120px;
  block-size: 88px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
}

body.rg-ds .rg-linha-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

body.rg-ds .rg-linha-conteudo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
  flex: 1 1 auto;
}

body.rg-ds .rg-linha-categoria {
  font-size: var(--font-size-caption);
  line-height: 1.4;
  letter-spacing: 0.25px;
  color: var(--color-text-brand);
}

body.rg-ds .rg-linha-titulo {
  font-size: var(--font-size-heading-xs);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text-primary);
}

body.rg-ds .rg-linha:hover .rg-linha-titulo {
  color: var(--color-text-link);
}

body.rg-ds .rg-linha-meta {
  font-size: var(--font-size-caption);
  line-height: 1.4;
  letter-spacing: 0.25px;
  color: var(--color-text-tertiary);
}

body.rg-ds .rg-linha-divisoria {
  block-size: 1px;
  inline-size: 100%;
  background-color: var(--color-border-subtle);
}

@media (max-width: 767px) {
  body.rg-ds .rg-destaque {
    block-size: 301px;
  }

  body.rg-ds .rg-linha {
    gap: var(--space-12);
  }

  body.rg-ds .rg-linha-media {
    flex: 0 0 88px;
    inline-size: 88px;
    block-size: 66px;
  }

  body.rg-ds .rg-linha-titulo {
    font-size: 18px;
  }
}

/* --- 23b. Wrapper <picture> ------------------------------
   O filtro de WebP do projecto embrulha as imagens em <picture>.
   Sem altura no wrapper, o block-size:100% do <img> resolvia
   contra um pai de altura automatica e a imagem ficava cortada
   por baixo. O wrapper tem de preencher o slot.
   --------------------------------------------------------- */
body.rg-ds .rg-destaque-media picture,
body.rg-ds .rg-linha-media picture {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}


/* =========================================================================
   §24 — Breadcrumb (componente unico: [riografica_breadcrumb])
   Padrao unico para todas as paginas. Zero valores hardcoded.
   ========================================================================= */

body.rg-ds .rg-breadcrumb { inline-size: 100%; }

body.rg-ds .rg-breadcrumb-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: var(--font-size-body-s);
  line-height: 1.4;
}

body.rg-ds .rg-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

body.rg-ds .rg-breadcrumb-sep {
  color: var(--color-text-tertiary);
  margin-inline: var(--space-8);
  flex: 0 0 auto;
}

/* Em mobile a regra global de alvos de toque poe min-block-size: 44px em
   todos os <a>. Como o link era display: block, o texto encostava ao topo
   dessa caixa enquanto os separadores e a pagina actual (20px) ficavam
   centrados - dai o desalinhamento vertical. Com inline-flex + center, o
   texto centra-se na caixa seja qual for a altura, e a linha alinha.
   Nao se remove os 44px: e o alvo de toque. */
body.rg-ds .rg-breadcrumb-link,
body.rg-ds .rg-breadcrumb-atual,
body.rg-ds .rg-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
}

body.rg-ds .rg-breadcrumb-link {
  color: var(--color-text-link);
  text-decoration: none;
  border-radius: var(--radius-sm, 4px);
}

body.rg-ds .rg-breadcrumb-link:hover,
body.rg-ds .rg-breadcrumb-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.rg-ds .rg-breadcrumb-link:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

body.rg-ds .rg-breadcrumb-atual {
  color: var(--color-text-brand);
}


/* =========================================================================
   §25 — Botao (recipe partilhada pelos componentes em shortcode)
   Espelha as global classes rg-btn-primary/secondary do Elementor.
   Consolidar as duas no plugin riografica-core antes do go-live.
   ========================================================================= */

body.rg-ds .rg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-inline);
  padding: var(--space-12) var(--space-24);
  border: 0;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--font-size-body-s);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  min-block-size: 44px;
}

body.rg-ds .rg-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

body.rg-ds .rg-btn--primary {
  background-color: var(--color-action-primary);
  color: var(--color-action-on-primary);
}

body.rg-ds .rg-btn--primary:hover { background-color: var(--color-action-primary-hover); }
body.rg-ds .rg-btn--primary:active { background-color: var(--color-action-primary-pressed); }

body.rg-ds .rg-btn--secondary {
  background-color: var(--color-brand-secondary);
  color: var(--color-text-on-brand);
}

body.rg-ds .rg-btn--secondary:hover { background-color: var(--color-brand-secondary-hover); }
body.rg-ds .rg-btn--secondary:active { background-color: var(--color-brand-secondary-active); }


/* =========================================================================
   §26 — Ecra de autenticacao (Login / Registo)
   Figma 1685:11883. Duas colunas iguais; a coluna da marca leva a
   curva de 160px do lado direito, o mesmo gesto dos heros.
   ========================================================================= */

/* O ecra de autenticacao ocupa exactamente a viewport: sem scroll de pagina
   e sem faixa branca a volta do verde, seja qual for a altura do ecra.
   Quando o cartao nao cabe, e a coluna do formulario que rola, nunca a pagina. */
body.rg-ds .rg-auth {
  display: flex;
  align-items: stretch;
  block-size: 100vh;
  block-size: 100svh;
  min-block-size: 100vh;
  min-block-size: 100svh;
  overflow: hidden;
  background-color: var(--color-surface-base);
}

/* Rede de seguranca: o e-con do Elementor injecta 10px de padding por
   omissao e a faixa branca reaparece se o objecto de estilo se perder.
   So a raiz - as colunas tem o seu proprio padding. */
body.rg-ds .rg-auth.e-con { padding: 0; }

body.rg-ds .rg-auth-marca {
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-80);
  overflow: hidden;
  background-color: var(--color-surface-menu);
  border-start-end-radius: 160px;
  border-end-end-radius: 160px;
}

body.rg-ds .rg-auth-logo {
  inline-size: 150px;
  block-size: 48px;
  object-fit: contain;
  object-position: left center;
}

body.rg-ds .rg-auth-titulo {
  margin: 0;
  color: var(--color-text-inverse);
  font-size: var(--font-size-heading-l);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

body.rg-ds .rg-auth-texto {
  margin: 0;
  max-inline-size: 560px;
  color: var(--color-text-inverse);
  opacity: 0.85;
  font-size: var(--font-size-body-l);
  line-height: 1.5;
}

body.rg-ds .rg-auth-painel {
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-80);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Portateis baixos: o respiro de 80px deixa de caber. */
@media (min-width: 768px) and (max-height: 820px) {
  body.rg-ds .rg-auth-marca,
  body.rg-ds .rg-auth-painel { padding-block: var(--space-48); }
}

/* Os widgets do Elementor entram como wrappers de bloco: dar-lhes largura
   total permite alinhar o fechar a direita e centrar o cartao. */
body.rg-ds .rg-auth-painel > * { inline-size: 100%; }

body.rg-ds .rg-login-fechar-linha {
  display: flex;
  justify-content: flex-end;
  inline-size: 100%;
}

body.rg-ds .rg-login-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: var(--space-32);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

body.rg-ds .rg-login-fechar:hover { background-color: var(--color-surface-subtle); }

body.rg-ds .rg-login-fechar:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

body.rg-ds .rg-login-card {
  inline-size: 100%;
  max-inline-size: 400px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

body.rg-ds .rg-login-titulo {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-m);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.25px;
}

body.rg-ds .rg-login-subtitulo {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-s);
  line-height: 1.4;
}

body.rg-ds .rg-login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

body.rg-ds .rg-login-msg:empty { display: none; }

body.rg-ds .rg-campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

body.rg-ds .rg-campo-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-body-s);
  font-weight: 500;
}

body.rg-ds .rg-campo-input {
  inline-size: 100%;
  padding: var(--space-12) var(--space-16);
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-body-m);
  line-height: 1.4;
}

body.rg-ds .rg-campo-input::placeholder { color: var(--color-text-tertiary); }

body.rg-ds .rg-campo-input:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 1px var(--color-border-focus);
}

body.rg-ds .rg-login-recuperar {
  align-self: flex-end;
  color: var(--color-text-link);
  font-size: var(--font-size-body-s);
  line-height: 1.4;
  text-decoration: none;
}

body.rg-ds .rg-login-recuperar:hover,
body.rg-ds .rg-login-recuperar:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.rg-ds .rg-login-btn { inline-size: 100%; }

/* Tablet: a curva encolhe para nao comer a coluna da marca. */
@media (max-width: 1024px) {
  body.rg-ds .rg-auth-marca,
  body.rg-ds .rg-auth-painel { padding: var(--space-48); }

  body.rg-ds .rg-auth-marca {
    border-start-end-radius: 96px;
    border-end-end-radius: 96px;
  }
}

/* Mobile: empilha. A marca passa a banda de topo com a curva em baixo,
   mantendo o gesto da marca sem roubar altura ao formulario. */
@media (max-width: 767px) {
  body.rg-ds .rg-auth {
    flex-direction: column;
    block-size: auto;
    min-block-size: 100svh;
    overflow: visible;
  }

  body.rg-ds .rg-auth-painel { overflow: visible; }

  body.rg-ds .rg-auth-marca {
    flex: 0 0 auto;
    /* 16px entre um logotipo de 48px e o titulo deixava os dois a tocar-se.
       24px e o mesmo respiro do desktop e separa marca de mensagem. */
    gap: var(--space-24);
    padding: var(--space-32) var(--space-24) var(--space-40);
    border-start-end-radius: 0;
    border-end-end-radius: 96px;
  }

  /* O titulo nao leva tamanho proprio em mobile.

     Levava heading-s, que da 24px - so 8px acima do corpo de texto, o que
     o deixava a parecer um subtitulo em vez do acolhimento da pagina. O
     papel deste texto e heading-l, e a escala mobile dos tokens ja o
     encolhe de 40px para 28px sozinha. Forcar um papel mais pequeno por
     cima disso era encolher duas vezes. */
  body.rg-ds .rg-auth-texto { font-size: var(--font-size-body-m); }

  body.rg-ds .rg-auth-painel {
    flex: 1 1 auto;
    padding: var(--space-24) var(--space-24) var(--space-48);
  }

  body.rg-ds .rg-login-fechar { margin-block-end: var(--space-16); }
}


/* =========================================================================
   §27 — Selos de certificacao e link para PDF (Sustentabilidade)
   ========================================================================= */

/* O ladrilho tem 88x88 e cada selo tem o seu proprio racio (o FSC e
   vertical 300x490). object-fit: contain com limite nos dois eixos
   centra qualquer um sem deformar. */
body.rg-ds .rg-cert-selo-img {
  max-inline-size: 76px;
  max-block-size: 76px;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  display: block;
}

body.rg-ds .rg-cert-selo-img picture { display: block; }

/* O ladrilho tem 88px de largura fixa e centrava o selo, o que o deixava
   recuado em relacao ao texto da carta. Alinhado a esquerda, o selo arranca
   na mesma vertical do titulo e do corpo. */
body.rg-ds .rg-selo-claro,
body.rg-ds .rg-selo-escuro {
  justify-content: flex-start;
  inline-size: auto;
  block-size: 76px;
}

/* O FSC e a versao para fundo escuro: o ladrilho acompanha. */
body.rg-ds .rg-selo-escuro { background-color: var(--color-surface-brand); }

/* Os outros dois selos trazem fundo branco proprio; o ladrilho cinzento
   deixaria um retangulo branco visivel la dentro. */
body.rg-ds .rg-selo-claro { background-color: var(--color-surface-base); }

body.rg-ds .rg-cert-pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-text-link);
  font-size: var(--font-size-body-s);
  line-height: 1.4;
  text-decoration: none;
}

body.rg-ds .rg-cert-pdf:hover,
body.rg-ds .rg-cert-pdf:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.rg-ds .rg-cert-pdf:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

body.rg-ds .rg-cert-pdf svg { flex: 0 0 16px; }


/* =========================================================================
   §28 — Contactos (Figma 1685:2876)
   ========================================================================= */

/* --- Cabecalho de seccao (Section Header do DS) ------------------------- */

body.rg-ds .rg-sec-cab {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-inline-size: 640px;
}

body.rg-ds .rg-sec-cab--centro {
  margin-inline: auto;
  text-align: center;
}

body.rg-ds .rg-sec-eyebrow {
  margin: 0;
  color: var(--color-text-brand);
  font-size: 13px;
  /* 600 nao existe na familia instalada (ha 400/500/700). O browser
     sintetiza para 700 e o titulo sai mais pesado que no Figma. Ate
     existir o ficheiro SemiBold, usa-se 500, que e o peso real mais
     proximo e o mesmo que as outras paginas ja usam. */
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.rg-ds .rg-sec-titulo {
  /* Mesmo valor da global class rg-t-heading-l, que e o que as outras
     paginas usam nos H2 de seccao. */
  /* text-wrap: balance reparte as palavras pelas linhas em vez de deixar
     a ultima sozinha ("...para / si"). Resolve o caso concreto e todos os
     titulos futuros, em vez de se andar a meter nbsp a mao. Browsers sem
     suporte ignoram e ficam como antes. */
  text-wrap: balance;
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-l);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

body.rg-ds .rg-sec-sub {
  text-wrap: pretty;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-l);
  line-height: 1.5;
}

/* --- Cartoes de contacto direto ---------------------------------------- */

body.rg-ds .rg-canais {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-container);
  inline-size: 100%;
}

body.rg-ds .rg-canal {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* O cartao inteiro e clicavel: o alvo e a area toda, nao so o link. */
body.rg-ds .rg-canal:hover {
  border-color: var(--color-border-strong);
  box-shadow: 0 2px 4px -1px rgba(10,35,30,0.08), 0 4px 8px -1px rgba(10,35,30,0.10);
}

body.rg-ds .rg-canal:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

body.rg-ds .rg-canal-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  flex: 0 0 56px;
  border-radius: var(--radius-md);
  background-color: var(--color-surface-brand-subtle);
  color: var(--color-text-brand);
}

body.rg-ds .rg-canal-titulo {
  color: var(--color-text-primary);
  font-size: var(--font-size-20);
  font-weight: 500;
  line-height: 1.3;
}

body.rg-ds .rg-canal-texto {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-s);
  line-height: 1.4;
}

body.rg-ds .rg-canal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block-start: auto;
  color: var(--color-text-link);
  font-size: var(--font-size-body-m);
  font-weight: 500;
}

body.rg-ds .rg-canal:hover .rg-canal-link { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Formulario + apoio ------------------------------------------------- */

body.rg-ds .rg-form-grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-layout-section-gap);
  align-items: start;
  inline-size: 100%;
}

body.rg-ds .rg-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
  padding: var(--space-32);
  background-color: var(--color-surface-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

body.rg-ds .rg-form-msg:empty { display: none; }

body.rg-ds .rg-form-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-stack);
  align-items: start;
}

body.rg-ds .rg-campo-req { color: var(--color-feedback-error-base); }

body.rg-ds .rg-campo-ajuda {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.4;
}

body.rg-ds .rg-campo-textarea {
  min-block-size: 96px;
  resize: vertical;
}

/* Select: a seta nativa varia entre browsers; desenha-se uma. */
body.rg-ds .rg-campo-select { position: relative; }

body.rg-ds .rg-campo-select select {
  appearance: none;
  padding-inline-end: calc(var(--space-16) * 2 + 16px);
  cursor: pointer;
}

body.rg-ds .rg-campo-chevron {
  position: absolute;
  inset-inline-end: var(--space-16);
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 16px;
  block-size: 16px;
  pointer-events: none;
  background-color: var(--color-text-secondary);
  -webkit-mask-image: var(--rg-chevron-16);
  mask-image: var(--rg-chevron-16);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

body.rg-ds {
  --rg-chevron-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

body.rg-ds .rg-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

body.rg-ds .rg-consent-box {
  flex: 0 0 20px;
  inline-size: 20px;
  block-size: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-brand-primary);
}

body.rg-ds .rg-consent-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-body-m);
  line-height: 1.5;
}

body.rg-ds .rg-form-enviar { align-self: flex-start; }

/* --- Coluna de apoio ---------------------------------------------------- */

body.rg-ds .rg-apoio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack);
}

body.rg-ds .rg-apoio-titulo {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-heading-xxs);
  font-weight: 500;
  line-height: 1.4;
}

body.rg-ds .rg-apoio-texto,
body.rg-ds .rg-apoio-passos {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-s);
  line-height: 1.4;
}

/* Lista ordenada a serio em vez de "1 —" escrito a mao: o leitor de ecra
   anuncia "lista de 3 itens" e a numeracao nao se desalinha. */
body.rg-ds .rg-apoio-passos {
  padding-inline-start: 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

body.rg-ds .rg-apoio-divisor {
  inline-size: 100%;
  block-size: 1px;
  margin: var(--space-8) 0;
  border: 0;
  background-color: var(--color-border-default);
}

/* --- Mapa + indicacoes -------------------------------------------------- */

body.rg-ds .rg-mapa-bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--space-layout-section-gap);
  align-items: start;
  inline-size: 100%;
}

body.rg-ds .rg-mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 420px;
  overflow: hidden;
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
}

body.rg-ds .rg-mapa img,
body.rg-ds .rg-mapa picture {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

body.rg-ds .rg-mapa-vazio {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-caption);
  letter-spacing: 0.25px;
}

body.rg-ds .rg-mapa:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

body.rg-ds .rg-indicacoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-container);
}

body.rg-ds .rg-indicacoes-lista {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-m);
  line-height: 1.5;
}

body.rg-ds .rg-indicacoes-lista dt {
  color: var(--color-text-primary);
  font-weight: 500;
}

body.rg-ds .rg-indicacoes-lista dd { margin: 0; }

/* --- Equipa ------------------------------------------------------------- */

body.rg-ds .rg-equipa {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-container);
  inline-size: 100%;
}

body.rg-ds .rg-pessoa {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 12px 12px 16px;
  background-color: var(--color-surface-base);
  border-radius: var(--radius-lg);
}

body.rg-ds .rg-pessoa-retrato {
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 4;
}

body.rg-ds .rg-pessoa-retrato img,
body.rg-ds .rg-pessoa-retrato picture {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

body.rg-ds .rg-pessoa-nome {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-18);
  font-weight: 700;
  line-height: 1.3;
}

body.rg-ds .rg-pessoa-funcao {
  margin: 0;
  color: var(--color-text-brand);
  font-size: var(--font-size-body-s);
  font-weight: 500;
  line-height: 1.3;
}

body.rg-ds .rg-pessoa-contactos {
  margin: 0;
  padding-block-start: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}

body.rg-ds .rg-pessoa-email { color: var(--color-text-link); }
body.rg-ds .rg-pessoa-tel { color: var(--color-text-secondary); }

/* --- FAQs --------------------------------------------------------------- */

body.rg-ds .rg-faqs {
  inline-size: 100%;
  max-inline-size: 800px;
  margin-inline: auto;
}

body.rg-ds .rg-faq {
  border-block-end: 1px solid var(--color-border-default);
}

body.rg-ds .rg-faq-pergunta {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-24);
  color: var(--color-text-primary);
  font-size: var(--font-size-18);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

body.rg-ds .rg-faq-pergunta::-webkit-details-marker { display: none; }

body.rg-ds .rg-faq[open] .rg-faq-pergunta { color: var(--color-text-brand); }

body.rg-ds .rg-faq-pergunta > span:first-child { flex: 1 1 auto; }

body.rg-ds .rg-faq-chevron {
  flex: 0 0 24px;
  inline-size: 24px;
  block-size: 24px;
  background-color: currentColor;
  -webkit-mask-image: var(--rg-chevron-16);
  mask-image: var(--rg-chevron-16);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  transition: rotate 150ms ease;
}

body.rg-ds .rg-faq[open] .rg-faq-chevron { rotate: 180deg; }

body.rg-ds .rg-faq-pergunta:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

body.rg-ds .rg-faq-resposta {
  padding-block-end: var(--space-24);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-m);
  line-height: 1.5;
}

body.rg-ds .rg-faq-resposta p { margin: 0; }

/* --- CTA final ---------------------------------------------------------- */

body.rg-ds .rg-cta-banner {
  display: flex;
  align-items: center;
  gap: var(--space-container);
  inline-size: 100%;
  padding: var(--space-32) var(--space-40);
  background-color: var(--color-surface-brand);
  border-radius: 16px;
}

body.rg-ds .rg-cta-texto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-text-on-brand);
}

body.rg-ds .rg-cta-titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

body.rg-ds .rg-cta-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

/* --- Tablet ------------------------------------------------------------- */

@media (max-width: 1024px) {
  body.rg-ds .rg-canais { grid-template-columns: 1fr 1fr; }
  body.rg-ds .rg-equipa { grid-template-columns: 1fr 1fr; }

  body.rg-ds .rg-form-grelha,
  body.rg-ds .rg-mapa-bloco {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 767px) {
  body.rg-ds .rg-canais { grid-template-columns: 1fr; }
  body.rg-ds .rg-equipa { grid-template-columns: 1fr 1fr; gap: var(--space-16); }

  body.rg-ds .rg-form { padding: var(--space-20); }
  body.rg-ds .rg-form-linha { grid-template-columns: 1fr; }

  body.rg-ds .rg-mapa { block-size: 240px; }

  body.rg-ds .rg-cta-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-24);
  }

  body.rg-ds .rg-faq-pergunta { font-size: var(--font-size-body-m); }
}

/* Os widgets do Elementor entram como blocos que encolhem ate ao conteudo.
   Com align-items: stretch no contentor da seccao, cada bloco ocupa a
   largura toda e os componentes la dentro medem o que devem. O que e
   centrado (cabecalho das FAQs, lista de FAQs) centra-se pela sua propria
   margem automatica. */
body.rg-ds .s-cont-canais-in,
body.rg-ds .s-cont-form-in,
body.rg-ds .s-cont-mapa-in,
body.rg-ds .s-cont-equipa-in,
body.rg-ds .s-cont-faqs-in,
body.rg-ds .s-cont-cta-in {
  align-items: stretch;
}


/* =========================================================================
   §29 — Contactos: ajustes pedidos (CTA colado ao footer, equipa em
   carrossel no mobile)
   ========================================================================= */

/* --- CTA de ponta a ponta, encostado ao footer -------------------------
   A seccao perde o padding lateral e o banner perde o raio: o verde
   corre de margem a margem e fecha a pagina contra o footer. O respiro
   interno passa a ser dado pelo proprio banner, com o mesmo token de
   margem lateral das outras seccoes, para o texto continuar alinhado
   com o resto da pagina. */
body.rg-ds .s-cont-cta {
  padding: 0;
}

body.rg-ds .s-cont-cta-in {
  max-inline-size: none;
  inline-size: 100%;
}

body.rg-ds .s-cont-cta .rg-cta-banner {
  /* Raio so em cima: em baixo o verde encosta ao footer, e arredondar
     esses cantos abriria dois triangulos brancos contra ele. */
  border-radius: 16px 16px 0 0;
  padding-inline: var(--space-layout-section-x);
  padding-block: var(--space-48);
}

/* --- Equipa em carrossel no mobile -------------------------------------
   Mesma mecanica das certificacoes na Sustentabilidade (§21a): sangria
   calculada em vez de fixa, para a faixa encostar a margem do ecra seja
   qual for o padding da seccao. */
@media (max-width: 767px) {
  body.rg-ds .rg-equipa {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-12);
    inline-size: 100vw;
    margin-inline-start: calc(50% - 50vw);
    margin-inline-end: calc(50% - 50vw);
    padding-inline-start: calc(50vw - 50%);
    padding-inline-end: var(--space-24);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: 24px;
  }

  body.rg-ds .rg-equipa > .rg-pessoa {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }
}


/* --------------------------------------------------------------------------
   HERANCA DO THEME STYLE DO ELEMENTOR (kit 7)

   O kit pinta o fundo de QUALQUER <button> (#00B996, #019A7C no hover).
   E heranca da pagina de manutencao, que partilha o mesmo kit. Os nossos
   controlos com semantica de botao - o campo de pesquisa e as pills -
   declaram o seu proprio fundo, por isso o kit so introduz o verde errado
   no hover. Nao se mexe no kit porque a pagina 9 esta em producao: anula-se
   aqui, dentro do scope body.rg-ds, com especificidade acima de
   `.elementor-kit-7 button:hover` (0,2,1) - dai o seletor de tipo + classe.
   -------------------------------------------------------------------------- */

body.rg-ds button.rg-pesquisa,
body.rg-ds button.rg-pesquisa:hover,
body.rg-ds button.rg-pesquisa:focus {
  background-color: var(--color-surface-base);
  color: inherit;
}

/* O hover nao desaparece, muda de linguagem: a borda ganha peso em vez de
   o campo mudar de cor. Mantem a afordancia sem competir com o CTA. */
body.rg-ds button.rg-pesquisa:hover {
  border-color: var(--color-border-strong);
}

body.rg-ds button.rg-pill,
body.rg-ds button.rg-pill:hover,
body.rg-ds button.rg-pill:focus {
  background-color: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}

body.rg-ds button.rg-pill:not(.is-ativa):hover {
  border-color: var(--color-border-strong);
}

body.rg-ds button.rg-pill.is-ativa,
body.rg-ds button.rg-pill.is-ativa:hover,
body.rg-ds button.rg-pill.is-ativa:focus {
  background-color: var(--color-surface-base);
  color: var(--color-action-on-primary);
  border-color: var(--color-border-focus);
}

/* --------------------------------------------------------------------------
   CONTADORES DA FAIXA DE NUMEROS

   Os numeros contam ate ao valor final quando a faixa entra no ecra.
   tabular-nums fixa a largura dos digitos: sem isto o bloco encolhe e
   alarga durante a contagem e arrasta o layout (CLS).
   -------------------------------------------------------------------------- */

body.rg-ds .rg-stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}


/* --------------------------------------------------------------------------
   ALINHAMENTO DO CLAIM NO FOOTER

   O claim passa a assentar na base do bloco de marca, que por sua vez
   acompanha a altura da coluna mais alta (Servicos). Fica alinhado com
   'Acabamentos' sem numeros magicos: se amanha a coluna ganhar ou perder
   um link, o claim acompanha sozinho.

   So em desktop. Em mobile as colunas empilham e esticar nao faz sentido.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

  body.rg-ds .rg-footer-cols {
    align-items: stretch;
  }

  body.rg-ds .rg-footer-brand {
    justify-content: space-between;
  }
}