/* =============================================
   Casamento Laiane e Diego - Tema CSS
   ============================================= */

/* ---------------------------------------------
   IMPORTAÇÃO DE FONTES
   --------------------------------------------- */
   @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

   /* ---------------------------------------------
      RESET CSS
      --------------------------------------------- */
   * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   /* ---------------------------------------------
      PREVENIR SCROLL HORIZONTAL
      --------------------------------------------- */
   html, body {
     overflow-x: hidden;
     width: 100%;
   }
   
   /* =============================================
      ESTILIZAÇÃO GLOBAL
      ============================================= */
   body {
     background-color: #f9f9f9;
     color: #333;
     font-family: 'Poppins', sans-serif;
     line-height: 1.6;
   }
   
   /* ---------------------------------------------
      TIPOGRAFIA
      --------------------------------------------- */
   h1, h2, h3, h4, h5, h6 {
     color: #222;
     font-family: "Libre Baskerville", serif;
     margin-bottom: 1rem;
   }
   h2 {
     font-weight: 100;
   }
   p {
     font-family: 'Poppins', sans-serif;
     margin-bottom: 1rem;
   }

  
   
   /* =============================================
   NAVBAR / MENU
   ============================================= */
.navbar {
  display: flex;
  align-items: center;
  background-color: #f8f7f5;
  padding: 1.5rem 2.5rem;
  position: relative;
  overflow: hidden;
}

::marker{
  color: transparent;
  display: none;
}

/* áreas da navbar */
.navbar-left,
.navbar-center,
.navbar-right {
  display: flex;
  align-items: center;
  flex: 1;             /* padrão: 1 coluna cada */
}
.navbar-left   { justify-content: flex-start; }
.navbar-center { justify-content: center; }
.navbar-right  { justify-content: flex-end; }

/* lista de links */
.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.desktop-menu { display: flex;
align-items: center;
}

/* links e hover */
.navbar a {
  position: relative;
  color: #333;
  font-weight: 300;
  text-decoration: none;
  padding: 0.25rem 0;
}
.navbar a:hover {
  color: #777;
}
.navbar a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background-color: #777;
  transition: width 0.3s ease;
}
.navbar a:hover::after {
  width: 100%;
}

/* marca central */
.navbar-center a {
  font-family: "Libre Baskerville", serif;
  font-size: 2.5rem;
  margin: 0;
  padding: 0;
}

/* botão RSVP */

.rsvp-btn a {

     color: white !important;

}

.rsvp-btn {
  background: #000;
     padding: 0.8rem 1.5rem !important;
     cursor: pointer;
     font-family: 'Poppins', sans-serif;
     border-radius: 4px;
width: auto; 
	flex: 0 0 auto;
  text-decoration: none;
  display: inline-block;
}

/* botão hamburguer */
.navbar-toggle {
  display: none;       /* só em mobile */
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 1rem;
  z-index: 1001;       /* acima do menu */
}
.navbar-toggle span {
  width: 25px; height: 3px;
  background-color: #333;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.navbar-toggle.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.navbar-toggle.open span:nth-child(2) {
  opacity: 0;
}
.navbar-toggle.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* menu mobile fullscreen (sempre display:flex, escondido via transform) */
.mobile-menu {
  position: fixed;
  inset: 0;
  background-color: #f8f7f5;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
  padding: 4rem 2rem;
  z-index: 1000;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
}
.mobile-menu.open {
  transform: translateY(0);
}
.mobile-menu .nav-menu {
  flex-direction: column;
  gap: 0.2rem;
}

/* =============================================
   RESPONSIVIDADE MOBILE (≤768px)
   ============================================= */
