@font-face{font-family:'Inter';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/inter-200-normal-latin-ext.woff2') format('woff2');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-weight:200;font-display:swap;src:url('../fonts/inter-200-normal-latin.woff2') format('woff2');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-weight:300;font-display:swap;src:url('../fonts/inter-300-normal-latin-ext.woff2') format('woff2');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-weight:300;font-display:swap;src:url('../fonts/inter-300-normal-latin.woff2') format('woff2');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-weight:400;font-display:swap;src:url('../fonts/inter-400-normal-latin-ext.woff2') format('woff2');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-weight:400;font-display:swap;src:url('../fonts/inter-400-normal-latin.woff2') format('woff2');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:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/playfair-400-italic-latin-ext.woff2') format('woff2');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:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/playfair-400-italic-latin.woff2') format('woff2');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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/playfair-500-italic-latin-ext.woff2') format('woff2');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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/playfair-500-italic-latin.woff2') format('woff2');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}

/* ==========================================================================
   Kálita Penha — portfólio
   Tokens
   ========================================================================== */
:root{
  --dark:#222324;
  --light:#f4f4f4;
  --gray:#c0c0c0;
  --gray-mid:#8b8c8c;
  --gray-dark:#575758;

  --sans:Helvetica,"Helvetica Neue",Arial,"Liberation Sans",Inter,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;

  --pad:24px;
  --max:1120px;
  --gap:48px;
  --header-h:98px;

  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:768px){ :root{ --pad:48px } }
@media (min-width:1200px){ :root{ --pad:40px } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--dark);
  color:var(--light);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--light);color:var(--dark)}

.container{width:min(var(--max),100% - var(--pad)*2);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Ponto decorativo ------------------------------------------------------- */
.dot{width:20px;height:20px;border-radius:50%;background:var(--light);flex:0 0 auto}
.dot--dark{background:var(--dark)}

/* Header ----------------------------------------------------------------- */
.header{position:sticky;top:0;z-index:50;background:var(--dark);height:var(--header-h);display:flex;align-items:center}
.nav{display:flex;justify-content:center;gap:clamp(16px,1.88vw,27px)}
.nav a{
  font-size:clamp(.9375rem,1.39vw,20px);
  line-height:1.4;
  color:var(--light);
  padding:6px 2px;
  transition:color .3s var(--ease),opacity .3s var(--ease);
}
.nav a:hover{color:var(--gray)}
.nav a[aria-current="page"]{color:var(--gray)}
@media (max-width:767px){ .header{height:72px} }

/* Hero home -------------------------------------------------------------- */
.hero{padding-block:clamp(48px,11.7vw,169px) clamp(56px,16.9vw,244px);text-align:center}
.hero__line{display:block;font-size:min(180px,16vw);line-height:.9;letter-spacing:-.01em}
.hero__line--serif{font-family:var(--serif);font-style:italic;font-weight:400;color:#fff}
.hero__line--sans{font-weight:300;color:var(--light)}

/* Cabeçalho de seção ----------------------------------------------------- */
.section-head{border-top:1px solid var(--light);padding-top:clamp(28px,3.5vw,50px)}
.section-head__row{display:flex;align-items:flex-start;gap:clamp(24px,4vw,64px)}
.section-head__title{
  font-size:clamp(2rem,6.25vw,90px);
  font-weight:300;
  line-height:1.05;
  flex:0 0 auto;
}
.section-head__aside{margin-left:auto;display:flex;align-items:flex-start;gap:clamp(24px,4vw,60px)}
.section-head__aside .dot{margin-top:clamp(6px,3.1vw,45px)}
.section-head__text{margin-top:clamp(8px,7.7vw,111px)}
.section-head__text{
  font-size:clamp(1.0625rem,1.8vw,26px);
  line-height:1.4;
  color:#fff;
  max-width:52ch;
}
@media (max-width:900px){
  .section-head__text{margin-top:0}
  .section-head__aside .dot{margin-top:6px}
  .section-head__row{flex-direction:column;gap:24px}
  .section-head__aside{margin-left:0;width:100%;justify-content:space-between;padding-top:0}
  .section-head__aside .dot{order:2}
}

/* Galeria de projetos (home) --------------------------------------------- */
.gallery{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:flex-start}
.gallery--single .card{flex:1 1 100%}
.gallery .card{flex:1 1 calc(50% - var(--gap)/2);min-width:0}
@media (max-width:767px){ .gallery{gap:40px} .gallery .card{flex:1 1 100%} }

.card{display:block}
.card__media{display:block}
.card__title,.card__desc{display:block}
.card__media{overflow:hidden;background:var(--gray-dark)}
.card__media img{width:100%;height:auto;transition:transform .7s var(--ease)}
.card:hover .card__media img,.card:focus-visible .card__media img{transform:scale(1.05)}
.card__title{margin-top:clamp(18px,2.2vw,31px);font-size:clamp(1.25rem,1.95vw,28px);line-height:1.4;color:var(--light)}
.card--sm .card__title{font-size:clamp(1.125rem,1.67vw,24px)}
.card__desc{margin-top:6px;font-size:clamp(1rem,1.39vw,20px);line-height:1.4;color:var(--gray)}
.card:focus-visible{outline:2px solid var(--light);outline-offset:6px}

.stack{display:flex;flex-direction:column;gap:clamp(56px,6.95vw,100px);margin-top:clamp(48px,8.9vw,128px)}
.home-projetos{padding-bottom:clamp(64px,6.95vw,100px)}

/* Página de projeto ------------------------------------------------------ */
.project-head{padding-block:clamp(40px,5.2vw,75px) clamp(40px,5.4vw,78px);position:relative}
.project-head__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,58%);align-items:start;column-gap:clamp(24px,2vw,28px)}
/* 661px e não 663: a Helvetica do sistema mede ~0,3% mais estreita que a do Wix,
   então a caixa compensa a diferença e as quebras de linha caem iguais às do original */
