/* =========================================================================
   YNGRID SANTOS — sistema de design
   Toda a identidade visual está no bloco :root abaixo.
   Trocar as cores do site inteiro = trocar apenas essas variáveis.
   ========================================================================= */

:root{
  /* ---- paleta ---- */
  --ink:            #0B0A0D;   /* preto profundo — base */
  --ink-2:          #131015;   /* preto elevado */
  --paper:          #F8F5F2;   /* off-white */
  --nude:           #D8C2B8;
  --rose:           #D9A8B8;
  --rose-deep:      #B98298;
  --lilac:          #B9A8C9;
  --lilac-grey:     #8F8299;

  --ink-rgb:        11,10,13;
  --paper-rgb:      248,245,242;
  --nude-rgb:       216,194,184;
  --rose-rgb:       217,168,184;
  --rose-deep-rgb:  185,130,152;
  --lilac-rgb:      185,168,201;
  --lilac-grey-rgb: 143,130,153;

  /* ---- texto ---- */
  --t-strong:  rgba(var(--paper-rgb), .96);
  --t-body:    rgba(var(--paper-rgb), .60);
  --t-muted:   rgba(var(--paper-rgb), .40);
  --t-faint:   rgba(var(--paper-rgb), .22);

  /* ---- linhas e superfícies ---- */
  --hair:      rgba(var(--paper-rgb), .085);
  --hair-soft: rgba(var(--paper-rgb), .05);

  /* ---- tipografia ---- */
  --serif: "Playfair Display", "Didot", Georgia, "Times New Roman", serif;
  --script: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- métrica ---- */
  --shell: 520px;
  --gut: clamp(20px, 5.6vw, 30px);
  --r-card: 24px;
  --ease: cubic-bezier(.22,.7,.25,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
img{ display:block; max-width:100%; height:auto; }
a{ text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

body{
  background: var(--ink);
  color: var(--t-body);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- cenário: brilhos radiais + grain ---------- */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(48% 34% at 50% 4%,  rgba(var(--rose-deep-rgb), .17), transparent 70%),
    radial-gradient(38% 26% at 8% 34%,  rgba(var(--lilac-rgb), .10), transparent 72%),
    radial-gradient(42% 28% at 94% 62%, rgba(var(--rose-rgb), .09), transparent 72%),
    radial-gradient(52% 32% at 50% 104%,rgba(var(--lilac-grey-rgb), .12), transparent 74%);
  filter: blur(6px);
}
.bg::after{  /* grain muito discreto */
  content:""; position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* trilhos verticais e assinatura lateral — só no desktop */
.rails{ position:fixed; inset:0; z-index:1; pointer-events:none; display:none; }
.rails span{
  position:absolute; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--hair-soft) 18%,var(--hair-soft) 82%,transparent);
}
.rails i{
  position:absolute; top:50%; font-family:var(--sans); font-style:normal;
  font-size:10px; letter-spacing:.62em; text-transform:uppercase;
  color:rgba(var(--paper-rgb), .11); white-space:nowrap;
}
.rails i.l{ left:0; transform:translate(-50%,-50%) rotate(-90deg); }
.rails i.r{ right:0; transform:translate(50%,-50%) rotate(90deg); }
@media (min-width:1080px){ .rails{ display:block; } }

/* ---------- casca ---------- */
.shell{
  position:relative; z-index:2;
  width:100%; max-width:var(--shell); margin:0 auto;
  padding-inline: var(--gut);
}
.shell--flush{ padding-inline:0; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; z-index:2; }

/* A dissolução da foto para o fundo é feita por MÁSCARA, não por uma
   camada escura por cima. Assim não existe borda de caixa: o pixel
   simplesmente deixa de existir e vira o fundo da página.
   O texto fica FORA de .hero__media para não ser mascarado junto. */
.hero__media{
  position:relative;
  width:100%; max-width: var(--shell); margin-inline:auto;
  height: clamp(478px, 76svh, 720px);
  overflow:hidden;
  --dissolve: linear-gradient(180deg,
      #000 0%, #000 40%,
      rgba(0,0,0,.965) 52%,
      rgba(0,0,0,.885) 61%,
      rgba(0,0,0,.755) 69%,
      rgba(0,0,0,.585) 76%,
      rgba(0,0,0,.395) 83%,
      rgba(0,0,0,.215) 89.5%,
      rgba(0,0,0,.085) 95%,
      rgba(0,0,0,0)   100%);
  -webkit-mask-image: var(--dissolve);
          mask-image: var(--dissolve);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 10%;
  transform: scale(1.035);
  animation: heroIn 1.6s var(--ease) both;
}
@keyframes heroIn{ from{ opacity:0; transform:scale(1.09); } to{ opacity:1; transform:scale(1.035); } }

/* apenas um respiro escuro no topo e nas laterais */
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb),.5) 0%, rgba(var(--ink-rgb),0) 20%),
    linear-gradient(90deg,  rgba(var(--ink-rgb),.62), rgba(var(--ink-rgb),0) 22%, rgba(var(--ink-rgb),0) 78%, rgba(var(--ink-rgb),.62));
}

