/* =================== SERVIÇOS (Dienstleistungen) =================== */
/* Variáveis locais só de layout */
:root{
  --container: 1500px;
  --gutter: clamp(16px, 4.5vw, 24px);
}

/* Container interno */

/* =================== INTRO (DESKTOP) =================== */
.intro-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* vídeo levemente maior */
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
.intro-media{ display:block; }

.intro-video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transform: translateZ(0);
}

.intro .titulo-pagina{ margin:0 0 .5rem; }
.intro .kicker{ margin:0 0 .75rem; }
.intro p{ margin:0 0 1rem; } /* tipografia vem do base.css */

/* =================== PACOTES =================== */
.pacotes{ margin-top:1.25rem; }

.pacotes-descricao{
  max-width:none; /* usa toda a largura do conteudo_interno */
  width:100%;
  margin:0 0 .75rem;
}

.pacotes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:3rem;
}

.pacote-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .2s ease;
}

/* imagem “flat” para cards mais baixos */
.pacote-card img{
  display:block;
  width:100%;
  aspect-ratio:21/9;
  object-fit:cover;
}

/* Tarja (sem estilos tipográficos) */
.pacote-label{
  font-weight: 400;
  position:absolute;
  top:45%;
  left:0; right:0;
  transform: translateY(-50%);
  width:100%;
  padding:1rem 1.25rem;
  text-align:center;
  background:rgba(15, 43, 58, 0.65);
  pointer-events:none;
  backdrop-filter:saturate(120%);
  color: #fff;
}

/* Chamada final */
.contato-chamada{
  text-align:center;
  padding:2rem 0 3rem 1.5rem;
}

/* Aproximar “Pacotes” da Intro */
.intro{ padding-bottom:.75rem; }
#pacotes{ margin-top:0; padding-top:.5rem; }

/* =================== LAYOUT BASE =================== */


/* =================== TABLET (≤1024px) =================== */
@media (max-width:1024px){
  /* evita “pulo” quando o header muda de altura */
  .wrapper{ --nav-h: var(--nav-h-mobile); }

  /* Intro empilhado + vídeo full-bleed colado ao header */
  .intro-grid{ display:block; margin-bottom:1rem; }
  .intro-texto{ margin-top: 2rem; }      /* mantém respiro do texto */

  .conteudo_interno > section.intro{ padding-top:0 !important; margin-top:0 !important; }
  .intro > *:first-child{ margin-top:0 !important; }

  .intro-media{
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-top:-1px; /* some com a “linhazinha” no topo */
  }
  .intro-video{ border-radius:0; box-shadow:none; }

  /* Pacotes em 2 colunas */
  .pacotes-grid{ grid-template-columns:repeat(2,1fr); gap:.9rem; }
  .pacote-card{ border-radius:10px; }
  .pacote-card img{ aspect-ratio:2/1; }  /* menos “flat” no tablet */
  .pacote-label{
    font-size: 2rem;;
    color: #fff;
  }

  /* Aproximar seção de pacotes */
  .intro{ padding-bottom:.5rem; }
  #pacotes{ padding-top:.25rem; }
}

/* =================== MOBILE (≤700px) =================== */
@media (max-width:700px){
  .conteudo_interno{ padding-left:.75rem; padding-right:.75rem; }

  /* Pacotes: 1 por linha, cards mais finos */
  .pacotes{ margin-top:.75rem; }
  .pacotes-grid{ grid-template-columns:1fr; gap:.65rem; }

  .pacote-card img{ aspect-ratio:21/9; }    /* mais “flat” no celular */
  .pacote-label{ top:42%; padding:.65rem .9rem; } /* apenas posição/padding */
}

/* =================== PHONES PEQUENOS (≤480px) =================== */
@media (max-width:480px){
  .pacote-card img{ aspect-ratio:24/10; }  /* ainda mais fino */
  .pacote-label{ top:44%; }
}