@charset "UTF-8";
/* =========================================================================
   RioMarket 2026 — Landing Page
   Front-end responsivo (desktop 1728 / mobile 412) — projeto gráfico Figma
   Agência Tentáculo
   -------------------------------------------------------------------------
   ÍNDICE
   00. Fontes (Work Sans + Inter, self-hosted)
   01. Tokens / variáveis
   02. Reset e base
   03. Utilitários (container, botões)
   04. Topbar
   05. Header + menu principal
   06. Drawer (menu off-canvas, entra pela esquerda)
   07. Hero / slideshow
   08. Seção "O RioMarket" (cards)
   09. Rodadas de negócios
   10. Edição 2026 (palestrantes)
   11. O RioMarket em números
   12. RioMarket Jovem
   13. Principais players
   14. Local (foto + silhueta do Pão de Açúcar + endereço)
   15. Patrocinadores / apoiadores
   16. Footer
   17. Página interna (abas + conteúdo + contato + agenda + evento + palestrantes)
       + detalhe do palestrante
   18. Breakpoints (tablet / mobile)
   19. Preferências de acessibilidade / impressão
   ========================================================================= */


/* =========================================================================
   00. FONTES
   Work Sans (títulos) e Inter (corpo), self-hosted em assets/fonts/.
   Os subsets "latin" vão embutidos em base64 para que a página funcione
   também aberta direto do disco (file://), onde o CORS bloqueia @font-face
   externo. Em produção (HTTP) dá para trocar pelas linhas comentadas.
   ========================================================================= */
@font-face{
  font-family:'Work Sans';
  font-style:normal; font-display:swap; font-weight:300 900;
  /* a fonte vem do arquivo, não colada aqui dentro: assim ela não
     bloqueia o CSS, baixa em paralelo e fica no cache do navegador */
  src:url('../fonts/work-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Work Sans';
  font-style:normal; font-display:swap; font-weight:300 900;
  src:url('../fonts/work-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-display:swap; font-weight:100 900;
  /* a fonte vem do arquivo, não colada aqui dentro: assim ela não
     bloqueia o CSS, baixa em paralelo e fica no cache do navegador */
  src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal; font-display:swap; font-weight:100 900;
  src:url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* =========================================================================
   01. TOKENS
   ========================================================================= */
:root{
  /* --- Cores (amostradas do PDF exportado do Figma) --- */
  --c-coral:        #EF523D;
  --c-coral-dark:   #D8452F;
  --c-ink:          #3B3935;
  --c-dark:         #201F1D;   /* botão preenchido sobre fundo claro */
  --c-ink-soft:     #6E6C68;
  --c-white:        #FFFFFF;
  --c-bg:           #FFFFFF;
  --c-bg-soft:      #F5F4F4;
  --c-bg-header:    #FAF9F9;
  --c-border:       #DDDCDC;
  --c-border-soft:  #ECEBEA;

  /* --- Tipografia --- */
  --font-heading: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Escala fluida: valor mobile → valor desktop (frame 1728px) */
  --fs-topbar:      clamp(11px, 0.87vw, 15px);
  --fs-meta:        clamp(13px, 0.93vw, 16px);
  --fs-nav:         clamp(14px, 0.93vw, 16px);
  --fs-h1:          clamp(21px, 1.85vw, 32px);
  --fs-h1-sub:      clamp(19px, 1.74vw, 30px);
  --fs-h2:          clamp(28px, 3.24vw, 56px);
  --fs-h2-alt:      clamp(26px, 2.89vw, 50px);
  --fs-h3:          clamp(24px, 2.78vw, 48px);
  --fs-lead:        clamp(17px, 1.85vw, 32px);
  --fs-lead-sm:     clamp(16px, 1.39vw, 24px);
  --fs-body:        clamp(15px, 1.27vw, 22px);
  --fs-body-sm:     clamp(14px, 0.93vw, 16px);
  --fs-stat:        clamp(56px, 6.48vw, 112px);
  --fs-stat-label:  clamp(18px, 2.31vw, 40px);
  --fs-numbers-h:   clamp(22px, 2.31vw, 40px);
  --fs-btn:         clamp(14px, 0.93vw, 16px);
  --fs-micro:       clamp(10px, 0.64vw, 11px);

  /* --- Layout --- */
  --container:      1428px;
  --gutter:         clamp(16px, 8.68vw, 150px);
  --grid-gap:       clamp(24px, 3.41vw, 59px);

  /* --- Alturas fixas do topo --- */
  --h-topbar:       58px;
  --h-header:       74px;
  --h-header-stuck: 67px;
  --h-nav:          64px;

  /* --- Espaçamentos verticais de seção --- */
  --sp-section:     clamp(40px, 3.7vw, 64px);
  --sp-title:       clamp(20px, 3.76vw, 65px);

  /* --- Diversos --- */
  --radius:         2px;
  --transition:     180ms cubic-bezier(.4,0,.2,1);
  --z-header:       100;
  --z-drawer:       200;
}


/* =========================================================================
   02. RESET / BASE
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:150px;
}

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.45;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{ font-family:var(--font-heading); }
h1,h2,h3,h4,p,figure,address{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{ outline:3px solid var(--c-coral); outline-offset:3px; }

.svg-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--c-coral); color:#fff; padding:12px 20px; font-weight:700;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* =========================================================================
   03. UTILITÁRIOS
   ========================================================================= */
.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--flush{ padding-inline:0; }
.container--flush > *{ padding-inline:var(--gutter); }

.section{ padding-block:var(--sp-section); }
.section--white{ background:var(--c-bg); }

.section__title{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--c-ink);
}
.section__title--center{ text-align:center; }
.section__title--coral{ color:var(--c-coral); }

.section__lead{
  margin-top:clamp(8px, .81vw, 14px);
  font-size:var(--fs-lead);
  line-height:1.35;
  color:var(--c-ink);
  max-width:62ch;
}

/* --- Botões --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:10px clamp(16px, 1.16vw, 20px);
  font-family:var(--font-heading);
  font-size:var(--fs-btn);
  font-weight:600;
  line-height:1.2;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  transition:background-color var(--transition), color var(--transition),
             border-color var(--transition), transform var(--transition);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

.btn--coral{ background:var(--c-coral); color:#fff; border-color:var(--c-coral); }
.btn--coral:hover{ background:var(--c-coral-dark); border-color:var(--c-coral-dark); }

.btn--white{ background:#fff; color:var(--c-ink); border-color:#fff; }
.btn--white:hover{ background:#f1efee; }

.btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.14); }

/* sobre fundo claro: um cheio e um só de texto (layout das Rodadas) */
.btn--dark{ background:var(--c-dark); color:#fff; border-color:var(--c-dark); }
.btn--dark:hover{ background:#000; border-color:#000; }

.btn--link-dark{ background:transparent; color:var(--c-ink); border-color:transparent; }
.btn--link-dark:hover{ color:var(--c-coral); }


/* =========================================================================
   04. TOPBAR
   ========================================================================= */
.topbar{
  background:var(--c-bg-soft);
  min-height:var(--h-topbar);
  display:flex; align-items:center; justify-content:center;
  padding:8px var(--gutter);
}
.topbar__text{
  font-family:var(--font-heading);
  font-size:var(--fs-topbar);
  font-weight:400;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  color:var(--c-ink);
}
.topbar__text strong{ font-weight:700; }


/* =========================================================================
   05. HEADER + MENU PRINCIPAL
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:var(--c-bg-header);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--transition), border-color var(--transition);
}
.site-header.is-stuck{
  box-shadow:0 2px 14px rgba(0,0,0,.07);
  border-bottom-color:var(--c-border);
}

.site-header__inner{
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding:8px var(--gutter);
  min-height:var(--h-header);
  display:flex; align-items:center; gap:clamp(10px, .52vw, 9px);
  transition:min-height var(--transition);
}
.site-header.is-stuck .site-header__inner{ min-height:var(--h-header-stuck); }

/* --- hambúrguer --- */
.nav-toggle{
  flex:0 0 auto;
  display:none;                       /* desktop: só aparece com .is-stuck */
  align-items:center; justify-content:center;
  width:44px; height:44px;
  margin-right:clamp(8px, .81vw, 14px);
  border:1.5px solid var(--c-ink);
  border-radius:6px;
  transition:background-color var(--transition), border-color var(--transition);
}
.nav-toggle:hover{ background:rgba(0,0,0,.05); }
.site-header.is-stuck .nav-toggle{ display:flex; }

.nav-toggle__box{ display:flex; flex-direction:column; gap:4px; }
.nav-toggle__bar{
  display:block; width:20px; height:2px; background:var(--c-ink); border-radius:2px;
  transition:transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.brand{ display:block; flex:0 0 auto; }
.brand__logo{
  width:clamp(150px, 15.2vw, 263px); height:auto;
  transition:width var(--transition);
}
.site-header.is-stuck .brand__logo{ width:clamp(150px, 13.5vw, 234px); }

.header-date{
  flex:0 0 auto;
  padding-left:clamp(10px, .52vw, 9px);
  border-left:1px solid var(--c-border);
  font-family:var(--font-heading);
  font-size:var(--fs-meta);
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}

.header-meta{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:flex-end;
  flex-wrap:wrap;                     /* o botão desce sozinho se faltar espaço */
  gap:clamp(20px, 3.8vw, 66px);
  row-gap:12px;
}

.lang{ display:flex; align-items:center; gap:10px; font-size:var(--fs-meta); }
.lang__opt{ font-family:var(--font-heading); font-weight:600; color:var(--c-ink); opacity:.55; }
.lang__opt.is-active{ opacity:1; }
.lang__opt:hover{ opacity:1; color:var(--c-coral); }
.lang__sep{ width:1px; height:1em; background:var(--c-border); }

.header-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-heading);
  font-size:var(--fs-meta); font-weight:600; white-space:nowrap;
}
.header-link:hover{ color:var(--c-coral); }
.header-link__ico{ width:1em; height:1em; fill:currentColor; }

/* --- botão "Compre aqui" (dois destinos externos, abre no clique) ---
   Medidas conferidas no layout do Figma: 42px de altura, 16px de recuo
   interno, alinhado à direita do container. O fundo é o mesmo --c-ink. */
.buy{ position:relative; flex:0 0 auto; }

.buy__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:42px; padding:0 16px;
  background:var(--c-ink); color:var(--c-white);
  font-family:var(--font-heading);
  font-size:var(--fs-meta); font-weight:600; white-space:nowrap;
  transition:background-color var(--transition);
}
.buy__btn:hover,
.buy.is-open .buy__btn{ background:#2B2926; }

.buy__caret{
  flex:0 0 auto; width:12px; height:12px; fill:currentColor;
  transition:transform var(--transition);
}
.buy.is-open .buy__caret{ transform:rotate(180deg); }

.buy__panel{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:100%;
  padding:8px 0;
  background:#fff;
  border:1px solid var(--c-border-soft);
  box-shadow:0 14px 32px rgba(0,0,0,.10);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index:5;
}
.buy.is-open .buy__panel{ opacity:1; visibility:visible; transform:none; }

.buy__panel a{
  display:flex; align-items:center; gap:8px;
  padding:9px 18px;
  font-size:clamp(13px, .87vw, 15px);
  line-height:1.3;
  color:var(--c-ink); white-space:nowrap;
  transition:background-color var(--transition), color var(--transition);
}
.buy__panel a:hover{ background:var(--c-bg-soft); color:var(--c-coral); }
.buy__ico{ flex:0 0 auto; width:1em; height:1em; fill:currentColor; opacity:.5; }

/* --- o mesmo botão no fim do menu mobile (drawer) ---
   As margens laterais são as mesmas 24px do recuo dos itens do menu, para o
   botão alinhar com os textos acima e não encostar nas bordas. O painel aqui
   é estático: empurra o conteúdo, em vez de flutuar sobre ele. */
.buy--drawer{ display:block; margin:24px 24px 0; }
.buy--drawer .buy__btn{ width:100%; height:48px; font-size:16px; }

.buy--drawer .buy__panel{
  position:static; min-width:0;
  display:none;
  margin-top:2px;
  padding:2px 0 6px;
  background:var(--c-bg-soft);
  border:0; box-shadow:none;
  opacity:1; visibility:visible; transform:none;
}
.buy--drawer.is-open .buy__panel{ display:block; }
.buy--drawer .buy__panel a{ padding:12px 20px; font-size:15px; white-space:normal; }

/* --- menu principal horizontal --- */
.main-nav{
  border-top:1px solid var(--c-border-soft);
  background:var(--c-bg-header);
  overflow:visible;
}
.site-header.is-stuck .main-nav{ display:none; }   /* some ao rolar */

.main-nav__inner{ display:flex; align-items:stretch; }

.main-nav__list{
  display:flex; align-items:stretch; flex-wrap:wrap;
  gap:clamp(4px, 1.5vw, 30px);
  min-height:var(--h-nav);
}
.main-nav__item{ position:relative; display:flex; align-items:stretch; }

.main-nav__link{
  display:inline-flex; align-items:center; gap:6px;
  height:var(--h-nav);
  padding:0 2px;
  font-family:var(--font-heading);
  font-size:var(--fs-nav);
  font-weight:500;
  line-height:1;
  color:var(--c-ink);
  border-bottom:3px solid transparent;
  white-space:nowrap;
  transition:color var(--transition), border-color var(--transition);
}
.main-nav__link:hover,
.main-nav__item.is-open > .main-nav__link{ color:var(--c-coral); border-bottom-color:var(--c-coral); }
/* o item aberto: coral e sublinhado. Vale também quando quem está aberta é
   uma página abaixo dele — o detalhe de um palestrante acende "Mercado". */
.main-nav__link.is-active{ color:var(--c-coral); font-weight:700; border-bottom-color:var(--c-coral); }
/* dentro do submenu, a página aberta */
.main-nav__panel a.is-active{ color:var(--c-coral); font-weight:600; }

.main-nav__caret{
  width:11px; height:11px; fill:currentColor;
  transition:transform var(--transition);
}
.main-nav__item.is-open .main-nav__caret{ transform:rotate(180deg); }

.main-nav__panel{
  position:absolute; top:100%; left:-18px;
  min-width:250px;
  padding:10px 0;
  background:#fff;
  border:1px solid var(--c-border-soft);
  box-shadow:0 14px 32px rgba(0,0,0,.10);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index:5;
}
.main-nav__item.is-open .main-nav__panel{ opacity:1; visibility:visible; transform:none; }

.main-nav__panel a{
  display:block;
  padding:9px 18px;
  font-size:clamp(13px, .87vw, 15px);
  line-height:1.3;
  color:var(--c-ink);
  transition:background-color var(--transition), color var(--transition);
}
.main-nav__panel a:hover{ background:var(--c-bg-soft); color:var(--c-coral); }


/* =========================================================================
   06. DRAWER (menu off-canvas — entra pela ESQUERDA)
   ========================================================================= */
.drawer-backdrop{
  position:fixed; inset:0; z-index:calc(var(--z-drawer) - 1);
  background:rgba(0,0,0,.45);
  opacity:0; transition:opacity 240ms ease;
}
.drawer-backdrop.is-visible{ opacity:1; }

.drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:var(--z-drawer);
  width:min(420px, 88vw);
  display:flex; flex-direction:column;
  background:#fff;
  box-shadow:6px 0 34px rgba(0,0,0,.18);
  transform:translateX(-100%);
  transition:transform 300ms cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.drawer.is-open{ transform:none; }

.drawer__head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px;
  background:#fff;
  border-bottom:1px solid var(--c-border-soft);
}
.drawer__brand img{ width:180px; height:auto; }
.drawer__close{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1.5px solid var(--c-ink); border-radius:6px;
}
.drawer__close svg{ width:16px; height:16px; fill:var(--c-ink); }
.drawer__close:hover{ background:var(--c-bg-soft); }

.drawer__nav{ flex:1 1 auto; padding:8px 0 24px; }

.drawer__group{ border-bottom:1px solid var(--c-border-soft); }

.drawer__link{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%;
  padding:17px 24px;
  font-family:var(--font-heading);
  font-size:17px; font-weight:600; line-height:1.25;
  text-align:left;
  color:var(--c-ink);
  transition:color var(--transition), background-color var(--transition);
}
.drawer__link:hover{ color:var(--c-coral); background:var(--c-bg-soft); }
.drawer__link.is-active{ color:var(--c-coral); font-weight:700; }
.drawer__sub a.is-active{ color:var(--c-coral); font-weight:600; }
.drawer__caret{ width:14px; height:14px; fill:currentColor; flex:0 0 auto; transition:transform var(--transition); }
.drawer__link[aria-expanded="true"]{ color:var(--c-coral); }
.drawer__link[aria-expanded="true"] .drawer__caret{ transform:rotate(180deg); }

.drawer__sub{
  display:none;
  padding:2px 0 14px;
  background:var(--c-bg-soft);
}
.drawer__link[aria-expanded="true"] + .drawer__sub{ display:block; }
.drawer__sub a{
  display:block;
  padding:10px 24px 10px 36px;
  font-size:15px; line-height:1.3;
  color:var(--c-ink);
}
.drawer__sub a:hover{ color:var(--c-coral); }

.drawer__foot{
  padding:22px 24px 32px;
  border-top:1px solid var(--c-border-soft);
  display:flex; flex-direction:column; gap:20px;
}
.lang--drawer{ font-size:15px; }
.social--drawer svg{ width:22px; height:22px; }
.drawer__external{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-heading); font-size:15px; font-weight:600;
}
.drawer__external:hover{ color:var(--c-coral); }


/* =========================================================================
   07. HERO / SLIDESHOW
   ========================================================================= */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  /* Tela cheia: o slideshow ocupa o que sobra da janela abaixo da tarja de
     patrocinadores e do header, sem precisar rolar para ver o fim dele.
     Quanto é esse "acima" quem mede é o main.js, porque muda com a largura
     (no celular o header tem mais linhas). O valor de reserva vale até o
     script rodar e para quem estiver sem JavaScript.
     A segunda linha repete a conta em `dvh`, que no celular desconta a barra
     de endereço; navegador que não conheça a unidade ignora e fica com a
     primeira. */
  height:calc(100vh  - var(--h-hero-topo, calc(var(--h-topbar) + 67px)));
  height:calc(100dvh - var(--h-hero-topo, calc(var(--h-topbar) + 67px)));
  min-height:420px;   /* janelas muito baixas: não vira uma tira */
}
.hero__track{ position:relative; height:100%; }