.hero__text{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:10px; z-index:3;
  width:100%; max-width: var(--shell);
  padding: 0 var(--gut) 10px;
  text-align:center;
}
.eyebrow{
  font-size:10px; font-weight:400; letter-spacing:.44em; text-transform:uppercase;
  color: rgba(var(--nude-rgb), .82); margin:0 0 14px; padding-left:.44em;
}
.hero__name{
  font-family:var(--serif); font-weight:500; font-style:normal;
  font-size: clamp(44px, 13.2vw, 68px);
  line-height:1.0; letter-spacing:-.005em; margin:0;
  color: var(--paper);
  /* drop-shadow em vez de text-shadow: o text-shadow atravessava o
     texto em gradiente (que é transparente) e criava fantasma */
  filter: drop-shadow(0 3px 26px rgba(var(--ink-rgb), .75));
}
.hero__name em{
  font-style:normal;
  background:linear-gradient(100deg, var(--rose) 0%, var(--rose-deep) 44%, var(--lilac) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__rule{
  width:56px; height:1px; margin:20px auto 16px;
  background:linear-gradient(90deg,transparent,rgba(var(--nude-rgb),.7),transparent);
}
.hero__meta{
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color: var(--t-muted); margin:0; padding-left:.28em;
}

/* =========================================================================
   BLOCO SOBRE
   ========================================================================= */
.about{ padding: 10px 0 6px; text-align:center; }
.about__mark{
  display:block; width:1px; height:26px; margin:0 auto 16px;
  background:linear-gradient(180deg, rgba(var(--rose-rgb),.55), transparent);
}
.about p{
  font-family:var(--script); font-style:italic;
  font-size: clamp(17px, 4.6vw, 20px); line-height:1.62;
  color: rgba(var(--paper-rgb), .74);
  margin:0 auto; max-width:34ch; letter-spacing:.004em;
}
.about__stats{
  display:flex; align-items:center; justify-content:center; gap:0;
  margin-top:26px;
}
.about__stats div{ flex:1; }
.about__stats b{
  display:block; font-family:var(--serif); font-weight:500; font-size:19px;
  color: rgba(var(--nude-rgb), .95); line-height:1.2;
}
.about__stats small{
  display:block; font-size:8.6px; letter-spacing:.26em; text-transform:uppercase;
  color: var(--t-faint); margin-top:6px; padding-left:.26em;
}
.about__stats i{ width:1px; height:26px; background:var(--hair); flex:0 0 1px; }

/* =========================================================================
   TÍTULO DE SEÇÃO
   ========================================================================= */
.sec-head{ display:flex; align-items:center; gap:14px; margin: 40px 0 18px; }
.sec-head span{
  font-size:9.5px; letter-spacing:.4em; text-transform:uppercase;
  color: rgba(var(--nude-rgb), .58); white-space:nowrap; padding-left:.4em;
}
.sec-head::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--hair),transparent); }

/* =========================================================================
   CARDS DE LINK
   ========================================================================= */
