/* =========================================================
   SVC2 • CSS COMPLETO (ATUALIZADO)
   ✅ Check centralizado nas caixinhas
   ✅ Modal: imagem ocupa 100% do espaço interno
========================================================= */

:root{
  --svc2-top: 140px;
  --svc2-gap: 28px;
}

/* SECTION */
.svc2{
  width:100%;
  padding:50px 0 70px;
  background:#f6fbff;
  color:#092D69;
  position:relative;
  z-index:60;
  overflow:visible !important;
}
.svc2-inner{ width:100%; max-width:90%; margin:0 auto; }

/* BREADCRUMB */
.svc2-crumbs{ display:flex; align-items:center; gap:12px; margin-bottom:34px; }
.svc2-home{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:rgba(9,45,105,.06);
  border:1px solid rgba(9,45,105,.10);
  color:#092D69; text-decoration:none; font-weight:900; font-size:13px;
}
.svc2-sep{ width:1px; height:22px; background:rgba(9,45,105,.18); }
.svc2-current{ font-weight:900; font-size:14px; }

/* GRID */
.svc2-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:80px;
  align-items:start;
}

/* LEFT */
.svc2-title{ margin:0 0 14px; font-size:42px; font-weight:900; letter-spacing:-.4px; }
.svc2-lead{ margin:0 0 18px; font-size:16px; line-height:1.85; color:rgba(9,45,105,.90); max-width:860px; }
.svc2-text{ margin:0 0 18px; font-size:15.5px; line-height:1.9; color:rgba(9,45,105,.88); max-width:860px; }
.svc2-line{ border:0; height:1px; background:rgba(9,45,105,.10); margin:24px 0; }
.svc2-h3{ margin:0 0 12px; font-size:16px; font-weight:900; }

/* LISTA */
.svc2-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.svc2-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14.5px;
  line-height:1.7;
  color:rgba(9,45,105,.90);
}

/* ✅ CHECK BOX: centralizado de verdade */
.svc2-check{
  width:18px;
  height:18px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(72,197,243,.18);
  border:1px solid rgba(72,197,243,.22);

  /* ✅ remove “deslocamento” visual do glyph */
  font-weight:900;
  font-size:12px;
  line-height:1;

  flex:0 0 18px;
  margin-top:0;           /* ✅ tira qualquer empurrão */
  transform: translateY(1px); /* ✅ micro-ajuste (fica igual ao print) */
}

/* RIGHT */
.svc2-right{ position:relative; align-self:start; overflow:visible !important; }
.svc2-right-wrap{ position:relative; }
.svc2-right-ph{ height:0; }

.svc2-sticky{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
.svc2-sticky.is-fixed{
  position:fixed;
  top: calc(var(--svc2-top) + var(--svc2-gap));
  z-index:120;
}
.svc2-sticky.is-bottom{
  position:absolute;
  top:auto;
  bottom:0;
  left:0;
  width:100%;
}

/* Gallery */
.svc2-gallery{ display:grid; gap:22px; }
.svc2-shot{
  border:0; padding:0; background:transparent; cursor:pointer;
  border-radius:30px; overflow:hidden;
  border:1px solid rgba(9,45,105,.10);
  box-shadow:0 14px 40px rgba(9,45,105,.12);
}
.svc2-shot img{ width:100%; height:100%; display:block; object-fit:cover; }

.svc2-shot--big{ height:310px; }
.svc2-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.svc2-shot--small{ height:270px; }

/* =========================================================
   MODAL GLOBAL
   ✅ imagem ocupa 100% do espaço interno
   ✅ X por cima da imagem
========================================================= */
.svc2-modal{
  position:fixed;
  inset:0;
  z-index:2147483647;
  isolation:isolate;
  display:none;
}
.svc2-modal.is-open{ display:block; }

.svc2-modal-overlay{
  position:absolute;
  inset:0;
  border:0;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  cursor:pointer;
}

.svc2-modal-panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1200px);
  height: min(78vh, 820px);
  border-radius: 22px;
  padding: 14px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(9,45,105,.12);
  box-shadow: 0 30px 110px rgba(0,0,0,.25);
  overflow:hidden; /* ✅ garante tudo dentro */
}

/* ✅ botão flutuando por cima */
.svc2-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:50px;
  height:50px;
  border-radius:16px;
  border:1px solid rgba(9,45,105,.14);
  background: rgba(255,255,255,.98);
  color:#092D69;
  cursor:pointer;
  display:grid;
  place-items:center;
  z-index:3;
  box-shadow: 0 12px 30px rgba(0,0,0,.16);
}

/* ✅ frame agora é 100% do painel (sem padding-top) */
.svc2-modal-frame{
  position:absolute;
  inset:14px;         /* respeita padding do painel */
  border-radius:16px;
  overflow:hidden;
  background: rgba(9,45,105,.04);
  border:1px solid rgba(9,45,105,.10);
}

/* ✅ imagem ocupa TUDO dentro do frame */
#svc2ModalImg{
  width:100%;
  height:100%;
  object-fit:cover;        /* ✅ ocupa 100% (corta se precisar) */
  object-position:center;
  display:block;
}

/* =========================================================
   MOBILE MODAL (85% x 60% centralizado)
========================================================= */
@media (max-width: 768px){

  .svc2-modal-overlay{
    background: rgba(255,255,255,.90);
    backdrop-filter: blur(8px);
  }

  .svc2-modal-panel{
    width: 85vw;
    height: 60vh;
    max-width: 520px;
    max-height: 520px;
    padding: 12px;
    border-radius: 18px;
  }

  .svc2-modal-close{
    top:10px;
    right:10px;
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .svc2-modal-frame{
    inset:12px;
    border-radius:14px;
  }

  /* ✅ mantém cover no mobile também */
  #svc2ModalImg{
    object-fit:cover;
  }
}

/* =========================================================
   RESPONSIVO LAYOUT
========================================================= */
@media (max-width:980px){
  .svc2-grid{ grid-template-columns:1fr; gap:46px; }

  .svc2-sticky,
  .svc2-sticky.is-fixed,
  .svc2-sticky.is-bottom{
    position:relative;
    top:auto;
    bottom:auto;
    left:auto;
    width:auto;
  }
  .svc2-right-ph{ height:0 !important; }

  .svc2-shot--big{ height:280px; }
  .svc2-shot--small{ height:240px; }
  .svc2-row{ gap:16px; }
}

@media (max-width:768px){
  .svc2{ padding:70px 0 60px; }
  .svc2-title{ font-size:32px; }
  .svc2-row{ grid-template-columns:1fr; }
  .svc2-shot{ border-radius:22px; }
  .svc2-shot--big{ height:240px; }
  .svc2-shot--small{ height:220px; }

  /* mantém o check bem alinhado em textos com quebra */
  .svc2-list li{ align-items:flex-start; }
  .svc2-check{ transform: translateY(1px); }
}