.hero__slide{
  position:absolute; inset:0;
  display:flex; align-items:flex-end;
  opacity:0; visibility:hidden;
  transition:opacity 600ms ease, visibility 600ms ease;
}
.hero__slide.is-active{ opacity:1; visibility:visible; z-index:1; }

.hero__bg{
  position:absolute; inset:0; z-index:-1;
}
/* Quem desenha é o <img> DENTRO do <picture> — `object-fit` aplicado ao
   picture não faz nada. Sem estas regras a imagem mantém a proporção do
   arquivo e sobra branco embaixo (ou nas laterais, na versão de celular)
   sempre que a janela tem outro formato. Com `cover` ela preenche a área
   toda, centrada nos dois eixos, cortando o que exceder. */
.hero__bg img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
}
.hero__inner{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding:0 var(--gutter) clamp(24px, 5.67vw, 98px);
}
.hero__content{ display:flex; flex-direction:column; align-items:flex-start; }

.hero__title,
.hero__subtitle{ line-height:1.25; }

.hero__title span,
.hero__subtitle span{
  display:inline;
  background:var(--c-white);
  box-shadow:10px 0 0 var(--c-white), -10px 0 0 var(--c-white);
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  padding:6px 0;
}
.hero__title{
  font-size:var(--fs-h1);
  font-weight:700;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.hero__subtitle{
  margin-top:clamp(6px, .58vw, 10px);
  font-family:var(--font-body);
  font-size:var(--fs-h1-sub);
  font-weight:400;
}
.hero__cta{ margin-top:clamp(14px, 1.5vw, 26px); }

/* --- setas --- */
.hero__arrow{
  position:absolute; top:50%; z-index:3;
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:clamp(40px, 3.2vw, 56px); height:clamp(40px, 3.2vw, 56px);
  border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:background-color var(--transition), opacity var(--transition);
}
.hero__arrow svg{ width:44%; height:44%; fill:#fff; }
.hero__arrow:hover{ background:rgba(255,255,255,.32); }
.hero__arrow--prev{ left:clamp(10px, 1.5vw, 26px); }
.hero__arrow--next{ right:clamp(10px, 1.5vw, 26px); }

/* --- dots --- */
.hero__dots{
  position:absolute; z-index:3;
  left:50%; bottom:clamp(12px, 1.4vw, 24px);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.hero__dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.5);
  transition:background-color var(--transition), width var(--transition);
}
.hero__dot:hover{ background:rgba(255,255,255,.8); }
.hero__dot.is-active{ background:#fff; width:24px; border-radius:999px; }


/* =========================================================================
   08. CARDS ("O RioMarket" e "RioMarket Jovem")
   ========================================================================= */
.cards{ display:grid; gap:var(--grid-gap); }
.cards--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

.section__title--center + .cards{ margin-top:var(--sp-title); }
.section__lead + .cards{ margin-top:clamp(20px, 4.05vw, 70px); }

.card__link{ display:block; color:inherit; }

.card__media{
  display:block;
  aspect-ratio:437 / 590;
  overflow:hidden;
  background:var(--c-bg-soft);
  border-radius:var(--radius);
}
.card__media--rounded{ aspect-ratio:437 / 489; border-radius:8px; }
.card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 400ms cubic-bezier(.2,.6,.3,1);
}
.card__link:hover .card__media img{ transform:scale(1.03); }

.card__title{
  margin-top:clamp(14px, 2.37vw, 41px);
  font-size:var(--fs-h3);
  font-weight:700;
  line-height:1.15;
  color:var(--c-coral);
  transition:color var(--transition);
}
.card__link:hover .card__title{ color:var(--c-coral-dark); }

.card__title--dark{
  margin-top:clamp(12px, 1.45vw, 25px);
  font-size:clamp(18px, 1.39vw, 24px);
  color:var(--c-ink);
}
.card__link:hover .card__title--dark{ color:var(--c-coral); }

.card__text{
  display:block;
  margin-top:clamp(4px, .35vw, 6px);
  font-size:var(--fs-body);
  line-height:1.4;
  max-width:min(100%, 415px);
}
.card__text--sm{ font-size:var(--fs-body-sm); line-height:1.45; }


/* =========================================================================
   09. RODADAS DE NEGÓCIOS
   ========================================================================= */
.rodadas{
  background:var(--c-coral);
  color:#fff;
  padding-block:clamp(40px, 5.96vw, 103px);
}
/* a partir da v2 do layout a faixa é branca; a versão coral fica guardada
   acima porque o index_v1.html ainda a usa */
.rodadas--light{ background:var(--c-bg); color:var(--c-ink); }
.rodadas__inner{
  display:grid;
  grid-template-columns:minmax(0, 823fr) minmax(0, 515fr);
  column-gap:clamp(24px, 5.21vw, 90px);
  align-items:center;
}
/* a imagem já vem recortada com fundo transparente — sem máscara */
.rodadas__media img{ width:100%; height:auto; }
.rodadas__title{
  font-size:var(--fs-h2-alt);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
}
.rodadas__text{
  margin-top:clamp(8px, 1.45vw, 25px);
  font-size:var(--fs-lead-sm);
  line-height:1.2;
  max-width:min(100%, 400px);
}
.rodadas__actions{
  margin-top:clamp(16px, 1.62vw, 28px);
  display:flex; flex-wrap:wrap; gap:clamp(10px, .93vw, 16px);
}


/* =========================================================================
   10. RIOSEMINARS E WORKSHOPS — faixas com rolagem lateral
   Medidas do layout de 1728px: o card de palestrante tem 333px de largura por
   501 de altura, com 33px de intervalo — quatro deles preenchem exatamente os
   1428px da coluna. O card de workshop tem 318px.

   A regra da largura do card ("clamp") faz sozinha o que foi pedido: enquanto
   couberem quatro, cada card ocupa um quarto da coluna e não há rolagem;
   quando a tela aperta e o card chega ao mínimo, ele para de encolher, sobra
   conteúdo para o lado e a faixa passa a rolar. Nos RioSeminars, que carregam
   até oito nomes, a rolagem já existe no desktop.
   ========================================================================= */
.showcase{ padding-block:var(--sp-section); }
.showcase--coral{ background:var(--c-coral); color:#fff; }
.showcase--light{ background:var(--c-bg); color:var(--c-ink); }

.showcase__title{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
}
.showcase__title--coral{ color:var(--c-coral); }

.showcase__lead{
  margin-top:clamp(8px, .81vw, 14px);
  font-size:var(--fs-lead);
  line-height:1.35;
  max-width:62ch;
}

.showcase__actions{
  margin-top:clamp(24px, 2.9vw, 50px);
  display:flex; justify-content:center;
}

/* --- a faixa que rola de lado --- */
.hscroll{
  --card:     333px;   /* largura do card no layout de 1728 */
  --card-min: 240px;   /* abaixo disto o card não encolhe: a faixa rola */
  --hgap:     clamp(16px, 1.91vw, 33px);

  margin-top:clamp(24px, 3.24vw, 56px);
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:var(--hgap);
  overflow-x:auto;
  /* o eixo vertical fica travado de propósito: ao declarar rolagem no eixo X, o
     navegador libera o Y junto, e qualquer sobra de altura (a foto do
     palestrante tem proporção 303/399, que raramente fecha em pixel inteiro)
     vira aquele tremor vertical no gesto diagonal do trackpad */
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;              /* a barra do sistema some: usamos a nossa */
}
/* Por que a faixa fica dentro do .container comum e não do .container--flush:
   com recuo lateral próprio, o primeiro card encostava na borda da tela. O
   scroll-snap alinha o primeiro item ao começo da área de rolagem, e essa área
   inclui o recuo — o navegador rolava o recuo para fora logo ao carregar. Sem
   recuo no elemento que rola, quem dá o respiro é o container, e a rolagem é
   recortada exatamente na largura do conteúdo: quatro cards por vez, nem um
   pedaço de card aparecendo fora da coluna. */
.hscroll::-webkit-scrollbar{ display:none; }

.hscroll > *{
  flex-grow:0;
  flex-shrink:0;
  flex-basis:clamp(var(--card-min), calc((100% - 3 * var(--hgap)) / 4), var(--card));
  scroll-snap-align:start;
}

/* --- barrinha de rolagem própria (o JS liga e move) --- */
.hscroll-bar{
  display:none;                       /* só aparece quando sobra card para o lado */
  position:relative;
  height:3px;
  margin-top:clamp(14px, 1.16vw, 20px);
  border-radius:999px;
}
.hscroll-bar.is-on{ display:block; }
.showcase--coral .hscroll-bar{ background:rgba(255,255,255,.3); }
.showcase--light .hscroll-bar{ background:var(--c-border); }

.hscroll-bar__thumb{
  position:absolute; left:0; top:0;
  width:30%; height:100%;
  border-radius:999px;
  background:#fff;
}
.showcase--light .hscroll-bar__thumb{ background:var(--c-coral); }

/* --- card do palestrante (RioSeminars) --- */
.speaker{ display:flex; }
.speaker__link{
  display:flex; flex-direction:column; flex:1;
  /* o card não escala com a tela: as medidas internas são as mesmas nos dois
     layouts (15px em volta da foto, 18px no pé) */
  padding:15px 15px 18px;
  background:#fff;
  color:var(--c-ink);
  border-radius:8px;
}
.speaker__media{
  display:block;
  aspect-ratio:303 / 399;
  overflow:hidden;
  border-radius:4px;
  background:var(--c-bg-soft);
}
.speaker__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 400ms cubic-bezier(.2,.6,.3,1);
}
.speaker__link:hover .speaker__media img{ transform:scale(1.04); }
.speaker__name{
  display:block;
  margin-top:14px;
  font-family:var(--font-heading);
  font-size:clamp(16px, 1.04vw, 18px);
  font-weight:600;
  text-align:center;
  transition:color var(--transition);
}
.speaker__link:hover .speaker__name{ color:var(--c-coral); }
.speaker__role{
  display:block;
  margin-top:8px;
  font-size:clamp(13px, .81vw, 14px);
  line-height:1.3;
  text-align:center;
  color:var(--c-ink-soft);
}

/* --- card do workshop --- */
.workshops{
  --card:312px;
  --hgap:clamp(16px, 3.53vw, 61px);
}
.workshop{ display:flex; }
.workshop__link{
  display:flex; flex-direction:column; flex:1;
  color:inherit;
}
.workshop__media{
  display:block;
  aspect-ratio:312 / 296;
  overflow:hidden;
  border-radius:8px;
  background:var(--c-bg-soft);
}
.workshop__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 400ms cubic-bezier(.2,.6,.3,1);
}
.workshop__link:hover .workshop__media img{ transform:scale(1.03); }
.workshop__title{
  margin-top:clamp(12px, .81vw, 14px);
  font-family:var(--font-body);
  font-size:clamp(15px, 1.04vw, 18px);
  font-weight:400;
  line-height:1.35;
  transition:color var(--transition);
}
.workshop__link:hover .workshop__title{ color:var(--c-coral); }
.workshop__meta{
  display:flex; flex-wrap:wrap;
  gap:8px;
  margin-top:auto;                   /* as etiquetas encostam no pé do card */
  padding-top:clamp(10px, .93vw, 16px);
}