.links{ display:flex; flex-direction:column; gap:12px; }

.card{
  position:relative; display:block; overflow:hidden;
  border-radius: var(--r-card);
  border:1px solid var(--hair);
  background:
    linear-gradient(118deg,
      rgba(var(--nude-rgb), .115) 0%,
      rgba(var(--rose-rgb),  .075) 42%,
      rgba(var(--lilac-rgb), .055) 100%),
    rgba(var(--paper-rgb), .012);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(var(--paper-rgb),.055) inset, 0 14px 34px -22px rgba(0,0,0,.9);
  transition: transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
/* brilho superior sutil */
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 90% at 78% -30%, rgba(var(--rose-rgb), .16), transparent 62%);
  opacity:.75; transition:opacity .5s var(--ease);
}
.card__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 92px auto 1fr 56px;
  align-items:center; gap:0; min-height:112px;
}
.card--slim .card__in{ grid-template-columns: auto 1fr 56px; min-height:74px; }

/* foto recortada na lateral */
.card__ph{ position:relative; align-self:stretch; overflow:hidden; }
.card__ph img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 10%;
  transition: transform .7s var(--ease);
}
.card:hover .card__ph img,
.card:focus-visible .card__ph img{ transform:scale(1.06); }

/* ícone */
.card__ic{
  display:grid; place-items:center; width:38px; height:38px; margin-left:12px;
  border-radius:50%; border:1px solid rgba(var(--nude-rgb), .30);
  color: rgba(var(--nude-rgb), .92); flex:0 0 auto;
  background: rgba(var(--paper-rgb), .035);
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.card--slim .card__ic{ margin-left:14px; width:34px; height:34px; }
.card__ic svg{ width:17px; height:17px; }

.card__tx{ padding: 2px 10px 2px 14px; min-width:0; }
.card--slim .card__tx{ padding-left:12px; }
.card__tx h3{
  margin:0 0 4px; font-size:11.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; padding-left:.24em;
  color: rgba(var(--paper-rgb), .93);
}
.card--slim .card__tx h3{ font-size:10.5px; letter-spacing:.22em; margin-bottom:2px; }
.card__tx p{
  margin:0; font-size:12.5px; line-height:1.42; color: var(--t-muted);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.card--slim .card__tx p{ font-size:11.5px; -webkit-line-clamp:1; }

.card__go{
  display:grid; place-items:center; width:36px; height:36px; margin-right:20px;
  border-radius:50%; color: rgba(var(--rose-rgb), .95);
  background: linear-gradient(140deg, rgba(var(--rose-deep-rgb), .34), rgba(var(--lilac-rgb), .18));
  border:1px solid rgba(var(--rose-rgb), .24);
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.card__go svg{
  display:block; width:16px; height:16px;
  transition: transform .5s var(--ease);
}

/* hover / toque */
.card:hover, .card:focus-visible{
  transform: translateY(-3px);
  border-color: rgba(var(--rose-rgb), .26);
  box-shadow: 0 1px 0 rgba(var(--paper-rgb),.08) inset, 0 22px 44px -24px rgba(0,0,0,.95),
              0 0 44px -18px rgba(var(--rose-deep-rgb), .45);
}
.card:hover::before, .card:focus-visible::before{ opacity:1; }
.card:hover .card__go svg{ transform: translateX(3px); }
.card:hover .card__ic{ border-color: rgba(var(--nude-rgb), .5); background: rgba(var(--paper-rgb), .06); }
.card:active{ transform: translateY(-1px) scale(.995); }

/* card principal (CTA) */
.card--cta{
  border-color: rgba(var(--nude-rgb), .28);
  background:
    linear-gradient(118deg,
      rgba(var(--nude-rgb), .22) 0%,
      rgba(var(--rose-rgb),  .155) 45%,
      rgba(var(--lilac-rgb), .10) 100%),
    rgba(var(--paper-rgb), .02);
}
.card--cta .card__tx h3{ color: var(--paper); }
.card--cta .card__tx p{ color: rgba(var(--paper-rgb), .55); }

/* =========================================================================
   MOSAICO DE PORTFÓLIO (na home)
   ========================================================================= */
.mosaic{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start; }
.mosaic__col{ display:flex; flex-direction:column; gap:10px; }
.mosaic__col:nth-child(2){ margin-top:30px; }
.frame{
  position:relative; display:block; overflow:hidden;
  border-radius:16px; border:1px solid var(--hair-soft);
  background: var(--ink-2);
}
.frame img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease), filter .6s var(--ease); }
.frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 52%, rgba(var(--ink-rgb),.72));
  opacity:.85; transition:opacity .5s var(--ease);
}
.frame b{
  position:absolute; left:11px; right:11px; bottom:9px; z-index:2;
  font-size:8.6px; font-weight:400; letter-spacing:.24em; text-transform:uppercase;
  color: rgba(var(--paper-rgb), .70); padding-left:.24em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.frame:hover img{ transform:scale(1.055); }
.frame:hover::after{ opacity:.6; }

.more{
  display:flex; align-items:center; justify-content:center; gap:11px;
  margin:22px 0 0; padding:15px 0;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em;
  color: rgba(var(--nude-rgb), .82);
  transition:color .4s var(--ease), letter-spacing .4s var(--ease);
}
.more svg{ width:13px; height:13px; transition:transform .45s var(--ease); }
.more:hover{ color: var(--rose); }
.more:hover svg{ transform:translateX(4px); }

/* =========================================================================
   REDES + RODAPÉ
   ========================================================================= */
.social{ display:flex; justify-content:center; gap:13px; margin: 44px 0 0; }
.social a{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--hair); color: rgba(var(--nude-rgb), .78);
  background: rgba(var(--paper-rgb), .022);
  transition: transform .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.social a svg{ width:17px; height:17px; }
.social a:hover{
  transform: translateY(-3px);
  color: var(--rose); border-color: rgba(var(--rose-rgb), .38);
  background: rgba(var(--rose-deep-rgb), .10);
}

footer{ text-align:center; padding: 34px 0 40px; }
footer .sig{
  font-family:var(--script); font-style:italic; font-size:17px;
  color: rgba(var(--nude-rgb), .72); margin:0 0 18px;
}
footer .dot{
  width:3px; height:3px; border-radius:50%; margin:0 auto 16px;
  background: rgba(var(--rose-rgb), .5);
}
footer small{
  display:block; font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color: var(--t-faint); padding-left:.26em;
}

/* =========================================================================
   ANIMAÇÃO DE ENTRADA / REVELAÇÃO
   ========================================================================= */
.rise{ opacity:0; transform: translateY(26px) scale(.99); }
.rise.in{
  opacity:1; transform:none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
.fade-up{ opacity:0; transform: translateY(18px); animation: fadeUp .95s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .rise{ opacity:1; transform:none; }
  .fade-up{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================================
   AJUSTES POR LARGURA
   ========================================================================= */
@media (max-width:360px){
  :root{ --gut:17px; --r-card:21px; }
  .hero__name{ font-size: clamp(38px, 12.6vw, 52px); }
  .eyebrow{ font-size:9px; letter-spacing:.36em; }
  .hero__meta{ font-size:9.2px; letter-spacing:.2em; }
  .card__in{ grid-template-columns: 74px auto 1fr 48px; min-height:104px; }
  .card--slim .card__in{ grid-template-columns: auto 1fr 48px; }
  .card__ic{ width:34px; height:34px; margin-left:9px; }
  .card__tx{ padding-left:11px; }
  .card__tx h3{ font-size:10.5px; letter-spacing:.2em; }
  .card__tx p{ font-size:11.5px; }
  .card__go{ width:32px; height:32px; margin-right:16px; }
  .card__go svg{ width:14px; height:14px; }
}
@media (min-width:768px){
  :root{ --shell:560px; }
  .hero__media{ height: clamp(600px, 80svh, 790px); }
}
@media (min-width:1024px){
  :root{ --shell:580px; }
  body{ font-size:15.5px; }
}