@media (max-width: 768px) {
  /* esconde menu desktop, mostra toggle */
  .desktop-menu  { display: none; }
  .navbar-toggle { display: flex; }

  /* faz a marca central ocupar duas “colunas” */
  .navbar-center {
    flex: 2;
  }

  /* reduz o tamanho da marca para caber melhor */
  .navbar-center a {
    font-size: 1.5rem;
  }
}

   
   /* =============================================
      HERO SECTION
      ============================================= */
      .hero {
        /* 3 colunas: imagem pequena + imagem grande + imagem pequena */
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 2rem;
        align-items: center;
        justify-items: center;
        position: relative;
        width: 100vw;           /* força ocupar 100% da viewport */
        overflow: hidden;       /* impede qualquer “vazamento” */
        background-color: #f8f7f5;
        padding: 2rem 1rem;
      }
   .hero-column {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .hero-left img,
   .hero-right img {
     max-width: 80%;
     object-fit: cover;
   }
   .hero-center img {
     width: 100%;
     height: 668px;
     object-fit: cover;
   }
   .hero-date {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Libre Baskerville", serif;
    font-size: 5.2rem;
    color: #171717;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    /* garante que o texto nunca cause scroll lateral */
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.hero-date-dot {
    font-size: 0.6em;      /* tamanho relativo ao 5rem do pai */
    vertical-align: middle;/* ajusta o alinhamento da bolinha */
    margin: 0 0.3em;       /* espaço antes/depois do • */
}
   .hero-text {
     grid-column: 1 / -1;
     margin-top: 2rem;
     text-align: center;
     background: #f8f7f5;
     padding: 2rem;
   }
   .hero-sides { display: none; }
   
   /* =============================================
      COUNTDOWN SECTION
      ============================================= */
   .countdown-section {
     position: relative;
     height: 100vh;
     overflow: hidden;
   }
   .countdown-background {
     position: absolute; inset: 0; overflow: hidden;
   }
   .countdown-background img {
     width: 100%; height: 100%;
     object-fit: cover; object-position: center;
   }
   .countdown-overlay {
     position: absolute; inset: 0;
     background: rgba(0,0,0,0.5);
     z-index: 1;
   }
   .countdown-content {
     position: relative; z-index: 2;
     color: #fff;
     display: flex; flex-direction: column;
     justify-content: center; align-items: center;
     text-align: center; height: 100%;
     padding: 2rem;
   }
   .countdown-content h2 {
     font-size: 1.5rem; font-weight: 100;
     letter-spacing: 0.1rem; margin-bottom: 2rem;
     text-transform: uppercase;
     color: white;
   }
   .countdown-timer {
     display: flex; gap: 5rem;
   }
   .time-block {
     text-align: center;
   }
   .time-block span {
     display: block; font-size: 6rem;
     font-weight: 700; margin-bottom: 0.5rem;
   }
   .time-block p {
     font-size: 0.9rem; font-weight: 300;
     letter-spacing: 0.1rem;
   }
   
   /* =============================================
      SCHEDULE SECTION
      ============================================= */
   .schedule-section {
     display: flex; align-items: center;
     justify-content: center; min-height: 100vh;
     overflow: hidden; position: relative;
   }
   .schedule-background {
     position: absolute; inset: 0; overflow: hidden;
   }
   .schedule-background img {
     width: 100%; height: 100%;
     object-fit: cover; object-position: center;
   }
   .schedule-overlay {
     position: absolute; inset: 0;
     background: rgba(0,0,0,0.5); z-index: 1;
   }
   .schedule-content {
     position: relative; z-index: 2;
     display: flex; flex-direction: column;
     align-items: center; text-align: center;
     padding: 2rem; color: #fff;
   }
   .schedule-subtitle {
     font-size: 1rem; font-weight: 100;
     letter-spacing: 0.1rem; margin-bottom: 1rem;
     text-transform: uppercase;
   }
   .schedule-title {
     font-size: 4rem; line-height: 1.2;
     margin-bottom: 3rem; color: #fff;
   }
   .schedule-grid {
     display: flex; flex-wrap: wrap;
     justify-content: center; gap: 4rem;
   }
   .schedule-block {
     display: flex; flex-direction: column;
     align-items: center; min-width: 120px;
   }
   .schedule-block .time {
     font-size: 2.5rem; margin-bottom: 0.5rem;
   }
   .schedule-block .label {
     font-size: 1rem; font-weight: 300;
     letter-spacing: 0.1rem; text-transform: uppercase;
   }
   
   /* =============================================
      LOCATION SECTION
      ============================================= */
   .location-section {
     background: #f8f7f5; padding: 4rem 1rem;
   }
   .location-content {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
     gap: 2rem;
     align-items: center;
     justify-items: center;
     position: relative;
   }
   .location-center {
     display: flex; justify-content: center;
     align-items: center; position: relative;
   }
   .location-img {
     width: 100%; max-width: 450px; height: auto;
     object-fit: cover; border-radius: 4px;
   }
   .location-heading {
     position: absolute; top: 0; left: 50%;
     transform: translate(-50%,-50%);
     font-family: "Libre Baskerville", serif;
     font-size: 4rem; font-weight: 100;
     white-space: nowrap; z-index: 2;
   }
   .location-left,
   .location-right {
     text-align: center; font-size: 1.3rem;
     line-height: 1.4;
   }
   .location-btn {
     grid-column: 2;
     margin-top: 2rem;
     background: #000; color: #fff;
     padding: 0.8rem 1.5rem; border: none;
     cursor: pointer; text-decoration: none;
     font-family: 'Poppins', sans-serif;
     border-radius: 4px;
     text-align: center;
   }
   
   /* =============================================
      INFO SECTION: Registry & Dress Code
      ============================================= */
   .info-section {
     background: #f8f7f5; padding: 4rem 1rem;
   }
   .info-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     justify-items: center;
     max-width: 1200px; margin: 0 auto;
   }
   .info-item {
     display: flex; flex-direction: column;
     align-items: center; position: relative;
   }
   .info-heading {
     font-size: 3rem; font-weight: 100;
     margin-bottom: -2.5rem; text-align: center;
     z-index: 2;
   }
   .info-img {
     width: 100%; max-width: 350px;
     border-radius: 4px; object-fit: cover;
     margin-bottom: 2rem;
   }
   .info-text {
     font-size: 1rem; line-height: 1.6;
     color: #444; text-align: center;
     max-width: 300px; margin-bottom: 2rem;
   }
   .info-btn {
     background: #000; color: #fff;
     padding: 0.8rem 1.5rem;
     text-decoration: none; font-weight: 500;
     border-radius: 4px;
   }
   
   /* =============================================
      PADRINHOS SECTION
      ============================================= */
   .padrinhos-section {
     background: #f5f1f1; padding: 2rem 1rem;
     text-align: center;
   }
   .padrinhos-section h2 {
     font-size: 4rem; margin-bottom: 1rem;
   }
   .padrinhos-section p {
     font-size: 1rem; color: #666;
     margin-bottom: 2rem;
   }
   .padrinhos-grid {
     display: grid; gap: 1rem;
     grid-auto-rows: 200px;
     grid-auto-flow: dense;
     grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
     max-width: 1200px; margin: 0 auto;
   }
   .padrinhos-card {
     position: relative; overflow: hidden;
     border-radius: 5px; cursor: pointer;
   }

   .padrinhos-card.wide {
    grid-column: span 2;
  }
  
   .padrinhos-card img {
     width: 100%; height: 100%;
     object-fit: cover; display: block;
   }
   .padrinhos-card:hover img {
     transform: scale(1.05);
     transition: transform 0.3s ease;
   }
   .padrinhos-card.tall {
     grid-row: span 2;
   }
   
   /* =============================================
      MODAL / POP-UP
      ============================================= */
   .modal {
     display: none; position: fixed;
     inset: 0; background: rgba(0,0,0,0.5);
     justify-content: center; align-items: center;
     z-index: 9999;
   }
   .modal-box {
     background: #fff; border-radius: 8px;
     padding: 2rem; width: 90%; max-width: 1000px;
     max-height: 90%;
     box-shadow: 0 4px 20px rgba(0,0,0,0.2);
     position: relative;
     overflow-y: auto;
   }
   .modal-close {
     position: absolute; top: 1rem; right: 1rem;
     background: transparent; border: none;
     font-size: 2rem; cursor: pointer; z-index: 10;
   }
   .modal-body {
     display: flex; flex-wrap: wrap; gap: 2rem;
   }
   .modal-left {
     flex: 1 1 200px; display: flex;
     align-items: center; justify-content: center;
   }
   .modal-img {
     width: 100%; object-fit: cover;
     border-radius: 4px;
   }
   .modal-right {
     flex: 1 1 200px; display: flex;
     flex-direction: column; justify-content: center;
   }
   .modal-right h3 {
     font-size: 2rem; margin-bottom: 1rem;
     color: #222;
   }
   .modal-right p {
     font-size: 1rem; line-height: 1.5;
     color: #444;
   }


   /* =============================================
   FAQ SECTION
   ============================================= */

/* Wrapper que contém a imagem e o H2 por cima */
.faq-title-wrapper {
  position: relative;
  width: 100%;
  height: 500px; /* ajuste conforme necessidade; pode ser 250px, 350px, etc */
  background-image: url('../images/faq-banner.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlay sutil para diminuir contraste (opcional) */
.faq-title-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Estilização do texto por cima da imagem */
.faq-title-wrapper h2 {
  position: relative;
  z-index: 2;
  font-family: "Libre Baskerville", serif;
  font-size: 3rem;       /* ajuste o tamanho conforme preferir */
  font-weight: 100;
  color: #fff;           /* texto branco */
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.faq-section {
  max-width: 1600px;
  margin: 0 auto;
  padding: 4rem 1rem;
}

.faq-section h2 {
  font-family: "Libre Baskerville", serif;
  font-size: 3rem;
  text-align: center;
  color: #222;
}

/* Container que agrupa cada linha de FAQ (tema + perguntas) */
.faq-content {
	margin: 5rem 0;
  display: grid;
  row-gap: 5rem;
}

/* Cada linha de FAQ: tema (coluna esquerda) e suas perguntas (coluna direita) */
.faq-row {
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 4rem;
  align-items: flex-start;
}

/* Coluna esquerda: título do tema */
.faq-left h3 {
  font-family: "Libre Baskerville", serif;
  font-size: 2.5rem;
  font-weight: 100;
  text-transform: uppercase;
  margin: 0;
  color: #222;
}

/* Coluna direita: lista de perguntas e respostas */
.faq-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-right li {
  margin-bottom: 2rem;
}

.faq-right li:last-child {
  margin-bottom: 0;
}

/* Estilização da pergunta */
.faq-right strong {
  display: block;
  font-family: "Mulish", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #111;
}

/* Estilização da resposta */
.faq-right p {
  font-family: "Mulish", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  margin: 0;
  padding-left: 0.5rem;
}

/* Espaçamento extra entre itens */
.faq-right li + li {
  margin-top: 1.5rem;
}

/* ---------------------------------------------
   RESPONSIVIDADE: Mobile (≤768px)
   --------------------------------------------- */
@media (max-width: 768px) {
    
	.faq-section h2 {
  
  font-size: 1.2rem;
  
}
	
    .faq-title-wrapper {
    height: 200px;
  }
  .faq-title-wrapper h2 {
    font-size: 2rem;
    padding: 0 1rem; /* um pouco de espaçamento lateral */
  }
    

  /* Empilhar .faq-left e .faq-right em uma única coluna */
  .faq-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Tema (coluna esquerda) centralizado e menor fonte */
  .faq-left h3 {
    font-size: 2rem;
    text-align: center;
  }

  /* Diminui indentação da resposta no mobile */
  .faq-right p {
    padding-left: 0;
  }

  /* Ajusta tamanho da pergunta */
  .faq-right strong {
    font-size: 1.1rem;
  }
}

  
   /* ---------------------------------------------
      PÁGINA “SOBRE NÓS” / “NOSSA HISTÓRIA”
      --------------------------------------------- */
      .story-section {
        max-width: 1600px;
        margin: 0 auto;
        padding: 4rem 1rem;
        position: relative;
      }
      .story-title {
        font-size: 3rem;
        text-align: center;
        margin-bottom: 4rem;
      }
      .story-block.first,
      .story-block.fourth {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
        margin-bottom: 6rem;
      }
      .story-img-large img,
      .story-block.third img,
      .story-img-small img {
        width: 100%;
        display: block;
        border-radius: 4px;
        object-fit: cover;
      }
      .story-text p {
        font-size: 1rem;
        line-height: 1.6;
        color: #444;
        margin-bottom: 2rem;
      }
      .story-thumbs {
        display: flex;
        gap: 1rem;
      }
      .story-thumbs img {
        width: calc(50% - 0.5rem);
        border-radius: 4px;
        object-fit: cover;
      }
      .story-watermark {
        font-family: "Libre Baskerville", serif;
        position: absolute;
        top: 27%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 10rem;
        color: rgba(200, 200, 200, 0.509);
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
      }
      .story-block.second p {
        max-width: 700px;
        margin: 0 auto 6rem;
      }
      .story-block.third {
        margin-bottom: 6rem;
        display: flex;
        justify-content: center;
      }

      .story-block.third  img{
        width: 400px;
      }

      
      .story-block.fourth .story-text {
        margin: 0;
      }
   
   /* =============================================
      RESPONSIVIDADE GERAL (≤1024px)
      ============================================= */
   @media (max-width: 1024px) {
     .padrinhos-grid {
       grid-auto-rows: auto;
       grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
     }
     .padrinhos-card,
     .padrinhos-card.tall { height: auto; }
     .padrinhos-card.tall { grid-row: span 1; }
   }
   
   /* =============================================
      RESPONSIVIDADE MOBILE (≤768px)
      ============================================= */
   @media (max-width: 768px) {

     /* Navbar */
     .desktop-menu    { display: none; }
     .navbar-toggle   { display: flex; }
     .navbar-center a { font-size: 1rem; }
   
     /* Hero */
       /* Hero */
  .hero {
    grid-template-areas:
      "date"
      "center"
      "text"
      "sides";
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    height: auto;
  }
  .hero-date   { grid-area: date; font-size: 9vw; transform: translate(-50%, 0);}
  .hero-center { grid-area: center; }
  .hero-text   { grid-area: text; }
  .hero-sides  {
    grid-area: sides;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .hero > .hero-left,
  .hero > .hero-right { display: none; }
  .hero-center img { max-width: 100%; height: auto; }

  .hero-text h2 {
    font-size: 1rem;
  }

  .hero-center {
    padding: 20px 45px;
  }
   
     /* Countdown */
     .countdown-section { height:auto; padding:2rem 1rem; }
     .countdown-content { padding:1.5rem; }
     .countdown-content h2 { font-size:1.2rem; margin-bottom:1.5rem; }
     .countdown-timer { flex-direction:column; gap:2rem; }
     .time-block span { font-size:4rem; }
   
     /* Schedule */
     .schedule-section { min-height:auto; padding:2rem 1rem; }
     .schedule-content { padding:1.5rem; }
     .schedule-grid   { flex-direction:column; gap:2rem; }
     .schedule-title  { font-size:2.5rem; margin-bottom:2rem; }
     .schedule-block .time { font-size:2rem; }
   
     /* Location */
     .location-content {
       display:grid;
       grid-template-areas:
         "heading"
         "center"
         "left"
         "right"
         "button";
       grid-template-columns:1fr;
       gap:1.5rem;
     }
     .location-heading { grid-area:heading; font-size:2.5rem; }
     .location-center { grid-area:center; }
     .location-img    { max-width:100%; }
     .location-left   { grid-area:left; font-size:1.1rem; }
     .location-right  { grid-area:right; font-size:1.1rem; }
     .location-btn    { grid-area:button; width:100%; max-width:300px; margin:0 auto; }
   
     /* Info Section */
     .info-content { grid-template-columns:1fr; gap:3rem; }
     .info-heading{ font-size:2.5rem; margin-bottom:-1.5rem; }
     .info-img    { width:100%; }
     .info-text   { margin-top:1.5rem; max-width:none; }
     .info-btn    { margin-top:1.5rem; }
   
     /* Padrinhos Section */
     .padrinhos-grid {
       grid-template-columns:1fr;
       grid-auto-rows:auto;
       gap:1rem;
     }

     .padrinhos-section h2 {
      font-size: 2rem;
    }
     .padrinhos-card,
     .padrinhos-card.tall { grid-row:auto; }
   
     /* Modal */
     .modal-box {
      padding-top: 2.5rem;
    }
    .modal-close {
      font-size: 1.5rem;
      top: 0.75rem;
      right: 0.75rem;
    }
     .modal-body   { flex-direction:column; gap:1rem; }
     .modal-left   { display:none; }
     .modal-img    { display:none; }
   }
   
   /* =============================================
   FOOTER
   ============================================= */
.site-footer {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  font-size: 0.9rem;
}

.site-footer a {
  color: #fff;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: #ccc;
}

/* ---------------------------------------------
   RESPONSIVIDADE “SOBRE NÓS” (≤768px)
   --------------------------------------------- */
   @media (max-width: 768px) {
	   
	   .padrinhos-card.wide {
    grid-column: span 1;   /* ou grid-column: auto; */
  }

    /* Ajusta o container geral */
    .story-section {
      padding: 2rem 1rem;
    }
    .story-title {
      font-size: 2rem;
      margin-bottom: 1.5rem;
    }
  
    /* -------- Primeiro bloco -------- */
    .story-block.first {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    /* FOTO PRINCIPAL */
    .story-block.first .story-img-large img {
      width: 100%;
      height: auto;
    }
    /* DIEGO & LAIANE (watermark sobre a imagem) */
    .story-watermark {
      position: absolute;
      top: 16%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 2rem;
      font-family: "Libre Baskerville", serif;
      color: rgba(200, 200, 200, 0.664);
      white-space: nowrap;
      pointer-events: none;
    }
    /* PRIMEIRO TEXTO */
    .story-block.first .story-text {
      margin-top: 2.5rem; /* afasta do watermark */
    }
    .story-block.first .story-text p {
      margin-bottom: 1rem;
    }
    /* FOTO ESQUERDA | FOTO DIREITA */
    .story-thumbs {
      width: 100%;
      display: flex;
      gap: 1rem;
    }
    .story-thumbs img {
      width: calc(50% - 0.5rem);
      border-radius: 4px;
      object-fit: cover;
    }
  
    /* -------- Segundo bloco -------- */
    .story-block.second {
      margin-bottom: 2rem;
    }
    .story-block.second p {
      max-width: none;
      margin: 0;
    }
  
    /* -------- Terceiro bloco -------- */
    .story-block.third {
      margin: 2rem 0;
    }
    .story-block.third img {
      width: 100%;
      height: auto;
      border-radius: 4px;
      object-fit: cover;
    }
  
    /* -------- Quarto bloco -------- */
    .story-block.fourth {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }
    /* TERCEIRO TEXTO */
    .story-block.fourth .story-text p {
      margin: 0;
    }
    /* OUTRA FOTO */
    .story-block.fourth .story-img-small img {
      width: 100%;
      height: auto;
      border-radius: 4px;
      object-fit: cover;
    }
  }
  
/* =============================================
   LISTA DE PRESENTES & GIFT CARDS – FIXED 4 COLUMNS
   ============================================= */

/* — Grid de 4 colunas fixas — */
.gifts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 5rem 0;
}

/* — Card — */
.gift-card {
  width: 100%;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform 0.2s ease;
  position: relative;
}

/* — Imagem quadrada de 350px — */
.gift-image {
  width: 100%;
  height: 350px;       /* altura fixa */
  background: #0e5a78;  /* cor de fallback enquanto carrega */
  overflow: hidden;
}
.gift-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* ajusta a imagem para preencher o quadrado */
  display: block;
}

/* — Detalhes: nome e preço — */
.gift-details {
  padding: 1rem;
}
.gift-details h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}
.gift-details .price {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 1rem;
}

/* — Botão “COMPRAR” — */
.gift-card .btn {
  margin: 0 1rem 1rem;
  padding: 0.75rem 0;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.gift-card .btn:hover {
  background: #333;
}

/* — Badge de “Esgotado” — */
.gift-card .badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #08690e;
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  font-size: 0.9rem;
}

/* — Estados do card — */
.gift-card.available:hover {
  transform: translateY(-4px);
}
.gift-card.sold-out {
  opacity: 0.6;
  pointer-events: none;
}

/* =============================================
   RESPONSIVIDADE
   ============================================= */
@media (max-width: 1024px) {
  .gifts-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .gifts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

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