/* ============================================================================
   STRIVE — Camada de refinamento visual
   ----------------------------------------------------------------------------
   Carregada DEPOIS do bundle principal. Não altera estrutura nem layout:
   só materiais (vidro, sombra), tipografia e microestados.
   Para reverter tudo: remover a linha <link ... refine.css> do index.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
:root {
  --ease-glass: cubic-bezier(.22, 1, .36, 1);

  /* Paleta calibrada pela arte do LinkedIn:
     coral #F8595E (menos neon que o #FF5757 anterior)
     azul  #34478A (o mesmo do selo "FOUNDERS DA STRIVE")           */
  --strive-coral: 358 92% 66%;
  --strive-blue: 226 46% 37%;
  --gradient-strive: linear-gradient(135deg, hsl(var(--strive-blue)), hsl(var(--strive-coral)));

  /* Dock — vidro do painel Breeze/Plasma, com um véu do azul da marca */
  --dock-glass: rgba(255, 255, 255, .95);
  --dock-glass-hover: rgba(255, 255, 255, .985);
  --dock-hairline: transparent;
  --dock-item-hover: hsl(226 20% 40% / .07);
  --dock-item-outline: transparent;

  /* ícone "users" do lucide, usado como máscara no botão Comunidade */
  --icon-users: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>');

  /* glifo do Instagram, branco, para a moldura dos reels */
  --icon-instagram: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg>');

  /* ícones dos campos do login */
  --icon-user-line: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2399a1b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
  --icon-lock-line: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2399a1b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>');

  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Inter", "Poppins", ui-sans-serif, system-ui, sans-serif;

  /* Hairline mais fria e leve que o cinza padrão do Tailwind */
  --border: 220 16% 91%;
  /* Cantos levemente mais macios em todos os componentes */
  --radius: .625rem;
}

/* --------------------------------------------------------------------------
   1. Tipografia — Poppins nos títulos (marca), Inter no corpo/UI (legibilidade)
   -------------------------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body,
.font-poppins {
  font-family: var(--font-ui);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1, h2, h3, h4, h5, h6,
.font-poppins:is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
}

h1, h2 { letter-spacing: -.028em; text-wrap: balance; }
h3, h4 { letter-spacing: -.015em; text-wrap: balance; }
h1     { letter-spacing: -.035em; }
p      { text-wrap: pretty; }

/* Display H1: escala fluida entre os mesmos extremos já usados hoje
   (30px no mobile → 72px no desktop), sem os saltos entre breakpoints. */
