/* =========================================================
   GIANNAMED — revisão consolidada v5
   Ajustes conferidos contra o Figma 1920px.
   ========================================================= */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media (min-width:900px){
  /* Cabeçalho único para todas as páginas internas */
  .internal-page .topbar{height:75px}
  .internal-page .topbar .container{width:1088px}
  .internal-page .topbar__actions{transform:none;gap:20px}
  .internal-page .topbar__actions>a:nth-child(1){width:20px;height:20px}
  .internal-page .topbar__actions>a:nth-child(2){width:23px;height:23px}
  .internal-page .topbar__actions>a:nth-child(3){width:17px;height:17px}
  .internal-page .topbar__actions img{width:100%;height:100%;object-fit:contain}
  .internal-page .main-nav .container{width:1166px}
  .internal-page .brand{left:0;top:19px;width:146px;height:63px}
  .internal-page .main-menu{left:581px;top:0;height:96px;width:auto;gap:25px;font-size:16.215px;font-weight:700;line-height:1}
  .internal-page .main-menu a:after{bottom:-10px}

  /* Hero interno: mesmo enquadramento/estrutura do Sobre. A foto varia por página. */
  .internal-page .internal-hero{height:426px;background-size:101.84% auto;background-position:center -570px}
  .page-about .internal-hero{background-position:center -339px}
  .internal-page .internal-hero__content{width:1210px;height:426px;padding:127px 0 0 65px}
  .internal-page .internal-hero h1{font-size:68.941px;font-weight:900;line-height:1}
  .internal-page .internal-hero p{font-size:33.979px;font-weight:500;line-height:1;margin-top:7px}

  /* HOME: camadas e coordenadas do banner */
  .page-home .home-hero{isolation:isolate}
  .page-home .decor--hero-vector{position:absolute;left:-127px;top:0;width:2162px;height:850px;max-width:none;z-index:0;object-fit:fill}
  .page-home .decor--hero-detail{position:absolute;left:1396px;top:155px;width:213px;height:271px;max-width:none;z-index:1;object-fit:fill}
  .page-home .home-hero>.decor--lt,.page-home .home-hero>.decor--rt{z-index:1}
  .page-home .home-hero__copy{z-index:4}
  .page-home .home-hero__doctor{z-index:3}

  /* Saiba mais no ponto central definido no Figma */
  .page-home .home-about{position:relative}
  .page-home .home-about__copy .btn-pill{position:absolute;left:744px;top:581px;width:380px;min-width:380px;height:65px;margin:0;padding:0;border-radius:33px;font-size:35.11px;font-weight:700;line-height:65px;text-align:center;display:block}
  .page-home .help-section{padding-top:96px}

  /* Especialidades da Home e sobreposição correta com a faixa teal */
  .page-home .home-specialties{z-index:0}
  .page-home .home-specialties__card:before{z-index:0}
  .page-home .home-specialties__text h2{font-size:42.689px;line-height:.674;font-weight:800;margin:45px 0 43px}
  .page-home .why-section{position:relative;z-index:5}
  .page-home .instagram-section{position:relative;z-index:6;background:#fff}
  .page-home .decor--ig-left{transform:rotate(180deg) scaleX(-1);transform-origin:center center}

  /* SOBRE — história exatamente em duas colunas */
  .page-about .about-history__grid{width:1105px;margin-left:420px;grid-template-columns:579px 490px;gap:36px;align-items:start}
  .page-about .about-history__photo-frame{width:490px;height:791px;overflow:hidden;margin-top:-22px;justify-self:start}
  .page-about .about-history__photo{position:relative;display:block;max-width:none;width:242.11%;height:100%;left:-120.97%;top:0;object-fit:fill;margin:0}

  /* Valores centralizados no card */
  .page-about .mvv-grid article:nth-child(3){text-align:center}
  .page-about .mvv-grid article:nth-child(3) ul{width:178px;margin:0 auto;padding-left:21px;text-align:left}

  /* Carrossel centralizado no canvas de 1920 */
  .page-about .structure-section .container{width:1210px}
  .page-about .clinic-carousel{width:1432px;margin-left:-111px;margin-right:0;grid-template-columns:50px 1332px 50px}
  .page-about .clinic-carousel__viewport{width:1332px}

  /* CORPO CLÍNICO — 18 médicos atuais do Figma */
  .page-doctors .doctors-section{height:auto!important;padding:0 0 80px!important}
  .page-doctors .doctors-grid{grid-template-columns:repeat(3,370px);column-gap:53px;row-gap:49px;justify-content:start}
  .page-doctors .doctor-card{width:370px;height:527px;border-radius:30px;padding:18px 19px 19px}
  .page-doctors .doctor-card__photo-frame{position:absolute;left:19px;top:18px;width:332px;height:306px;overflow:hidden;border-radius:23px}
  .page-doctors .doctor-card__photo{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center center!important;border-radius:23px!important;margin:0!important;clip-path:none!important}
  .page-doctors .doctor-card__photo--lift{top:-8.52%!important;height:108.5%!important;object-fit:fill!important;border-radius:0!important}
  .page-doctors .doctor-card__name{top:297px}
  .page-doctors .doctor-card__specialty{top:340px}
  .page-doctors .doctor-card__schedule{top:388px}
  .page-doctors .doctor-card:nth-child(n) .doctor-card__name{font-size:25px}

.page-doctors .doctor-card:nth-child(3) .doctor-card__name,
.page-doctors .doctor-card:nth-child(4) .doctor-card__name,
.page-doctors .doctor-card:nth-child(5) .doctor-card__name,
.page-doctors .doctor-card:nth-child(6) .doctor-card__name,
.page-doctors .doctor-card:nth-child(11) .doctor-card__name,
.page-doctors .doctor-card:nth-child(14) .doctor-card__name,
.page-doctors .doctor-card:nth-child(15) .doctor-card__name,
.page-doctors .doctor-card:nth-child(16) .doctor-card__name,
.page-doctors .doctor-card:nth-child(17) .doctor-card__name{
    font-size:21px
}
  .page-doctors .doctor-card:nth-child(7) .doctor-card__specialty{font-size:13.187px}
.page-doctors .doctor-card:nth-child(8) .doctor-card__specialty{font-size:14px}
  /* Contato: ícones sem deformação, dimensões intrínsecas do Figma */
  .page-contact .contact-channels__grid span{width:116px;height:116px;border-radius:50%;display:grid;place-items:center;background:#fff}
  .page-contact .contact-channels__grid>a:nth-child(1) img{width:52.35px;height:52.35px;object-fit:contain}
  .page-contact .contact-channels__grid>a:nth-child(2) img{width:55.9px;height:56px;object-fit:contain}
  .page-contact .contact-channels__grid>a:nth-child(3) img{width:29.05px;height:52.93px;object-fit:contain}
  .page-contact .contact-channels__grid>a:nth-child(4) img{width:58.94px;height:58.46px;object-fit:contain}

  /* Formulário conforme o segundo print / Figma */
  .page-contact .contact-form-section{height:1095px;padding:93px 0 0}
  .page-contact .contact-form-section .container{width:1174px}
  .page-contact .contact-form-wrap{max-width:none}
  .page-contact .contact-form-wrap>h2{font-size:52.529px;line-height:1;margin:0 0 45px;padding-left:15px;border-left:12px solid #389595;font-weight:900;color:#297074}
  .page-contact .contact-form{width:1128px;margin-left:2px;display:grid;grid-template-columns:1fr;gap:34px}
  .page-contact .contact-form>input:not(.hp-field),.page-contact .contact-form>textarea{display:block;width:1128px;border:5px solid #ddd;color:#828282;background:#fff;font-family:'Axiforma',sans-serif;font-size:25.948px;font-weight:350;padding:0 13px;margin:0;outline:none}
  .page-contact .contact-form>input:not(.hp-field){height:76px;border-radius:5px}
  .page-contact .contact-form>textarea{height:421px;border-radius:14px;padding-top:17px;resize:vertical}
  .page-contact .contact-form input::placeholder,.page-contact .contact-form textarea::placeholder{color:#828282;opacity:1}
  .page-contact .contact-form button{width:171px;height:75px;margin:6px 0 0;border-radius:9px;font-size:36.707px;font-weight:350;line-height:1;background:#297074;color:#fff;border:0;justify-self:start}
  .page-contact .form-status{margin:0;min-height:18px}
  .page-contact .location-section>.container{height:231px;padding:31px 0 0}

  /* Rodapé único para TODAS as páginas */
  .site-footer--shared{height:586px!important;position:relative;padding:94px 0 0!important;background:#297074;overflow:hidden}
  .site-footer--shared>.site-footer__grid{position:relative;display:block;width:1920px!important;height:322px;margin:0!important}
  .site-footer--shared .footer-brand{position:absolute;left:516px;top:0;width:123px;margin:0}
  .site-footer--shared .footer-brand>img{width:123px;height:163px;margin:0;object-fit:contain}
  .site-footer--shared .footer-social{position:absolute;left:35px;top:180px;margin:0;gap:8px;width:60px;display:flex}
  .site-footer--shared .footer-social img{width:25px;height:25px;object-fit:contain}
  .site-footer--shared .footer-menu{position:absolute;left:779px;top:0;margin:0;width:220px}
  .site-footer--shared .footer-contact{position:absolute;left:1159px;top:0;margin:0;width:390px}
  .site-footer--shared .footer-menu h2,.site-footer--shared .footer-contact h2{font-size:18.244px;line-height:1.4935;margin:0 0 28px;font-weight:900}
  .site-footer--shared .footer-menu a{font-size:13.485px;line-height:1.4935;margin:0;display:block;font-weight:500}
  .site-footer--shared .footer-contact a{font-size:15.89px;line-height:.994;margin:0 0 17px;max-width:390px;display:block;font-weight:500}
  .site-footer--shared .footer-bottom{position:absolute;left:355px;top:416px;bottom:auto;transform:none;width:1210px!important;height:66px;margin:0;padding:38px 0 0;border-top:1px solid rgba(255,255,255,.75)}
  .site-footer--shared .footer-bottom p{font-size:15.89px;line-height:1;text-align:center;font-weight:500;margin:0}
  .site-footer--shared .footer-bottom strong{font-weight:850}
  .site-footer--shared .footer-accent{position:absolute;left:0;right:0;bottom:0;height:68px;background:#389595}
}

@media (max-width:899px){
  /* Em tablets/celulares o layout deixa de usar o canvas 1920 e preserva legibilidade. */
  .page-home .decor--hero-vector,.page-home .decor--hero-detail{display:none}
  .page-home .home-about__copy .btn-pill{position:static!important;transform:none!important}
  .page-about .mvv-grid article:nth-child(3) ul{width:max-content;max-width:100%;margin-inline:auto;text-align:left}
  .page-about .clinic-carousel{margin-inline:auto}
  .page-doctors .doctors-section{height:auto!important}
  .site-footer--shared{height:auto!important}
}


/* =========================================================
   GIANNAMED — revisão v6
   Correções: SVGs renderizados como PNG, topo proporcional,
   enquadramento exato do hero interno e rodapé legível.
   ========================================================= */
@media (min-width:900px){
  /* Os três ícones do topo passam a ocupar a mesma caixa visual. */
  .internal-page .topbar__actions>a:nth-child(1),
  .internal-page .topbar__actions>a:nth-child(2),
  .internal-page .topbar__actions>a:nth-child(3){width:22px;height:22px;display:grid;place-items:center}
  .internal-page .topbar__actions>a:nth-child(1) img,
  .internal-page .topbar__actions>a:nth-child(2) img,
  .internal-page .topbar__actions>a:nth-child(3) img{width:22px;height:22px;object-fit:contain}

  /* Figma 1920: imagem-fonte 1955.328 x 1097.022 dentro de 1920 x 434.
     Usar as duas dimensões evita o zoom diferente causado por background-size:auto. */
  .internal-page .internal-hero{background-size:1955.328px 1097.022px;background-position:-16.704px -570.319px;background-repeat:no-repeat}
  .page-about .internal-hero{background-size:1955.328px 1097.022px;background-position:-20.352px -339.041px}

  /* Rodapé: mantém a composição original, com leitura proporcional ao restante do site. */
  .site-footer--shared .footer-menu h2,.site-footer--shared .footer-contact h2{font-size:20px;line-height:1.35;margin-bottom:24px}
  .site-footer--shared .footer-menu a{font-size:17px;line-height:1.55;margin:0 0 2px;font-weight:500}
  .site-footer--shared .footer-contact a{font-size:17px;line-height:1.35;margin:0 0 14px;max-width:410px;font-weight:500}
  .site-footer--shared .footer-menu{width:250px}
  .site-footer--shared .footer-contact{width:430px}
}

/* Nunca exibir o ícone visual de imagem quebrada. Em falha remota, a área fica limpa. */
img.asset-safe.is-broken{visibility:hidden}

/* =========================================================
   GIANNAMED — acabamento tipográfico v7
   Ajustes finais conferidos visualmente contra o Figma.
   ========================================================= */
@media (min-width:900px){
  /* Home: o bloco do Figma ocupa ~92px em duas linhas. Mantemos o
     restante da seção no mesmo ponto compensando a margem inferior. */
  .page-home .home-specialties__text h2{
    font-size:42.689px;
    line-height:1.08;
    margin:45px 0 8px;
    font-weight:800;
  }

  /* Sobre / Nossa História: no Figma o corpo tem respiro de leitura
     maior entre linhas e entre parágrafos. */
  .page-about .history-text{
    width:579px;
    font-size:16px;
    line-height:1.35;
    font-weight:400;
  }
  .page-about .history-text p{margin:0 0 27px}
  .page-about .history-text p:last-child{margin-bottom:0}

  /* Sobre / Missão, Visão e Valores: posicionamento tipográfico do Figma. */
  .page-about .mvv-grid article{
    position:relative;
    padding:0;
  }
  .page-about .mvv-grid h2{
    position:absolute;
    left:0;
    top:23px;
    width:100%;
    margin:0;
    font-size:30px;
    line-height:1.2;
    font-weight:700;
    text-align:center;
  }
  .page-about .mvv-grid article:nth-child(1) p,
  .page-about .mvv-grid article:nth-child(2) p{
    position:absolute;
    left:43.5px;
    top:107px;
    width:255px;
    margin:0;
    font-size:16px;
    line-height:1.25;
    font-weight:400;
    text-align:center;
  }
  .page-about .mvv-grid article:nth-child(3) ul{
    position:absolute;
    left:112px;
    top:116px;
    width:160px;
    margin:0;
    padding:0;
    text-align:left;
    list-style-position:outside;
  }
  .page-about .mvv-grid article:nth-child(3) li{
    font-size:16px;
    line-height:1.3051;
    font-weight:400;
  }
}

/* GIANNA HERO LOCAL FIX START */
/* Correcao isolada: usa diretamente os arquivos locais dos banners. */
.page-about .internal-hero{
  background-image:url('../assets/figma/ddf46c6b-e79e-492d-816d-7e020491176d.png') !important;
}
.page-doctors .internal-hero{
  background-image:url('../assets/figma/d6f73c58-5a6d-4a73-96b3-e561cbe71e2c.png') !important;
}
.page-specialties .internal-hero{
  background-image:url('../assets/figma/e548ac79-4fd0-4770-96ab-7c885f658a28.png') !important;
}
.page-contact .internal-hero{
  background-image:url('../assets/figma/474d7d11-a476-44da-b1a5-5760ad4fb586.png') !important;
}
/* GIANNA HERO LOCAL FIX END */

/* ==========================================================
   CARROSSEL DE BANNERS — HOME
   ========================================================== */

.home-banner-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 1920 / 806;
    overflow: hidden;
    background: #fff;
}

.home-banner-slide {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .8s ease;
}

.home-banner-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.home-banner-slide picture,
.home-banner-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

.home-banner-slide img {
    object-fit: cover;
}

.home-banner-dots {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 20px;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
}

.home-banner-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
}

.home-banner-dot.is-active {
    background: #fff;
}

@media (max-width: 768px) {

    .home-banner-carousel {
        aspect-ratio: 1080 / 1350;
    }

    .home-banner-dots {
        bottom: 12px;
    }

}

/* SETAS DO CARROSSEL DA HOME */

.home-banner-arrow {
    position: absolute;
    z-index: 20;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(41, 112, 116, 0.85);
    color: #fff;
    font-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.home-banner-arrow--prev {
    left: 25px;
}

.home-banner-arrow--next {
    right: 25px;
}

@media (max-width: 768px) {

    .home-banner-arrow {
        width: 38px;
        height: 38px;
        font-size: 30px;
    }

    .home-banner-arrow--prev {
        left: 10px;
    }

    .home-banner-arrow--next {
        right: 10px;
    }
}
/* ==========================================================
   AJUSTES EXCLUSIVOS MOBILE — GIANNA MED
   Desktop não é alterado
   ========================================================== */

@media (max-width: 767px) {

    /* 1. HOME — Instagram sem elementos decorativos em volta */
    .page-home .instagram-section--home .decor--ig-left,
    .page-home .instagram-section--home .decor--ig-right {
        display: none !important;
    }

    .page-home .instagram-section--home {
        background: #fff !important;
        padding: 45px 0 !important;
        overflow: hidden !important;
    }


    /* 2. RODAPÉ — tamanho correto dos ícones Facebook e Instagram */
    .site-footer--shared .footer-social {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .site-footer--shared .footer-social a {
        width: 28px !important;
        height: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .site-footer--shared .footer-social img {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }


    /* 3. SOBRE — remove as bolas decorativas somente no mobile */
    .page-about .about-history::before,
    .page-about .about-history::after {
        display: none !important;
        content: none !important;
    }


    /* 4. CORPO CLÍNICO — remove as bolas do texto */
    .page-doctors .doctors-intro::before,
    .page-doctors .doctors-intro::after {
        display: none !important;
        content: none !important;
    }

    /* Especialidade deve ficar na frente do nome do médico */
    .page-doctors .doctor-card__name {
        position: relative !important;
        z-index: 3 !important;
    }

    .page-doctors .doctor-card__specialty {
        position: relative !important;
        z-index: 4 !important;
    }


    /* 5. ESPECIALIDADES — remove as bolas do texto */
    .page-specialties .specialties-intro::before,
    .page-specialties .specialties-intro::after {
        display: none !important;
        content: none !important;
    }


    /* 6. CONTATO — Facebook mantém a proporção correta */
    .page-contact .contact-channels__grid > a:nth-child(3) img {
        width: auto !important;
        height: 43px !important;
        max-width: 43px !important;
        object-fit: contain !important;
    }

}

/* ESPECIALIDADES COM DUAS LINHAS — DESKTOP E MOBILE */

.page-doctors .doctor-card__specialty--multiline {
    height: auto !important;
    min-height: 42px !important;
    padding: 4px 14px !important;

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

    text-align: center !important;
    white-space: normal !important;
    line-height: 1.05 !important;

    box-sizing: border-box !important;
    z-index: 5 !important;

    border-radius: 999px !important;
}

@media (max-width: 767px) {

    .page-doctors .doctor-card__specialty--multiline {
        min-height: 46px !important;
        padding: 5px 12px !important;
        line-height: 1.05 !important;
    }

}

/* AJUSTE PARA ESPECIALIDADES LONGAS */
.page-doctors .doctor-card__specialty--small {
    width: 76% !important;
    min-height: 42px !important;
    padding: 4px 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;

    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.02 !important;
    white-space: normal !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 999px !important;
}

@media (max-width: 767px) {
    .page-doctors .doctor-card__specialty--small {
        width: 80% !important;
        min-height: 48px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        line-height: 1.02 !important;
    }
}

/* AJUSTE SOMENTE DR. TYAGO */
.page-doctors .doctor-card__specialty--tyago {
    width: 60% !important;
    height: 42px !important;
    min-height: 42px !important;

    padding: 4px 10px !important;

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

    text-align: center !important;
    white-space: normal !important;

    font-size: 13px !important;
    line-height: 1.05 !important;

    box-sizing: border-box !important;
    border-radius: 999px !important;

    position: absolute !important;
    left: 50% !important;
    transform: translate(-50%, -6px) !important;

    z-index: 6 !important;
}

/* =========================================================
   AJUSTES MOBILE — DR. DIEGO E DR. TYAGO
   NÃO ALTERA DESKTOP
   ========================================================= */

@media (max-width: 767px) {

    /* DIEGO — sobe um pouco o botão para ficar dentro do card */
    .page-doctors .doctor-card--diego a[href*="wa.me"] {
        translate: 0 -14px !important;
    }


.page-doctors .doctor-card__specialty--tyago {
    width: 65% !important;
    height: 42px !important;
    min-height: 42px !important;

    padding: 3px 8px !important;

    font-size: 13px !important;
    line-height: 1.05 !important;

    text-align: center !important;
    white-space: normal !important;

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

    border-radius: 999px !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {

    .page-doctors .doctor-card:has(.doctor-card__specialty--tyago) a[href*="wa.me"] {
        translate: 0 55px !important;
        z-index: 7 !important;
    }

}
}

/* =========================================================
   INSTAGRAM - HOME
   Feed dinâmico Gianna Med
   ========================================================= */

.page-home [data-instagram-feed] {
    width: min(1180px, calc(100% - 80px));
    margin: 28px auto 0;
}

.page-home .instagram-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;

    width: 100%;
    margin: 0 auto;
}

.page-home .instagram-grid > a {
    position: relative;
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;
    border-radius: 18px;

    background: #f3f7f7;

    box-shadow:
        0 4px 14px rgba(41, 112, 116, 0.08),
        0 12px 32px rgba(41, 112, 116, 0.06);

    transform: translateZ(0);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.page-home .instagram-grid > a img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.45s ease;
}

/* Overlay discreto */
.page-home .instagram-grid > a::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 2;

    background: linear-gradient(
        to top,
        rgba(41, 112, 116, 0.34) 0%,
        rgba(41, 112, 116, 0.02) 48%,
        rgba(41, 112, 116, 0) 70%
    );

    opacity: 0;
    transition: opacity 0.35s ease;

    pointer-events: none;
}

/* Indicador de clique */
.page-home .instagram-grid > a::after {
    content: "↗";

    position: absolute;
    right: 14px;
    bottom: 14px;

    z-index: 3;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);
    color: #297074;

    font-size: 20px;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    pointer-events: none;
}

.page-home .instagram-grid > a:hover {
    transform: translateY(-5px);

    box-shadow:
        0 8px 20px rgba(41, 112, 116, 0.12),
        0 18px 40px rgba(41, 112, 116, 0.10);
}

.page-home .instagram-grid > a:hover img {
    transform: scale(1.045);
}

.page-home .instagram-grid > a:hover::before {
    opacity: 1;
}

.page-home .instagram-grid > a:hover::after {
    opacity: 1;
    transform: translateY(0);
}


/* TABLET */
@media (max-width: 1100px) {

    .page-home [data-instagram-feed] {
        width: min(900px, calc(100% - 48px));
    }

    .page-home .instagram-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

}


/* MOBILE */
@media (max-width: 767px) {

    .page-home [data-instagram-feed] {
        width: calc(100% - 30px);
        margin-top: 22px;
    }

    .page-home .instagram-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .page-home .instagram-grid > a {
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(41, 112, 116, 0.08);
    }

    .page-home .instagram-grid > a::before,
    .page-home .instagram-grid > a::after {
        display: none;
    }

    .page-home .instagram-grid > a:hover {
        transform: none;
    }

    .page-home .instagram-grid > a:hover img {
        transform: none;
    }

}

/* =========================================================
   INSTAGRAM - HOME + SOBRE
   Feed dinâmico Gianna Med
   ========================================================= */

:is(.page-home, .page-about) [data-instagram-feed] {
    width: min(1180px, calc(100% - 80px));
    margin: 28px auto 0;
}

:is(.page-home, .page-about) .instagram-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;

    width: 100%;
    margin: 0 auto;
}

:is(.page-home, .page-about) .instagram-grid > a {
    position: relative;
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;
    border-radius: 18px;

    background: #f3f7f7;

    box-shadow:
        0 4px 14px rgba(41, 112, 116, 0.08),
        0 12px 32px rgba(41, 112, 116, 0.06);

    transform: translateZ(0);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

:is(.page-home, .page-about) .instagram-grid > a img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.45s ease;
}

:is(.page-home, .page-about) .instagram-grid > a::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        to top,
        rgba(41, 112, 116, 0.34) 0%,
        rgba(41, 112, 116, 0.02) 48%,
        rgba(41, 112, 116, 0) 70%
    );

    opacity: 0;
    transition: opacity 0.35s ease;

    pointer-events: none;
}

:is(.page-home, .page-about) .instagram-grid > a::after {
    content: "↗";

    position: absolute;
    right: 14px;
    bottom: 14px;

    z-index: 3;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);
    color: #297074;

    font-size: 20px;
    font-weight: 700;
    line-height: 1;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    pointer-events: none;
}

:is(.page-home, .page-about) .instagram-grid > a:hover {
    transform: translateY(-5px);

    box-shadow:
        0 8px 20px rgba(41, 112, 116, 0.12),
        0 18px 40px rgba(41, 112, 116, 0.10);
}

:is(.page-home, .page-about) .instagram-grid > a:hover img {
    transform: scale(1.045);
}

:is(.page-home, .page-about) .instagram-grid > a:hover::before {
    opacity: 1;
}

:is(.page-home, .page-about) .instagram-grid > a:hover::after {
    opacity: 1;
    transform: translateY(0);
}


/* TABLET */

@media (max-width: 1100px) {

    :is(.page-home, .page-about) [data-instagram-feed] {
        width: min(900px, calc(100% - 48px));
    }

    :is(.page-home, .page-about) .instagram-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

}


/* MOBILE */

@media (max-width: 767px) {

    :is(.page-home, .page-about) [data-instagram-feed] {
        width: calc(100% - 30px);
        margin-top: 22px;
    }

    :is(.page-home, .page-about) .instagram-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    :is(.page-home, .page-about) .instagram-grid > a {
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(41, 112, 116, 0.08);
    }

    :is(.page-home, .page-about) .instagram-grid > a::before,
    :is(.page-home, .page-about) .instagram-grid > a::after {
        display: none;
    }

    :is(.page-home, .page-about) .instagram-grid > a:hover {
        transform: none;
    }

    :is(.page-home, .page-about) .instagram-grid > a:hover img {
        transform: none;
    }

}