*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    cursor: none;
}

:root{
    font-size: 1.5vw;
    line-height: 1.4em;
}    

@font-face {
  font-family: "PPEditorialOld-ThinItalic";
  src: url("PPEditorialOld-ThinItalic.woff2") format("woff2"),
       url("PPEditorialOld-ThinItalic.woff") format("woff");
       font-weight: normal; /* porque a fonte já é italic por natureza */
}

@font-face {
  font-family: "PPEditorialOld-ThinItalic";
  src: url("PPEditorialOld-ThinItalic.woff2") format("woff2"),
       url("PPEditorialOld-ThinItalic.woff") format("woff");
       font-weight: normal; /* porque a fonte já é italic por natureza */
}

/* 2. Aplicar as features OpenType desejadas */
.fancy-text {
  font-family: 'PPEditorialOld-ThinItalic', serif;
  font-weight: 100;
  font-style: normal; /* porque a fonte já é italic por natureza */

  /* OpenType features */
  font-feature-settings: 
    "liga" 1,   /* Standard ligatures */
    "dlig" 1,   /* Discretionary ligatures (UC + LC) */
    "case" 1;   /* Case-sensitive forms */
  
  /* Fallback for broader compatibility */
  font-variant-ligatures: discretionary-ligatures common-ligatures;
}

.editorial-glyph {
  font-family: 'PPEditorialOld-ThinItalic', serif;
  font-size: 2rem; /* Adjust size as needed */
}

body{
    background-color: #0f0f0f;
    font-family: 'PPEditorialOld-ThinItalic', serif;
}

.imagem-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.imagem-container img {
  width: 100%;
  height: auto;
  display: block;

}

.imagem-fixa {
   position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  width: auto;
  max-width: calc(100% - 2rem); /* respeita margens esquerda e direita */
  height: auto;
  z-index: 0; /* Fica atrás do conteúdo */
  pointer-events: none; /* Ignora cliques na imagem */
}

a{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    text-decoration: none;
    color: #f0f0f0;
}

.cursor {
  position: fixed; /* Change from absolute to fixed */
  left: 0;
  top: 0;
  width: 1.8rem;
  height: 1.8rem;
  background-color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
  backface-visibility: hidden;
  transition: background 0.3s ease, transform 0.3s ease;
  mix-blend-mode: difference;
  border: 0.5rem solid #f0f0f0;
  border-radius: 100%;
  z-index: 1000;
}

.cursor.hovered {
  transform: translate(-50%, -50%) scale(1.5);
  background-color: rgba(0, 0, 0, 0.1);
}