h1.leading-tight {
  font-size: clamp(1.875rem, .6rem + 4.4vw, 4.5rem);
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   2. Links — o padrão global era font-weight 800 + sublinhado no hover,
   o que pesava a página e sublinhava até os botões.
   -------------------------------------------------------------------------- */
a { font-weight: 600; }
a:hover,
a:focus-visible { text-decoration: none; }

/* O bundle aplica a:hover{color:hsl(var(--nav-coral))} a TODO <a>. Num link de
   texto é o efeito desejado; num botão, pinta o texto da cor do próprio fundo —
   o Apply ficava coral sobre coral no hover. Botões preservam a sua cor. */
a[class*="bg-strive-coral"]:hover,
a[class*="bg-strive-coral"]:focus-visible,
button[class*="bg-strive-coral"]:hover,
button[class*="bg-strive-coral"]:focus-visible,
a[class*="text-white"]:hover,
a[class*="text-white"]:focus-visible,
a[class*="bg-primary"]:hover,
a[class*="bg-primary"]:focus-visible {
  color: #fff;
}

/* Sublinhado animado só onde faz sentido: links de texto do rodapé */
footer a:not([class*="bg-"]):not([class*="border"]):not([class*="rounded"]) {
  background-image: linear-gradient(hsl(var(--strive-coral)), hsl(var(--strive-coral)));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  padding-bottom: 2px;
  transition: background-size .38s var(--ease-glass), color .22s ease;
}
footer a:not([class*="bg-"]):not([class*="border"]):not([class*="rounded"]):hover {
  background-size: 100% 1.5px;
}

/* --------------------------------------------------------------------------
   3. Seleção e foco visível (acessibilidade)
   -------------------------------------------------------------------------- */
::selection {
  background: hsl(var(--strive-coral) / .22);
  color: #0d1117;
}

:focus-visible {
  outline: 2px solid hsl(var(--strive-coral) / .8);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   4. Sombras — de "caixa escura" para camadas suaves e difusas
   (redefine só o token do Tailwind, então os :hover continuam funcionando)
   -------------------------------------------------------------------------- */
.shadow-sm  { --tw-shadow: 0 1px 2px rgba(16, 22, 40, .05); }
.shadow-md  { --tw-shadow: 0 1px 2px rgba(16, 22, 40, .04), 0 4px 12px -4px rgba(16, 22, 40, .10); }
.shadow-lg  { --tw-shadow: 0 1px 2px rgba(16, 22, 40, .04), 0 8px 24px -8px rgba(16, 22, 40, .12); }
.shadow-xl  { --tw-shadow: 0 1px 2px rgba(16, 22, 40, .04), 0 16px 40px -14px rgba(16, 22, 40, .16); }
.shadow-2xl { box-shadow: 0 2px 4px rgba(16, 22, 40, .04), 0 26px 60px -22px rgba(16, 22, 40, .22); }

/* --------------------------------------------------------------------------
   5. Barra de rolagem discreta
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 22, 40, .2) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(16, 22, 40, .2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(16, 22, 40, .34);
  background-clip: content-box;
}

/* ==========================================================================
   6. O DOCK  —  painel no idioma do Breeze / KDE Plasma
   --------------------------------------------------------------------------
   Regras do painel do Plasma que estão sendo aplicadas aqui:
     · vidro fosco levemente frio, não branco puro
     · cantos de painel (~18px), não pílula
     · hairline escura por fora + realce claro de 1px por dentro
     · "task" com highlight retangular arredondado no hover
     · item ativo marcado por uma barra de acento embaixo
     · à direita, um agrupamento tipo system tray, separado por divisor
   Toda a paleta vem de --strive-coral / --strive-blue: sem terceira cor.
   ========================================================================== */

nav.fixed > div {
  background-color: var(--dock-glass);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-color: transparent;
  box-shadow:
    0 2px 6px hsl(226 30% 20% / .06),
    0 14px 34px -10px hsl(226 30% 20% / .16),
    0 34px 70px -28px hsl(226 30% 20% / .24);
  transition:
    background-color .5s var(--ease-glass),
    box-shadow .5s var(--ease-glass),
    transform .5s var(--ease-glass);
}

/* Cápsula, como no mockup */
nav.fixed > div.rounded-3xl { border-radius: 999px; }

nav.fixed:hover > div,
nav.fixed:focus-within > div {
  background-color: var(--dock-glass-hover);
  transform: translateY(-2px);
  box-shadow:
    0 2px 6px hsl(226 30% 20% / .06),
    0 20px 42px -12px hsl(226 30% 20% / .2),
    0 46px 90px -32px hsl(226 30% 20% / .28);
}

/* --- Itens de navegação = "tasks" do painel ------------------------------
   O padding é neutralizado por margem negativa igual, então a largura
   total do dock não muda em relação ao layout original.                   */
nav.fixed a:not([class*="bg-strive-coral"]):not([class*="border-community"]) {
  position: relative;
  padding: .45rem .5rem;
  margin: -.45rem -.5rem;
  border-radius: .5rem;
  font-weight: 600;
  color: hsl(226 24% 22%);
  transition:
    color .18s ease,
    background-color .25s var(--ease-glass),
    box-shadow .25s var(--ease-glass);
}

nav.fixed a:not([class*="bg-strive-coral"]):not([class*="border-community"]):hover {
  background-color: var(--dock-item-hover);
  box-shadow: inset 0 0 0 1px var(--dock-item-outline);
  color: hsl(358 76% 52%);
}

/* Página atual: só o acento coral e a barra indicadora embaixo, como o Plasma
   marca a janela ativa. O fundo rosa que havia aqui sujava o vidro. */
/* Os :not() repetidos não são decoração: sem eles a regra genérica dos itens
   acima ganha por especificidade e o item ativo sai cinza em vez de coral. */
nav.fixed a.text-strive-coral:not([class*="bg-strive-coral"]):not([class*="border-community"]) {
  color: hsl(358 76% 52%);
  background-color: transparent;
  font-weight: 700;
}

/* O ativo se comporta como qualquer outro item no hover: a única diferença
   em relação aos demais é a cor do texto e a barra embaixo. */
nav.fixed a.text-strive-coral:not([class*="bg-strive-coral"]):not([class*="border-community"]):hover {
  background-color: var(--dock-item-hover);
  color: hsl(358 76% 48%);
  box-shadow: inset 0 0 0 1px var(--dock-item-outline);
}

/* Sem barra indicadora: no mockup o ativo é só a cor coral do texto. */

/* --- Divisor do "system tray" ------------------------------------------- */
nav.fixed .w-px {
  background: linear-gradient(
    to bottom,
    transparent,
    hsl(226 46% 37% / .2) 22%,
    hsl(226 46% 37% / .2) 78%,
    transparent
  );
}

/* --- Seletor de idioma: controle segmentado embutido no painel ----------- */
nav.fixed .shadow-lg { --tw-shadow: 0 0 #0000; }

nav.fixed .rounded-lg.p-1 {
  background-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 22, 40, .07);
  border-radius: .625rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

nav.fixed .rounded-lg.p-1 button {
  border-radius: .4rem;
  color: hsl(226 14% 42%);
  transition: background-color .22s var(--ease-glass), color .18s ease;
}

nav.fixed .rounded-lg.p-1 button:not([class*="bg-primary"]):hover {
  background-color: rgba(16, 22, 40, .06);
  color: hsl(226 24% 24%);
}

/* No mockup o idioma ativo é o quase-preto original, não o azul da marca. */
nav.fixed .rounded-lg.p-1 button[class*="bg-primary"] {
  background-color: hsl(var(--primary));
  color: #fff;
  box-shadow: none;
}

/* --- Comunidade: o âmbar era a terceira cor solta do dock.
   Reescrito no coral da marca — o mesmo do Apply e da barra do item ativo.
   Escopo local: o resto do site (área de membros) segue âmbar. */
nav.fixed { --community: 358 92% 66%; }

nav.fixed a[class*="border-community"] {
  background-color: transparent;
  color: hsl(226 24% 18%);
  border-radius: 999px;
  border-color: hsl(var(--strive-coral) / .65);
  font-weight: 600;
  transition:
    background-color .25s var(--ease-glass),
    border-color .25s var(--ease-glass);
}

/* O mockup troca o cadeado por um ícone de pessoas. Como não há código-fonte
   do app, o SVG original é escondido e o novo entra como máscara no ::before,
   herdando a cor coral. */
nav.fixed a[class*="border-community"] > svg { display: none; }

nav.fixed a[class*="border-community"]::before {
  content: "";
  width: .875rem;
  height: .875rem;
  flex: none;
  background-color: hsl(var(--strive-coral));
  -webkit-mask: var(--icon-users) center / contain no-repeat;
  mask: var(--icon-users) center / contain no-repeat;
}

nav.fixed a[class*="border-community"]:hover {
  background-color: hsl(var(--strive-coral) / .07);
  border-color: hsl(var(--strive-coral) / .9);
}

/* --- Apply: cápsula coral chapada, com o peso mais leve do mockup -------- */
nav.fixed a[class*="bg-strive-coral"] {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .002em;
  background-image: none;
  background-color: hsl(var(--strive-coral));
  box-shadow: none;
}

nav.fixed a[class*="bg-strive-coral"]:hover {
  background-color: hsl(358 76% 61%);
  box-shadow: none;
}

/* Os três controles da direita têm alturas diferentes (40 / 34 / 36px) e topos
   desalinhados por 3px. A correção existe e está descrita no README, mas foi
   deixada de fora a pedido: nada aqui altera tamanho ou espaçamento. */

/* --- Botão do menu no mobile -------------------------------------------- */
nav.fixed button[aria-label] {
  border-radius: 999px;
  color: hsl(226 24% 22%);
  transition: background-color .22s var(--ease-glass), color .18s ease;
}
nav.fixed button[aria-label]:hover {
  background-color: var(--dock-item-hover);
  color: hsl(var(--strive-blue));
}

/* Segurança em telas estreitas: o dock nunca encosta nas bordas.
   Entre 768px e ~1024px o dock original transbordava da viewport
   (o "Apply" ficava cortado); aqui ele compacta e depois reduz de escala. */
nav.fixed {
  max-width: min(calc(100vw - 1.5rem), 100%);
}

@media (max-width: 1023px) {
  nav.fixed > div { padding-left: 1.15rem; padding-right: 1.15rem; }
  nav.fixed > div > div { gap: 1.125rem; }
}

@media (max-width: 900px) {
  /* usa as variáveis de transform do Tailwind para não quebrar o
     -translate-x-1/2 que centraliza o dock */
  nav.fixed { --tw-scale-x: .88; --tw-scale-y: .88; }
}

/* ==========================================================================
   7. CTAs coral — mesmo material em todo o site
   ========================================================================== */
a[class*="bg-strive-coral"],
button[class*="bg-strive-coral"] {
  background-image: linear-gradient(135deg, hsl(358 92% 71%), hsl(358 74% 59%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 6px 18px -7px hsl(358 74% 55% / .65);
  transition:
    transform .3s var(--ease-glass),
    box-shadow .3s var(--ease-glass);
}

a[class*="bg-strive-coral"]:hover,
button[class*="bg-strive-coral"]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 12px 28px -8px hsl(358 74% 52% / .78);
}

/* ==========================================================================
   8. RODAPÉ  —  ajustado ao mockup
   ========================================================================== */

/* Fundo puxado do cinza neutro para o azul da marca, no CTA e no rodapé */
section[class*="bg-gray-900"],
footer[class*="bg-gray-900"] { background-color: hsl(226 32% 11%); }

/* Título do CTA em negrito, como no mockup */
section[class*="bg-gray-900"] h2 { font-weight: 700; }

/* CTA final: o botão era branco com texto preto; no mockup é coral */
section[class*="bg-gray-900"] a[class*="bg-white"][class*="text-black"] {
  background-color: hsl(var(--strive-coral));
  color: #fff;
  border-radius: .75rem;
  box-shadow: 0 8px 24px -12px hsl(358 74% 45% / .5);
  transition: background-color .25s var(--ease-glass), box-shadow .25s var(--ease-glass);
}

section[class*="bg-gray-900"] a[class*="bg-white"][class*="text-black"]:hover {
  background-color: hsl(358 76% 61%);
  color: #fff;
  box-shadow: 0 12px 30px -12px hsl(358 74% 45% / .6);
}

/* Títulos das colunas com o traço coral do mockup */
footer h3 {
  position: relative;
  padding-bottom: .65rem;
}

footer h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  border-radius: 999px;
  background-color: hsl(var(--strive-coral));
}

/* Redes sociais viram chips, em vez de ícones soltos */
footer a[aria-label="Instagram"],
footer a[aria-label="LinkedIn"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.625rem;
  height: 2.625rem;
  padding: 0;
  border-radius: .7rem;
  color: rgba(255, 255, 255, .72);
  background-color: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  transition:
    background-color .25s var(--ease-glass),
    color .2s ease,
    transform .25s var(--ease-glass);
}

footer a[aria-label="Instagram"] svg,
footer a[aria-label="LinkedIn"] svg { width: 1.15rem; height: 1.15rem; }

footer a[aria-label="Instagram"]:hover,
footer a[aria-label="LinkedIn"]:hover {
  background-color: rgba(255, 255, 255, .13);
  color: #fff;
  transform: translateY(-1px);
}

/* O e-mail está escrito com C maiúsculo no conteúdo; o mockup mostra tudo
   minúsculo. Só a exibição muda — o mailto continua o mesmo. */
footer a[href^="mailto:"] { text-transform: lowercase; }

/* "Contact Us" do rodapé: era um botão branco sólido, que competia com o CTA
   coral logo acima. Vira contorno, como no mockup. */
footer a[href="/apply"] {
  background-color: transparent;
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
  border-radius: .55rem;
  transition:
    background-color .25s var(--ease-glass),
    border-color .25s var(--ease-glass);
}

footer a[href="/apply"]:hover {
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}

/* Separador entre Privacy Policy e Terms of Use */
footer a[href="/privacy"] + a[href="/terms"]::before {
  content: "";
  position: absolute;
  left: -.6rem;
  top: 50%;
  width: 1px;
  height: .8rem;
  background-color: rgba(255, 255, 255, .18);
  transform: translateY(-50%);
}

footer a[href="/terms"] { position: relative; }

/* Toggle de idioma do rodapé, alinhado ao do menu */
footer .rounded-lg.p-1 {
  background-color: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  --tw-shadow: 0 0 #0000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

footer .rounded-lg.p-1 button:not([class*="bg-primary"]) { color: rgba(255, 255, 255, .7); }

footer .rounded-lg.p-1 button[class*="bg-primary"] {
  background-color: #fff;
  color: hsl(226 32% 11%);
}

/* Um pouco mais de ar, que é o que separa o mockup do rodapé atual */
footer > div { padding-top: 3.5rem; padding-bottom: 2.5rem; }
footer ul.space-y-2 > li + li { margin-top: .6rem; }

/* ==========================================================================
   9. WIDGETS DO INSTAGRAM
   --------------------------------------------------------------------------
   São iframes cross-origin para instagram.com/reel/.../embed/, então o cromo
   ("View profile", "View more on Instagram", "Add a comment...") é renderizado
   dentro do iframe e não pode ser estilizado de fora. O que dá para fazer é
   recortar: a célula do grid vira a moldura e o iframe é posicionado por baixo.

   Geometria medida pixel a pixel (varredura dos 4 embeds, todos idênticos):
   dentro do iframe de 326x613, o vídeo ocupa exatamente x=48, y=55, 230x407.
   Usamos 1px de folga para dentro (x=49, y=56, 228x405) para que o
   arredondamento sub-pixel da escala não deixe reaparecer uma linha preta.
   ========================================================================== */

/* A escala vem de variáveis por breakpoint, e não de calc(100cqw / 232px):
   o Firefox não implementa divisão de comprimento por comprimento em calc(),
   descartava a declaração inteira de transform e o recorte quebrava lá.
   As larguras abaixo são as das colunas do grid, medidas no navegador. */
div:has(> iframe.instagram-media) {
  --ig-w: 280px;
  --ig-s: 1.22807;   /* 280 / 228 */
  position: relative;
  width: var(--ig-w);
  max-width: 100%;
  aspect-ratio: 228 / 405;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1.25rem;
  background-color: #000;
  box-shadow:
    0 1px 2px rgba(16, 22, 40, .06),
    0 12px 30px -12px rgba(16, 22, 40, .28);
  transition:
    transform .35s var(--ease-glass),
    box-shadow .35s var(--ease-glass);
}

div:has(> iframe.instagram-media):hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(16, 22, 40, .06),
    0 20px 44px -14px rgba(16, 22, 40, .38);
}

/* O embed traz largura, bordas e margens em style inline, daí o !important. */
iframe.instagram-media {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 326px !important;
  min-width: 326px !important;
  max-width: none !important;
  height: 613px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* o embed vem com background:white inline, o que deixava um card branco
     enquanto o vídeo não carrega; transparente deixa aparecer o preto do card */
  background-color: transparent !important;
  transform-origin: 0 0 !important;
  transform: scale(var(--ig-s)) translate(-49px, -56px) !important;
}

/* 4 colunas estreitas */
@media (min-width: 1024px) {
  div:has(> iframe.instagram-media) { --ig-w: 216px; --ig-s: .94737; }
}

/* 4 colunas largas */
@media (min-width: 1280px) {
  div:has(> iframe.instagram-media) { --ig-w: 286px; --ig-s: 1.25439; }
}

/* --- Moldura no estilo Reels -------------------------------------------
   Os dois véus e os rótulos ficam em pseudo-elementos com pointer-events
   desligado, então o play do próprio embed continua funcionando por baixo. */
div:has(> iframe.instagram-media)::before,
div:has(> iframe.instagram-media)::after {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  color: #fff;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

div:has(> iframe.instagram-media)::before {
  content: "Reels";
  top: 0;
  height: 3.6rem;
  padding-top: .85rem;
  text-align: center;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, .42), transparent);
}

div:has(> iframe.instagram-media)::after {
  content: "@strive_startups";
  bottom: 0;
  height: 3.4rem;
  display: flex;
  align-items: flex-end;
  padding: 0 .9rem .85rem 2.35rem;
  background-image:
    var(--icon-instagram),
    linear-gradient(to top, rgba(0, 0, 0, .48), transparent);
  background-repeat: no-repeat, no-repeat;
  background-position: .9rem calc(100% - .78rem), 0 0;
  background-size: 1rem 1rem, 100% 100%;
}

/* ==========================================================================
   10. PÁGINA DE LOGIN  (/login)
   --------------------------------------------------------------------------
   O DOM é uma coluna centralizada: <a>STRIVE</a> + card. Aqui ela vira um
   split de duas colunas, com o painel de marca à esquerda montado em
   pseudo-elementos (foto, blobs e headline) e o card à direita.
   ========================================================================== */

.min-h-screen.subtle-bg:has(> a[href="/"] + div input[type="password"]) {
  --login-rodape-h: 3.65rem;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr minmax(340px, 460px) 1fr;
  /* logo · headline · tagline · folga vertical ampla · rodapé */
  grid-template-rows: auto auto auto minmax(clamp(20rem, 36vh, 28rem), 1fr) auto;
  align-content: stretch;
  justify-items: start;
  column-gap: clamp(1.5rem, 3vw, 4rem);
  row-gap: 1.1rem;
  padding-inline: clamp(1.5rem, 5vw, 5.5rem);
  padding-block: clamp(1.5rem, 4vh, 2.5rem) 0;
}

/* --- a arte da montanha, que já vem recortada e com o blob coral embutido,
   ancorada no canto esquerdo da tela e exatamente no topo do rodapé --- */
.min-h-screen.subtle-bg [data-strive-login="rodape"]::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.5rem, 5vw, 5.5rem));
  bottom: 100%;
  width: clamp(400px, 50vw, 800px);
  aspect-ratio: 1016 / 640;
  max-height: 44vh;
  transform: scale(1.2);
  transform-origin: left bottom;
  z-index: 0;
  pointer-events: none;
  background-image: url("/assets/mountain-login.webp");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
}

