/* Local candidate: requested sections and opening typography. */ @font-face{font-family:MiiaNunito;src:url('assets/miia-nunito.woff2') format('woff2'),url('assets/miia-nunito.ttf') format('truetype');font-weight:200 1000;font-display:swap} @font-face{font-family:MiiaFredoka;src:url('assets/miia-fredoka.woff2') format('woff2'),url('assets/miia-fredoka.ttf') format('truetype');font-weight:300 700;font-display:swap} body.home-page{font-family:MiiaNunito,Arial,sans-serif} .home-page h1,.home-page h2,.home-page h3{font-family:MiiaFredoka,MiiaNunito,sans-serif;font-weight:500;letter-spacing:-.025em} .home-page .video-hero #hero-title em{font-weight:600} .home-page .video-hero>.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--muted)} .home-page .video-hero #hero-title{font-size:clamp(28px,3.3vw,46px);font-weight:500;line-height:1.25;letter-spacing:-1.2px;margin:20px 20px 28px} .home-page .video-hero #hero-title em{display:inline-block;font-size:clamp(40px,5.1vw,72px);font-weight:850;line-height:1.08;letter-spacing:-2px;margin-top:5px;color:var(--blue)} @media(max-width:600px){ .video-hero{padding-top:32px} .home-page .video-hero>.eyebrow{font-size:12px;letter-spacing:2px;margin-bottom:8px} .home-page .video-hero #hero-title{font-size:clamp(24px,6.5vw,34px);line-height:1.25;letter-spacing:-.7px;margin:22px 16px 22px} .home-page .video-hero #hero-title em{font-size:clamp(32px,8.6vw,48px);letter-spacing:-1.2px;line-height:1.1;margin-top:6px} .hero-mobile-description{display:block;max-width:340px;margin:0 auto 28px;padding:0 16px;color:var(--muted);font-size:14px;line-height:1.55} .home-page .video-stage{height:305px;transform:translateY(-5px)} .home-page .video-hero .hero-actions{padding:16px 20px 40px;gap:14px;margin:0 12px} .home-page .video-hero .hero-actions .button{min-height:48px;padding:13px 22px;font-size:13.5px} .home-page .video-hero .hero-actions .text-link{font-size:12.5px;min-height:32px;padding:2px 0} } #historias .portfolio-heading{grid-template-columns:1.35fr 1fr;gap:16px 60px;align-items:end;margin-bottom:30px} #historias .portfolio-heading .section-label{grid-column:1/-1;padding:0} #historias .portfolio-heading h2{font-size:clamp(38px,4vw,58px);line-height:1.08;max-width:740px} #historias .portfolio-heading p{font-size:18px;line-height:1.6;max-width:440px;padding-bottom:4px} #historias .story-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 36px;margin-bottom:54px} #historias .story-index a{padding:18px 0;min-height:86px;gap:14px;align-items:center;border-top:1px solid var(--line)} #historias .story-index .story-choice{display:flex;flex-direction:column;gap:6px;font-size:inherit;color:var(--ink);width:auto;letter-spacing:0} #historias .story-choice strong{font-size:22px;font-weight:750;line-height:1.2;letter-spacing:-.5px} #historias .story-choice small{font-size:14px;color:var(--muted);line-height:1.45} #historias .story-index b{font-size:24px;flex-shrink:0} #historias .story-index a:hover strong{color:var(--blue)} #fases{max-width:1840px;margin:0 auto;padding:56px 4% 0;scroll-margin-top:24px;border-top:1px solid var(--line)} #historias{border-top:1px solid var(--line);margin-top:84px;padding-top:72px} #fases .phases-header{grid-template-columns:1.15fr 1fr;gap:60px;align-items:end;margin-bottom:38px} #fases .phases-header-intro h2{font-size:clamp(42px,4vw,68px);line-height:1.06;letter-spacing:-2px;margin-top:14px} #fases .phases-header-lead{font-size:20px;line-height:1.6;max-width:650px;margin-bottom:4px} #fases .phases-timeline-wrapper{position:relative;margin:0 0 50px;padding:0;overflow:visible} #fases .phases-timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;min-width:0;gap:20px;align-items:stretch;position:relative;inset:auto;margin:0;padding:0;background:transparent;box-shadow:none;border:0;border-radius:0;z-index:auto} #fases .phases-timeline-track,#fases .phase-node-indicator{display:none} #fases .phase-node{min-width:0;padding:0 0 16px;min-height:0;display:flex;flex-direction:column;align-items:start;text-align:left;gap:14px;border-bottom:2px solid var(--line);background:transparent;transform:none;color:var(--ink);cursor:pointer;transition:border-color .2s ease,transform .2s ease} #fases .phase-node:hover{border-bottom-color:var(--blue)} #fases .phase-node.active{border-bottom:3px solid var(--blue)} #fases .phase-node:focus-visible{outline:2px solid var(--blue);outline-offset:5px;box-shadow:none;border-radius:12px} #fases .phase-node-icon{display:flex;align-items:center;justify-content:center;width:100%;height:120px;margin:0;opacity:1;filter:none;transform:none} #fases .phase-node-icon img{display:block;width:112px;height:112px;max-width:100%;object-fit:contain;filter:none;transition:transform .24s cubic-bezier(.2,.8,.2,1)} #fases .phase-node:hover .phase-node-icon img{transform:scale(1.06) translateY(-2px)} #fases .phase-node.active .phase-node-icon img{transform:scale(1.04)} #fases .phase-node-meta{align-self:center;text-align:center;justify-content:center} #fases .phase-node-meta{display:flex;flex-direction:row;gap:10px;align-items:baseline;max-width:none} #fases .phase-node-num{font-size:12px;font-weight:700;letter-spacing:0;color:var(--muted);flex-shrink:0} #fases .phase-node-title{font-size:18px;line-height:1.3;font-weight:650;color:var(--ink)} #fases .phase-node.active .phase-node-title,#fases .phase-node.active .phase-node-num{color:var(--blue);font-weight:800} #fases .phases-stage{min-height:0;padding:0} #fases .phase-folio{grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;padding:0} #fases .phase-folio-artwork{grid-column:1;grid-row:1;order:0} #fases .phase-folio-narrative{grid-column:2;grid-row:1;order:1;max-width:650px;padding:0} #fases .phase-artwork-card{margin:0;border-radius:20px;box-shadow:none;background:transparent;overflow:hidden} #fases .phase-artwork-media{aspect-ratio:auto;overflow:hidden} #fases .phase-artwork-media img{display:block;width:100%;height:auto;object-fit:contain;transform:none;border-radius:20px} #fases .phase-artwork-card:hover .phase-artwork-media img{transform:none} #fases .phase-artwork-caption{display:none} #fases .phase-folio-meta{flex-wrap:wrap;gap:8px 10px;margin-bottom:18px;letter-spacing:.04em;line-height:1.5;font-size:12px} #fases .phase-folio-category{color:var(--muted)} #fases .phase-folio-title{font-size:clamp(38px,3.3vw,56px);line-height:1.08;letter-spacing:-1.5px;margin-bottom:18px} #fases .phase-folio-hook{font-size:25px;line-height:1.4;margin-bottom:24px;color:var(--ink)} #fases .phase-folio-desc{font-size:20px;line-height:1.65;margin-bottom:20px;color:var(--muted)} #fases .phase-folio-note{font-size:15px;line-height:1.6;border:0;padding:0;margin-bottom:28px;align-items:start} #fases .phase-folio-actions{gap:12px 24px} #fases .phase-folio-actions .button{font-size:17px;min-height:58px;padding:17px 27px} #fases .phase-folio-actions .text-link{font-size:16px;min-height:44px} /* Natural image height preserves the entire frame at every viewport width. */ .atelier-adventure{position:relative;isolation:isolate;overflow:hidden;margin-top:100px;background:#14251d;color:#fff;scroll-margin-top:0} .atelier-adventure .adventure-image{display:block;width:100%;height:auto;object-fit:contain;aspect-ratio:1600/1073} .atelier-adventure::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(9,24,19,.7),rgba(9,24,19,.03) 60%);pointer-events:none} .atelier-adventure .adventure-copy{position:absolute;z-index:1;left:5%;top:50%;transform:translateY(-50%);max-width:600px} .atelier-adventure .adventure-label{font-size:14px;letter-spacing:.05em;text-transform:uppercase;font-weight:800} .atelier-adventure h2{font-size:clamp(58px,7vw,104px);font-weight:750;line-height:1.04;letter-spacing:-3px;margin:30px 0 40px;color:#fff} .atelier-adventure h2 em{font-family:inherit;font-weight:750;color:#f1f4b8;font-style:italic} .atelier-adventure .adventure-button{background:var(--paper);color:var(--ink);font-size:18px;min-height:64px;padding:18px 30px;gap:32px} .atelier-adventure .adventure-button:hover{background:#fff} .atelier-adventure .adventure-note{position:absolute;z-index:1;right:5%;bottom:32px;margin:0;font-size:17px;line-height:1.5;text-align:right;text-shadow:0 1px 10px #000} @media(max-width:1400px){ #fases .phases-timeline{gap:14px} #fases .phase-node-title{font-size:16px} #fases .phase-folio{gap:44px} #fases .phase-folio-hook{font-size:22px} #fases .phase-folio-desc{font-size:18px} #fases .phase-folio-note{font-size:14px} #fases .phase-folio-actions .button{font-size:16px} #fases .phase-folio-actions .text-link{font-size:15px} } @media(max-width:980px){ #historias .portfolio-heading{grid-template-columns:1fr;gap:16px} #historias .portfolio-heading p{grid-column:auto;max-width:650px} #historias .story-choice strong{font-size:20px} #historias .story-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px} #fases .phases-header{grid-template-columns:1fr;gap:20px} #fases .phases-header-lead{font-size:18px} #fases .phases-timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} #fases .phase-node-meta{gap:8px} #fases .phase-folio{grid-template-columns:1fr;gap:30px} #fases .phase-folio-artwork{grid-column:1;grid-row:1;order:0} #fases .phase-folio-narrative{grid-column:1;grid-row:2;order:1;max-width:750px} .atelier-adventure h2{font-size:clamp(44px,7.5vw,72px);margin:20px 0 26px} .atelier-adventure .adventure-button{font-size:16px;min-height:54px;padding:15px 24px} } @media(max-width:600px){ #historias .portfolio-heading{display:grid;margin-bottom:20px;gap:12px} #historias .portfolio-heading h2{font-size:36px;letter-spacing:-1.2px} #historias .portfolio-heading p{font-size:16px;line-height:1.55} #historias .story-index{grid-template-columns:1fr;gap:0;margin-bottom:36px} #historias .story-index a{min-height:76px;padding:14px 0;flex-wrap:nowrap} #historias .story-choice strong{font-size:19px} #historias .story-choice small{font-size:13.5px} #fases{margin:0 auto;padding:20px 5% 0;scroll-margin-top:14px;border-top:1px solid var(--line)} #historias{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)} #fases .phases-header{gap:10px;margin-bottom:16px} #fases .phases-header-intro h2{font-size:30px;letter-spacing:-1px;line-height:1.14;margin-top:6px;margin-bottom:4px} #fases .phases-header-lead{font-size:15px;line-height:1.5;margin-bottom:0} #fases .phases-timeline-wrapper{margin:0 0 16px;padding:0} #fases .phases-timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 10px} #fases .phase-node-icon{height:52px} #fases .phase-node-icon img{width:48px;height:48px} #fases .phase-node{gap:4px;padding-bottom:6px} #fases .phase-node-title{font-size:13.5px;line-height:1.25} #fases .phase-node-num{font-size:12px} #fases .phase-node-meta{gap:6px} #fases .phase-folio{gap:14px} #fases .phase-folio-title{font-size:28px;line-height:1.15;letter-spacing:-0.8px;margin-bottom:8px} #fases .phase-folio-meta{font-size:12px;margin-bottom:6px;gap:4px 8px} #fases .phase-folio-hook{font-size:17px;line-height:1.35;margin-bottom:8px} #fases .phase-folio-desc{font-size:14.5px;line-height:1.5;margin-bottom:10px} #fases .phase-folio-note{font-size:13px;line-height:1.45;margin-bottom:14px} #fases .phase-folio-actions{gap:8px} #fases .phase-folio-actions .button{width:100%;justify-content:space-between;font-size:15px;padding:13px 18px;min-height:48px} #fases .phase-folio-actions .text-link{font-size:14px;min-height:36px} .atelier-adventure{margin-top:54px;overflow:visible;background:var(--blue)} .atelier-adventure::after{display:none} .atelier-adventure .adventure-copy{position:relative;inset:auto;transform:none;padding:26px 6% 20px;max-width:none} .atelier-adventure .adventure-label{font-size:12px} .atelier-adventure h2{font-size:44px;line-height:1.06;letter-spacing:-1.5px;margin:14px 0 20px} .atelier-adventure .adventure-note{position:relative;inset:auto;text-align:left;padding:0 6% 26px;font-size:13.5px;text-shadow:none} } @media(prefers-reduced-motion:reduce){#fases .phase-panel.active{animation:none}} /* Fredoka's authentic weight range is 300–700. */ .home-page .video-hero #hero-title{font-weight:400} .home-page .video-hero #hero-title em{font-weight:600} .home-page h2,.home-page h3{font-weight:500} /* Phase Proposal Slider */ .phase-slider{position:relative;width:100%;border-radius:20px;overflow:hidden} .phase-slider-track{position:relative;width:100%;aspect-ratio:4/3;background:#ece8dc;border-radius:20px;overflow:hidden} .phase-slide{display:none;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);transform:scale(0.98)} .phase-slide.active{display:block;opacity:1;transform:scale(1);z-index:2} .phase-slide .phase-artwork-media{width:100%;height:100%;aspect-ratio:4/3;overflow:hidden;border-radius:20px} .phase-slide .phase-artwork-media img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px} .phase-slide-caption{position:absolute;bottom:0;inset-inline:0;background:linear-gradient(to top,rgba(15,20,18,.82) 0%,rgba(15,20,18,.4) 65%,transparent 100%);color:#fff;padding:34px 22px 16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;pointer-events:none;z-index:3} .phase-slide-caption strong{font-size:16px;font-weight:750;color:#fff;display:block;line-height:1.2;margin-top:2px} .phase-slide-caption span{font-size:12px;opacity:.9;letter-spacing:.06em;text-transform:uppercase;color:#d8d5cb;font-weight:700} .phase-slide-caption small{font-size:12px;opacity:.75;color:#f6f3eb;flex-shrink:0} .phase-slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:100%;display:flex;justify-content:space-between;padding:0 12px;pointer-events:none;z-index:5} .phase-slider-nav button{pointer-events:auto;background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.08);color:var(--ink);width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:all .2s ease;backdrop-filter:blur(4px)} .phase-slider-nav button:hover{background:#fff;transform:scale(1.08);color:var(--blue);box-shadow:0 6px 18px rgba(59,79,228,.25)} .phase-slider-nav button:focus-visible{outline:2px solid var(--blue);outline-offset:3px} .phase-slider-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px} .phase-slider-dot{width:9px;height:9px;border-radius:50%;background:#d6d1c4;border:none;padding:0;cursor:pointer;transition:all .25s ease} .phase-slider-dot:hover{background:#a8a395} .phase-slider-dot.active{background:var(--blue);width:24px;border-radius:10px} /* Instagram — discreet presence in header, closing and footer */ .ig-icon{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ig-icon .ig-dot{fill:currentColor;stroke:none} .nav-instagram{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:var(--muted);background:transparent;border:none;transition:color .2s,transform .2s} .nav-instagram:hover{color:var(--blue);transform:translateY(-1px)} .nav-instagram:focus-visible{outline:2px solid var(--blue);outline-offset:3px} .nav-instagram-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Fechamento Editorial: isolamento vertical estrito do CTA e do bloco do Instagram com respiro generoso */ .editorial-closing .closing-action { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .editorial-closing .closing-cta-group { display: block !important; width: auto !important; margin: 0 0 36px 0 !important; } .editorial-closing .closing-cta-group .button { display: inline-flex !important; align-items: center !important; gap: 8px !important; } .editorial-closing .closing-instagram-wrapper { display: block !important; width: 100% !important; margin-top: 0 !important; clear: both !important; } .editorial-closing .closing-instagram { display: inline-flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; margin-top: 0 !important; text-decoration: none !important; color: #ffffff !important; opacity: 0.92 !important; transition: opacity .2s ease, transform .2s ease !important; } .editorial-closing .closing-instagram:hover { opacity: 1 !important; transform: translateY(-1px) !important; } .editorial-closing .closing-instagram-handle { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 17px !important; color: #ffffff !important; } .editorial-closing .closing-instagram-handle .ig-icon { width: 22px !important; height: 22px !important; stroke: #ffffff !important; } .editorial-closing .closing-instagram-handle strong { font-weight: 700 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important; padding-bottom: 2px !important; color: #ffffff !important; } .editorial-closing .closing-instagram-sub { font-size: 14.5px !important; line-height: 1.4 !important; color: rgba(255, 255, 255, 0.88) !important; opacity: 1 !important; } @media(max-width:980px){ .nav-instagram{width:auto;height:auto;min-height:44px;border:0;border-radius:0;justify-content:flex-start;gap:10px;font-size:15px;font-weight:500;padding:4px 0} .nav-instagram-label{position:static;width:auto;height:auto;overflow:visible;clip:auto} } @media(max-width:600px){ .editorial-closing .closing-cta-group { margin-bottom: 28px !important; } .editorial-closing .closing-instagram-handle { font-size: 15.5px !important; } .editorial-closing .closing-instagram-sub { font-size: 13.5px !important; } } /* Minimalist back-to-top footer button */ /* Minimalist back-to-top footer button — Solid Blue Circle with White Arrow */ .footer-meta .footer-back-to-top, .footer-back-to-top{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:none; background:var(--blue) !important; color:#fff !important; cursor:pointer; box-shadow:0 4px 14px rgba(59,79,228,.32); transition:all .22s cubic-bezier(.2,.8,.2,1); padding:0; } .footer-meta .footer-back-to-top:hover, .footer-back-to-top:hover{ background:#2838bd !important; color:#fff !important; transform:translateY(-2px) scale(1.06); box-shadow:0 6px 20px rgba(59,79,228,.48); } .footer-back-to-top:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; } .footer-back-to-top svg{ width:16px; height:16px; stroke:#fff !important; stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; } .footer-back-to-top:hover svg{ transform:translateY(-1.5px); } /* Area do cliente em azul (PC e Mobile) */ .nav-client, .footer-contact a.footer-client { color: var(--blue) !important; font-weight: 600 !important; } .nav-client:hover, .footer-contact a.footer-client:hover { opacity: 0.85; } /* Versao mobile: seta abaixo de 2026 MiiA CAT, centralizada e com respiro */ @media (max-width: 640px) { .footer-meta { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; gap: 16px !important; padding-top: 10px !important; padding-bottom: 24px !important; } .footer-meta small { order: 1 !important; font-size: 13px !important; color: var(--muted) !important; text-align: center !important; margin: 0 !important; } .footer-meta .footer-back-to-top { order: 2 !important; margin: 4px auto 0 !important; } /* Setas do carrossel mobile: menores, delicadas, discretas, translúcidas e nas bordas */ .phase-slider-nav { padding: 0 4px !important; } .phase-slider-nav button { width: 28px !important; height: 28px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.65) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important; color: var(--ink) !important; } .phase-slider-nav button:hover, .phase-slider-nav button:active { background: rgba(255, 255, 255, 0.95) !important; transform: none !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important; } .phase-slider-dots { margin-top: 8px !important; gap: 6px !important; } .phase-slider-dot { width: 7px !important; height: 7px !important; } .phase-slider-dot.active { width: 18px !important; } .phase-slide-caption { padding: 22px 14px 10px !important; gap: 8px !important; } .phase-slide-caption strong { font-size: 14px !important; } .phase-slide-caption span { font-size: 12px !important; } .phase-slide-caption small { font-size: 12px !important; } } /* ─── NAVEGAÇÃO MOBILE ERGONÔMICA & UX REFINADA: GALERIAS (#historias) ─── */ /* Desktop: Preservação estrita do layout editorial elogiado */ @media (min-width: 769px) { #historias .chapter-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; align-items: start; } #historias .story-photo-main { grid-column: 1 / -1; } #historias .story-photo img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; } } /* Mobile: Redução de 88% da rolagem vertical, foto Hero proeminente e miniaturas em 2 colunas */ @media (max-width: 768px) { #historias .story-chapter { margin-bottom: 54px !important; } #historias .chapter-heading { margin-bottom: 16px !important; gap: 14px !important; } #historias .chapter-heading h3 { font-size: clamp(23px, 5.8vw, 29px) !important; letter-spacing: -0.6px !important; margin-bottom: 6px !important; line-height: 1.2 !important; } #historias .chapter-heading p { font-size: 14.5px !important; line-height: 1.55 !important; } /* Grid ergonômico de 2 colunas: foto Hero no topo + miniaturas complementares lado a lado */ #historias .chapter-gallery { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; padding: 0 !important; width: 100% !important; } /* Foto Principal (Hero): Destaque soberano, proporção harmoniosa 4:3, sem cortes acidentais */ #historias .story-photo.story-photo-main { grid-column: 1 / -1 !important; width: 100% !important; margin: 0 !important; } #historias .story-photo.story-photo-main img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; max-height: min(340px, 52vh) !important; object-fit: cover !important; object-position: center 30% !important; border-radius: 16px !important; box-shadow: 0 4px 20px rgba(37, 37, 31, 0.06) !important; } #historias .story-photo.story-photo-main > span { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; font-size: 13.5px !important; font-weight: 650 !important; line-height: 1.35 !important; padding-top: 10px !important; color: var(--ink) !important; } #historias .story-photo.story-photo-main > span b { font-size: 18px !important; font-weight: 700 !important; color: var(--blue) !important; } /* Fotos Complementares: Compactas, ágeis e perfeitamente enquadradas em 2 colunas */ #historias .story-photo:not(.story-photo-main) { grid-column: auto !important; width: 100% !important; margin: 0 !important; } #historias .story-photo:not(.story-photo-main) img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; max-height: 180px !important; object-fit: cover !important; object-position: center 30% !important; border-radius: 12px !important; box-shadow: 0 2px 12px rgba(37, 37, 31, 0.04) !important; } #historias .story-photo:not(.story-photo-main) > span { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; line-height: 1.3 !important; padding-top: 7px !important; color: var(--muted) !important; } #historias .story-photo:not(.story-photo-main) > span b { font-size: 13.5px !important; font-weight: 700 !important; color: var(--ink) !important; flex-shrink: 0 !important; } /* Ponto focal refinado para fotos específicas no mobile */ #historias .story-photo[data-caption*="Navegador"] img { object-position: center 35% !important; } #historias .story-photo[data-caption*="Biblioteca"] img { object-position: 62% 28% !important; } #historias .story-photo[data-caption*="Cavalheiro"] img { object-position: center 25% !important; } /* Ações do Capítulo no Mobile */ #historias .gallery-entry { margin-top: 14px !important; } #historias .gallery-entry button { font-size: 13.5px !important; min-height: 40px !important; color: var(--ink) !important; font-weight: 650 !important; } #historias .gallery-entry button span { color: var(--blue) !important; } #historias .chapter-contact { margin-top: 6px !important; } #historias .chapter-contact a { font-size: 13px !important; color: var(--blue) !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } } /* Harmonia tipográfica Fredoka para a seção editorial de depoimentos (#depoimentos) */ .home-page .testimonials-header-intro h2 { font-family: MiiaFredoka, MiiaNunito, sans-serif; font-weight: 500; } /* ─── Fase 2/3 (29/10/2026): topo com a oferta, fases em cartões no celular, relato junto do Arthur ─── */ .home-page .video-hero .hero-sub{max-width:620px;margin:0 auto 26px;padding:0 20px;text-align:center;color:var(--muted);font-size:18px;line-height:1.55} .home-page .video-hero .hero-note{margin:-18px auto 0;padding:0 20px 34px;max-width:560px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5;background:#fff} .phases-mobile,.phases-quick{display:none} #historias .chapter-testimonial{max-width:820px;margin:28px auto 8px} #depoimentos .testimonial-card:nth-child(3){grid-column:auto} @media (min-width:1121px){#depoimentos .testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1080px;margin-left:auto;margin-right:auto}} @media (max-width:767px){ .home-page .video-hero .hero-sub{font-size:15px;margin-bottom:22px;max-width:360px;padding:0 18px} .home-page .video-hero .hero-note{margin-top:-24px;padding:0 22px 30px;font-size:12px} #fases .phases-timeline-wrapper,#fases .phases-stage{display:none} .phases-mobile{display:grid;gap:18px;margin-top:8px} .phase-card{background:#fbf9f5;border:1px solid var(--line);border-radius:16px;overflow:hidden} .phase-card-media{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .phase-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px} .phase-card-tag{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.02em} .phase-card-title{font-size:24px;line-height:1.15;margin:0} .phase-card-line{font-size:15px;line-height:1.45;color:var(--muted);margin:0 0 10px} .phase-card-cta{width:100%;justify-content:space-between;min-height:48px;margin:0} .phases-quick{display:block;margin-top:28px} .phases-quick-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .phases-quick ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .phase-quick{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;min-height:80px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none} .phase-quick img{width:64px;height:64px;object-fit:cover;border-radius:10px} .phase-quick span{display:flex;flex-direction:column;gap:2px} .phase-quick strong{font-size:16px} .phase-quick small{font-size:13px;color:var(--muted)} .phase-quick b{font-size:18px;color:var(--blue);font-weight:400} #historias .chapter-gallery{display:none!important} .home-page .video-hero>.eyebrow{letter-spacing:1px;font-size:12px;line-height:1.5;padding:0 18px;text-wrap:balance} #historias .chapter-testimonial{margin:20px 0 4px} } /* ═══ Respiro e ritmo (06/11/2026) ═══════════════════════════════════════════ Uma escala só, usada nas seções inteiras. Para ajustar o ritmo do site, mude estas cinco variáveis em vez de criar remendos por elemento. Valores aproximados em 375 / 768 / 1366 px: --esp-fino 12 / 14 / 16 rótulo ou legenda e o objeto dele --esp-grade 24 / 28 / 36 entre cartões e entre fotos --esp-grupo 29 / 36 / 40 título de capítulo e conteúdo --esp-bloco 40 / 50 / 64 entre blocos de uma seção --esp-secao 72 / 89 / 117 dentro da borda de cada seção e entre capítulos */ :root{ --esp-fino:clamp(12px,.5vw + 10px,16px); --esp-grade:clamp(24px,1.4vw + 17px,36px); --esp-grupo:clamp(28px,1.8vw + 22px,40px); --esp-bloco:clamp(40px,2.6vw + 30px,64px); --esp-secao:clamp(72px,4.6vw + 54px,120px); } /* Seções: mesmo espaço acima e abaixo; o fio entre elas fica centralizado. */ .atelier-process{margin-top:0;padding-top:var(--esp-secao);padding-bottom:var(--esp-secao);border-top:0} #historias{margin-top:0;padding-top:var(--esp-secao);padding-bottom:var(--esp-secao)} #fases{padding-top:var(--esp-secao);padding-bottom:var(--esp-secao)} #depoimentos{margin-top:0;padding-top:var(--esp-secao);padding-bottom:var(--esp-secao)} #cuidado{margin-top:0;padding-top:var(--esp-secao);padding-bottom:var(--esp-secao)} .editorial-closing{padding-top:var(--esp-secao);padding-bottom:var(--esp-secao)} /* Os links do menu continuam parando perto do título, apesar do espaço maior. */ #como,#historias,#fases,#depoimentos,#cuidado{scroll-margin-top:calc(var(--esp-secao) * -.5)} /* Histórias: capítulos, antes e depois e galeria. */ #historias .portfolio-heading{margin-bottom:var(--esp-bloco)} #historias .story-chapter{margin-bottom:var(--esp-secao)!important} #historias .story-chapter:last-child{margin-bottom:0!important} .chapter-comparison{margin-top:var(--esp-grupo);margin-bottom:var(--esp-bloco)} .comparison-labels{margin-bottom:var(--esp-fino)} #historias .gallery-entry{margin-top:var(--esp-grade)!important} @media (min-width:769px){ #historias .chapter-gallery{gap:var(--esp-grupo) var(--esp-grade)} } @media (max-width:768px){ #historias .chapter-gallery{gap:var(--esp-grade) var(--esp-fino)!important} #historias .chapter-contact{margin-top:var(--esp-fino)!important} } /* Fases: título, seletor, palco e cartões do celular. */ #fases .phases-header{margin-bottom:var(--esp-bloco)} #fases .phases-timeline-wrapper{margin-bottom:var(--esp-bloco)} .phases-mobile{gap:var(--esp-grade);margin-top:0} .phases-quick{margin-top:var(--esp-bloco)} @media (max-width:600px){ #fases .phases-header{gap:var(--esp-fino)} #fases .phases-header-intro h2{margin-top:var(--esp-fino)} } /* Depoimentos: três cartões, sem nenhum sobrando na última linha. 1280 px ou mais: três colunas. 821 a 1279 px: Camila na largura toda e os outros dois lado a lado. 820 px ou menos: uma coluna. */ .testimonials-header{margin-bottom:var(--esp-bloco)} .testimonials-bridge{margin-top:var(--esp-grupo)} #depoimentos .testimonials-grid{gap:var(--esp-grade);max-width:1280px} @media (min-width:821px){ #depoimentos .testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* O