/* ------------------------------
   Google Fonts
   ------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&family=Roboto+Slab:wght@100;200;300;400;600;700&display=swap');

/* ------------------------------
   Reset básico
   ------------------------------ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------------
   Base
   ------------------------------ */
html {
    font-size: 100%; /* 16px por defeito */
}

body {
    min-height: 100vh;
    background-color: #410A09;
    color: #f5f5f5;
    font-family: "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

/* Para garantir que links não ficam azuis sublinhados por defeito */
a {
    color: inherit;
    text-decoration: none;
}

/* ------------------------------
   Content (wrapper central)
   ------------------------------ */
.content {
    max-width: 900px;      /* PC: largura máxima 900px */
    width: 100%;           /* mobile: ocupa a largura toda */
    margin: 0 auto;        /* centro na página */
    padding: 1.5rem;       /* respiro lateral em telemóveis e tablets */
}

/* ------------------------------
   Tipografia
   ------------------------------ */
h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto Slab", "Source Sans Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin-bottom: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

p {
    margin-bottom: 1rem;
}

/* ------------------------------
   Utilitários de alinhamento
   ------------------------------ */
.text-center {
    text-align: center;
}

/* ------------------------------
   Responsividade extra (opcional)
   ------------------------------ */
@media (min-width: 768px) {
    body {
        font-size: 17px;
    }

    .content {
        padding: 2.5rem 2rem;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 18px;
    }
}

/* ------------------------------
   HERO SECTION
   ------------------------------ */

.hero {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 80px;
    text-align: center;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    font-family: "Roboto Slab", serif;
    font-weight: 100;
    font-size: 27px;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 40px;
}

/* Ilustração */
.hero-illustration {
    width: 100%;
    max-width: 800px;  /* Igual ao estilo da imagem */
    height: auto;
    margin-top: 20px;
	margin-bottom: -90px;
}

/* ------------------------------
   ABOUT SECTION
   ------------------------------ */

.about {
    background: #6F1415;
    padding: 100px 0;
    text-align: center;
    position: relative;
}

.about-content {
    max-width: 1000px;
    margin: 0 auto;
    
    display: flex;
    justify-content: center;
    gap: 60px;

    padding-bottom: 20px; /* espaço antes do mapa */
}

.about-col {
    width: 250px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 15px;
    color: #ffffff;
    text-align: left;
	font-weight: 200;
}

.about-col h2 {
    font-family: "Roboto Slab", serif;
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 25px;
    line-height: 1.3;
    color: #ffffff;
}

.about-col p {
    margin-bottom: 18px;
    line-height: 1.3;
}

/* MAPA AO CENTRO */
.about-map img {
    width: 100%;
    max-width: 700px;
    opacity: 0.85;
}

/* ------------------------------
   RESPONSIVE
   ------------------------------ */
@media (max-width: 900px) {
    .about-content {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .about-col {
        width: 90%;
        max-width: 400px;
        text-align: center;
    }
}

/* ------------------------------
   HOW IT WORKS SECTION
   ------------------------------ */

.howworks {
    background: #410A09; /* mesmo tom da área principal */
    padding: 100px 0;
    color: #ffffff;
	
}

.howworks-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;

    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Lado esquerdo: título + ilustração principal */
.howworks-left {
    width: 260px;
    text-align: left;
}

.howworks-mainicon {
    width: 180px;
    height: auto;
}

/* Lado direito: grelha dos 6 passos */
.howworks-right {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 60px;
    row-gap: 40px;
	
}

.howworks-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
    line-height: 1.3;
	font-weight: 200;
}

.howworks-item img {
    width: 42px;
    height: auto;
    margin-top: 4px;
}

.howworks-item-title {
    font-weight: 700;
}

/* ------------------------------
   RESPONSIVE
   ------------------------------ */
@media (max-width: 900px) {
    .howworks-inner {
        flex-direction: column;
        gap: 40px;
    }

    .howworks-left {
        width: 100%;
        text-align: center;
    }

    .howworks-mainicon {
        margin: 0 auto;
    }

    .howworks-right {
        grid-template-columns: 1fr;
    }
}



/* ------------------------------
   PORTFOLIO SECTION
   ------------------------------ */

.portfolio {
    position: relative;
    background: #410A09;
    padding: 140px 0 120px; /* espaço para a ilustração e conteúdo */
    color: #ffffff;
    overflow: visible; 
}

/* FAIXA */
.portfolio-band {
    position: relative;
    width: 100%;
    height: 125px;
    background: #681F0B;
    z-index: 1;
}

/* ILUSTRAÇÃO POR CIMA DA FAIXA */
.portfolio-illustration {
    position: absolute;
    top: -30px; /* sobe ou desce */
    left: 63%;  /* move para a direita */
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

.portfolio-illustration img {
    width: 550px;     /* tamanho FIXO = nunca encolhe */
    max-width: none;  /* impede que o browser o reduza */
    height: auto;
}



/* Conteúdo (texto + grelha) */
.portfolio-content {
    position: relative;
    z-index: auto;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;

    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Coluna esquerda */
.portfolio-left {
    max-width: 320px;
	margin-top: 150px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 14px;
}

.portfolio-left h2 {
    font-family: "Roboto Slab", serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 25px;
}

.portfolio-left p {
    line-height: 1.4;
}

/* Grelha de quadrados */
.portfolio-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
	margin-top: 150px;
}

.portfolio-item{
  background: #ffffff;
  background-size: cover;
  background-position: center;
  
  border: 1px dotted #EA6912;
  border-radius: 10px;
  min-height: 120px;

  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.portfolio-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.portfolio-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* MODAL blackout + caixa central */
.portfolio-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  
}

.portfolio-modal.is-open{
  display: flex;
}

.portfolio-modal-box{
  max-width: 980px;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  
  position: relative;
  z-index: 2147483647; /* garante que a caixa também fica no topo */
}

.portfolio-modal-box img{
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer; /* clicar para fechar */
}

body.modal-open{
  overflow: hidden;
}

/* MODAL: fade do blackout */
.portfolio-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2147483647;
  padding: 22px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.portfolio-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* CAIXA: zoom + fade */
.portfolio-modal-box{
  position: relative;
  max-width: 980px;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);

  transform: scale(.94);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

/* quando abre */
.portfolio-modal.is-open .portfolio-modal-box{
  transform: scale(1);
  opacity: 1;
}

.portfolio-modal-box img{
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}



/* ------------------------------
   PORTFOLIO RESPONSIVE FIX
   ------------------------------ */
@media (max-width: 900px) {

    /* A ilustração passa a entrar no fluxo normal */
    .portfolio {
        padding: 80px 0 80px;
    }

    .portfolio-illustration {
        position: relative;
        top: -200px;
        left: 58%;
        transform: translateX(-50%);
    }

    .portfolio-illustration img {
        width: 100%;
        max-width: 480px;
    }

    .portfolio-content {
        flex-direction: column;
        gap: 30px;
        align-items: center;
		top: -90px;
    }

    .portfolio-left {
        max-width: 100%;
        text-align: center;
        margin-top: 0;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0;          /* tirar o 150px */
        width: 100%;
    }
}

@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
   OUR CULTURE (layout como na imagem)
========================== */

.ourculture{
  position: relative;
  color: #ffffff;
  padding: 120px 0 0;
  overflow: hidden;

  /* fundo com ligeiro gradiente (ajusta se quiseres) */
  background: linear-gradient(180deg, #7A1A1B 0%, #5F1112 55%, #571010 100%);
}

.ourculture-inner{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px 80px;
}

.ourculture-mac{
  position: absolute;
  top: -30px;
  right: 170px;
  width: 260px;
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* 3 colunas */
.ourculture-layout{
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 140px;
}

.ourculture-left h2{
  font-family: "Roboto Slab", serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 22px;
}

.ourculture-subtitle{
  font-family: "Source Sans Pro", sans-serif;
  font-size: 20px;
  font-weight: 600;
  opacity: 0.95;
  margin: 0 0 22px;
  line-height: 1.4;
}

.ourculture-left p,
.ourculture-col p{
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.55;
  margin: 0 0 18px;
  opacity: 0.98;
}

/* =========================
   RESPONSIVE
========================== */

@media (max-width: 980px){
  .ourculture{
    padding-top: 90px;
  }

  .ourculture-inner{
    padding: 0 24px 60px;
  }

  .ourculture-layout{
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 20px;
  }

  .ourculture-mac{
    position: relative;
    top: 0;
    right: 0;
    display: block;
    margin: 10px auto 0;
    width: 220px;
  }

  .ourculture-left h2{
    font-size: 34px;
    text-align: left;
  }
}

/* =========================
   LINHAS DECORATIVAS (mantem)
========================== */

.lines-bg{
  width: 100%;
  height: 145px;

  margin-top: 70px;

  background-image: url("../img/illustLinhas.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 145px;

  overflow: hidden;
}


/* =========================
   OUR PLANS (CONTENT + TABELA)
========================== */

.ourplans{
  background:#410A09;
  padding:140px 0;
  color:#ffffff;
}

/* LAYOUT: tabela à esquerda, conteúdo à direita */
.ourplans-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 60px;

  display:flex;
  gap:80px;
  align-items:flex-start;
}

/* ESQUERDA: tabela */
.ourplans-left{
  flex: 1.2;
}

/* DIREITA: bloco texto/cta */
.ourplans-right{
  flex: 0.8;
}

/* Conteúdo (direita) */
.ourplans-content{
  width:280px;          /* largura fixa como tinhas */
  text-align:left;
  margin-left:auto;     /* encosta o bloco à direita da coluna */
  margin-right:0;
}

.ourplans-illustration{
  width:220px;
  height:auto;
  margin-bottom:40px;
}

.ourplans-content h2{
  font-family:"Roboto Slab",serif;
  font-size:28px;
  font-weight:400;
  line-height:1.3;
  margin-bottom:24px;
}

.ourplans-text{
  font-family:"Source Sans Pro",sans-serif;
  font-size:14px;
  font-weight:200;
  line-height:1.55;
  opacity:.9;
  margin-bottom:50px;
}

/* CTA */
.ourplans-cta{
  display:inline-block;
  padding:14px 36px;
  border:1px solid #EA6912;
  border-radius:14px;
  font-family:"Source Sans Pro",sans-serif;
  font-size:14px;
  font-weight:600;
  color:#EA6912;
  cursor:pointer;
  transition:background .25s,color .25s;
}

.ourplans-cta:hover{
  background:#EA6912;
  color:#ffffff;
}

/* =========================
   OUR PLANS (LAYOUT + TABELA)
========================== */

.ourplans{
  background:#410A09;
  padding:140px 0;
  color:#ffffff;
}

/* LAYOUT PRINCIPAL */
.ourplans-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 60px;

  display:flex;
  flex-direction:row;
  gap:80px;
  align-items:flex-start;
}

/* ESQUERDA: TABELA */
.ourplans-left{
  flex:1.2;
  min-width:0; /* permite encolher sem rebentar */
}

/* DIREITA: TEXTO + CTA */
.ourplans-right{
  flex:0.8;
  min-width:0;
}

/* BLOCO DE CONTEUDO (direita) */
.ourplans-content{
  width:280px;
  margin-left:auto;
  text-align:left;
}

.ourplans-illustration{
  width:220px;
  height:auto;
  margin-bottom:40px;
}

.ourplans-content h2{
  font-family:"Roboto Slab",serif;
  font-size:28px;
  font-weight:400;
  line-height:1.3;
  margin-bottom:24px;
}

.ourplans-text{
  font-family:"Source Sans Pro",sans-serif;
  font-size:14px;
  font-weight:200;
  line-height:1.55;
  opacity:.9;
  margin-bottom:50px;
}

/* CTA */
.ourplans-cta{
  display:inline-block;
  padding:14px 36px;
  border:1px solid #EA6912;
  border-radius:14px;
  font-family:"Source Sans Pro",sans-serif;
  font-size:14px;
  font-weight:600;
  color:#EA6912;
  cursor:pointer;
  transition:background .25s,color .25s;
}

.ourplans-cta:hover{
  background:#EA6912;
  color:#ffffff;
}

/* =========================
   TABELA
========================== */

.ourplans-table-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.ourplans-table{
  width:100%;
  border-collapse:collapse;
  border:1px solid #EA6912;
  border-radius:14px;
  overflow:hidden;
  font-family:"Source Sans Pro",sans-serif;
  font-size:14px;
  background:rgba(255,255,255,0.01);
}

.ourplans-table th,
.ourplans-table td{
  border:1px solid #EA6912;
  padding:12px 14px;
  line-height:1.2;
}

.ourplans-table thead th{
  font-family:"Roboto Slab",serif;
  font-weight:400;
  text-align:left;
  background:rgba(234,105,18,0.10);
}

.ourplans-table td:first-child{
  font-weight:600;
  width:46%;
}

.ourplans-table .col-center{
  text-align:center;
  width:18%;
}

/* zebra suave */
.ourplans-table tbody tr:nth-child(even){
  background:rgba(255,255,255,0.03);
}

/* linha de preços */
.ourplans-table .ourplans-price td{
  font-weight:700;
  background:rgba(234,105,18,0.12);
}

/* CHECK SVG */
.plan-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  color:#EA6912;
}

.plan-check svg{
  width:18px;
  height:18px;
  display:block;
}

/* =========================
   RESPONSIVE
========================== */

@media(max-width:860px){
  .ourplans{
    padding:100px 0;
  }

  .ourplans-inner{
    flex-direction:column;
    gap:50px;
  }

  .ourplans-content{
    width:100%;
    margin-left:0;
  }

  .ourplans-illustration{
    width:180px;
  }

  .ourplans-content h2{
    font-size:24px;
  }

  .ourplans-table th,
  .ourplans-table td{
    padding:10px 8px;
    font-size:13px;
  }

  .ourplans-table td:first-child{
    width:auto;
    white-space:normal;
    word-break:break-word;
  }
}




/* =========================
   FOOTER
========================== */

.site-footer{
  background:#6F1416;
  color:#ffffff;
  padding:40px 0;
  position: relative; /* referência para elementos absolutos */
}

.site-footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  font-family:"Source Sans Pro",sans-serif;
  font-size:12px;
  font-weight:200;
  opacity:.95;
}

/* imagem fora do fluxo */
.footer-right{
  position:absolute;
  right: 60px;      /* alinha com o padding */
  bottom: 0px;     /* alinha verticalmente */
}

.footer-right img{
  width: 350px;
  height:auto;
  display:block;
}

.footer-left{
  white-space:nowrap;
}




@media(max-width:900px){
  .site-footer-inner{
    padding:0 24px;
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-right{
    position:static; /* volta ao fluxo no mobile */
    margin-top:20px;
  }

  .footer-left{
    white-space:normal;
  }
}