/* Ajustes de responsividade (cópia site-mobile). Carregado depois de mobile-responsive.css */

/* ---------- Barra de rolagem fina e minimalista (todas as larguras) ---------- */
/* Firefox e navegadores sem ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(40, 38, 34, 0.32) transparent;
  }
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(40, 38, 34, 0.32);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(40, 38, 34, 0.55); background-clip: padding-box; }

@media (max-width: 760px) {
  /* A janela volta a ser quem rola (antes era o body). Assim o menu fixo
     não cobre a barra de rolagem e o scrollY funciona (nome Aline Angela ao rolar). */
  html { overflow-x: hidden; }
  body { overflow: visible !important; height: auto !important; }

  /* rótulos verticais legíveis */
  h2[style*="rotate(-90deg)"] {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }

  /* ---------- Menu mobile em vidro fosco (glassmorphism) ---------- */
  .mobile-menu-overlay {
    background: linear-gradient(180deg, rgba(34, 32, 29, 0.42) 0%, rgba(34, 32, 29, 0.30) 100%) !important;
    backdrop-filter: blur(26px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  }
  .mobile-menu-overlay a,
  .mobile-menu-overlay .mobile-menu-link {
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
  }
  .mobile-menu-overlay .mobile-menu-close { color: rgba(255, 255, 255, 0.9) !important; border-color: rgba(255, 255, 255, 0.75) !important; }
}

@media (max-width: 400px) {
  /* filtros do blog: 3 por linha sem encostar nos separadores */
  .strip-cat {
    font-size: 10px !important;
    letter-spacing: 0.04em !important;
  }
  .strip-track {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 760px) {
  /* setas do carrossel com área de toque confortável */
  .blog-section .carousel-arrow {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
    margin-top: 10px !important;
  }
}

/* =====================================================================
   HOME (celular)
   ===================================================================== */
@media (max-width: 760px) {

  /* ---------- WHY: pilha centralizada, mesma lógica de What e Who ---------- */
  section:has(.why-group) {
    height: auto !important;
    min-height: 0 !important;
  }
  section:has(.why-group) > div:last-child {
    height: auto !important;
    padding: 104px 28px 88px !important;
    gap: 40px !important;
  }
  .why-group {
    width: 100% !important;
    max-width: 320px !important;
    gap: 28px !important;
  }
  .why-copy {
    width: 100% !important;
    gap: 20px !important;
  }
  .why-copy br { display: none; }
  .why-copy p,
  .why-group p:not(.why-title) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    text-align: center !important;
    text-wrap: balance;
  }
  section:has(.why-group) > div:last-child > div[style*="height: 1px"] {
    width: 100% !important;
    max-width: 320px !important;
  }
  .work-links-stack {
    gap: 4px !important;
    font-size: 15px !important;
    letter-spacing: 0.16em !important;
  }
  .work-links-stack a {
    display: block;
    padding: 10px 14px;
  }

  /* ---------- WHO: respiro entre foto e título, texto ocupa a largura ---------- */
  .home-who-section {
    padding: 84px 28px 80px 36px !important;
  }
  .home-who-section .who-grid {
    width: 100% !important;
    max-width: 380px !important;
    gap: 44px !important;
  }
  .home-who-section .who-photo-frame {
    width: 100% !important;
  }
  .home-who-section .who-title-block-mobile {
    gap: 26px !important;
  }
  .home-who-section .who-title-mobile {
    margin-top: 6px !important;
  }
  .home-who-section .who-text-col {
    width: 100% !important;
    max-width: 100% !important;
  }
  .home-who-section .who-text-block p {
    font-size: 15px !important;
    line-height: 1.68 !important;
    text-wrap: pretty;
  }

  /* ---------- Filtros de categoria: sem espaço sobrando ---------- */
  div:has(> .strip-track) {
    min-height: 0 !important;
    height: auto !important;
  }
  .strip-track {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  /* ---------- BLOG: rótulo vertical igual aos outros h2 ---------- */
  .blog-section {
    margin-top: 0 !important;
  }
  .blog-section .blog-section-label-wrap {
    display: block !important;
    left: 0 !important;
  }
  .blog-section .blog-mobile-label {
    display: none !important;
  }
  .blog-section .blog-mobile-layout {
    padding: 0 !important;
  }
}

/* =====================================================================
   SOBRE (celular)
   ===================================================================== */
@media (max-width: 760px) {

  /* ---------- 2ª seção (Who): polaroid, título e texto em pilha ---------- */
  .sobre-who-section {
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 36px !important;
    padding: 96px 28px 84px !important;
  }
  .sobre-who-section .who-cluster {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: none !important;
    width: 300px !important;
    height: 370px !important;
    margin: 0 0 40px !important;
  }
  .sobre-who-section .sobre-who-col {
    max-width: 100% !important;
    gap: 26px !important;
  }
  .sobre-who-section .sobre-who-title {
    font-size: clamp(84px, 25vw, 112px) !important;
    line-height: 0.8 !important;
    max-width: none !important;
  }
  .sobre-who-section .sobre-who-text {
    max-width: 100% !important;
    width: 100% !important;
  }
  .sobre-who-section .sobre-who-text p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
    text-align: left !important;
    text-wrap: pretty;
  }

  /* ---------- "Conheça a criadora": texto e foto na mesma coluna ---------- */
  section.about-split-section .about-split-label {
    left: 0 !important;
  }
  section.about-split-section {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
  }
  section.about-split-section .about-split-copy {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    padding: 72px 0 40px !important;
  }
  section.about-split-section .about-split-copy-inner {
    max-width: 100% !important;
    width: 100% !important;
  }
  .about-split-section .about-split-copy-inner p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
    text-align: left !important;
    text-wrap: pretty;
  }
  section.about-split-section .about-split-media {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 0 0 72px !important;
    overflow: visible !important;
  }
  section.about-split-section .about-split-media img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