/* etiqueta de data / horário / sala.
   Nome próprio de propósito: .tag já existe no bloco 17 (a etiqueta de tipo da
   agenda, em caixa alta e negrito) e vem depois neste arquivo — se usássemos o
   mesmo nome, era ela que valia. */
.workshop__tag{
  display:inline-block;
  padding:4px 9px;
  border:1px solid var(--c-border);
  border-radius:4px;
  font-size:clamp(11px, .75vw, 13px);
  line-height:1.3;
  color:var(--c-ink-soft);
  white-space:nowrap;
}


/* =========================================================================
   11. O RIOMARKET EM NÚMEROS
   ========================================================================= */
.numbers{
  background:var(--c-ink);
  color:#fff;
  padding-block:clamp(40px, 4.11vw, 71px);
  text-align:center;
}
.numbers__title{
  font-family:var(--font-body);
  font-size:var(--fs-numbers-h);
  font-weight:400;
  line-height:1.2;
}
.numbers__list{
  margin-top:clamp(24px, 2.55vw, 44px);
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(28px, 2.3vw, 40px);
}
.stat__value{
  font-family:var(--font-heading);
  font-size:var(--fs-stat);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
}
.stat__value sup{ font-size:.42em; font-weight:700; top:-.85em; margin-left:.04em; }
.stat__label{
  margin-top:clamp(10px, 1.39vw, 24px);
  margin-inline:auto;
  max-width:12ch;
  font-size:var(--fs-stat-label);
  line-height:1.15;
  font-weight:400;
}