/* --- só o blob azul fica como gradiente; o coral vem na própria arte --- */
.min-h-screen.subtle-bg:has(> a[href="/"] + div input[type="password"]) {
  background-image:
    radial-gradient(circle 300px at calc(100% + 46px) -96px, hsl(var(--strive-blue)) 100%, transparent 100%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-attachment: scroll, scroll;
}

/* --- logo: o "S" coral da marca + o texto STRIVE em azul --- */
.min-h-screen.subtle-bg > a[href="/"]:has(+ div input[type="password"]) {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  padding-left: 3.6rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .3em;
  color: hsl(var(--strive-blue));
  background-image: url("/lovable-uploads/171bcc5d-7ccd-4ab4-8b66-40bffb29fb56.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 2.6rem 2.6rem;
}

.min-h-screen.subtle-bg > a[href="/"]:has(+ div input[type="password"]):hover {
  color: hsl(var(--strive-blue));
}

/* --- headline + tagline do painel esquerdo ---
   O degradê com corte seco no meio pinta a primeira linha em azul e a segunda
   em coral, já que uma única string de content() não aceita duas cores. */
.min-h-screen.subtle-bg:has(> a[href="/"] + div input[type="password"])::after {
  content: "You’ll\A never walk alone.";
  white-space: pre-line;
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.03em;
  background-image: linear-gradient(
    to bottom,
    hsl(226 40% 14%) 0 50%,
    hsl(var(--strive-coral)) 50% 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- tagline e rodapé, acrescentados pelo script do index.html --- */
.min-h-screen.subtle-bg [data-strive-login="tagline"] {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  max-width: 34ch;
  margin: .25rem 0 5rem;
  padding-left: 1.1rem;
  border-left: 3px solid hsl(var(--strive-coral));
  font-size: 1.02rem;
  line-height: 1.62;
  color: hsl(226 18% 32%);
}

.min-h-screen.subtle-bg [data-strive-login="rodape"] {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 5;
  margin-top: 3.5rem;
  padding-top: 2.2rem;
  padding-bottom: 2rem;
  border-top: 1px solid rgba(16, 22, 40, .12);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
}

.strive-login-footer .strive-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .strive-login-footer .strive-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Coluna Brand */
.strive-footer-brand .strive-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: hsl(var(--strive-blue));
  text-decoration: none;
  margin-bottom: .8rem;
}

.strive-footer-brand .strive-logo-icon {
  width: 1.6rem;
  height: 1.6rem;
  background-image: url("/lovable-uploads/171bcc5d-7ccd-4ab4-8b66-40bffb29fb56.png");
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.strive-footer-brand .strive-footer-tagline {
  font-size: .92rem;
  line-height: 1.55;
  color: hsl(226 18% 34%);
  max-width: 38ch;
  margin-bottom: 1.2rem;
}

.strive-footer-legal p {
  font-size: .82rem;
  line-height: 1.45;
  color: hsl(226 12% 52%);
  margin: 0;
}

/* Colunas Links & Contato */
.strive-footer-col h3 {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: hsl(226 40% 16%);
  margin-bottom: 1.2rem;
  padding-bottom: .5rem;
}

.strive-footer-col h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.75rem;
  height: 2px;
  border-radius: 999px;
  background-color: hsl(var(--strive-coral));
}

.strive-footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.strive-footer-links a {
  font-size: .9rem;
  color: hsl(226 18% 36%);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}

.strive-footer-links a:hover,
.strive-footer-links a.active {
  color: hsl(var(--strive-coral));
}

/* Contato */
.strive-footer-contact {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.strive-footer-email {
  font-size: .9rem;
  color: hsl(226 18% 36%);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}

.strive-footer-email:hover {
  color: hsl(var(--strive-coral));
}

.strive-footer-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1.2rem;
  width: fit-content;
  border: 1px solid rgba(16, 22, 40, .24);
  border-radius: .6rem;
  font-size: .85rem;
  font-weight: 600;
  color: hsl(226 40% 20%);
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.strive-footer-contact-btn:hover {
  background-color: hsl(var(--strive-coral));
  border-color: hsl(var(--strive-coral));
  color: #fff;
}

/* Bottom Bar */
.strive-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(16, 22, 40, .08);
}

@media (max-width: 900px) {
  .strive-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

.strive-footer-social {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.strive-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: .6rem;
  color: hsl(226 24% 28%);
  background-color: rgba(16, 22, 40, .05);
  box-shadow: inset 0 0 0 1px rgba(16, 22, 40, .08);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.strive-footer-social a svg {
  width: 1.1rem;
  height: 1.1rem;
}

.strive-footer-social a:hover {
  background-color: hsl(var(--strive-coral));
  color: #fff;
  transform: translateY(-2px);
}

/* --- dock de navegação flutuante no rodapé (animado igual ao componente original) --- */
[data-strive-login="nav"] {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: auto;
  text-decoration: none;
}

[data-strive-login="nav"] .strive-dock-inner {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 9999px;
  padding: 0.75rem 1rem;
}

[data-strive-login="nav"] .strive-dock-collapsed {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

[data-strive-login="nav"] .strive-dock-expanded {
  display: none;
  align-items: center;
  gap: 1.5rem;
}

/* Transição idêntica ao React original no hover */
[data-strive-login="nav"]:hover .strive-dock-inner {
  border-radius: 1.5rem; /* rounded-3xl */
  padding: 1rem 1.5rem; /* px-6 py-4 */
}

[data-strive-login="nav"]:hover .strive-dock-collapsed {
  display: none !important;
}

[data-strive-login="nav"]:hover .strive-dock-expanded {
  display: flex !important;
}

/* Ícones do pill: chevron no desktop, hambúrguer/X no mobile */
[data-strive-login="nav"] .strive-icon-menu,
[data-strive-login="nav"] .strive-icon-close {
  display: none;
}

@media (max-width: 767px) {
  [data-strive-login="nav"] .strive-icon-desktop {
    display: none;
  }
  [data-strive-login="nav"] .strive-icon-menu {
    display: inline-flex;
  }
  [data-strive-login="nav"].is-open .strive-icon-menu {
    display: none;
  }
  [data-strive-login="nav"].is-open .strive-icon-close {
    display: inline-flex;
  }

  /* Sem hover em touch: o dock fica sempre colapsado e a expansão
     horizontal (feita para desktop) nunca deve aparecer no mobile. */
  [data-strive-login="nav"]:hover .strive-dock-inner {
    border-radius: 9999px;
    padding: 0.75rem 1rem;
  }
  [data-strive-login="nav"]:hover .strive-dock-collapsed {
    display: flex !important;
  }
  [data-strive-login="nav"]:hover .strive-dock-expanded {
    display: none !important;
  }
}

/* Cartão de menu mobile (equivalente ao menu hambúrguer das outras páginas) */
[data-strive-login="mobile-menu"] {
  display: none;
}
[data-strive-login="mobile-menu"].is-open {
  display: block;
}

[data-strive-login="mobile-backdrop"] {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}

[data-strive-login="mobile-panel"] {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100vw - 2rem);
  max-width: 24rem;
}

.strive-mp-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 1.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  padding: 1.5rem;
}

.strive-mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.strive-mp-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #000;
}

.strive-mp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #000;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.strive-mp-close:hover {
  color: hsl(var(--strive-coral));
}

.strive-mp-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.strive-mp-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.strive-mp-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.strive-mp-dot--active {
  background: hsl(var(--community, 217 91% 60%));
}

.strive-mp-link {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.strive-mp-link:hover {
  color: hsl(var(--strive-coral));
}
.strive-mp-link--community:hover {
  color: hsl(var(--community, 217 91% 60%));
}

.strive-mp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.strive-mp-apply {
  background: hsl(var(--strive-coral));
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 900;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.strive-mp-apply:hover {
  opacity: 0.9;
}

@media (min-width: 768px) {
  [data-strive-login="mobile-menu"] {
    display: none !important;
  }
}


/* Direitos e links de termos */
.strive-footer-rights {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  font-size: .84rem;
  color: hsl(226 12% 48%);
}

.strive-footer-rights a {
  color: hsl(226 18% 34%);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}

.strive-footer-rights a:hover {
  color: hsl(var(--strive-coral));
}

.strive-lang-toggle {
  display: inline-flex;
  padding: 2px;
  background-color: rgba(16, 22, 40, .06);
  border-radius: .5rem;
  gap: 2px;
}

.strive-lang-toggle button {
  padding: .2rem .5rem;
  font-size: .75rem;
  font-weight: 700;
  border: none;
  border-radius: .35rem;
  background: transparent;
  color: hsl(226 18% 44%);
  cursor: pointer;
  transition: all .2s ease;
}

.strive-lang-toggle button.active {
  background-color: #fff;
  color: hsl(226 40% 16%);
  box-shadow: 0 1px 3px rgba(16, 22, 40, .1);
}

/* --- o card --- */
.min-h-screen.subtle-bg > a[href="/"] + div {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2 / 5;
  align-self: center;
  width: 100%;
  max-width: none;
  background-color: #fff;
  border-color: transparent;
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  box-shadow:
    0 2px 6px rgba(16, 22, 40, .04),
    0 34px 80px -34px rgba(16, 22, 40, .3);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* o âmbar da área de membros vira o coral da marca, só aqui */
.min-h-screen.subtle-bg > a[href="/"] + div .text-community { color: hsl(var(--strive-coral)); }

.min-h-screen.subtle-bg > a[href="/"] + div h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: -.03em;
  margin-bottom: .5rem;
}

.min-h-screen.subtle-bg > a[href="/"] + div > p {
  font-size: .95rem;
  line-height: 1.55;
  margin-bottom: 1.75rem;
}

/* --- campos com ícone --- */
.min-h-screen.subtle-bg > a[href="/"] + div label {
  font-size: .8rem;
  margin-bottom: .4rem;
}

.min-h-screen.subtle-bg > a[href="/"] + div input {
  height: 3.1rem;
  border-radius: .8rem;
  border-color: rgba(16, 22, 40, .12);
  padding-left: 2.9rem;
  font-size: .95rem;
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 1.05rem 1.05rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.min-h-screen.subtle-bg > a[href="/"] + div input[type="email"] { background-image: var(--icon-user-line); }
.min-h-screen.subtle-bg > a[href="/"] + div input[type="password"] { background-image: var(--icon-lock-line); }

.min-h-screen.subtle-bg > a[href="/"] + div input:focus {
  outline: none;
  border-color: hsl(var(--strive-coral) / .6);
  box-shadow: 0 0 0 3px hsl(var(--strive-coral) / .14);
  --tw-ring-color: transparent;
}

/* --- botão --- */
.min-h-screen.subtle-bg > a[href="/"] + div button[type="submit"] {
  height: 3.1rem;
  margin-top: .35rem;
  font-size: .95rem;
  font-weight: 700;
}

/* --- rodapé do card: "Esqueci minha senha" / ou / "Primeiro acesso?" ---
   O "ou" entra como ::after e é reordenado para o meio via flex order. */
.min-h-screen.subtle-bg > a[href="/"] + div > div:last-child {
  gap: 0;
  margin-top: 1.5rem;
  font-size: .85rem;
}

.min-h-screen.subtle-bg > a[href="/"] + div > div:last-child > button:first-child { order: 1; padding-block: .3rem; }
.min-h-screen.subtle-bg > a[href="/"] + div > div:last-child > button:last-of-type { order: 3; padding-block: .3rem; }

.min-h-screen.subtle-bg > a[href="/"] + div > div:last-child::after {
  content: "ou";
  order: 2;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 1.1rem 0 .9rem;
  font-size: .8rem;
  color: rgba(16, 22, 40, .42);
}

.min-h-screen.subtle-bg > a[href="/"] + div > div:last-child::after {
  background-image: linear-gradient(rgba(16, 22, 40, .12), rgba(16, 22, 40, .12));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 1px;
}

/* --- empilha em telas estreitas --- */
@media (max-width: 1080px) {
  .min-h-screen.subtle-bg:has(> a[href="/"] + div input[type="password"]) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    row-gap: 1.25rem;
  }
  .min-h-screen.subtle-bg > a[href="/"] + div { grid-column: 1; grid-row: 4; max-width: 460px; margin-inline: auto; align-self: start; }
  .min-h-screen.subtle-bg [data-strive-login="tagline"] { grid-row: 3; font-size: .95rem; max-width: none; }
  .min-h-screen.subtle-bg [data-strive-login="rodape"] { grid-row: 5; margin-top: 3rem; }
  .min-h-screen.subtle-bg:has(> a[href="/"] + div input[type="password"])::after { font-size: clamp(1.9rem, 8vw, 2.6rem); max-width: none; }
  .min-h-screen.subtle-bg:has(> a[href="/"] + div input[type="password"]) {
    background-image:
      radial-gradient(circle 168px at calc(100% + 30px) -70px, hsl(var(--strive-blue)) 100%, transparent 100%),
      linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
  }
  /* empilhado, a arte passa a ser um elemento visual centralizado acima do rodapé */
  .min-h-screen.subtle-bg [data-strive-login="rodape"]::before {
    width: min(120%, 720px);
    max-height: 35vh;
    left: 50%;
    transform: translateX(-50%);
    background-position: center bottom;
    opacity: .55;
  }
}

/* --- só no mobile: a row4 do grid (folga pensada pro desktop, com a arte da
   montanha) infla o espaço entre a tagline e o bloco de login quando empilhado
   em telas estreitas; encolhe as duas coisas que causam esse vão --- */
@media (max-width: 767px) {
  .min-h-screen.subtle-bg:has(> a[href="/"] + div input[type="password"]) {
    grid-template-rows: auto auto auto auto auto;
  }
  .min-h-screen.subtle-bg [data-strive-login="tagline"] {
    margin-bottom: 1.5rem;
  }
}

/* --- ajusta para 2 colunas em monitores intermediários / notebooks (1081px a 1400px)
   para o bloco de login acomodar ao lado do texto sem espremer a coluna esquerda --- */
@media (min-width: 1081px) and (max-width: 1400px) {
  .min-h-screen.subtle-bg:has(> a[href="/"] + div input[type="password"]) {
    grid-template-columns: 1fr minmax(340px, 460px);
  }
}

/* ==========================================================================
   11. Acessibilidade — respeita quem pediu menos movimento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  nav.fixed:hover > div,
  nav.fixed:focus-within > div { transform: none; }
}

/* ==========================================================================
   12. Refinamento 100% Inline e Nativo dos Formulários Notion em /apply
   ========================================================================== */
.min-h-screen:has(iframe[src*="notion"]) {
  padding-bottom: 6rem;
}

div:has(> iframe[src*="notion"]) {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background-color: transparent !important;
  overflow: hidden !important; /* recorta qualquer borda/trilho vertical interno */
  max-width: 900px !important;
  margin-inline: auto !important;
}

iframe[src*="notion"] {
  width: 100% !important;
  height: 3200px !important;
  min-height: 2400px !important;
  border: 0 !important;
  outline: none !important;
  display: block !important;
  background: transparent !important;
  overflow: hidden !important;
  scrollbar-width: none !important; /* Remove barra interna no Firefox */
  -ms-overflow-style: none !important;
}

iframe[src*="notion"]::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}