.cursor.clicked {
  transform: translate(-50%, -50%) scale(0.8);
  background-color: rgba(0, 0, 0, 0.3);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Header 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header{
    display: flex;
    justify-content: flex-end;
    padding-right: 1rem;
    font-size: 2.5vw;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0rem;
    width: 100%;
    height: 3.2rem;
    background-color: #0f0f0f;
    cursor: none;
    z-index: 10;
}

header .lista a:hover{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #fa96dc;
    font-size: 2.5vw;
    cursor: none;
}

header a{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #f0f0f0;
    z-index: 100;
    cursor: none;
}

header .main a{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 100;
    cursor: none;
}

header .navbar {
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    position: fixed;
    top: 1rem;
    cursor: none;
}

header .navbar .main .left a:hover{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #fa96dc;
    font-size: 2.5vw;
    cursor: none;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Main Project
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.container-left p{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #f0f0f0;
    font-size: 10rem;
}

main.project .container-left{
    position: fixed;
    bottom: 6rem;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    About
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    h2{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #f0f0f0;
    font-size: 4.27vw;
    font-weight: 100 !important;
    clear: both;
    line-height: 1.15em;
    margin-right: 1rem;
    margin-left: 1rem;
    margin-top: 4rem;
    cursor: none;
}

h3{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #f0f0f0;
    font-size: 2.5vw;;
    font-weight: 100 !important;
    clear: both;
    line-height: 1.5em;
    margin-right: 1rem;
    margin-left: 1rem;
    cursor: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Footer
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.footer{
display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 0;
  row-gap: 0;
  margin-bottom: 1rem;
  cursor: none;
  padding: 0; /* só se quiser garantir que não há espaço extra */
    
}

.footer a{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #f0f0f0;
    font-size: 2.5vw;;
    font-weight: 100 !important;
    clear: both;
    line-height: 1.5em;
    margin-right: 1rem;
    margin-left: 1rem;
    cursor: none;
}

.footer .footerright .instagram a:hover::after{
    content: '  @estudiovilhao.pt';
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #fa96dc;
    font-size: 2.5vw;
    cursor: none;
}

.footer .footerright .email a:hover::after{
    content: '  geral@estudiovilhao.pt';
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
   color: #fa96dc;
    font-size: 2.5vw;
    cursor: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Work
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.menu{
    margin-top: 4rem;
    margin-bottom: 1rem;
    display: block;
    grid-gap: 36px;
    row-gap: 36px;
    column-gap: 36px;
    grid-template-columns: 6fr 1fr;
    cursor: none;
}

.menuleft a{
font-family: 'PPEditorialOld-ThinItalic', serif;
font-style: normal; /* porque a fonte já é italic por natureza */
text-decoration: none;
color: #f0f0f0;
font-size: 9vw;
font-weight: 100 !important;
clear: both;
line-height: 1.15em;
margin-right: 1rem;
margin-left: 1rem;
margin-top: 5rem;
cursor: none;
}

.menuleft a:hover{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    cursor: none;
    color: #fa96dc;
}

sup{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #fa96dc;
    font-size: 2.5vw;
    cursor: none;
    margin-left: -0.9rem;
    top: 0rem;
    z-index: -1000;
}

sub, sup{
    position: relative;
    vertical-align: baseline;
}

.hover-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 45%; /* ajuste conforme seu layout */
  height: auto;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.hover-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.corpo a{
    cursor: none;
    position: relative;
}

.corpo a:hover{
    font-family: 'PPEditorialOld-ThinItalic', serif;
    font-weight: 100;
    font-style: normal; /* porque a fonte já é italic por natureza */
    text-decoration: none;
    color: #fa96dc;
    cursor: none;
    cursor: none;
}

.corpo{
    position: absolute;
    cursor: none;
    z-index: 1;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    paginas
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
main .livro-paginas {
  position: sticky;
  top: 0; /* Corrige o "pulo" */
  width: 100%;
  height: 100vh;
  text-align: center;
  padding-top: 3rem; /* pode manter isso se necessário */
  z-index: 1;
}

main .livro-paginas img{
    width: 70%;
    height: auto;
     margin-top: 1.5rem; /* ajuste conforme necessário */
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Espaço
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

main .espaco{
    position: sticky;
    top: 0rem;
    width: 100%;
    height: 100vh;
    text-align: center;
    padding-top: 4rem;
}

main .espaco img{
    width: 25%;
    height: auto;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Media Queries
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* MONITORES MÉDIOS: 1500px a 1919px */
@media screen and (min-width: 1500px) and (max-width: 1919px) {
  main .livro-paginas img {
    width: 65%;
    max-width: 1125px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* MONITORES GRANDES: 1920px ou mais */
@media screen and (min-width: 1920px) {
  main .livro-paginas img {
    width: 65%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
  }
}

/* Tablets horizontais (769px – 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 2rem !important;
  }

  .footer h2 {
    font-size: 8.5vw;
    margin-bottom: 1.2rem;
  }

  .footer a {
    font-size: 6vw !important;
    line-height: 0.8em;
    display: block;
    padding: 0.4rem 0;
    margin: 0;
    margin-left: 0.5rem;
  }

  .about {
    margin-left: 1rem;
    margin-right: 1rem;
  }

header{
    font-size: 6vw !important;
    width: 100%;
    height: 8rem;
}

header .lista a:hover{
    font-size: 6vw !important;
}

header .lista {
    font-size: 6vw !important;
    margin-right: 1rem;
}

header a{
  font-size: 6vw !important;
}

header .main a{
    font-size: 6vw !important;
    margin-left: 1rem;
    top: 3rem;
    
}

header .navbar {
    font-size: 6vw !important;
    top: 3rem;
}

header .navbar .main .left a:hover{
    font-size: 6vw !important;
    
}

h2{
    font-size: 8vw;
    line-height: 1.15em;
    margin-top: 10rem;
}

h3{
    font-size: 5.2vw !important;
    line-height: 1.1em;
}


.footerright h2{
    margin-top: 2rem;
}

.footerright2 h2{
    margin-top: 2rem;
}

.footerleft h2{
    margin-top: 2rem;
}

.instagram{
    margin-left: 1rem;
}

.email{
    margin-left: 1rem;
}

.imagem-fixa {
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  width: auto;
  max-width: calc(100% - 2rem); /* respeita margens esquerda e direita */
  height: auto;
  z-index: 0; /* Fica atrás do conteúdo */
  pointer-events: none; /* Ignora cliques na imagem */
}

.menu{
    margin-top: 10rem;
    margin-left: 1.5rem;
}

sup{
    font-size: 3vw !important;
}

.menuleft a{
font-size: 8vw !important;
}

.project h2{
    margin-left: 2rem;
    margin-right: 2rem;
}


main .livro-paginas img{
    width: 90%;
    height: auto;
     margin-top: 25rem; /* ajuste conforme necessário */
}

.cursor {
    display: none !important;
  }
}


/* Smartphones (–768px) */
@media screen and (max-width: 768px) {
  .footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    padding: 2rem !important;
  }

  .footer h2 {
    font-size: 8.5vw;
    margin-bottom: 1.2rem;
  }

  .footer a {
    font-size: 6vw !important;
    line-height: 0.8em;
    display: block;
    padding: 0.4rem 0;
    margin: 0;
    margin-left: 0.5rem;
  }

  .about {
    margin-left: 2rem;
    margin-right: 2rem;
  }

header{
    font-size: 6vw !important;
    width: 100%;
    height: 8rem;
}

header .lista a:hover{
    font-size: 6vw !important;
}

header .lista {
    font-size: 6vw !important;
    margin-right: 2rem;
}

header a{
  font-size: 6vw !important;
}

header .main a{
    font-size: 6vw !important;
    margin-left: 2rem;
    top: 3rem;
    
}

header .navbar {
    font-size: 6vw !important;
    top: 3rem;
}

header .navbar .main .left a:hover{
    font-size: 6vw !important;
    
}

h2{
    font-size: 8vw;
    line-height: 1.15em;
    margin-top: 10rem;
}

h3{
    font-size: 5.5vw !important;
    line-height: 1.1em;
}


.footerright h2{
    margin-top: 2rem;
}

.footerright2 h2{
    margin-top: 2rem;
}

.footerleft h2{
    margin-top: 2rem;
}

.instagram{
    margin-left: 1rem;
}

.email{
    margin-left: 1rem;
}

.imagem-fixa {
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  width: auto;
  max-width: calc(100% - 4rem); /* respeita margens esquerda e direita */
  height: auto;
  z-index: 0; /* Fica atrás do conteúdo */
  pointer-events: none; /* Ignora cliques na imagem */
}

.menu{
    margin-top: 10rem;
    margin-left: 1.5rem;
}

sup{
    font-size: 3vw !important;
}

.menuleft a{
font-size: 8vw !important;
}

.project h2{
    margin-left: 2rem;
    margin-right: 2rem;
}


main .livro-paginas img{
    width: 90%;
    height: auto;
     margin-top: 10rem; /* ajuste conforme necessário */
}

.cursor {
    display: none !important;
  }

}