/* =========================================================================
   12. RIOMARKET JOVEM  → usa .section + .cards (bloco 08)
   ========================================================================= */


/* =========================================================================
   13. PRINCIPAIS PLAYERS
   ========================================================================= */
.players{
  background:var(--c-bg-soft);
  padding-block:clamp(40px, 4.11vw, 71px) clamp(40px, 5.5vw, 95px);
  text-align:center;
}
.players__title{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
}
.players__lead{
  margin-top:clamp(8px, .81vw, 14px);
  font-size:var(--fs-lead);
}
.players__list{
  margin-top:clamp(28px, 7.81vw, 135px);
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:clamp(24px, 2.9vw, 50px);
}
.player{ flex:0 1 auto; text-align:center; }
.player__logo{
  height:clamp(52px, 6.48vw, 112px);
  display:flex; align-items:center; justify-content:center;
}
.player__logo img{
  height:var(--lh, 100%); width:auto; max-width:100%; object-fit:contain;
}
/* alturas individuais medidas no layout do Figma */
.player--globo  { --lh:clamp(44px, 5.56vw,  96px); }
.player--warner { --lh:clamp(27px, 3.36vw,  58px); }
.player--bndes  { --lh:clamp(20px, 2.55vw,  44px); }
.player--h2o    { --lh:clamp(39px, 4.86vw,  84px); }
.player--sony   { --lh:clamp(52px, 6.48vw, 112px); }


/* =========================================================================
   14. LOCAL
   ========================================================================= */
.venue{ background:var(--c-bg); }

.venue__media{
  position:relative;
  height:clamp(240px, 31.8vw, 550px);   /* teto de 550px */
  overflow:hidden;
}
.venue__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 52%;
}

/* silhueta do Pão de Açúcar: sobreposta à foto, encostada na base e
   alinhada à direita pelos limites do .container (não do browser) */
.venue__silhouette-wrap{
  position:absolute; left:0; right:0; bottom:0;
  pointer-events:none;
}
.venue__silhouette-wrap > .container{
  display:flex; justify-content:flex-end;
}
.venue__silhouette{
  display:block;
  width:min(46%, 660px);
  height:auto;
}

.venue__address{
  padding:clamp(28px, 4.63vw, 80px) var(--gutter) clamp(28px, 3.65vw, 63px);
  text-align:center;
}
.venue__name{ font-family:var(--font-heading); font-size:clamp(15px, 1.16vw, 20px); font-weight:700; }
.venue__line{ margin-top:clamp(12px, 1.39vw, 24px); font-size:clamp(14px, .93vw, 16px); }
.venue__block{ margin-top:clamp(14px, 1.74vw, 30px); font-size:clamp(14px, .93vw, 16px); line-height:1.22; }


/* =========================================================================
   15. PATROCINADORES
   ========================================================================= */
.sponsors{ background:var(--c-bg); }
.sponsors__row{ border-top:1px solid var(--c-border-soft); }
.sponsors__row:last-child{ border-bottom:1px solid var(--c-border); }

.sponsors__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  min-height:146px;
  max-width:100%;
  padding-inline:0;
}
.sponsors__grid--single{ grid-template-columns:1fr; }

.sponsor-group{
  padding:clamp(14px, 1.04vw, 18px) clamp(16px, 2.08vw, 36px);
  border-left:1px solid var(--c-border-soft);
  display:flex; flex-direction:column; justify-content:center;
}
.sponsor-group:first-child{ border-left:0; padding-left:var(--gutter); }
.sponsor-group:last-child{ padding-right:var(--gutter); }

.sponsor-group__label{
  font-family:var(--font-heading);
  font-size:var(--fs-micro);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--c-ink);
}
.sponsor-group__logos{
  margin-top:clamp(8px, .81vw, 14px);
  display:flex; align-items:center;
  gap:clamp(14px, 2.08vw, 36px);
  flex-wrap:wrap;
}
/* alturas individuais, medidas no layout do Figma */
.sponsor-group__logos img{ width:auto; object-fit:contain; height:clamp(16px, 1.16vw, 20px); }
.sponsor-group__logos img.sl-rouanet { height:clamp(32px, 2.60vw, 45px); }
.sponsor-group__logos img.sl-shell   { height:clamp(32px, 2.60vw, 45px); }
.sponsor-group__logos img.sl-visitrio{ height:clamp(15px, 1.10vw, 19px); }
.sponsor-group__logos img.sl-cinema  { height:clamp(28px, 2.14vw, 37px); }
.sponsor-group__logos img.sl-brasil  { height:clamp(18px, 1.33vw, 23px); }


/* =========================================================================
   16. FOOTER
   ========================================================================= */
.site-footer{
  background:var(--c-bg-soft);
  padding-block:clamp(28px, 2.66vw, 46px) clamp(20px, 1.74vw, 30px);
}
.site-footer__inner{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
}
.site-footer__logo{ width:clamp(150px, 14.06vw, 243px); height:auto; }
.site-footer__date{
  margin-top:clamp(10px, 1.04vw, 18px);
  font-family:var(--font-heading);
  font-size:clamp(15px, 1.16vw, 20px);
  font-weight:700;
  letter-spacing:.01em;
}
.site-footer__side{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:clamp(14px, 1.91vw, 33px);
}
.social{ display:flex; align-items:center; gap:clamp(18px, 1.85vw, 32px); }
.social a{ display:block; color:var(--c-ink); }
.social a:hover{ color:var(--c-coral); }
.social svg{ width:clamp(20px, 1.39vw, 24px); height:clamp(20px, 1.39vw, 24px); fill:currentColor; }

.site-footer__fdr img{ width:clamp(140px, 11.5vw, 199px); height:auto; }

.site-footer__copy{
  margin-top:clamp(28px, 3.3vw, 57px);
  text-align:center;
  font-family:var(--font-heading);
  font-size:var(--fs-micro);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--c-ink);
}


/* =========================================================================
   17. PÁGINA INTERNA
   Medidas conferidas nas referências de 1728px (escala 1:1 com o Figma):
   faixa de abas com 119px de altura entre duas linhas, coluna de texto de
   940px centralizada, títulos com filete coral da largura da coluna.
   ========================================================================= */

/* O menu principal usa a mesma cor do header (--c-bg-header) também nas
   internas: a faixa cinza só "aparece" porque abaixo dela vem conteúdo branco,
   e não a foto do hero. Por isso não há regra de cor para .page-interna aqui.

   --- faixa de abas (cada item carrega uma página nova) ---
   Ao rolar, ela gruda logo abaixo do header encolhido. A altura do header muda
   (encolhe no desktop, tem mais linhas no mobile), então quem informa o valor
   é o main.js, na variável --h-header-real. */
.subnav{
  position:sticky;
  top:var(--h-header-real, 67px);
  z-index:90;
  background:var(--c-bg);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}
/* nunca quebra em duas linhas: não cabendo, rola de lado.
   `safe center` centraliza quando cabe e alinha à esquerda quando não cabe —
   sem ele, o começo da lista fica inacessível ao rolar. */