@media (min-width:1200px){.project-head__row{grid-template-columns:minmax(0,1fr) 661px;padding-right:15px}}
.project-head__title{font-size:clamp(2rem,6.25vw,90px);font-weight:300;line-height:1.05;white-space:nowrap}
.project-head__aside{min-width:0}
.project-head .dot{position:absolute;top:clamp(24px,7.6vw,110px);right:0}
.project-head__text{font-size:clamp(1.0625rem,1.67vw,24px);line-height:1.4;color:var(--light);margin-top:clamp(8px,11.25vw,162px)}
@media (max-width:900px){
  .project-head__row{grid-template-columns:1fr;row-gap:20px;padding-right:0}
  .project-head__title{white-space:normal}
  .project-head__text{margin-top:0}
  .project-head .dot{top:24px}
}

.media-stack{display:flex;flex-direction:column;gap:var(--gap)}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
@media (max-width:767px){ .media-stack{gap:24px} .media-grid{grid-template-columns:1fr;gap:24px} }
.media-stack img{width:100%;height:auto;background:var(--gray-dark)}

.video{position:relative;background:#000;width:100%}
.video video{width:100%;height:auto;display:block}

/* Anterior / Seguinte ---------------------------------------------------- */
.pager{display:flex;justify-content:space-between;gap:24px;padding-block:clamp(48px,6.8vw,98px) clamp(56px,8.2vw,118px);font-size:clamp(1.0625rem,1.67vw,24px)}
.pager__link{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.32vw,19px);color:var(--light);transition:color .3s var(--ease),opacity .3s var(--ease)}
.pager__link--fim{align-items:flex-end;text-align:right;margin-left:auto}
@media (min-width:1200px){.pager__link--fim{margin-right:12px}}
.pager__link:hover{color:var(--gray)}
.pager__seta{display:block;width:clamp(34px,3.34vw,48px);height:auto;color:currentColor}
.pager__seta--dir{transform:scaleX(-1)}
.pager__link:focus-visible{outline:2px solid var(--light);outline-offset:6px}

/* Sobre ------------------------------------------------------------------ */
.sobre{padding-block:clamp(40px,6.4vw,93px) clamp(56px,6.8vw,98px)}
.sobre__top{display:flex;justify-content:flex-end}
.sobre__grid{display:grid;grid-template-columns:minmax(0,528px) minmax(0,525px);gap:clamp(32px,9.5vw,137px);align-items:start;margin-top:clamp(32px,13.7vw,197px)}
.sobre__title{font-size:clamp(1.75rem,3.2vw,46px);font-weight:300;line-height:1.24}
.sobre__title em{font-family:var(--serif);font-style:italic;font-weight:400}
.sobre__lead{margin-top:clamp(20px,2.9vw,42px);font-size:clamp(1rem,1.39vw,20px);line-height:1.4;color:var(--light)}
.sobre__body{margin-top:clamp(18px,2.2vw,32px);display:flex;flex-direction:column;gap:clamp(18px,2.2vw,32px);font-size:clamp(.9375rem,1.25vw,18px);line-height:1.44;color:var(--gray)}
.sobre__foto{width:100%;height:auto;background:var(--gray-dark)}
@media (max-width:900px){ .sobre__grid{grid-template-columns:1fr;gap:40px} .sobre__foto{order:-1} }