@media (max-width: 359px) {
  .sobre-who-section .who-cluster {
    transform: scale(0.82) !important;
    transform-origin: top center !important;
    margin-bottom: 0 !important;
  }
}

/* =====================================================================
   NOME "Aline Angela" no hero (celular): mesma posição final na Home e na Sobre,
   sempre inteiro visível depois que sobe
   ===================================================================== */
@media (max-width: 760px) {
  .sobre-page .hero-name-wrap {
    height: 54% !important;
    bottom: 0 !important;
    align-items: flex-end !important;
    overflow: visible !important;
  }
  .sobre-page .hero-name-mobile {
    margin-bottom: clamp(22px, 3.6vh, 34px) !important;
  }

  /* ---------- SOBRE: parágrafos justificados de ponta a ponta ---------- */
  .sobre-who-section .sobre-who-text p,
  .about-split-section .about-split-copy-inner p {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: wrap;
  }

  /* ---------- SOBRE: em "Conheça a criadora" a foto vem antes do texto ---------- */
  section.about-split-section .about-split-media {
    order: -1 !important;
    padding: 72px 0 40px !important;
  }
  section.about-split-section .about-split-copy {
    order: 1 !important;
    padding: 0 0 72px !important;
  }
}

/* SOBRE (celular): sem a linha entre o texto de "Who" e a foto */
@media (max-width: 760px) {
  section.about-split-section {
    border-top: 0 !important;
  }
}

/* BLOG (celular): textura de fundo mais sutil, com transparência sobre o creme da página */
@media (max-width: 760px) {
  .blog-section {
    background: #f6f1e6 !important;
  }
  .blog-section > div[style*="background-image"] {
    opacity: 0.4;
  }
}

/* BLOG (celular): tracejado dos "LER MAIS" mais fino */
@media (max-width: 760px) {
  .blog-section .tab-btn {
    border-right-width: 1px !important;
  }
  .blog-section [style*="border-bottom: 2px dashed"] {
    border-bottom-width: 1px !important;
  }
}