.subnav__list{
  display:flex; flex-wrap:nowrap;
  justify-content:center;
  justify-content:safe center;
  gap:clamp(24px, 3.8vw, 66px);
  padding:32px var(--gutter) 35px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.subnav__list::-webkit-scrollbar{ display:none; }
.subnav__item{ flex:0 0 auto; }

/* aviso de que há mais itens para o lado: um esmaecido com seta na borda.
   Só aparece quando existe conteúdo escondido — quem liga e desliga as classes
   é o main.js. */
.subnav::before,
.subnav::after{
  content:'';
  position:absolute; top:1px; bottom:1px;
  width:clamp(56px, 12vw, 84px);
  pointer-events:none;
  opacity:0;
  transition:opacity var(--transition);
  z-index:2;
}
.subnav::after{
  right:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236C6B68' d='M5.3 2.6 10.7 8l-5.4 5.4L4 12.1 8.1 8 4 3.9z'/%3E%3C/svg%3E")
      no-repeat right 10px center / 9px 15px,
    linear-gradient(to right, rgba(255,255,255,0), var(--c-bg) 62%);
}
.subnav::before{
  left:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236C6B68' d='M10.7 13.4 5.3 8l5.4-5.4L12 3.9 7.9 8l4.1 4.1z'/%3E%3C/svg%3E")
      no-repeat left 10px center / 9px 15px,
    linear-gradient(to left, rgba(255,255,255,0), var(--c-bg) 62%);
}
.subnav.tem-mais::after{ opacity:1; }
.subnav.tem-antes::before{ opacity:1; }
.subnav__link{
  display:flex; flex-direction:column; align-items:center; gap:11px;
  text-align:center;
}
.subnav__ico{
  width:28px; height:29px;
  fill:var(--c-ink);
  transition:fill var(--transition);
}
.subnav__label{
  font-family:var(--font-heading);
  font-size:13px; font-weight:600; line-height:1;
  text-transform:uppercase; letter-spacing:.06em;
  color:#56534E;
  transition:color var(--transition);
}
/* a página aberta é a única com o ícone coral */
.subnav__link.is-active .subnav__ico,
.subnav__link:hover .subnav__ico{ fill:var(--c-coral); }
.subnav__link:hover .subnav__label{ color:var(--c-ink); }

/* --- corpo da página --- */
.page{ background:var(--c-bg); }
.page__inner{
  max-width:calc(940px + var(--gutter) * 2);
  margin-inline:auto;
  padding:clamp(28px, 2.9vw, 50px) var(--gutter) clamp(48px, 6.5vw, 112px);
}
.page__inner > p,
.doc > p{
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:2;
  color:var(--c-ink);
}
.page__inner > p + p,
.doc > p + p{ margin-top:1.6em; }
/* Links do texto em coral e sublinhados.
   Os `:not` tiram da regra o que é link mas não é texto corrido: o botão
   (ficava coral sobre coral, ilegível) e as abas dos Regulamentos, que têm
   desenho próprio mais abaixo. Sem eles a regra vence pelo peso e as abas
   saíam coral e sublinhadas. Ao acrescentar um `:not` aqui, lembre que o
   peso do seletor sobe — é por isso que as duas exceções são explícitas. */
.page__inner a:not(.btn):not(.docs__link){ color:var(--c-coral); text-decoration:underline; text-underline-offset:3px; }
.page__inner a:not(.btn):not(.docs__link):hover{ color:var(--c-coral-dark); }

.page__block{ margin-top:clamp(40px, 4.2vw, 72px); }
.page__title{
  font-family:var(--font-heading);
  font-size:clamp(20px, 1.5vw, 26px);
  font-weight:600;
  line-height:1.2;
  color:var(--c-ink);
  padding-bottom:11px;
  border-bottom:1px solid var(--c-coral);
}
.page__block > p{
  margin-top:clamp(24px, 2.6vw, 45px);
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:2;
  color:var(--c-ink);
}
.page__block > p + p{ margin-top:1.6em; }

/* O ícone da faixa vem do cadastro da página, colado como SVG no admin. Ele
   entra dentro deste span, que é quem dá o tamanho; a cor é herdada, e por
   isso o desenho fica coral na página aberta sem depender do que foi colado. */
.subnav__ico > svg{ display:block; width:100%; height:100%; fill:inherit; }

/* --- abas internas dos Regulamentos ---
   O desenho é o mesmo do seletor de dias da agenda, e as regras estão
   escritas uma vez só, mais abaixo, no bloco da AGENDA. Aqui ficam apenas as
   medidas próprias desta tela. */

/* o documento aberto; os outros ficam com `hidden` */
.doc[hidden]{ display:none; }

/* A faixa de abas mora DENTRO do miolo, e o miolo tem regras para o HTML que
   chega do editor do admin: lista com marcador, link sublinhado, respiro
   entre itens. Nada disso vale para navegação — aqui elas são desfeitas.
   Os seletores levam `.page__inner` na frente só para ganhar em peso das
   regras do editor; sem isso o marcador voltaria. */
.page__inner .docs__list{ margin:0; padding:0; list-style:none; }
.page__inner .docs__item + .docs__item{ margin-top:0; }
.page__inner .docs__link{ text-decoration:none; }
.page__inner .docs__link:hover{ color:var(--c-ink); }
.page__inner .docs__link.is-active{ color:var(--c-ink); }

/* Nesta página o miolo começa nas abas, não no texto: o respiro grande do
   alto sobraria. Medidas do mockup aprovado — 14px acima das abas e 20px
   entre a linha das abas e o começo do texto. */
.page__inner--abas{ padding-top:14px; }
.page__inner--abas .doc > :first-child{ margin-top:0; }

/* --- texto vindo do editor do admin ---------------------------------------
   Nas páginas de conteúdo o texto inteiro é escrito no editor e chega aqui
   como HTML solto: parágrafos, negrito, listas, links e, às vezes, títulos e
   imagens. As regras abaixo dão a essas tags o mesmo desenho dos blocos que
   o layout já tem, para o conteúdo antigo não precisar ser reescrito. */
.page__inner h2,
.page__inner h3{
  font-family:var(--font-heading);
  font-weight:600;
  line-height:1.2;
  color:var(--c-ink);
  margin-top:15px;
  padding-bottom:11px;
  border-bottom:1px solid var(--c-coral);
}
.page__inner h2{ font-size:clamp(20px, 1.5vw, 26px); }
.page__inner h3{ font-size:clamp(17px, 1.2vw, 21px); }
.page__inner h2 + p,
.page__inner h3 + p{ margin-top:clamp(8px, .87vw, 15px); }

.page__inner ul,
.page__inner ol{
  margin-top:1.6em;
  padding-left:1.4em;
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:2;
  color:var(--c-ink);
}
.page__inner ul{ list-style:disc; }
.page__inner ol{ list-style:decimal; }
.page__inner li + li{ margin-top:.4em; }

.page__inner img{ max-width:100%; height:auto; }
.page__inner iframe{ max-width:100%; }

/* tabelas do editor: rolam de lado no celular em vez de estourar a página */
.page__inner table{
  display:block; overflow-x:auto;
  width:100%; margin-top:1.6em;
  border-collapse:collapse;
  font-size:clamp(14px, .95vw, 15px);
}
.page__inner th,
.page__inner td{
  padding:10px 14px;
  border:1px solid var(--c-border);
  text-align:left;
  vertical-align:top;
}
.page__inner th{ font-weight:600; }


/* -------------------------------------------------------------------------
   CONTATO (O RioMarket > Contato)
   A única página interna que não é uma coluna de texto: ocupa os 1428px do
   container em duas colunas. Medidas da referência de 1728px —
   333 (e-mails) + 155 (respiro) + 940 (formulário) = 1428.
   Os `fr` reproduzem essa proporção: sobrando 1273px depois do respiro,
   333fr + 940fr dão exatamente 333px e 940px.
   ------------------------------------------------------------------------- */
.page__inner--contato{
  max-width:calc(var(--container) + var(--gutter) * 2);
  padding-bottom:clamp(40px, 3.01vw, 52px);
  display:grid;
  grid-template-columns:333fr 940fr;
  column-gap:clamp(32px, 8.97vw, 155px);
  align-items:start;
}

/* --- coluna dos e-mails ---
   Os títulos, parágrafos e links já são desenhados pelas regras de
   "texto vindo do editor" logo acima; aqui só ficam os ajustes de
   espaçamento e o envelope. */
.contato__texto p{
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:2;
  color:var(--c-ink);
}
/* o respiro entre o título e o parágrafo é o mesmo do resto do site — a
   regra geral de `h2 + p` / `h3 + p`, mais acima; a medida maior que havia
   aqui foi retirada de propósito */
.contato__texto p + p{ margin-top:.75em; }

/* Envelope coral em qualquer link `mailto:`. Desenhado como máscara para a
   cor sair do token, e não do arquivo — assim o admin cola só o endereço.
   É o mesmo desenho do #ico-mail do sprite. */
.contato__texto a[href^="mailto:"]{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none;
}
.contato__texto a[href^="mailto:"]::before{
  content:'';
  flex:0 0 auto;
  width:19px; height:15px;
  background:var(--c-coral);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1.8 4.8h20.4v14.4H1.8V4.8Zm2.4 1.8L12 12.4l7.8-5.8H4.2Z'/%3E%3C/svg%3E")
              no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1.8 4.8h20.4v14.4H1.8V4.8Zm2.4 1.8L12 12.4l7.8-5.8H4.2Z'/%3E%3C/svg%3E")
              no-repeat center / contain;
}

/* --- coluna do formulário --- */
.form-contato__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:clamp(20px, 2.14vw, 37px);
  row-gap:clamp(22px, 2.6vw, 45px);
  margin-top:clamp(24px, 2.6vw, 45px);
}
.form-contato__campo--full{ grid-column:1 / -1; }

.form-contato__label{
  display:block;
  margin-bottom:10px;
  font-size:clamp(13px, .93vw, 16px);
  line-height:1.3;
  color:var(--c-ink);
}
.form-contato__req{ color:var(--c-coral); }