/* Contato ---------------------------------------------------------------- */
.contato{padding-block:clamp(40px,6.5vw,94px) clamp(56px,8.8vw,127px)}
.contato__grid{display:grid;grid-template-columns:minmax(0,451px) minmax(0,662px);gap:clamp(36px,4.6vw,66px);align-items:start}
@media (min-width:901px){.contato__grid form{margin-top:clamp(0px,13.3vw,192px)}}
.contato__title{font-size:clamp(1.625rem,2.7vw,39px);font-weight:300;line-height:1.23;color:var(--light)}
.form__legend{font-size:clamp(1.25rem,1.95vw,28px);line-height:1.25;color:var(--gray);margin-bottom:clamp(28px,4.6vw,66px)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px)}
.field{display:flex;flex-direction:column;margin-bottom:0}
.form__row{margin-bottom:clamp(24px,3.3vw,48px)}
.field--email{margin-bottom:clamp(20px,2vw,29px)}
.field--mensagem{margin-bottom:clamp(16px,1.4vw,20px)}
.field label{font-size:16px;line-height:1;color:var(--gray);margin-bottom:16px}
.field input,.field textarea{
  font:inherit;font-size:clamp(1rem,1.39vw,20px);line-height:1.4;color:var(--light);
  background:transparent;border:0;border-bottom:1px solid var(--light);
  padding:6px 0;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;height:138px;min-height:138px}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--gray)}
.btn{
  font:inherit;font-size:clamp(1rem,1.39vw,20px);line-height:1.4;
  background:var(--light);color:var(--dark);border:1px solid var(--light);
  padding:1px 20px;cursor:pointer;border-radius:0;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn:hover{background:transparent;color:var(--light)}
.form__hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form__status{margin-top:20px;font-size:1rem;color:var(--gray)}
.form__status:empty{display:none}
@media (max-width:900px){ .contato__grid{grid-template-columns:1fr} }
@media (max-width:520px){ .form__row{grid-template-columns:1fr} }

/* Texto corrido (políticas) ---------------------------------------------- */
.doc{padding-block:clamp(32px,4.8vw,69px) clamp(56px,8vw,115px);position:relative}
.doc__row{display:flex;align-items:flex-start;gap:clamp(24px,4vw,64px)}
.doc__title{font-size:clamp(2rem,6.25vw,90px);font-weight:300;line-height:1.14;max-width:12ch}
.doc .dot{position:absolute;top:clamp(24px,7.6vw,110px);right:0}
.doc__body{
  margin-left:auto;max-width:663px;
  display:flex;flex-direction:column;gap:clamp(18px,1.8vw,26px);
  font-size:clamp(1rem,1.39vw,20px);line-height:1.5;color:var(--gray);
  margin-top:clamp(32px,5.97vw,86px);
}
@media (max-width:900px){ .doc__body{margin-left:0;max-width:none} .doc .dot{top:24px} }

/* Footer ----------------------------------------------------------------- */
.footer{background:var(--light);color:var(--dark);padding:clamp(48px,6.95vw,100px) clamp(24px,5.5vw,80px) clamp(48px,7.15vw,103px)}
.footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.footer__wordmark{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2.25rem,4.86vw,70px);line-height:.94}
.footer__bottom{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:clamp(56px,17.1vw,246px)}
.footer__links{display:flex;flex-direction:column;font-size:clamp(1rem,1.67vw,24px);line-height:1.25}
.footer__links a{transition:opacity .3s var(--ease)}
.footer__links a:hover{opacity:.55}
.footer__links .spacer{height:clamp(12px,1.7vw,24px)}
.footer__copy{text-align:right;font-size:clamp(1rem,1.67vw,24px);line-height:1.25;margin-left:auto}
@media (min-width:601px){.footer__copy{margin-bottom:-1.25em}}
.footer__seta{display:block;width:clamp(34px,3.4vw,48px);height:auto;margin:0 0 clamp(12px,1.1vw,16px) 4px;color:var(--dark)}
@media (max-width:600px){ .footer__copy{text-align:left;margin-left:0} .footer__bottom{flex-direction:column;align-items:flex-start} }

/* Reveal ----------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .card__media img{transition:none}
  html{scroll-behavior:auto}
}