:root{
  --navy: #7aaeed;       /* azul-marinho profundo */
  --white: #ffffff;
  --muted: #eaeff6;
  --accent: #1e90ff;
  --radius: 12px;
  --gap: 1rem;
  --shadow: 0 8px 24px rgba(11,37,69,0.18);
  --text: #f4f7fb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,var(--white),#fbfdff 60%);
  color:var(--navy);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Container da secção */
.gallery-section{
  max-width:1800px;
  margin:48px auto;
  padding:28px;
  border-radius:20px;
  background:linear-gradient(180deg,var(--navy),#0f3060 60%);
  color:var(--white);
  box-shadow:var(--shadow);
}

/* header */
.gallery-header{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:18px;
}
#gallery-title{
  margin:0;
  font-size:1.6rem;
  letter-spacing:0.4px;
}
.gallery-subtitle{
  margin:4px 0 0 0;
  font-size:0.9rem;
  color:rgba(255,255,255,0.85);
}

/* filtros */
.gallery-controls{
  display:flex;
  gap:20px;
  align-items:center;
}
.filter-btn{
  background:transparent;
  color:var(--white);
  border:1px solid rgba(255,255,255,0.12);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  transition:all 220ms ease;
  outline: none;
}
.filter-btn:hover,
.filter-btn:focus{ transform:translateY(-3px); box-shadow:0 6px 20px rgba(2,6,23,0.4); }
.filter-btn.active{
  background:var(--white);
  color:var(--navy);
  border-color:transparent;
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}

/* Grid responsivo */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--gap);
  margin-top:18px;
}

/* Item */
.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  transition:transform 300ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms;
  cursor:zoom-in;
  min-height:150px;
  display:flex;
  flex-direction:column;
}
.gallery-item img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:transform 450ms ease;
  will-change:transform;
}
.gallery-item figcaption{
  padding:12px;
  background:linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.02));
  color:var(--white);
}
.gallery-item h3{ margin:0 0 6px 0; font-size:1rem; color:var(--white) }
.gallery-item p{ margin:0; font-size:0.85rem; color:rgba(255,255,255,0.78) }

/* overlay botão view */
.view-btn{
  position:absolute;
  inset:auto 12px 12px auto;
  width:46px; height:46px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(4px);
  cursor:pointer;
  transition:transform 180ms;
}
.view-btn::before{
  content:'';
  display:block;
  width:18px; height:18px;
  margin:13px;
  background:linear-gradient(90deg,var(--white),var(--muted));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 5C7 5 2.7 8.11 1 12c1.7 3.89 6 7 11 7s9.3-3.11 11-7c-1.7-3.89-6-7-11-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>') center/contain no-repeat;
}

/* hover */
.gallery-item:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,6,23,0.45) }
.gallery-item:hover img{ transform:scale(1.06) }

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,10,25,0.75);
  padding:36px;
  opacity:0;
  pointer-events:none;
  transition:opacity 240ms ease;
  z-index:9999;
}
.lightbox[aria-hidden="false"]{
  opacity:1;
  pointer-events:auto;
}
.lb-content{
  max-width:1100px;
  width:100%;
  background:var(--white);
  border-radius:14px;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:0;
  position:relative;
}
.lb-content img{
  width:60%;
  height:auto;
  object-fit:contain;
  display:block;
  background:var(--muted);
}
.lb-caption{
  padding:18px;
  width:40%;
  background:linear-gradient(180deg,var(--white),#f6f9ff);
  color:var(--navy);
}
.lb-caption h3{ margin:0 0 8px 0; font-size:1.15rem }
.lb-caption p{ margin:0; color:#3b4e6b; font-size:0.95rem }

/* botões modal */
.lb-close,
.lb-prev,
.lb-next{
  position:absolute;
  top:12px;
  border:none;
  background:transparent;
  color:var(--white);
  font-size:28px;
  cursor:pointer;
  z-index:10010;
  padding:8px;
  border-radius:8px;
}
.lb-close{ right:12px; color:var(--white); background:rgba(0,0,0,0.18) }
.lb-prev{ left:12px; transform:translateY(-50%); top:50% }
.lb-next{ right:12px; transform:translateY(-50%); top:50% }

/* responsivo */
@media (max-width:900px){
  .lb-content{ flex-direction:column; }
  .lb-content img{ width:100%; height:320px; }
  .lb-caption{ width:100%; }
  .gallery-item img{ height:180px; }
}
@media (max-width:520px){
  .gallery-header{gap:8px;}
  .gallery-controls{order:2; width:100%; justify-content:flex-start; flex-wrap:wrap}
  .filter-btn{padding:6px 10px}
}

/* Botão HOME flutuante */
.btn-home-floating {
    position: fixed;
    bottom: 18px;
    left: 18px;
    width: 58px;
    height: 58px;
    background: #0b2545; /* azul-marinho */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    transition: transform .25s ease, box-shadow .25s ease;
}

.btn-home-floating:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

/* Ícone da casinha (SVG em mask) */
.home-icon {
    width: 26px;
    height: 26px;
    background: white;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>') center/contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23fff" viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>') center/contain no-repeat;
}

/* Responsivo para mobile */
@media (max-width: 480px) {
    .btn-home-floating {
        width: 50px;
        height: 50px;
        bottom: 14px;
        left: 14px;
    }

    .home-icon {
        width: 22px;
        height: 22px;
    }
}