.form-contato__input,
.form-contato__area{
  display:block;
  width:100%;
  padding:10px 14px;
  font-family:var(--font-body);
  font-size:clamp(14px, .93vw, 16px);
  line-height:1.4;
  color:var(--c-ink);
  background:var(--c-white);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  transition:border-color var(--transition);
}
.form-contato__input{ height:44px; }
.form-contato__area{
  min-height:clamp(180px, 16.9vw, 292px);
  resize:vertical;
}
.form-contato__input::placeholder,
.form-contato__area::placeholder{ color:#8C8A86; opacity:1; }
.form-contato__input:hover,
.form-contato__area:hover{ border-color:#BFBEBC; }

.form-contato__acoes{
  display:flex; justify-content:flex-end;
  margin-top:clamp(24px, 2.14vw, 37px);
}
.form-contato__enviar{ min-width:clamp(180px, 12.21vw, 211px); }

/* aviso de envio: no CakePHP é o `$mensagem` do Controller */
.form-aviso{
  margin-top:16px;
  padding:12px 16px;
  border-left:3px solid var(--c-coral);
  background:var(--c-bg-soft);
  font-size:clamp(14px, .93vw, 16px);
  line-height:1.5;
}
.form-aviso[hidden]{ display:none; }


/* -------------------------------------------------------------------------
   AGENDA (Programação > Agenda completa)
   Medidas da referência de 1728px. As colunas somam os 1428px do container:
   152 (horário) + 873 (conteúdo) + 320 (sala) + 83 (botão).
   ------------------------------------------------------------------------- */
.agenda{ background:var(--c-bg); }
.agenda__inner{ padding-block:clamp(28px, 3.4vw, 58px) clamp(40px, 5.2vw, 90px); }

/* --- seletor de dias ---
   A linha cinza é o FUNDO do container que rola, não a borda da lista. Fundo
   de elemento com scroll fica parado enquanto o conteúdo corre por cima, que é
   o que se espera: no celular arrastam-se os dias, a linha não sai do lugar.
   A marca coral é a borda inferior do próprio dia — ela rola junto com ele,
   e cai exatamente sobre a linha cinza porque o link ocupa toda a altura. */
.days,
.docs{
  background-image:linear-gradient(var(--c-border), var(--c-border));
  background-repeat:no-repeat;
  background-size:100% 1px;
  background-position:left bottom;
}
.days{
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.days::-webkit-scrollbar{ display:none; }

.days__list,
.docs__list{
  display:grid;
  grid-auto-flow:column;
}
/* dias: cada um tem largura mínima e a faixa rola de lado quando não cabem */
.days__list{ grid-auto-columns:minmax(96px, 1fr); }
/* abas dos Regulamentos: nunca rolam — dividem a largura por igual, seja
   com duas abas ou com três, e o rótulo quebra em duas linhas se precisar */
.docs__list{ grid-auto-columns:minmax(0, 1fr); }

.days__link,
.docs__link{
  display:block; height:100%;
  padding:10px 4px 12px;
  text-align:center;
  font-family:var(--font-heading);
  font-size:15px; font-weight:600;
  line-height:1.45;          /* explícita: dentro do miolo herdaria 2 */
  letter-spacing:.02em;
  color:#736F68;
  border-bottom:1px solid transparent;
  transition:color var(--transition), border-color var(--transition);
}
/* os dias já vêm escritos em caixa alta; os títulos das abas, não */
.docs__link{ text-transform:uppercase; }

.days__link:hover,
.docs__link:hover{ color:var(--c-ink); }
.days__link.is-active,
.docs__link.is-active{ color:var(--c-ink); border-bottom-color:var(--c-coral); }

/* respiro entre a linha das abas e o começo do documento (mockup aprovado) */
.docs{ margin-bottom:20px; }

/* --- lista de sessões --- */
.sessions{ display:flex; flex-direction:column; gap:33px; margin-top:clamp(28px, 3.7vw, 64px); }
.sessions[hidden]{ display:none; }    /* [hidden] sozinho perde para o display:flex */

.sessions__vazio{
  margin-top:clamp(28px, 3.7vw, 64px);
  font-size:16px;
  color:#6C6B68;
}
.sessions__vazio[hidden]{ display:none; }

.session{
  display:grid;
  grid-template-columns:152px minmax(0,1fr) 320px 83px;
  align-items:start;
  column-gap:0;
}

/* a cor vem do tipo da sessão e serve à barra e à etiqueta */
.session--talk       { --tipo:#EF523D; }
.session--workshop   { --tipo:#CC2BB2; }
.session--masterclass{ --tipo:#EC2282; }
.session--jovem      { --tipo:#246B94; }
.session--exibicao   { --tipo:#1881F1; }
.session--evento     { --tipo:#7F008C; }

.session__time{
  font-family:var(--font-heading);
  font-size:14px; font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#6C6B68;
  padding-top:3px;
}
.session__main{
  border-left:2px solid var(--tipo, var(--c-border));
  padding-left:15px;
}
.session__title{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-family:var(--font-heading);
  font-size:17px; font-weight:600; line-height:1.35;
  color:var(--c-ink);
}
.session__desc{
  margin-top:8px;
  font-size:16px; line-height:1.45;
  color:var(--c-ink);
}
.session__room{
  font-family:var(--font-heading);
  font-size:15px; font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--c-ink);
  padding-top:2px;
}

/* --- etiqueta do tipo --- */
.tag{
  display:inline-flex; align-items:center; gap:7px;
  height:24px; padding:0 9px;
  border:1px solid var(--tipo, var(--c-border));
  background:var(--c-bg-header);
  font-family:var(--font-heading);
  font-size:11px; font-weight:700; line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--tipo, var(--c-ink));
}
.tag__ico{ width:12px; height:12px; fill:currentColor; flex:0 0 auto; }

/* --- botão "Ver mais" --- */
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:83px; height:38px; padding:0 12px;
  border:1px solid var(--c-ink);
  font-family:var(--font-heading);
  font-size:14px; font-weight:500;
  color:var(--c-ink);
  white-space:nowrap;
  transition:background-color var(--transition), color var(--transition);
}
.btn-outline:hover{ background:var(--c-ink); color:var(--c-white); }



/* -------------------------------------------------------------------------
   DETALHE DO EVENTO (destino do "Ver mais" da agenda)
   Medidas conferidas nas duas referências, 1728px e 412px. O título tem 32px
   nos dois quadros — não encolhe no celular, só quebra em mais linhas.

   A mesma informação muda de forma: no desktop é uma tabela de três colunas
   com os títulos em cima; no celular vira uma ficha de rótulo + valor. Por
   isso cada linha carrega o próprio rótulo, sempre presente para o leitor de
   tela, e o cabeçalho das colunas é que some.
   ------------------------------------------------------------------------- */
.evento{ background:var(--c-bg); }
.evento__inner{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding:clamp(28px, 2.1vw, 36px) var(--gutter) clamp(24px, 1.6vw, 28px);
}

/* --- voltar --- */
.voltar{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-heading);
  font-size:clamp(14px, .93vw, 16px);
  font-weight:600;
  line-height:1.4;
  color:var(--c-ink);
  transition:color var(--transition);
}
.voltar:hover{ color:var(--c-coral); }
.voltar__ico{
  width:13px; height:13px;
  fill:currentColor;
  transform:rotate(90deg);   /* o chevron do sprite aponta para baixo */
}

/* --- título e etiqueta do tipo --- */
.evento__titulo{
  margin-top:36px;
  font-size:clamp(24px, 7.8vw, 32px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--c-ink);
}
.evento__tipo{ margin-top:16px; }

/* as mesmas seis cores da agenda, agora com nome que serve a qualquer tela */
.tipo--talk       { --tipo:#EF523D; }
.tipo--workshop   { --tipo:#CC2BB2; }
.tipo--masterclass{ --tipo:#EC2282; }
.tipo--jovem      { --tipo:#246B94; }
.tipo--exibicao   { --tipo:#1881F1; }
.tipo--evento     { --tipo:#7F008C; }

/* --- texto do evento (vem do editor do admin) ---
   Mesma medida de leitura das outras páginas de conteúdo: 940px. A tabela de
   participantes abaixo continua ocupando o container inteiro, porque ali as
   colunas é que mandam na largura. */
.evento__texto{
  max-width:940px;
  margin-top:clamp(20px, 1.9vw, 32px);
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:2;
  color:var(--c-ink);
}
.evento__texto p + p{ margin-top:1.6em; }
.evento__texto a{ text-decoration:underline; text-underline-offset:3px; }
.evento__texto a:hover{ color:var(--c-coral); }
.evento__texto ul,
.evento__texto ol{ margin-top:1.6em; padding-left:1.4em; }
.evento__texto ul{ list-style:disc; }
.evento__texto ol{ list-style:decimal; }
.evento__texto li + li{ margin-top:.4em; }

/* --- grupo (moderadores, palestrantes) --- */
.evento__grupo{ margin-top:32px; }
.evento__grupo + .evento__grupo{ margin-top:24px; }

/* Cabeçalho e linha repartem a MESMA grade, senão as colunas não se alinham:
   três colunas iguais mais os 111px do botão, somando os 1428px do container. */
.evento__cab,
.evento__linha{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)) 111px;
  align-items:center;
}
.evento__cab{
  padding-bottom:18px;
  margin-bottom:8px;
  border-bottom:1px solid var(--c-coral);
  font-size:clamp(15px, 1.04vw, 16px);
  font-weight:600;
  line-height:1.2;
  color:var(--c-ink);
}
.evento__linha{
  min-height:54px;
  padding-block:8px;
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:1.45;
  color:var(--c-ink);
}
/* respiro entre colunas sem usar gap: assim o botão continua colado à direita */
.evento__cab > *,
.evento__campo{ padding-right:clamp(12px, 1.4vw, 24px); }

/* no desktop o rótulo some da vista, mas continua no leitor de tela */
.evento__rotulo{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.evento__bio{ display:flex; width:100%; }
.evento__bio:hover{ background:var(--c-ink); color:var(--c-white); }


/* -------------------------------------------------------------------------
   LISTAGEM DE PALESTRANTES (Mercado > Palestrantes)
   Medidas das duas referências: 4 colunas de 303px com 62px de respiro no
   quadro de 1728; 2 colunas de 181px com 16px no de 412.

   A foto vem do S3 em tamanho que não controlamos. Por isso o card fixa a
   proporção e recorta o excedente (object-fit), em vez de deixar a imagem
   mandar na altura da fila — senão cada linha ficaria de um jeito.
   ------------------------------------------------------------------------- */
.pessoas{ background:var(--c-bg); }
.pessoas .container{ padding-block:64px; }

.pessoas__grade{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  column-gap:clamp(16px, 3.59vw, 62px);
  row-gap:clamp(40px, 3.7vw, 64px);
}

.pessoa__link{
  display:block;
  text-align:center;          /* no celular passa para a esquerda */
}

.pessoa__foto{
  display:block;
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:var(--c-bg-soft);   /* enquanto a foto não chega */
}
.pessoa__foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--transition);
}
.pessoa__link:hover .pessoa__foto img{ transform:scale(1.03); }

.pessoa__nome{
  display:block;
  margin-top:14px;
  font-size:clamp(17px, 1.16vw, 20px);
  font-weight:500;
  line-height:1.35;
  color:var(--c-ink);
  transition:color var(--transition);
}
.pessoa__link:hover .pessoa__nome{ color:var(--c-coral); }

.pessoas__sentinela{ height:1px; }   /* alvo do observador de rolagem */

/* --- busca da listagem ---
   Não está no Figma: entrou porque a lista passa de 350 nomes e sem ela a
   única saída seria o Ctrl+F do navegador, que só acha quem já apareceu.
   O desenho reaproveita o campo do formulário de contato. */
.pessoas__busca{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-bottom:clamp(28px, 2.6vw, 45px);
}
.pessoas__busca-campo{
  width:100%;
  max-width:320px;
  height:44px;
  padding:10px 14px;
  font-family:var(--font-body);
  font-size:clamp(14px, .93vw, 16px);
  line-height:1.4;
  color:var(--c-ink);
  background:var(--c-white);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  transition:border-color var(--transition);
}
.pessoas__busca-campo::placeholder{ color:#8C8A86; opacity:1; }

.pessoas__busca-campo:hover{ border-color:#BFBEBC; }

/* nada encontrado / lista vazia */
.pessoas__vazio{
  padding:12px 16px;
  border-left:3px solid var(--c-coral);
  background:var(--c-bg-soft);
  font-size:clamp(14px, .93vw, 16px);
  line-height:1.5;
}

.pessoa__empresa{
  display:block;
  margin-top:6px;
  font-size:var(--fs-body-sm);
  line-height:1.5;
  color:var(--c-ink);
}


/* -------------------------------------------------------------------------
   PLAYERS DAS RODADAS DE NEGÓCIOS (listagem e detalhe)
   Não veio do Figma: montada com as peças das outras telas — a grade de
   fotos dos palestrantes e o miolo em coluna do detalhe —, mais a chamada de
   inscrição, que aqui é a ação principal da página e por isso ganha lugar
   fixo ao lado, acompanhando a rolagem.
   ------------------------------------------------------------------------- */
.secao-lado{ background:var(--c-bg); }
.secao-lado__inner{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding:clamp(28px, 2.1vw, 36px) var(--gutter) clamp(48px, 4.6vw, 80px);
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(280px, 21vw, 340px);
  column-gap:clamp(32px, 3.7vw, 64px);
  align-items:start;
}

/* o texto de abertura vem do editor do admin */
.secao-lado__intro{ margin-bottom:clamp(28px, 2.6vw, 45px); }
.secao-lado__intro p{
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:2;
  color:var(--c-ink);
}
.secao-lado__intro p + p{ margin-top:1.6em; }
.secao-lado__intro a{
  color:var(--c-coral);
  text-decoration:underline; text-underline-offset:3px;
}
.secao-lado__intro a:hover{ color:var(--c-coral-dark); }

/* Sem margem no alto: a grade começa na mesma linha da chamada de inscrição
   ao lado. O respiro acima é o do próprio bloco. */
.secao-lado__grade{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  column-gap:clamp(16px, 2.1vw, 36px);
  row-gap:clamp(32px, 3.2vw, 56px);
}

/* a linha que a listagem de palestrantes não tem */
.pessoa__cargo{
  display:block;
  margin-top:4px;
  font-size:var(--fs-body-sm);
  line-height:1.5;
  color:var(--c-ink-soft);
}

/* --- coluna da direita: inscrição e busca ---
   Acompanha a rolagem no desktop: em 119 players a lista é longa, e o botão
   sumir no alto seria perder a ação principal da página. */
.secao-lado__coluna{
  position:sticky;
  /* trava abaixo do header e da faixa de abas, que também é fixa — as duas
     alturas são medidas pelo main.js. Os valores de reserva servem ao
     primeiro quadro, antes de o script rodar. */
  top:calc(var(--h-header-real, 67px) + var(--h-subnav-real, 96px) + 24px);
  display:grid;
  align-content:start;
  row-gap:clamp(20px, 1.6vw, 28px);
}

.secao-lado__busca{ display:grid; row-gap:10px; }
.secao-lado__busca .pessoas__busca-campo{ max-width:none; }

.destaque{
  padding:clamp(20px, 1.6vw, 28px);
  background:var(--c-bg-soft);
  border:1px solid var(--c-border);
  border-top:4px solid var(--c-coral);
}
.destaque__titulo{
  font-family:var(--font-heading);
  font-size:clamp(18px, 1.27vw, 22px);
  font-weight:600;
  line-height:1.25;
  color:var(--c-ink);
}
.destaque__texto{
  margin-top:12px;
  font-size:var(--fs-body-sm);
  line-height:1.6;
  color:var(--c-ink-soft);
}
.destaque__botao{
  display:flex;
  gap:10px;
  width:100%;
  margin-top:20px;
}
.destaque__ico{
  flex:0 0 auto;
  width:13px; height:13px;
  fill:currentColor;
}

/* --- página de conteúdo com a coluna lateral ---
   O regulamento das Rodadas recebe a mesma caixa de inscrição da listagem de
   players. O texto vem do editor do admin como elementos soltos (p, h2, ul),
   então eles continuam sendo filhos diretos do miolo — é disso que dependem
   as regras de tipografia. O grid manda todos eles para a coluna 1 e reserva
   a 2 para a caixa, que atravessa a altura toda para poder acompanhar a
   rolagem. */
.page__inner--lado{
  max-width:calc(var(--container) + var(--gutter) * 2);
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(280px, 21vw, 340px);
  column-gap:clamp(32px, 3.7vw, 64px);
  align-items:start;
}
.page__inner--lado > *{ grid-column:1; }
.page__inner--lado > .secao-lado__coluna{ grid-column:2; grid-row:1 / span 9999; }

/* lista vazia */
.secao-lado__vazio{
  margin-top:clamp(28px, 2.6vw, 45px);
  padding:12px 16px;
  border-left:3px solid var(--c-coral);
  background:var(--c-bg-soft);
  font-size:clamp(14px, .93vw, 16px);
  line-height:1.5;
}


/* -------------------------------------------------------------------------
   DETALHE DO PALESTRANTE
   A foto tem 186x248 (3:4) nos dois quadros — não muda de tamanho, muda de
   lugar: ao lado do texto no desktop, centrada acima dele no celular.
   ------------------------------------------------------------------------- */
.palestrante{ background:var(--c-bg); }
.palestrante__inner{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding:clamp(28px, 2.1vw, 36px) var(--gutter) clamp(32px, 2.3vw, 40px);
}

.palestrante__topo{
  margin-top:36px;
  display:grid;
  grid-template-columns:clamp(150px, 10.76vw, 186px) minmax(0, 1fr);
  column-gap:clamp(20px, 1.85vw, 32px);
  align-items:start;
}

/* Sem foto cadastrada, o bloco vira uma coluna só: o texto começa onde a
   foto começaria, em vez de ficar espremido na coluna estreita dela. */
.palestrante__topo--sem-foto{ grid-template-columns:minmax(0, 1fr); }

.palestrante__foto{
  margin:0;
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:var(--c-bg-soft);
}
.palestrante__foto img{ width:100%; height:100%; object-fit:cover; }

.palestrante__nome{
  font-size:clamp(24px, 7.8vw, 32px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--c-ink);
}

/* --- ficha de rótulo + valor ---
   Mesmo desenho da ficha do detalhe do evento no celular. Aqui vale em
   qualquer largura: são três campos curtos, não uma tabela. */
.ficha{ margin-top:24px; }
.ficha__campo{
  display:grid;
  grid-template-columns:105px minmax(0, 1fr);
  column-gap:16px;
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:1.45;
  color:var(--c-ink);
}
.ficha__campo + .ficha__campo{ margin-top:15px; }
.ficha__rotulo{ font-weight:600; }

/* --- biografia (vem do editor do admin) --- */
.palestrante__bio{
  max-width:1010px;
  margin-top:24px;
  font-size:clamp(15px, 1.04vw, 16px);
  line-height:1.45;
  color:var(--c-ink);
}
.palestrante__bio p + p{ margin-top:1.6em; }
.palestrante__bio a{ text-decoration:underline; text-underline-offset:3px; }
.palestrante__bio a:hover{ color:var(--c-coral); }
.palestrante__bio ul,
.palestrante__bio ol{ margin-top:1.6em; padding-left:1.4em; }
.palestrante__bio ul{ list-style:disc; }
.palestrante__bio ol{ list-style:decimal; }
.palestrante__bio li + li{ margin-top:.4em; }

/* --- eventos do palestrante ---
   Reaproveita a linha .session da agenda: mesma grade, mesma cor por tipo.
   A diferença é a coluna do horário, que aqui precisa também da data — na
   agenda o dia já está no seletor acima, aqui cada evento é de um dia. */
.palestrante__eventos{ margin-top:clamp(40px, 4.2vw, 72px); }
.palestrante__eventos-titulo{
  font-family:var(--font-heading);
  font-size:clamp(20px, 1.5vw, 26px);
  font-weight:600;
  line-height:1.2;
  color:var(--c-ink);
  padding-bottom:11px;
  border-bottom:1px solid var(--c-coral);
}
.session__date{
  display:block;
  margin-bottom:3px;
  color:var(--c-ink);
}

/* =========================================================================
   18. BREAKPOINTS
   ========================================================================= */

/* ---------- o menu horizontal não cabe: vira hambúrguer ---------- */
@media (max-width:1180px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------- Tablet / laptop pequeno ---------- */
@media (max-width:1100px){
  .session{ grid-template-columns:132px minmax(0,1fr) 150px 83px; }

  .cards--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cards--3 > .card:last-child{ grid-column:1 / -1; }
  .cards--3.cards--compact > .card:last-child{ grid-column:auto; }

  .rodadas__inner{ grid-template-columns:1fr; row-gap:32px; }
  .rodadas__content{ text-align:center; }
  .rodadas__text{ margin-inline:auto; }
  .rodadas__actions{ justify-content:center; }

  .players__list{ flex-wrap:wrap; justify-content:center; row-gap:36px; }
  .player{ flex:0 0 calc(33.333% - 34px); }

  .venue__silhouette{ width:min(50%, 520px); }

  /* palestrantes: 4 colunas não cabem mais */
  .pessoas__grade{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

  /* players: a coluna do lado aperta demais a grade */
  .secao-lado__grade{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  /* contato: os e-mails passam para cima do formulário */
  .page__inner--contato{ grid-template-columns:1fr; row-gap:clamp(36px, 5vw, 56px); }
}

/* ---------- Detalhe do evento: a tabela de participantes deixa de caber ----------
   Quatro colunas em menos de 900px espremem "Empresa" a ponto de quebrar em
   três linhas. Antes disso a tabela vira ficha de rótulo + valor, que é o
   desenho da referência de celular. */
@media (max-width:900px){
  /* a régua coral passa a separar os grupos, no topo de cada um */
  .evento__cab{ display:none; }
  .evento__grupo,
  .evento__grupo + .evento__grupo{
    margin-top:32px;
    padding-top:32px;
    border-top:1px solid var(--c-coral);
  }
  .evento__linha{
    display:block;
    min-height:0;
    padding-block:0;
  }
  .evento__linha + .evento__linha{ margin-top:32px; }
  .evento__campo{
    display:grid;
    grid-template-columns:105px minmax(0, 1fr);
    column-gap:16px;
    padding-right:0;
  }
  .evento__campo + .evento__campo{ margin-top:15px; }
  .evento__rotulo{
    position:static; width:auto; height:auto; margin:0;
    overflow:visible; clip:auto; white-space:normal;
    font-weight:600;
  }
  .evento__bio{ margin-top:16px; }
}

/* ---------- Mobile (frame 412 do Figma) ---------- */
@media (max-width:767px){
  :root{
    --gutter:16px;
    --grid-gap:32px;
    --sp-section:36px;
    --sp-title:20px;
  }

  html{ scroll-padding-top:170px; }   /* header mobile agora tem 3 linhas */

  /* --- topbar: não existe no layout mobile --- */
  .topbar{ display:none; }

  /* --- header em duas linhas --- */
  .site-header__inner{
    flex-wrap:wrap;
    align-items:center;
    padding:16px var(--gutter) 14px;
    min-height:0;
    row-gap:12px;
  }
  .site-header.is-stuck .site-header__inner{ min-height:0; }

  .nav-toggle{ order:1; display:flex; margin-right:12px; }
  .brand{ order:2; }
  .brand__logo,
  .site-header.is-stuck .brand__logo{ width:150px; }
  .header-date{ order:3; font-size:13px; padding-left:12px; }

  .header-meta{
    order:4;
    flex:1 0 100%;
    justify-content:space-between;
    gap:16px;
  }
  .header-meta .header-link{ order:1; font-size:13px; }
  .header-meta .lang{ order:2; font-size:13px; }

  /* botão "Compre aqui": linha inteira, logo abaixo de Festival do Rio / PT-EN */
  .header-meta{ row-gap:14px; }
  .buy{ order:3; flex:1 0 100%; }
  .buy__btn{ width:100%; height:44px; font-size:15px; }
  .buy__panel{ left:0; right:0; top:calc(100% + 6px); }
  .buy__panel a{ font-size:15px; padding:12px 16px; }

  /* --- agenda: uma coluna só --- */
  .session{
    grid-template-columns:1fr;
    row-gap:10px;
    padding-bottom:24px;
    border-bottom:1px solid var(--c-border-soft);
  }
  .session__main{ order:2; }
  .session__time{ order:1; padding-top:0; }
  .session__room{ order:3; padding-left:17px; }
  .btn-outline{ order:4; margin-left:17px; }
  .sessions{ gap:24px; }
  .days__list{ grid-auto-columns:minmax(78px, 1fr); }

  /* --- página interna --- */
  .subnav{ position:relative; top:auto; }  /* não gruda: header + abas fixos comeriam meia tela */
  .subnav__list{ gap:26px; padding:24px var(--gutter) 26px; }
  .subnav__ico{ width:24px; height:25px; }
  .subnav__label{ font-size:12px; }
  .page__inner > p,
  .page__block > p{ line-height:1.85; }
  .contato__texto p{ line-height:1.85; }

  /* --- detalhe do palestrante: a foto sobe e vai para o meio ---
     Ela mantém os 186px da referência: esticar na largura da tela deixaria
     o retrato enorme e empurraria o texto para fora da primeira dobra. */
  .palestrante__topo{ grid-template-columns:1fr; }
  .palestrante__foto{ width:186px; max-width:100%; margin-inline:auto; }
  .palestrante__nome{ margin-top:32px; }
  .palestrante__bio{ line-height:1.55; }
  .palestrante__eventos{ margin-top:40px; }

  /* --- palestrantes: 2 colunas e texto alinhado à esquerda ---
     No desktop o nome é centrado sob a foto; no celular, com a coluna
     estreita, nome e empresa quebram em duas linhas e centrado fica ruim
     de ler. A foto também é menos alta aqui, como na referência. */
  .pessoas__grade{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pessoa__link{ text-align:left; }

  /* --- players: uma coluna só, e a inscrição sobe para o alto ---
     Empilhado, a chamada de inscrição no fim da página ficaria depois de 119
     fichas. Ela é a ação principal, então vem antes da lista. */
  .secao-lado__inner{ grid-template-columns:1fr; row-gap:clamp(28px, 4vw, 40px); }
  .secao-lado__conteudo{ order:2; }
  .secao-lado__coluna{ order:1; position:static; }

  /* a página de conteúdo com caixa ao lado volta a ser uma coluna só; a caixa
     já vem antes do texto no HTML */
  .page__inner--lado{ display:block; }
  .page__inner--lado > .secao-lado__coluna{ margin-bottom:clamp(28px, 4vw, 40px); }

  /* na largura toda a busca cabe numa linha só: o botão sobe para o lado do
     campo, em vez de ocupar uma linha inteira embaixo dele */
  .secao-lado__busca{ display:flex; column-gap:10px; }
  .secao-lado__busca .pessoas__busca-campo{ flex:1 1 auto; min-width:0; }
  .secao-lado__grade{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pessoa__foto{ aspect-ratio:181 / 210; }
  .evento__texto{ line-height:1.85; }

  .form-contato__grid{ grid-template-columns:1fr; row-gap:22px; margin-top:28px; }
  .form-contato__acoes{ margin-top:26px; }
  .form-contato__enviar{ width:100%; }

  /* --- hero ---
     a altura vem da regra de tela cheia lá de cima; aqui só o que muda */
  .hero__title span,
  .hero__subtitle span{ box-shadow:6px 0 0 #fff, -6px 0 0 #fff; padding:4px 0; }
  .hero__title{ max-width:22ch; }
  .hero__inner{ padding-bottom:0; }
  /* o conjunto título + chamada + botão sobe: com 40px o botão ficava colado
     na borda de baixo da foto, e ainda perto dos dots */
  .hero__cta{ width:100%; margin-top:16px; margin-bottom:72px; }
  .hero__arrow{ width:36px; height:36px; }
  .hero__dots{ bottom:6px; padding:6px 10px; gap:8px; }

  /* --- cards: uma coluna, como no layout mobile --- */
  .cards--3{ grid-template-columns:1fr; }
  .cards--3 > .card:last-child,
  .cards--3.cards--compact > .card:last-child{ grid-column:auto; }
  .card__media{ aspect-ratio:380 / 416; }
  .card__media--rounded{ aspect-ratio:380 / 433; }
  .card__title{ margin-top:16px; }
  .card__title--dark{ margin-top:14px; }

  /* --- títulos alinhados à esquerda no mobile --- */
  .section__title--center{ text-align:left; }

  /* --- rodadas --- */
  .rodadas{ padding-block:40px 36px; }
  .rodadas__inner{ padding-inline:var(--gutter); row-gap:24px; }
  .rodadas__content{ padding:0; }
  .rodadas__text{ max-width:none; }
  .rodadas__actions{ flex-direction:column; align-items:stretch; }
  .rodadas__actions .btn{ width:100%; }
  /* de largura inteira, o botão de texto precisa de contorno para se ler
     como botão — é assim que aparece no layout mobile */
  .rodadas__actions .btn--link-dark{ border-color:var(--c-ink); }

  /* --- RioSeminars / Workshops --- */
  .showcase__actions{ margin-top:24px; }

  /* --- faixas que rolam de lado: o card seguinte fica espiando na borda,
         como no layout de 412px (card de 277px = 67% da tela) --- */
  .hscroll{ --hgap:16px; }
  .hscroll > *{ flex-basis:67%; }

  .players__list{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:16px;
    padding-inline:var(--gutter);
  }
  .players__list::-webkit-scrollbar{ display:none; }

  /* players: sem scroll horizontal — quebram em duas linhas (3 + 2),
     centralizados e sempre dentro das margens da tela */
  .players__list{
    flex-wrap:wrap;
    overflow:visible;
    scroll-snap-type:none;
    justify-content:center;
    align-items:stretch;
    column-gap:18px;
    row-gap:30px;
  }
  .player{ flex:0 0 calc(33.333% - 12px); scroll-snap-align:none; }
  .player__logo{ height:52px; align-items:center; }
  .player__logo img{ height:auto; width:auto; max-width:100%; }
  .player--globo  .player__logo img{ max-height:48px; }
  .player--warner .player__logo img{ max-height:22px; }
  .player--bndes  .player__logo img{ max-height:20px; }
  .player--h2o    .player__logo img{ max-height:40px; }
  .player--sony   .player__logo img{ max-height:50px; }

  .players{ text-align:left; }
  .players__lead{ max-width:34ch; }

  /* --- números --- */
  .numbers__list{ grid-template-columns:1fr; gap:28px; }

  /* --- local --- */
  .venue__media{ height:clamp(200px, 55vw, 260px); }
  .venue__silhouette{ width:min(78%, 320px); }

  /* --- patrocinadores empilhados: todos com respiro nas bordas --- */
  .sponsors__grid{ grid-template-columns:1fr; min-height:0; }
  .sponsor-group,
  .sponsor-group:first-child,
  .sponsor-group:last-child{
    border-left:0;
    border-top:1px solid var(--c-border-soft);
    padding:18px var(--gutter);
  }
  .sponsor-group:first-child{ border-top:0; }
  .sponsors__row + .sponsors__row .sponsor-group{ border-top:1px solid var(--c-border-soft); }
  .sponsor-group__logos img{ height:22px; }
  .sponsor-group__logos img.sl-rouanet,
  .sponsor-group__logos img.sl-shell{ height:44px; }
  .sponsor-group__logos img.sl-cinema{ height:36px; }
  .sponsor-group__logos img.sl-brasil{ height:24px; }
  .sponsor-group__logos img.sl-visitrio{ height:20px; }

  /* --- footer --- */
  .site-footer__inner{ flex-direction:column; align-items:center; text-align:center; gap:28px; }
  .site-footer__brand{ display:flex; flex-direction:column; align-items:center; }
  .site-footer__side{ align-items:center; gap:26px; }
  .site-footer__copy{ margin-top:26px; max-width:32ch; margin-inline:auto; line-height:1.7; }
}

/* ---------- Telas muito estreitas ---------- */
@media (max-width:400px){
  .header-date{ font-size:12px; }
  .brand__logo,
  .site-header.is-stuck .brand__logo{ width:132px; }
  .nav-toggle{ width:40px; height:40px; margin-right:8px; }
}

/* ---------- Acima do frame do Figma ---------- */
@media (min-width:1729px){
  :root{ --gutter:calc((100vw - var(--container)) / 2); }
}


/* =========================================================================
   19. PREFERÊNCIAS / IMPRESSÃO
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
  .card__link:hover .card__media img,
  .speaker__link:hover .speaker__media img,
  .workshop__link:hover .workshop__media img{ transform:none; }
}

@media print{
  .site-header, .nav-toggle, .topbar, .drawer, .drawer-backdrop,
  .hero__arrow, .hero__dots{ display:none!important; }
  .hero{ height:auto; }
  .hero__slide{ position:static; opacity:1; visibility:visible; }
  body{ background:#fff; }
}