/* Cordel D' Prata · v2 — Cordel Signature
   ─────────────────────────────────────────────────────────────────────
   A linha premium da casa tem de se ver logo: noite, ouro e espaço.
   O papel fica para o resto do site; aqui o fundo é escuro para o
   monograma dourado poder brilhar, e o movimento é lento — luxo não
   tem pressa. Tudo o que mexe pára com «reduzir movimento».          */

  :root{
    --sg-noite:#0C0B0A;
    --sg-noite-2:#15120F;
    --sg-noite-3:#1D1915;
    --sg-ouro:#C89A4D;
    --sg-ouro-claro:#F6E4A8;
    --sg-marfim:#EFEAE0;
    --sg-suave:#9A9186;
    --sg-linha:rgba(246,228,168,.16);
  }

  [hidden]{display:none !important}

  body{background:var(--sg-noite);color:var(--sg-marfim)}
  .sg-hero,.sg-linha,.sg-convite,.sg-titulos,.sg-fecho{background:var(--sg-noite);color:var(--sg-marfim)}

  .sg-eyebrow{
    display:inline-block;font-family:var(--font-nav);font-size:.66rem;font-weight:600;
    letter-spacing:.26em;text-transform:uppercase;color:var(--sg-ouro);
  }
  .sg-link{
    display:inline-flex;align-items:center;gap:.5em;
    font-family:var(--font-nav);font-size:.84rem;font-weight:600;color:var(--sg-marfim);
    border-bottom:1px solid var(--sg-linha);padding-bottom:3px;
    transition:border-color .3s ease,color .3s ease;
  }
  .sg-link:hover{color:var(--sg-ouro-claro);border-bottom-color:var(--sg-ouro)}
  .sg-link span{transition:transform .4s var(--ease)}
  .sg-link:hover span{transform:translateX(5px)}

  .sg-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:1.05em 2.4em;border:1px solid var(--sg-ouro);border-radius:0;
    background:transparent;color:var(--sg-ouro-claro);
    font-family:var(--font-nav);font-size:.74rem;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;position:relative;overflow:hidden;
    transition:color .35s ease,border-color .35s ease;
  }
  /* o ouro entra por trás das letras, da esquerda para a direita */
  .sg-btn::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(100deg,var(--sg-ouro),var(--sg-ouro-claro));
    transform:translateX(-101%);transition:transform .55s var(--ease);
  }
  .sg-btn:hover{color:var(--sg-noite);border-color:var(--sg-ouro-claro)}
  .sg-btn:hover::before{transform:none}
  .sg-btn--fino{border-color:var(--sg-linha);color:var(--sg-marfim)}
  .sg-btn--fino:hover{color:var(--sg-noite)}

  /* ── abertura: um palco ────────────────────────────────────────── */
  .sg-hero{
    position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;
    padding-block:calc(var(--header-h,130px) + clamp(30px,5vw,70px)) clamp(50px,7vw,100px);
  }
  /* uma luz dourada que respira por trás de tudo */
  .sg-brilho{
    position:absolute;z-index:0;left:50%;top:44%;width:min(120vw,1100px);aspect-ratio:1;
    transform:translate(-50%,-50%);pointer-events:none;
    background:radial-gradient(circle,rgba(200,154,77,.22),rgba(200,154,77,.07) 42%,transparent 68%);
    animation:sgRespira 16s ease-in-out infinite;
  }
  @keyframes sgRespira{
    0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.9}
    50%{transform:translate(-50%,-52%) scale(1.09);opacity:1}
  }
  .sg-grao{
    position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }
  .sg-hero-inner{
    position:relative;z-index:2;
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(30px,5vw,80px);align-items:center;
  }
  .sg-marca{
    margin:18px 0 0;font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.03em;
    color:var(--sg-marfim);
  }
  .sg-marca em{
    /* o recorte do ouro corta o que passa da caixa: a cauda do «g» pedia ar */
    display:block;font-style:italic;line-height:1.14;padding-bottom:.08em;
    background:linear-gradient(100deg,var(--sg-ouro) 12%,var(--sg-ouro-claro) 38%,var(--sg-ouro) 62%,#fff7d8 86%);
    background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:sgOuroTexto 12s ease-in-out infinite;
  }
  @keyframes sgOuroTexto{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
  .sg-mote{
    margin:26px 0 0;font-family:var(--font-display);font-style:italic;
    font-size:clamp(1.1rem,1.8vw,1.45rem);color:var(--sg-ouro-claro);
  }
  .sg-lead{margin-top:18px;max-width:52ch;color:var(--sg-suave);font-size:1.02rem;line-height:1.7}
  .sg-hero-acoes{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);flex-wrap:wrap;margin-top:clamp(28px,3.4vw,44px)}

  /* o monograma, em grande, com a sua própria luz */
  .sg-hero-marca{display:flex;justify-content:center;align-items:center}
  .sg-logo{
    width:auto;height:min(58vh,440px);
    filter:drop-shadow(0 0 40px rgba(200,154,77,.35)) drop-shadow(0 18px 40px rgba(0,0,0,.6));
    animation:sgFlutua 9s ease-in-out infinite;
  }
  @keyframes sgFlutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

  /* ── secções ───────────────────────────────────────────────────── */
  .sg-linha,.sg-convite,.sg-titulos{padding-block:clamp(60px,8vw,120px);border-top:1px solid var(--sg-linha)}
  .sg-head{max-width:60ch}
  .sg-head h2{
    margin:16px 0 0;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.025em;
    color:var(--sg-marfim);text-wrap:balance;
  }
  .sg-head p{margin-top:16px;color:var(--sg-suave);max-width:56ch}

  .sg-pilares{
    list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px);
  }
  .sg-pilar{
    display:grid;gap:14px;padding-top:24px;border-top:1px solid var(--sg-linha);
    transition:border-color .4s ease;
  }
  .sg-pilar:hover{border-top-color:var(--sg-ouro)}
  .sg-num{
    font-family:var(--font-display);font-size:1.6rem;line-height:1;
    color:transparent;-webkit-text-stroke:1px var(--sg-ouro);
  }
  .sg-pilar h3{margin:0;font-size:1.16rem;letter-spacing:-.01em;color:var(--sg-marfim)}
  .sg-pilar p{margin:0;color:var(--sg-suave);font-size:.94rem;line-height:1.65}

  /* ── o convite ─────────────────────────────────────────────────── */
  .sg-convite-grid{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(30px,4.6vw,70px);align-items:start;
  }
  .sg-convite h2{
    margin:16px 0 0;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;letter-spacing:-.025em;
  }
  .sg-convite p{margin-top:18px;color:var(--sg-suave);max-width:52ch;line-height:1.7}
  .sg-nota{
    margin-top:22px;padding-left:18px;border-left:1px solid var(--sg-ouro);
    font-family:var(--font-display);font-style:italic;color:var(--sg-ouro-claro) !important;
  }
  .sg-caminhos{display:grid;gap:clamp(18px,2.2vw,28px)}
  .sg-caminho{
    padding:clamp(22px,2.6vw,32px);background:var(--sg-noite-2);
    border:1px solid var(--sg-linha);transition:border-color .4s ease,transform .5s var(--ease);
  }
  .sg-caminho:hover{border-color:var(--sg-ouro);transform:translateY(-3px)}
  .sg-caminho h3{margin:0 0 10px;font-size:1.2rem;color:var(--sg-marfim)}
  .sg-caminho p{margin:0 0 18px}

  /* ── os primeiros nomes ────────────────────────────────────────── */
  /* uma linha por nome, a toda a largura: o retrato à esquerda, a história
     ao meio e a capa, quando a há, pousada à direita */
  .sg-nomes{
    display:grid;grid-template-columns:1fr;
    gap:clamp(18px,2.2vw,28px);margin-top:clamp(34px,4vw,54px);counter-reset:sgnome;
  }
  /* .sg-nome vem definido mais abaixo com padding; aqui a classe dupla ganha */
  .sg-nome.sg-nome--foto{
    display:grid;grid-template-columns:clamp(200px,24vw,280px) minmax(0,1fr);
    gap:0;padding:0;align-items:center;
  }
  .sg-nome--foto.sg-nome--capa{grid-template-columns:clamp(200px,24vw,280px) minmax(0,1fr) auto}
  .sg-nome--foto .sg-nome-texto{padding:clamp(24px,2.8vw,36px) clamp(24px,3vw,44px)}
  /* o retrato enche a altura da linha; a fotografia tem 900 px de largura,
     por isso não chega a borratar nesta medida */
  .sg-retrato{
    position:relative;margin:0;overflow:hidden;background:var(--sg-noite-3);
    align-self:stretch;min-height:280px;
  }
  .sg-retrato img{
    display:block;width:100%;height:100%;object-fit:cover;
    filter:grayscale(.15) contrast(1.04);
    transition:transform 1.1s var(--ease),filter .6s ease;
  }
  /* um véu de noite em cima, para o dourado da página não brigar com a foto */
  .sg-retrato::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(200deg,rgba(12,11,10,0) 45%,rgba(12,11,10,.55));
    mix-blend-mode:multiply;
  }
  .sg-nome--foto:hover .sg-retrato img{transform:scale(1.04);filter:none}

  .sg-nome{
    position:relative;padding:clamp(26px,3vw,38px);
    background:linear-gradient(160deg,var(--sg-noite-2),var(--sg-noite));
    border:1px solid var(--sg-linha);overflow:hidden;
    transition:border-color .45s ease,transform .6s var(--ease);
  }
  /* o número da ordem, em ouro esbatido, como numa colecção numerada */
  .sg-nome::before{
    counter-increment:sgnome;content:"0" counter(sgnome);
    position:absolute;right:18px;top:10px;z-index:2;
    font-family:var(--font-display);font-size:clamp(3rem,5vw,4.6rem);line-height:1;
    color:transparent;-webkit-text-stroke:1px rgba(200,154,77,.3);
    transition:-webkit-text-stroke-color .45s ease;
  }
  /* com retrato, o número fica no canto da fotografia, fora do caminho da capa */
  .sg-nome--foto::before{left:14px;right:auto;top:4px;-webkit-text-stroke-color:rgba(246,228,168,.55);text-shadow:0 2px 12px rgba(0,0,0,.6)}
  .sg-nome:hover{border-color:var(--sg-ouro);transform:translateY(-4px)}
  .sg-nome:hover::before{-webkit-text-stroke-color:rgba(246,228,168,.6)}
  .sg-nome h3{
    position:relative;margin:12px 0 0;font-size:clamp(1.4rem,2.2vw,1.9rem);
    line-height:1.12;letter-spacing:-.025em;color:var(--sg-marfim);
  }
  .sg-obra{
    position:relative;margin:20px 0 12px;font-family:var(--font-display);font-style:italic;
    font-size:1.12rem;color:var(--sg-ouro-claro);
  }
  .sg-obra small{
    display:block;margin-bottom:6px;font-family:var(--font-nav);font-style:normal;
    font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sg-ouro);
  }
  .sg-nome p{position:relative;color:var(--sg-suave);font-size:.93rem;line-height:1.65;max-width:64ch}
  /* a capa entra como um objecto pousado, não como uma ilustração */
  .sg-capa{
    margin:0 clamp(24px,3vw,44px) 0 0;width:clamp(110px,11vw,150px);align-self:center;
    transform:rotate(-2deg);transform-origin:left bottom;
    transition:transform .6s var(--ease);
  }
  .sg-capa img{
    display:block;width:100%;height:auto;border-radius:2px;
    box-shadow:0 18px 30px -16px rgba(0,0,0,.8),0 0 0 1px rgba(246,228,168,.18);
  }
  .sg-nome:hover .sg-capa{transform:rotate(0) translateY(-4px)}

  .sg-imprensa{
    margin-top:clamp(32px,3.6vw,50px);padding-top:20px;border-top:1px solid var(--sg-linha);
    font-size:.84rem;color:var(--sg-suave);
  }
  .sg-imprensa a{color:var(--sg-ouro-claro);border-bottom:1px solid var(--sg-linha)}
  .sg-vazio{padding:clamp(30px,4vw,50px) 0;color:var(--sg-suave)}
  .sg-vazio p{max-width:54ch;margin:0 0 16px}

  /* ── fecho ─────────────────────────────────────────────────────── */
  .sg-fecho{padding-block:clamp(60px,7vw,100px);border-top:1px solid var(--sg-linha);text-align:center}
  .sg-fecho-inner{display:grid;justify-items:center;gap:16px}
  .sg-fecho-marca{
    margin:0;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;
    color:var(--sg-marfim);
  }
  .sg-fecho-marca em{
    font-style:italic;
    background:linear-gradient(100deg,var(--sg-ouro),var(--sg-ouro-claro) 45%,var(--sg-ouro));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .sg-fecho p{color:var(--sg-suave);max-width:54ch}
  .sg-fecho a{color:var(--sg-marfim);border-bottom:1px solid var(--sg-linha)}
  .sg-fecho .sg-link{margin-top:10px}

  /* ── ecrãs pequenos ────────────────────────────────────────────── */
  @media (max-width:900px){
    .sg-hero{min-height:auto}
    .sg-hero-inner{grid-template-columns:1fr;gap:34px}
    .sg-hero-marca{order:-1;justify-content:flex-start}
    .sg-logo{height:min(34vh,230px);animation-duration:7s}
    .sg-convite-grid{grid-template-columns:1fr}
    /* os pilares e as duas caixas do convite deslizam na horizontal: o
       primeiro alinha pela margem do texto e o seguinte espreita */
    .sg-pilares,.sg-caminhos{
      display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
      scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 10px;gap:16px;
      -webkit-overflow-scrolling:touch;
    }
    .sg-pilares::-webkit-scrollbar,.sg-caminhos::-webkit-scrollbar{display:none}
    .sg-pilar{flex:0 0 min(72%,280px);scroll-snap-align:start;align-content:start}
    .sg-caminho{flex:0 0 min(80%,340px);scroll-snap-align:start}
    /* fora do ecrã para o lado, o observador de entrada não apanha os
       cartões: aparecem logo */
    .sg-pilares .reveal{opacity:1;transform:none}
    .sg-nomes{grid-template-columns:1fr}
    /* a classe dupla de cima obriga a repeti-la aqui, senão o cartão sem capa ficava em duas colunas */
    .sg-nome.sg-nome--foto,.sg-nome.sg-nome--foto.sg-nome--capa{grid-template-columns:1fr}
    /* quadrado e ancorado em cima: os retratos são 3:4 com a cara no
       primeiro quinto — um recorte ao meio, em 16:10, cortava as caras */
    .sg-retrato{aspect-ratio:1/1;min-height:0}
    .sg-retrato img{object-position:50% 12%}
    .sg-capa{margin:0 0 26px clamp(24px,3vw,36px);align-self:start}
  }

  @media (prefers-reduced-motion:reduce){
    .sg-brilho,.sg-logo,.sg-marca em{animation:none}
    .sg-nome:hover,.sg-caminho:hover{transform:none}
    .sg-btn::before{transition:none}
  }