/* HOME · Who (celular): parágrafos justificados de ponta a ponta */
@media (max-width: 760px) {
  .home-who-section .who-text-block p {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* HOME · Who (celular): título exatamente no meio entre a foto e o parágrafo
   (o desenho da letra se estende acima da caixa, por isso o deslocamento em em) */
@media (max-width: 760px) {
  .home-who-section .who-grid {
    gap: 16px !important;
  }
  .home-who-section .who-title-mobile {
    margin-top: 0.565em !important;
    margin-bottom: 0 !important;
  }
}

/* Rodapé mobile B · centralizado */
@media (max-width:560px){
.aa-ft .aa-ft-head{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;row-gap:0!important;margin-bottom:0!important}
.aa-ft .aa-ft-p{text-align:center!important}
.aa-ft .aa-ft-head>div:last-child{display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important}
.aa-ft .aa-ft-head>div:last-child>div:last-child{order:1;margin:14px 0 22px}
.aa-ft .aa-ft-head>div:last-child>div:first-child{order:2;gap:22px!important;margin-bottom:34px;padding-top:0!important}
.aa-ft .aa-ft-ic{width:22px!important;height:22px!important}
.aa-ft .aa-ft-nav{column-gap:24px!important}
.aa-ft .aa-ft-l{justify-content:center!important;padding:18px 0!important;font-size:12px!important}
.aa-ft .aa-ft-c{text-align:center!important;font-size:10px!important}
}

/* Efeito de entrada embaçada nas frases em P22 Dearest */
@keyframes aa-blur-in{from{opacity:0;filter:blur(18px)}to{opacity:1;filter:blur(0)}}
[style*="P22 Dearest"]{animation:aa-blur-in 1.4s ease-out backwards}
@media (max-width:760px){
.favorites-title{font-size:clamp(84px,25vw,112px)!important;line-height:.9!important}
#cap-head{position:static!important;transform:none!important;left:auto!important;top:auto!important;width:100%!important;order:-1;margin:0!important}
.sobre-who-section{gap:28px!important}
.sobre-who-section .who-cluster .who-msg{position:absolute!important;left:0!important;right:auto!important;top:392px!important;width:300px!important;white-space:normal!important;text-align:left!important}
.sobre-who-section .who-cluster{margin-bottom:170px!important}
.pf-h2{line-height:.98!important;letter-spacing:-.02em!important}
.pf-col p{max-width:none!important;width:100%!important}
.pf-col .who-cta{width:auto!important}
#cx{padding:0!important;max-width:none!important;width:100%!important}
#cx-ctx{left:24px!important;right:24px!important;width:auto!important;top:15%!important;text-align:center}
#cx-pad{left:0!important;right:0!important;margin:0 auto!important;top:52.5%!important;height:auto!important;width:min(98vw,calc(76vh*.6607))!important;max-width:none!important;will-change:auto!important}
#cx-pt{left:19.5%!important;top:28%!important;right:12%!important;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
#cx-pt h3{font-size:clamp(13px,4.1vw,18px)!important;line-height:1.2!important}
#cx-pt p{font-size:clamp(15px,4.7vw,20px)!important;line-height:1.4!important;margin-top:12px!important}
#cx-nb{width:88vw!important}
#cx-t1{left:12%!important;width:76%!important;top:15%!important}
#cx-t2,#cx-t3{display:none!important}
#cx-rust,#cx-mo{display:block!important}
#cx-mo{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
#cx-mo h3{font-size:14px!important;line-height:1.2!important;max-width:none!important}
}

.sobre-who-section{border:0!important}
section.about-split-section{border-top:0!important}
@media (max-width:760px){
section[aria-label="Quem sou eu"]{padding:0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow-x:hidden}
.about-b-grid{padding:20vh 24px 24vh!important}
.about-b-grid .about-block{justify-content:center!important;min-height:78vh!important}
.about-b-grid .about-block>div{max-width:100%!important;width:100%}
}

@media (max-width:760px){
::-webkit-scrollbar{width:2px;height:2px}
::-webkit-scrollbar-thumb{background:rgba(40,38,34,.4);border:0}
html{scrollbar-width:thin}
}
@media (max-width:760px){
.case-shell{width:100%!important}
.case-study{width:min(300px,calc(100vw - 56px))!important;display:flex!important;flex-direction:column!important;gap:64px!important}
.case-left-col,.case-mid-col,.case-right-col{display:flex!important;flex-direction:column!important;gap:22px!important;width:100%!important}
.case-mid-col{order:1}.case-left-col{order:2}.case-right-col{order:3;gap:64px!important}
.case-photo-tall,.case-photo-mid,.case-photo-wide{display:block!important;width:100%!important;height:auto!important}
.case-photo-tall{aspect-ratio:9/16}.case-photo-mid{aspect-ratio:3/4;order:1!important}.case-photo-wide{aspect-ratio:4/3}
.case-top-copy{order:2!important;width:100%!important;height:auto!important;padding:0!important}
.case-right-col .case-col-copy{margin-top:-42px!important}
.case-bottom-copy{display:none!important}
}
@media (max-width:760px){
html .mobile-menu-overlay{background:#5E7389!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;align-items:center!important;justify-content:center!important;gap:0!important;overflow-y:auto}
html .mobile-menu-overlay .mobile-menu-link{font-family:Figtree,Inter,Arial,sans-serif!important;color:#F4F2E5!important;text-align:center!important;text-shadow:none!important;display:block!important}
html .mobile-menu-overlay a.nav-trigger[style*="font-size: 18px"]:not([href^="Sobre"]){font-size:19px!important;font-weight:500!important;letter-spacing:.06em!important;padding:16px 48px!important}
html .mobile-menu-overlay a.nav-trigger[href^="Sobre"],html .mobile-menu-overlay span.nav-trigger{font-size:13px!important;font-weight:500!important;letter-spacing:.08em!important;text-transform:none!important;opacity:.6;pointer-events:none!important;padding:8px 0!important;margin-top:20px!important}
html .mobile-menu-overlay a.mobile-menu-link[style*="font-size: 13px"]{font-size:19px!important;font-weight:500!important;letter-spacing:.06em!important;padding:16px 48px!important}
html .mobile-menu-overlay a.mobile-menu-link:hover,html .mobile-menu-overlay a.mobile-menu-link:active{color:#F9E79B!important}
}

@media (max-width:760px){
#pf-next{padding-left:0!important;padding-right:0!important}
.about-b-grid p{width:100%!important;max-width:100%!important;margin:0!important}
.about-b-grid h3{margin:0 0 6px!important}
}

@media (max-width:760px){
.who-cta,.btn.ghost{font-size:13px!important;padding:14px 32px!important;letter-spacing:.14em!important;min-height:0!important}
#pf-next{padding-bottom:48px!important}
}

@media (min-width:761px){#cx-pt{top:27%!important;text-align:center}}
.m-only{display:none}.who-x{display:none}.who-msg-b{pointer-events:none}
@media (max-width:760px){
.d-only{display:none!important}.m-only{display:inline!important}
.what-results-area{width:min(calc(100vw - 20px),336px)!important;max-width:none!important}
html body .sobre-who-section{padding-top:84px!important;min-height:0!important}
#cap-head p{white-space:nowrap!important;width:auto!important;max-width:none!important}
.who-msg:not(.who-msg-b)>span:first-child{display:block;position:relative;background:#F4F2E5;border-radius:14px;box-shadow:0 8px 28px rgba(40,32,22,.14),0 1px 4px rgba(40,32,22,.08);padding:16px 40px 16px 18px}
.who-msg-b>span:first-child{display:block;padding:16px 40px 16px 18px}
.who-x{display:flex;position:absolute;top:8px;right:8px;width:28px;height:28px;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:pointer;pointer-events:auto;color:oklch(0.4 0.01 260)}
section.about-split-section .about-split-media{width:100vw!important;margin:0 0 0 calc(50% - 50vw)!important;height:auto!important;min-height:0!important;padding:0!important;position:sticky!important;top:0!important;z-index:3!important;-webkit-mask-image:linear-gradient(to bottom,#000 25vh,transparent 52vh)!important;mask-image:linear-gradient(to bottom,#000 25vh,transparent 52vh)!important;order:-1!important;overflow:hidden!important;background:transparent}
section.about-split-section .about-split-media img{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;display:block!important}
}

@media (max-width:760px){
section .about-b-grid .about-block div p[style]{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
section .about-b-grid .about-block div{align-items:stretch!important}
section .about-b-grid .about-block h3{margin-left:0!important;padding-left:0!important}
}

@media (min-width:350px) and (max-width:365px){.what-results-area{width:318px!important}}

@media (max-width:760px){.work-links-stack{gap:14px!important}}

@media (max-width:760px){
.who-msg span[style*="#5E7389"]{display:none!important}
#cap-head p{text-align:center!important}
}

@media (min-width:761px){section.about-split-section{border-top:1px solid oklch(0.4 0.01 260 / .35)!important}}

@media (max-width:760px){
.sobre-who-section .who-cluster .who-msg-ekos{width:max-content!important;white-space:nowrap!important}
.who-msg-ekos>span:first-child{font-size:14px!important;padding-right:38px!important}
}

@media (max-width:760px){
.pf-hero{max-width:none!important;width:100%!important}
.pf-col{width:100%!important}
section .pf-col div p[style]{width:100%!important;max-width:none!important;margin:0!important;text-align:justify!important;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.pf-col p br{display:none}
.pf-col .who-cta{width:100%!important;box-sizing:border-box!important}
}
@media (min-width:411px) and (max-width:760px){
section .pf-col div p[style]{font-size:16px!important;line-height:1.65!important}
}