@import url('https://fonts.googleapis.com/css2?family=Days+One&family=Bai+Jamjuree:wght@400;500;600;700&display=swap');
:root{
 /* Cor: exclusivamente da logomarca (SVG oficial) + branco/preto.
    Marca: navy PORTO #162f5b · navy profundo #15264c · fundo do simbolo #0c1745
           azul do simbolo #1678e0 · cinza do simbolo #565656 · dourado #ffbc00 */
 --ink-950:#0c1745; --navy-900:#15264c; --navy-800:#162f5b; --navy-600:#164b8e; --blue-600:#1678e0;
 --text-1:#15264c; --text-2:#4b5365; --text-3:#5e6574;
 --line-1:#dee2e8; --line-2:#c2c9d4; --soft-1:#f7f8f9; --soft-2:#eff0f4;
 --gold-500:#ffbc00; --gold-600:#d69e00; --gold-700:#8c6700; --gold-100:#fff7e0;
 /* Vermelho de sinal: NAO e cor de marca, so para alerta e perda (X do carimbo, seta de depreciacao) */
 --alerta-600:#c1121f; --alerta-700:#93101a;
 /* Tipo: Days One = fonte da logo (display, peso unico 400); Bai Jamjuree = corpo da mesma familia formal */
 --font-display:'Days One','Bai Jamjuree',Arial,sans-serif;
 --font-body:'Bai Jamjuree','Segoe UI',Arial,sans-serif;
 /* Escala tipografica: base 1rem, razao 1.25 (terca maior), implementada em clamp */
 /* escala tipografica: razao 1.125, ancorada em 1rem. Todo tamanho de letra do
   site sai daqui; nenhum valor solto em rem no restante do arquivo. */
--fs-1:0.62rem; --fs-2:0.7rem; --fs-3:0.79rem; --fs-4:0.89rem; --fs-5:1rem; --fs-6:1.125rem; --fs-7:1.27rem; --fs-8:1.42rem; --fs-9:1.6rem; --fs-10:1.8rem; --fs-11:2.03rem; --fs-12:2.28rem; --fs-13:2.57rem; --fs-14:2.89rem; --fs-15:3.25rem; --fs-16:3.66rem; --fs-17:4.11rem;
--fs-display:clamp(2.2rem,1.3rem + 3.4vw,3.8rem);
 --fs-h2:clamp(1.7rem,1.2rem + 2vw,2.7rem);
 --fs-h3:var(--fs-7); --fs-body:var(--fs-5); --fs-small:var(--fs-3); --fs-caption:var(--fs-2);
 /* Espaco: unidade 4px; passos 8/12/16/24/32/48/64/96 */
 --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:64px; --sp-8:96px;
 /* Movimento padrao */
 --ease:cubic-bezier(.2,.7,.2,1); --dur:200ms;
 /* Aliases legados */
 --navy:var(--navy-900); --navy-2:var(--navy-800); --navy-3:var(--navy-600);
 --gold:var(--gold-500); --gold-2:var(--gold-600);
 --ink:var(--text-1); --muted:var(--text-3); --soft:var(--soft-1); --soft2:var(--soft-2);
 --line:var(--line-1); --white:#fff;
 --shadow:0 18px 52px rgba(12,23,69,.10); --shadow2:0 10px 28px rgba(12,23,69,.08);
 --radius:12px; --radius-sm:8px; --wrap:1220px;
}
:focus-visible{outline:3px solid var(--blue-600);outline-offset:2px;border-radius:2px}

*{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:104px} body{margin:0;font-family:var(--font-body);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}button,input,textarea,select{font:inherit}.wrap{width:min(calc(100% - 48px),var(--wrap));margin:auto}.section{padding:var(--sp-8) 0}.soft{background:var(--soft)}.dark{background:#0c1745;color:white}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:#8c6700;font-size:var(--fs-2);font-weight:700;margin-bottom:14px}.eyebrow:before{content:"";width:36px;height:3px;border-radius:2px;background:var(--gold)}.eyebrow.light{color:var(--gold)}h1,h2,h3,h4,p{margin-top:0}h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-display);line-height:1.06;letter-spacing:-.01em;margin-bottom:24px}h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.008em;margin-bottom:20px}h3{font-size:var(--fs-h3);line-height:1.3;margin-bottom:10px;font-weight:700}p{line-height:1.72}.lead{font-size:var(--fs-6);color:#4b5365}.muted{color:var(--muted)}

/* compact, high-end header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(16px);border-bottom:1px solid #eff0f4}.header-inner{height:76px;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand img{width:168px;height:auto}.desktop-nav{display:flex;align-items:center;gap:25px;margin-left:auto;height:100%}.desktop-nav>a,.nav-drop{height:100%;display:flex;align-items:center;position:relative;border:0;background:none;color:#15264c;font-size:var(--fs-4);font-weight:700;letter-spacing:.025em;white-space:nowrap;cursor:pointer;padding:0}.desktop-nav>a:after,.nav-drop:after{content:"";position:absolute;left:0;right:100%;bottom:14px;height:2px;background:var(--navy-2);transition:.2s}.desktop-nav>a:hover:after,.desktop-nav>a.active:after,.nav-drop:hover:after,.has-mega.open .nav-drop:after{right:0}.nav-drop span{font-size:var(--fs-5);margin-left:7px;transition:.2s}.has-mega.open .nav-drop span{transform:rotate(180deg)}.header-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 17px;border:1px solid #c2c9d4;border-radius:10px;font-size:var(--fs-2);font-weight:700;letter-spacing:.02em;background:white}.header-cta:hover{border-color:var(--navy-2);box-shadow:var(--shadow2)}.menu-btn{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;padding:8px}.menu-btn span{display:block;height:2px;background:var(--navy);margin:7px 0;border-radius:4px}.mobile-nav{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:#fff;padding:18px 22px 32px;overflow:auto;z-index:105}.mobile-nav.open{display:block}.mobile-nav>a{display:block;padding:14px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-4);font-weight:700}.mobile-group{padding:10px 0;border-bottom:1px solid var(--line)}.mobile-group summary{cursor:pointer;font-size:var(--fs-4);font-weight:700;padding:8px 0}.mobile-group a{display:block;padding:9px 12px;color:#5e6574;font-size:var(--fs-3)}

/* mega menu inspired by current homolog */
.has-mega{height:100%;display:flex;align-items:center}.mega-menu{display:none;position:fixed;top:76px;left:0;right:0;background:#fff;border-top:1px solid #eff0f4;border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(12,23,69,.12);padding:34px 0 28px}.has-mega.open .mega-menu,.has-mega:hover .mega-menu,.has-mega:focus-within .mega-menu{display:block}.mega-grid{width:min(calc(100% - 48px),var(--wrap));margin:auto;display:grid;grid-template-columns:1.15fr 1fr 1.15fr 1fr;gap:34px}.mega-col h4,.mega-col .mega-col-titulo{font-size:var(--fs-3);line-height:1.45;color:#5e6574;padding-bottom:13px;margin:0 0 12px;border-bottom:1px solid var(--line)}.mega-col a{display:block;padding:8px 0;font-size:var(--fs-4);line-height:1.35;color:#162f5b}.mega-col a:hover{color:var(--navy-3)}.mega-col .all-services{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-3);font-weight:700;text-decoration:underline}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 21px;border-radius:8px;font-size:var(--fs-2);font-weight:700;letter-spacing:.025em}.btn.gold{background:var(--gold);color:var(--navy)}.btn.gold:hover{background:var(--gold-2)}.btn.navy{background:var(--navy);color:#fff}.btn.outline{border:1px solid #c2c9d4}.dark .btn.outline,.hero .btn.outline{border-color:rgba(255,255,255,.55);color:white}

/* home hero */
.home-hero{position:relative;min-height:665px;background:var(--navy);overflow:hidden}.home-hero .bg{position:absolute;inset:0;background:url('../img/hero.jpg') 68% center/cover no-repeat}.home-hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,23,69,.96) 0%,rgba(12,23,69,.82) 38%,rgba(12,23,69,.28) 70%,rgba(12,23,69,.08) 100%)}.home-hero .inner{position:relative;min-height:665px;display:flex;align-items:center}.hero-copy{max-width:660px;color:white}.hero-copy h1{max-width:650px}.hero-copy p{color:#dee2e8;max-width:610px;font-size:var(--fs-5)}.hero-note{display:flex;gap:24px;margin-top:38px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);color:#dee2e8;font-size:var(--fs-2)}.hero-note b{color:var(--gold);margin-right:5px}

/* generic section layouts */
.section-head{max-width:760px;margin-bottom:38px}.section-head p{color:var(--muted);font-size:var(--fs-5)}.split{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}.split.reverse .copy{order:2}.split.reverse .media{order:1}.media{position:relative;min-height:430px;border-radius:var(--radius);overflow:hidden;background:#dee2e8;box-shadow:var(--shadow)}.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.media .caption{position:absolute;left:18px;right:18px;bottom:18px;padding:14px 16px;border-radius:11px;background:rgba(255,255,255,.94)}.media .caption b,.media .caption span{display:block}.media .caption b{font-size:var(--fs-3)}.media .caption span{font-size:var(--fs-2);color:var(--muted);margin-top:3px}.dark .media .caption{background:rgba(12,23,69,.9);color:#fff}.dark .media .caption span{color:#dee2e8}

/* area cards */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.area-card{border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden;transition:.2s;box-shadow:0 8px 24px rgba(12,23,69,.03)}.area-card:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}.area-card figure{margin:0;height:210px;overflow:hidden}.area-card figure img{width:100%;height:100%;object-fit:cover}.area-card .body{padding:22px}.area-card .n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);font-size:var(--fs-2);font-weight:700;margin-bottom:15px}.area-card p{font-size:var(--fs-3);color:var(--muted);margin-bottom:15px}.more{font-size:var(--fs-2);font-weight:700;color:var(--navy-2)}

/* capabilities */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.cap{border:1px solid var(--line);border-radius:12px;padding:20px;background:white;min-height:150px}.cap i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#eff0f4;color:var(--navy-2);font-style:normal;font-size:var(--fs-2);font-weight:700}.cap b{display:block;margin:14px 0 7px;font-size:var(--fs-4)}.cap span{display:block;font-size:var(--fs-2);line-height:1.48;color:var(--muted)}

/* evidence duo */

/* visualization feature */
.visual-block{display:grid;grid-template-columns:.8fr 1.2fr;gap:42px;align-items:center}.visual-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.visual-list div{padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:11px}.visual-list b{display:block;color:#fff;font-size:var(--fs-3)}.visual-list span{display:block;color:#c2c9d4;font-size:var(--fs-1);line-height:1.4;margin-top:4px}.visual-media{min-height:480px;border-radius:12px;overflow:hidden;position:relative}.visual-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:rgba(12,23,69,.72);border:2px solid #fff;color:white;font-size:var(--fs-9)}

/* methodology */
.method-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.method-step{text-align:center;padding:18px 10px}.method-step i{display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(255,255,255,.25);border-radius:50%;margin:auto auto 12px;color:var(--gold);font-style:normal;font-weight:700}.method-step b{display:block;color:var(--gold);font-size:var(--fs-3)}.method-step span{display:block;color:#c2c9d4;font-size:var(--fs-1);line-height:1.45;margin-top:6px}

/* technology */
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.tech-card{padding:22px;border:1px solid var(--line);border-radius:12px;background:white}.tech-card strong{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--navy);color:var(--gold);font-size:var(--fs-1);margin-bottom:14px}.tech-card b,.tech-card span{display:block}.tech-card b{font-size:var(--fs-3)}.tech-card span{font-size:var(--fs-2);line-height:1.45;color:var(--muted);margin-top:5px}

/* page hero */
.page-hero{background:#0c1745;color:white;padding:42px 0 56px}.breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;color:#c2c9d4;font-size:var(--fs-2);margin-bottom:22px}.breadcrumbs a{color:#c2c9d4}.page-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}.page-hero h1{font-size:var(--fs-h2)}.page-hero p{max-width:650px;color:#dee2e8}.page-hero .hero-media{min-height:390px;border-radius:12px;overflow:hidden;position:relative}.page-hero .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.page-hero .hero-media:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.18);border-radius:12px}

/* detail page rail */
.detail-shell{display:grid;grid-template-columns:235px 1fr;gap:48px;align-items:start}.toc{position:sticky;top:100px;border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}.toc b{display:block;font-size:var(--fs-2);color:#5e6574;padding-bottom:11px;border-bottom:1px solid var(--line)}.toc a{display:block;padding:9px 0;font-size:var(--fs-2);color:#5e6574;border-bottom:1px solid #eff0f4}.toc a:last-child{border-bottom:0}.detail-main>section{padding:0 0 72px;margin-bottom:72px;border-bottom:1px solid var(--line)}.detail-main>section:last-child{border-bottom:0}.detail-section{scroll-margin-top:110px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center}.detail-grid.reverse .detail-copy{order:2}.detail-grid.reverse .detail-media{order:1}.detail-media{min-height:360px;border-radius:12px;position:relative;overflow:hidden;background:#eff0f4}.detail-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.detail-media .label{position:absolute;left:15px;bottom:15px;background:rgba(255,255,255,.94);padding:11px 13px;border-radius:9px;font-size:var(--fs-2);font-weight:700}.detail-copy p{color:var(--muted);font-size:var(--fs-4)}.bullets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.bullets span{display:flex;gap:9px;align-items:flex-start;padding:12px;border-radius:10px;background:var(--soft);font-size:var(--fs-2);line-height:1.4}.bullets span:before{content:"✓";color:#8c6700;font-weight:700}.method-note{margin-top:20px;padding:15px 16px;border-left:3px solid var(--gold);background:var(--soft);border-radius:0 10px 10px 0}.method-note b,.method-note span{display:block}.method-note b{font-size:var(--fs-1)}.method-note span{font-size:var(--fs-2);color:var(--muted);line-height:1.45;margin-top:4px}

/* service index */
.service-index-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.service-index-card{display:grid;grid-template-columns:180px 1fr;min-height:220px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white}.service-index-card img{width:100%;height:100%;object-fit:cover}.service-index-card .body{padding:24px}.service-index-card p{font-size:var(--fs-3);color:var(--muted)}

/* about / contact */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:22px;border:1px solid var(--line);border-radius:12px;background:white}.stat b{display:block;font-size:var(--fs-8);color:var(--navy-2)}.stat span{display:block;font-size:var(--fs-2);color:var(--muted);margin-top:5px}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px}.contact-card{padding:24px;border:1px solid var(--line);border-radius:12px;background:white}.contact-card b{display:block;margin-bottom:7px}.contact-card a,.contact-card span{display:block;color:#5e6574;font-size:var(--fs-3);line-height:1.7}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-form label{font-size:var(--fs-2);font-weight:700;color:#5e6574}.contact-form input,.contact-form textarea,.contact-form select{width:100%;margin-top:6px;padding:13px 14px;border:1px solid #dee2e8;border-radius:9px;background:white}.contact-form textarea{min-height:150px;resize:vertical}.contact-form .full{grid-column:1/-1}.contact-form button{border:0;cursor:pointer}

/* footer */
.cta-band{padding:50px 0;background:#0c1745;color:white}.cta-inner{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}.cta-inner h2{font-size:var(--fs-11);margin-bottom:8px}.cta-inner p{margin:0;color:#dee2e8}.footer{background:#0c1745;color:#c2c9d4;padding:46px 0 20px}.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:38px}.footer img{width:185px;height:auto}.footer p{font-size:var(--fs-2);max-width:320px}.footer b{display:block;color:white;font-size:var(--fs-2);margin-bottom:12px}.footer a{display:block;font-size:var(--fs-2);margin:8px 0}.copyright{margin-top:28px;padding-top:15px;border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-1)}

/* simple article cards */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.article-card{padding:24px;border:1px solid var(--line);border-radius:12px;background:#fff}.article-card .tag{display:inline-flex;padding:6px 8px;background:#eff0f4;border-radius:999px;color:var(--navy-2);font-size:var(--fs-1);font-weight:700}.article-card h3{margin:14px 0 10px}.article-card p{font-size:var(--fs-3);color:var(--muted)}

@media(max-width:1100px){.desktop-nav,.header-cta{display:none}.menu-btn{display:block}.header-inner{height:68px}.brand img{width:160px}.mega-menu{display:none!important}.area-grid{grid-template-columns:repeat(2,1fr)}.cap-grid{grid-template-columns:repeat(3,1fr)}.tech-grid{grid-template-columns:repeat(2,1fr)}.page-hero-grid{gap:32px}.detail-shell{grid-template-columns:1fr}.toc{position:static;display:flex;overflow:auto;gap:8px;padding:10px}.toc b{display:none}.toc a{flex:0 0 auto;border:0;background:var(--soft);border-radius:99px;padding:8px 11px}.service-index-grid{grid-template-columns:1fr}}
@media(max-width:760px){html{scroll-padding-top:88px}.wrap{width:min(calc(100% - 28px),var(--wrap))}.section{padding:var(--sp-7) 0}.home-hero,.home-hero .inner{min-height:760px}.home-hero .bg{background-position:70% top;background-size:auto 52%;background-repeat:no-repeat}.home-hero .shade{background:linear-gradient(180deg,rgba(12,23,69,.08) 0%,rgba(12,23,69,.3) 28%,rgba(12,23,69,.94) 54%,#0c1745 100%)}.home-hero .inner{align-items:end}.hero-copy{padding:335px 0 42px}.hero-copy h1{font-size:var(--fs-14)}.hero-copy p{font-size:var(--fs-4)}.actions{display:grid}.hero-note{display:grid;gap:8px}.split,.visual-block,.page-hero-grid,.detail-grid,.contact-grid{grid-template-columns:1fr}.split.reverse .copy,.detail-grid.reverse .detail-copy{order:initial}.split.reverse .media,.detail-grid.reverse .detail-media{order:-1}.media{min-height:330px}.area-grid,.cap-grid,.tech-grid,.method-flow,.article-grid,.stat-row{grid-template-columns:1fr 1fr}.visual-media{min-height:360px;order:-1}.page-hero{padding:26px 0 42px}.page-hero .hero-media{min-height:300px;order:-1}.page-hero h1{font-size:var(--fs-14)}.detail-main>section{padding-bottom:54px;margin-bottom:54px}.detail-grid .detail-media{order:-1;min-height:300px}.bullets{grid-template-columns:1fr}.service-index-card{grid-template-columns:1fr}.service-index-card img{height:200px}.cta-inner{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.contact-form{grid-template-columns:1fr}.contact-form .full{grid-column:auto}}
@media(max-width:500px){.area-grid,.cap-grid,.tech-grid,.method-flow,.article-grid,.stat-row,.footer-grid{grid-template-columns:1fr}.visual-list{grid-template-columns:1fr}.home-hero .bg{background-size:auto 48%}.hero-copy{padding-top:310px}.brand img{width:150px}}


/* V9 — restored editorial blocks and expanded About page */
.home-manifesto{background:#fff;padding-top:98px;padding-bottom:98px}.manifesto-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:84px;align-items:center}.manifesto-copy h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.055em;max-width:760px}.manifesto-copy .lead{max-width:780px;font-size:var(--fs-6);line-height:1.75}.manifesto-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px}.manifesto-links a,.text-link{font-size:var(--fs-3);font-weight:700;letter-spacing:.03em;color:var(--navy-2);padding-bottom:5px;border-bottom:1px solid #c2c9d4}.manifesto-media{margin:0;position:relative;min-height:520px;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(12,23,69,.14)}.manifesto-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.manifesto-media figcaption{position:absolute;left:28px;right:28px;bottom:28px;background:rgba(255,255,255,.95);padding:22px 26px;border-radius:12px;backdrop-filter:blur(10px)}.manifesto-media figcaption b,.manifesto-media figcaption span{display:block}.manifesto-media figcaption b{font-size:var(--fs-5)}.manifesto-media figcaption span{font-size:var(--fs-2);color:var(--muted);margin-top:6px;line-height:1.45}.final-cta{background:#eff0f4;padding:54px 0}.final-cta-card{background:#162f5b;border-radius:12px;padding:64px 70px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:70px;align-items:center;color:#fff;box-shadow:0 20px 55px rgba(12,23,69,.10)}.final-cta-copy h2{font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.05em;color:#fff;max-width:850px;margin-bottom:18px}.final-cta-copy p{color:#dee2e8;margin:0;font-size:var(--fs-5)}.final-cta-actions{display:grid;gap:14px}.final-cta-actions .btn{min-height:58px}.final-cta-actions .outline{border-color:#c2c9d4}
.about-story-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:70px;align-items:start}.about-story-copy p{font-size:var(--fs-5);line-height:1.82;color:#4b5365}.about-story-copy .lead{font-size:var(--fs-6);color:var(--ink)}.about-facts{position:sticky;top:104px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:24px;box-shadow:var(--shadow2)}.fact-highlight{background:var(--navy);color:#fff;border-radius:12px;padding:24px;margin-bottom:10px}.fact-highlight strong,.fact-highlight span{display:block}.fact-highlight strong{font-size:var(--fs-14);letter-spacing:-.05em;color:var(--gold)}.fact-highlight span{font-size:var(--fs-2);color:#dee2e8;line-height:1.4;margin-top:4px}.fact-row{display:grid;grid-template-columns:100px 1fr;gap:14px;padding:15px 6px;border-bottom:1px solid var(--line)}.fact-row:last-child{border-bottom:0}.fact-row b{font-size:var(--fs-2);color:#5e6574}.fact-row span{font-size:var(--fs-3);line-height:1.45}.founder-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.founder-visual{position:relative;min-height:560px;border-radius:12px;overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}.founder-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8)}.founder-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,23,69,.04),rgba(12,23,69,.75))}.founder-badge{position:absolute;z-index:2;left:26px;right:26px;bottom:26px;padding:20px 22px;background:rgba(12,23,69,.92);color:#fff;border-left:4px solid var(--gold);border-radius:0 12px 12px 0}.founder-badge span,.founder-badge strong{display:block}.founder-badge span{font-size:var(--fs-1);color:var(--gold);font-weight:700;letter-spacing:.12em}.founder-badge strong{font-size:var(--fs-7);margin-top:5px}.founder-copy p{font-size:var(--fs-4);line-height:1.78;color:#4b5365}.founder-copy .lead{font-size:var(--fs-6);color:var(--ink)}.founder-skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.founder-skills span{padding:8px 11px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-2);font-weight:750}.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}.team-grid article{border:1px solid var(--line);border-radius:12px;padding:26px;background:#fff}.team-grid i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--gold);font-style:normal;font-size:var(--fs-2);font-weight:900;margin-bottom:18px}.team-grid h3{font-size:var(--fs-6)}.team-grid p{font-size:var(--fs-3);line-height:1.6;color:var(--muted);margin-bottom:0}.team-note{margin-top:18px;padding:28px;border-radius:12px;background:#f7f8f9;border-left:4px solid var(--gold)}.team-note p{font-size:var(--fs-4);line-height:1.7;color:#5e6574}.team-note p:last-child{margin-bottom:0}.principles-section .cap{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}.principles-section .cap b{color:#fff}.principles-section .cap span{color:#c2c9d4}
@media(max-width:1100px){.manifesto-grid,.founder-grid{gap:44px}.manifesto-copy h2{font-size:var(--fs-17)}.final-cta-card{grid-template-columns:1fr 300px;padding:50px}.about-story-grid{grid-template-columns:1fr .6fr}.about-facts{position:static}.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.home-manifesto{padding:64px 0}.manifesto-grid,.about-story-grid,.founder-grid,.final-cta-card{grid-template-columns:1fr}.manifesto-grid{gap:34px}.manifesto-copy h2{font-size:var(--fs-15)}.manifesto-media{min-height:370px;order:-1}.manifesto-media figcaption{left:14px;right:14px;bottom:14px;padding:16px}.team-grid{grid-template-columns:1fr}.final-cta{padding:28px 0}.final-cta-card{padding:34px 24px;border-radius:12px;gap:32px}.final-cta-copy h2{font-size:var(--fs-14)}.founder-visual{min-height:390px;order:-1}.about-facts{margin-top:10px}.fact-row{grid-template-columns:90px 1fr}}
.capabilities-tail{padding-top:74px}
.final-cta-copy h2{font-size:var(--fs-h2);max-width:760px}
.final-cta-card{grid-template-columns:minmax(0,1fr) 340px;padding:58px 64px;gap:52px}
.final-cta-actions .btn{font-size:var(--fs-2)}
.subareas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.subarea-card{border:1px solid var(--line);border-radius:12px;padding:24px;background:#fff;box-shadow:0 8px 24px rgba(12,23,69,.03)}
.subarea-card .tag{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#eff0f4;color:var(--navy-2);font-size:var(--fs-3);font-weight:700;margin-bottom:14px}
.subarea-card h3{font-size:var(--fs-7);margin-bottom:10px}
.subarea-card p{font-size:var(--fs-4);line-height:1.65;color:#4b5365;margin-bottom:14px}
.subarea-card ul{margin:0;padding-left:18px;color:#4b5365;font-size:var(--fs-3);line-height:1.65}
.video-box{background:#0c1745;display:flex;align-items:center;justify-content:center}
.video-box video{width:100%;height:100%;object-fit:cover;background:#000}
@media(max-width:1100px){.subareas-grid{grid-template-columns:1fr 1fr}.final-cta-card{grid-template-columns:1fr 290px;padding:46px}}
@media(max-width:760px){.subareas-grid{grid-template-columns:1fr}.final-cta-card{grid-template-columns:1fr;padding:34px 22px}.final-cta-copy h2{font-size:var(--fs-14)}}

/* V11 — About page inspired by premium scientific consultancy storytelling */
.about11-hero{padding:72px 0 92px;background:#fff;overflow:hidden}.about11-hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}.about11-breadcrumbs{margin-bottom:34px}.about11-breadcrumbs a,.about11-breadcrumbs span{color:#5e6574}.about11-hero-copy h1{font-size:var(--fs-display);line-height:.96;letter-spacing:-.06em;max-width:710px;margin-bottom:26px}.about11-lead{font-size:var(--fs-6);line-height:1.76;color:#4b5365;max-width:700px}.about11-hero-actions{display:flex;align-items:center;gap:22px;margin-top:28px}.about11-hero-media{position:relative;min-height:620px;border-radius:12px;overflow:hidden;box-shadow:0 28px 80px rgba(12,23,69,.16)}.about11-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.about11-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,23,69,.02),rgba(12,23,69,.32))}.about11-floating-card{position:absolute;z-index:2;left:28px;right:28px;bottom:28px;background:rgba(255,255,255,.96);border-radius:12px;padding:22px 24px;backdrop-filter:blur(12px)}.about11-floating-card b,.about11-floating-card span{display:block}.about11-floating-card b{font-size:var(--fs-5)}.about11-floating-card span{margin-top:5px;color:var(--muted);font-size:var(--fs-3);line-height:1.45}
.about11-definition{padding-top:110px;padding-bottom:110px}.about11-definition-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:start}.about11-definition h2{font-size:var(--fs-display);max-width:720px}.about11-definition-copy p{font-size:var(--fs-5);line-height:1.86;color:#4b5365}.about11-definition-copy p:first-child{font-size:var(--fs-6);color:var(--ink)}
.about11-stats-band{background:var(--soft2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.about11-stats{display:grid;grid-template-columns:repeat(4,1fr)}.about11-stats>div{padding:30px 24px;border-right:1px solid var(--line)}.about11-stats>div:last-child{border-right:0}.about11-stats strong,.about11-stats span{display:block}.about11-stats strong{font-size:var(--fs-9);letter-spacing:-.04em;color:var(--navy)}.about11-stats span{margin-top:5px;font-size:var(--fs-2);line-height:1.45;color:var(--muted)}
.about11-history{background:#fff}.about11-history-head{max-width:900px}.about11-timeline{position:relative;margin-top:18px}.about11-timeline:before{content:"";position:absolute;left:119px;top:10px;bottom:10px;width:1px;background:var(--line)}.about11-timeline article{display:grid;grid-template-columns:95px 1fr;gap:48px;position:relative;padding:0 0 48px}.about11-timeline article:last-child{padding-bottom:0}.about11-timeline article:before{content:"";position:absolute;left:114px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px #fff}.about11-timeline .year{font-size:var(--fs-2);font-weight:900;color:#8c6700;padding-top:2px;text-align:right}.about11-timeline h3{font-size:var(--fs-8);margin-bottom:8px}.about11-timeline p{font-size:var(--fs-4);line-height:1.7;color:var(--muted);max-width:780px}
.about11-mission{padding-top:100px;padding-bottom:100px}.about11-mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.about11-mission h2{font-size:var(--fs-h2);color:#fff;max-width:720px}.about11-mission p{font-size:var(--fs-5);line-height:1.82;color:#dee2e8}.about11-mission strong{color:#fff}
.about11-founder{padding-top:108px;padding-bottom:108px}.about11-founder-grid{gap:84px}.about11-founder-visual{min-height:620px}.about11-founder .founder-copy h2{font-size:var(--fs-h2)}
.about11-team-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:end;margin-bottom:36px}.about11-team-intro h2{font-size:var(--fs-h2)}.about11-team-intro>p{font-size:var(--fs-5);line-height:1.75;color:var(--muted)}.about11-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.about11-team-grid article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px;min-height:230px}.about11-team-grid article>span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--navy);color:var(--gold);font-size:var(--fs-2);font-weight:900;margin-bottom:18px}.about11-team-grid h3{font-size:var(--fs-5)}.about11-team-grid p{font-size:var(--fs-3);line-height:1.62;color:var(--muted);margin-bottom:0}
.about11-process-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:68px;align-items:center}.about11-process-copy h2{font-size:var(--fs-display)}.about11-process-copy p{font-size:var(--fs-5);line-height:1.76;color:var(--muted);margin-bottom:28px}.about11-process-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:260px 260px;gap:12px}.about11-process-mosaic figure{position:relative;margin:0;border-radius:12px;overflow:hidden;box-shadow:var(--shadow2)}.about11-process-mosaic .m1{grid-row:1/3}.about11-process-mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.about11-process-mosaic figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);padding:10px 12px;border-radius:8px;font-size:var(--fs-2);font-weight:700}
.about11-principles .cap-grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.about11-hero-grid,.about11-definition-grid,.about11-mission-grid,.about11-founder-grid,.about11-team-intro,.about11-process-grid{gap:44px}.about11-hero-media{min-height:520px}.about11-stats{grid-template-columns:repeat(2,1fr)}.about11-stats>div:nth-child(2){border-right:0}.about11-stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.about11-team-grid{grid-template-columns:repeat(2,1fr)}.about11-principles .cap-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.about11-hero{padding:30px 0 58px}.about11-hero-grid,.about11-definition-grid,.about11-mission-grid,.about11-team-intro,.about11-process-grid{grid-template-columns:1fr}.about11-hero-media{min-height:390px;order:-1}.about11-breadcrumbs{display:none}.about11-hero-copy h1{font-size:var(--fs-15)}.about11-hero-actions{display:grid;align-items:start}.about11-definition{padding:68px 0}.about11-definition h2{font-size:var(--fs-15)}.about11-stats{grid-template-columns:1fr}.about11-stats>div{border-right:0!important;border-bottom:1px solid var(--line)}.about11-stats>div:last-child{border-bottom:0}.about11-timeline:before{left:11px}.about11-timeline article{grid-template-columns:1fr;gap:8px;padding-left:38px}.about11-timeline article:before{left:6px}.about11-timeline .year{text-align:left}.about11-mission{padding:70px 0}.about11-founder-visual{min-height:390px}.about11-team-grid{grid-template-columns:1fr}.about11-process-mosaic{grid-template-columns:1fr;grid-template-rows:260px 220px 220px}.about11-process-mosaic .m1{grid-row:auto}.about11-principles .cap-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.about11-principles .cap-grid{grid-template-columns:1fr}.about11-hero-copy h1{font-size:var(--fs-14)}.about11-definition h2{font-size:var(--fs-13)}}.area-grid{margin-top:32px}.final-cta-copy h2{font-size:var(--fs-h2)}.final-cta-copy p{font-size:var(--fs-4)}.subareas-grid.long-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px}.subarea-card.long{padding:26px 24px 22px;display:flex;flex-direction:column;height:100%}.subarea-card.long h3{font-size:var(--fs-6);line-height:1.25}.subarea-card.long p{font-size:var(--fs-4);line-height:1.75;margin-bottom:14px}.subarea-card.long ul{margin-top:auto}.subarea-card.long li{margin-bottom:6px}.detail-main>section#subareas{padding-bottom:16px;margin-bottom:0}.detail-main>section#subareas .lead{max-width:980px}.section-head p strong,.lead strong{color:var(--navy)}
@media(max-width:1100px){.subareas-grid.long-form{grid-template-columns:1fr}}
@media(max-width:760px){.subarea-card.long{padding:22px 18px}.subarea-card.long p{font-size:var(--fs-4)}}


/* V13 — reconstruction editorial / technical accordions */
.reconstruction-hero .page-hero-grid{align-items:stretch}.reconstruction-hero .hero-media{min-height:420px}.reconstruction-intro{padding-bottom:76px}.reconstruction-qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px}.reconstruction-qa-grid article h2{font-size:var(--fs-h2);line-height:1.08}.reconstruction-qa-grid article p{font-size:var(--fs-4);color:#5e6574;line-height:1.82}.reconstruction-qa-grid article p strong{color:var(--navy)}
.technical-editorial-grid{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:72px;align-items:start}.technical-editorial-intro{position:sticky;top:116px}.technical-editorial-intro h2{font-size:var(--fs-h2)}.technical-editorial-intro p{color:#5e6574;line-height:1.75}.expertise-accordion{border-top:1px solid #dee2e8}.expertise-accordion details{border-bottom:1px solid #dee2e8;padding:0;transition:.2s}.expertise-accordion details[open]{background:linear-gradient(90deg,rgba(255,188,0,.08) 0%,rgba(255,188,0,0) 42%)}.expertise-accordion summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 2px 24px 20px;cursor:pointer;color:#8c6700;font-size:var(--fs-4);font-weight:700;letter-spacing:.02em;position:relative}.expertise-accordion summary:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(255,188,0,.14)}.expertise-accordion summary::-webkit-details-marker{display:none}.expertise-accordion summary i{font-style:normal;color:var(--ink);font-size:var(--fs-5);transition:.2s}.expertise-accordion details:not([open]) summary i{transform:rotate(180deg)}.accordion-body{padding:0 28px 26px 20px;max-width:820px;border-left:2px solid rgba(255,188,0,.22);margin-left:3px}.accordion-body p{font-size:var(--fs-4);color:#5e6574;line-height:1.78}.accordion-body ul{margin:14px 0 0;padding-left:20px;color:#4b5365;font-size:var(--fs-3);line-height:1.68}.accordion-body li{margin-bottom:5px}
.reconstruction-feature{gap:62px}.reconstruction-feature .detail-copy p{font-size:var(--fs-4);line-height:1.78}.detail-media.tall{min-height:520px}.nature-layout{display:grid;grid-template-columns:minmax(260px,.55fr) minmax(0,1.45fr);gap:72px;align-items:start}.nature-intro{position:sticky;top:116px}.nature-intro h2{font-size:var(--fs-h2)}.nature-intro p{color:#5e6574;font-size:var(--fs-4);line-height:1.75}.nature-accordion{border-top:1px solid var(--line)}.nature-accordion details{border-bottom:1px solid var(--line)}.nature-accordion summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 4px}.nature-accordion summary::-webkit-details-marker{display:none}.nature-accordion summary span{font-size:var(--fs-5);font-weight:780;color:var(--navy)}.nature-accordion summary b{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eff0f4;color:var(--navy-2);font-size:var(--fs-2);margin-right:12px}.nature-accordion summary i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid #c2c9d4;font-style:normal;font-size:var(--fs-6);color:#4b5365;transition:.2s}.nature-accordion details[open] summary i{transform:rotate(45deg);background:var(--gold);color:var(--navy);border-color:var(--gold)}.nature-body{padding:0 56px 24px 52px}.nature-body p{font-size:var(--fs-4);line-height:1.76;color:#4b5365}.nature-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}.nature-tags span{padding:7px 9px;border-radius:999px;background:#f7f8f9;border:1px solid #dee2e8;color:#5e6574;font-size:var(--fs-1);font-weight:700}.video-box video{width:100%;height:100%;object-fit:cover}
@media(max-width:1000px){.reconstruction-qa-grid,.technical-editorial-grid,.nature-layout{grid-template-columns:1fr}.technical-editorial-intro,.nature-intro{position:static}.reconstruction-qa-grid{gap:34px}.technical-editorial-grid,.nature-layout{gap:38px}.reconstruction-feature{gap:34px}}
@media(max-width:760px){.reconstruction-intro{padding-bottom:52px}.reconstruction-qa-grid article h2{font-size:var(--fs-12)}.expertise-accordion summary{padding:20px 0;font-size:var(--fs-3)}.accordion-body{padding-right:0}.nature-accordion summary{padding:18px 0}.nature-accordion summary span{font-size:var(--fs-4);display:flex;align-items:center}.nature-body{padding:0 0 22px}.nature-tags{gap:6px}.detail-media.tall{min-height:320px}}


/* V14 — service showcase cards */
.service-showcase .section-head{max-width:980px}.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.showcase-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 26px 24px;box-shadow:0 10px 28px rgba(12,23,69,.04);display:flex;flex-direction:column;min-height:100%;transition:.2s}.showcase-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(12,23,69,.08)}.showcase-card.wide{grid-column:span 2}.showcase-card h3{font-size:var(--fs-9);line-height:1.12;letter-spacing:-.04em;max-width:14ch;margin-bottom:12px}.showcase-card p{font-size:var(--fs-4);line-height:1.78;color:#5e6574;margin-bottom:18px}.showcase-card hr{width:100%;border:0;border-top:1px solid #eff0f4;margin:0 0 16px}.showcase-card ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.showcase-card li{position:relative;padding-left:24px;font-size:var(--fs-3);line-height:1.58;color:#5e6574}.showcase-card li:before{content:"✓";position:absolute;left:0;top:0;color:#8c6700;font-weight:900}.showcase-card em{font-style:normal;color:var(--navy);font-weight:700}.service-note{margin-top:22px;color:#5e6574;font-size:var(--fs-4)}.service-note strong{color:var(--navy)}
@media(max-width:1100px){.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-card.wide{grid-column:auto}}
@media(max-width:760px){.showcase-grid{grid-template-columns:1fr}.showcase-card,.showcase-card.wide{grid-column:auto}.showcase-card h3{font-size:var(--fs-7);max-width:none}}


/* V15 — proporções, independência de escopos e leitura editorial */
.independent-note{margin-top:24px;padding:18px 20px;border:1px solid #fff7e0;border-left:4px solid var(--gold);border-radius:0 12px 12px 0;background:#f7f8f9}.independent-note b,.independent-note span{display:block}.independent-note b{font-size:var(--fs-2);color:#8c6700}.independent-note span{margin-top:6px;font-size:var(--fs-3);line-height:1.65;color:#5e6574}
/* Home area text: slightly wider and less oversized */
.section-head{max-width:860px}.section-head h2{max-width:820px}.section-head p{max-width:840px}
/* Better proportions on technical tabs/accordions */
.technical-editorial-grid{grid-template-columns:minmax(250px,.52fr) minmax(0,1.48fr);gap:56px}.technical-editorial-intro h2{font-size:var(--fs-h2);line-height:1.08;max-width:13ch}.expertise-accordion summary{font-size:var(--fs-4);padding-top:21px;padding-bottom:21px}.accordion-body{max-width:900px}.accordion-body p{font-size:var(--fs-4)}
.nature-layout{grid-template-columns:minmax(235px,.46fr) minmax(0,1.54fr);gap:56px}.nature-intro h2{font-size:var(--fs-h2);line-height:1.08;max-width:12ch}.nature-intro p{font-size:var(--fs-4)}.nature-accordion summary span{font-size:var(--fs-5)}.nature-body p{font-size:var(--fs-4)}
/* Page internal split panels */
.detail-shell{grid-template-columns:210px minmax(0,1fr);gap:42px}.detail-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:34px}.detail-grid.reverse{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}.detail-copy h2{font-size:clamp(1.9rem,2.9vw,3rem)}.detail-copy p{font-size:var(--fs-4)}.toc a{font-size:var(--fs-2)}
/* Balanced specialized service cards */
.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}.showcase-card,.showcase-card.wide{grid-column:auto;min-height:430px;padding:24px}.showcase-card h3{font-size:var(--fs-7);line-height:1.18;max-width:none;min-height:3.15em}.showcase-card p{font-size:var(--fs-4);line-height:1.7}.showcase-card li{font-size:var(--fs-3)}
/* Home area cards equalized */
.area-grid{align-items:stretch}.area-card{height:100%;display:flex;flex-direction:column}.area-card .body{display:flex;flex-direction:column;flex:1}.area-card .body p{flex:1}
@media(max-width:1100px){.technical-editorial-grid,.nature-layout{grid-template-columns:1fr}.technical-editorial-intro h2,.nature-intro h2{max-width:18ch}.showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-shell{grid-template-columns:1fr}.detail-grid,.detail-grid.reverse{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.showcase-grid{grid-template-columns:1fr}.showcase-card{min-height:0}.showcase-card h3{min-height:0}.detail-grid,.detail-grid.reverse{grid-template-columns:1fr}.technical-editorial-intro h2,.nature-intro h2{max-width:none;font-size:var(--fs-12)}.expertise-accordion summary{font-size:var(--fs-3);padding-left:18px}.nature-accordion summary span{font-size:var(--fs-4)}}


/* V16 — proportions and readability */
.services-intro{max-width:940px}
.services-intro h2{max-width:900px;font-size:var(--fs-h2)}
.services-intro p{max-width:900px;font-size:var(--fs-5);line-height:1.76}
.area-grid{grid-auto-rows:1fr}
.area-card{display:flex;flex-direction:column;height:100%}
.area-card figure{flex:0 0 190px}
.area-card .body{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px}
.area-card h3{font-size:var(--fs-6);line-height:1.28;min-height:2.55em}
.area-card p{font-size:var(--fs-3);line-height:1.62;flex:1}
.area-card .more{margin-top:auto}

/* avoid oversized narrow editorial columns */
.technical-editorial-grid{grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr);gap:50px}
.technical-editorial-intro h2{font-size:var(--fs-h2);line-height:1.06;max-width:520px}
.technical-editorial-intro p{max-width:520px}
.nature-layout{grid-template-columns:minmax(350px,.78fr) minmax(0,1.22fr);gap:48px}
.nature-intro h2{font-size:var(--fs-h2);line-height:1.06;max-width:560px}
.nature-intro p{max-width:540px}
.nature-accordion summary span{font-size:var(--fs-5);line-height:1.35}
.nature-body{padding-left:52px;padding-right:28px;max-width:930px}
.nature-body p{font-size:var(--fs-4);line-height:1.78}

/* specialized service cards: equal hierarchy, less text crowding */
.showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.showcase-card,.showcase-card.wide{grid-column:auto;min-height:390px;padding:24px}
.showcase-card h3{font-size:var(--fs-7);line-height:1.22;max-width:none;min-height:3.1em}
.showcase-card p{font-size:var(--fs-3);line-height:1.68;min-height:8.4em}
.showcase-card li{font-size:var(--fs-3);line-height:1.52}



/* neutral independent-scope callouts */
.independent-note{border-left-color:var(--gold)}

@media(max-width:1100px){
  .technical-editorial-grid,.nature-layout{grid-template-columns:1fr;gap:34px}
  .technical-editorial-intro,.nature-intro{position:static}
  .showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase-card h3,.showcase-card p{min-height:auto}
}
@media(max-width:760px){
  .services-intro h2{font-size:var(--fs-13)}
  .area-card figure{height:190px;flex-basis:190px}
  .area-card h3{min-height:0}
  .nature-body{padding-left:0;padding-right:0}
  .showcase-grid{grid-template-columns:1fr}
  .showcase-card{min-height:auto}
}


/* V17 — tecnologia e softwares proprietários */
.technology-hero .page-hero-grid{grid-template-columns:1.08fr .92fr;align-items:center}.technology-hero h1{max-width:790px}.technology-hero p{max-width:730px}.technology-hero-media{background:#fff!important;padding:34px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.technology-hero-media>img{position:static!important;width:min(84%,430px)!important;height:auto!important;object-fit:contain!important}.tech-hero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;position:relative;z-index:2}.tech-hero-badges span{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#f7f8f9;color:#5e6574;font-size:var(--fs-1);font-weight:700;letter-spacing:.04em}
.tech-intro{padding-bottom:54px}.tech-intro-head{max-width:980px}.tech-intro-head h2{max-width:900px}.tool-jump{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}.tool-jump a{display:flex;align-items:center;gap:16px;min-height:92px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(12,23,69,.035);transition:.2s}.tool-jump a:hover{transform:translateY(-3px);box-shadow:var(--shadow2);border-color:#dee2e8}.tool-jump img{width:72px;height:60px;object-fit:contain}.tool-jump span{font-size:var(--fs-3);font-weight:700;color:var(--navy)}
.tool-feature{scroll-margin-top:90px}.tool-feature-grid{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:72px;align-items:center}.tool-feature-grid.reverse .tool-brand-panel{order:2}.tool-feature-grid.reverse .tool-copy{order:1}.tool-brand-panel{min-height:480px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.tool-brand-panel:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,188,0,.16),rgba(255,188,0,0) 70%);top:-80px;right:-70px}.tool-brand-panel.dark-brand{background:#fff}.tool-brand-panel.inca-panel{background:#fff}.product-chip{position:absolute;top:22px;left:22px;z-index:2;padding:7px 9px;border-radius:999px;background:var(--navy);color:var(--gold);font-size:var(--fs-1);font-weight:900}.tool-logo{position:relative;z-index:1;max-width:82%;max-height:250px;object-fit:contain}.adt-logo{max-width:78%}.camera-logo{max-width:88%}.crash-logo,.inca-logo{max-width:74%;max-height:280px}.tool-keywords{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:30px;position:relative;z-index:1}.tool-keywords span{padding:7px 9px;border-radius:999px;background:#eff0f4;border:1px solid #dee2e8;color:#5e6574;font-size:var(--fs-1);font-weight:750}.tool-copy h2{font-size:var(--fs-h2);max-width:860px}.tool-copy .lead{font-size:var(--fs-5);line-height:1.7;max-width:820px}.tool-copy>p:not(.lead){font-size:var(--fs-4);line-height:1.82;color:#5e6574;max-width:860px}.tool-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.tool-points>div{padding:17px 18px;border:1px solid var(--line);border-radius:12px;background:#fff}.soft .tool-points>div{background:rgba(255,255,255,.85)}.tool-points b,.tool-points span{display:block}.tool-points b{font-size:var(--fs-3);color:var(--navy);margin-bottom:5px}.tool-points span{font-size:var(--fs-2);line-height:1.52;color:var(--muted)}
.proprietary-banner{padding-top:78px;padding-bottom:78px}.proprietary-banner-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:center}.proprietary-banner h2{font-size:var(--fs-h2);max-width:780px}.proprietary-banner p{color:#dee2e8;max-width:760px;font-size:var(--fs-5)}.proprietary-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.proprietary-metrics div{padding:24px 18px;border:1px solid rgba(255,255,255,.16);border-radius:12px;text-align:center}.proprietary-metrics strong,.proprietary-metrics span{display:block}.proprietary-metrics strong{color:var(--gold);font-size:var(--fs-9)}.proprietary-metrics span{color:#c2c9d4;font-size:var(--fs-1);line-height:1.45;margin-top:6px}

@media(max-width:1100px){.technology-hero .page-hero-grid,.tool-feature-grid,.proprietary-banner-grid{grid-template-columns:1fr}.technology-hero-media{min-height:360px!important;order:-1}.tool-feature-grid.reverse .tool-brand-panel,.tool-feature-grid.reverse .tool-copy{order:initial}.tool-brand-panel{min-height:380px}.tool-jump{grid-template-columns:1fr 1fr}.proprietary-metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.technology-hero-media{padding:24px}.technology-hero-media>img{width:min(86%,330px)!important}.tool-jump{grid-template-columns:1fr 1fr;gap:9px}.tool-jump a{min-height:78px;padding:10px 12px;gap:10px}.tool-jump img{width:54px;height:50px}.tool-feature-grid{gap:34px}.tool-brand-panel{min-height:310px;padding:24px}.product-chip{top:14px;left:14px}.tool-logo{max-height:190px}.tool-points{grid-template-columns:1fr}.proprietary-metrics{grid-template-columns:1fr}.proprietary-banner-grid{gap:34px}}
@media(max-width:500px){.tool-jump,.tool-jump a{min-height:72px}.tool-copy h2{font-size:var(--fs-13)}.tool-brand-panel{min-height:270px}.crash-logo,.inca-logo{max-width:68%}}


/* V18 — PC-Crash dedicated section */
.pc-crash-section{background:linear-gradient(180deg,#f7f8f9 0%,#fff 100%);scroll-margin-top:86px}.pc-crash-header{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:34px}.pc-crash-header h2{font-size:var(--fs-h2);margin-bottom:10px}.pc-crash-header .lead{margin:0;max-width:760px}.pc-source-link{flex:0 0 auto;padding:11px 15px;border:1px solid #dee2e8;border-radius:10px;background:#fff;color:var(--navy);font-size:var(--fs-2);font-weight:700;letter-spacing:.03em}.pc-source-link:hover{border-color:var(--gold);box-shadow:var(--shadow2)}
.pc-crash-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:stretch}.pc-crash-visual{position:relative;min-height:500px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);background:#0c1745}.pc-crash-visual>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.pc-crash-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,23,69,.02),rgba(12,23,69,.58))}.pc-crash-overlay{position:absolute;z-index:2;left:22px;right:22px;bottom:22px;padding:20px 22px;background:rgba(255,255,255,.95);border-radius:12px}.pc-crash-overlay b,.pc-crash-overlay span{display:block}.pc-crash-overlay b{font-size:var(--fs-5);color:var(--navy)}.pc-crash-overlay span{font-size:var(--fs-2);color:var(--muted);line-height:1.5;margin-top:5px}.pc-crash-copy{padding:30px 24px}.pc-crash-copy p{font-size:var(--fs-4);line-height:1.82;color:#5e6574}.pc-crash-copy p strong{color:var(--navy)}.pc-crash-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.pc-crash-tags span{padding:7px 9px;border-radius:999px;background:#eff0f4;border:1px solid #dee2e8;color:#5e6574;font-size:var(--fs-1);font-weight:750}
.pc-capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}.pc-capability-grid article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;min-height:300px;box-shadow:0 8px 22px rgba(12,23,69,.035)}.pc-num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--gold);font-size:var(--fs-2);font-weight:900;margin-bottom:16px}.pc-capability-grid h3{font-size:var(--fs-5);line-height:1.3;min-height:2.6em}.pc-capability-grid p{font-size:var(--fs-2);line-height:1.63;color:#5e6574}.pc-capability-grid ul{margin:14px 0 0;padding-left:17px;color:#5e6574;font-size:var(--fs-2);line-height:1.55}.pc-capability-grid li{margin-bottom:5px}.pc-crash-note{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:18px}.pc-crash-note>div{padding:20px 22px;border-radius:12px;background:var(--navy);color:#fff}.pc-crash-note>div:last-child:not(:first-child){background:#fff;color:var(--ink);border:1px solid var(--line)}.pc-crash-note b{display:block;font-size:var(--fs-3);margin-bottom:7px}.pc-crash-note p{font-size:var(--fs-2);line-height:1.6;margin:0;color:#dee2e8}.pc-crash-note>div:last-child:not(:first-child) p{color:var(--muted)}
@media(max-width:1100px){.pc-crash-hero-grid{grid-template-columns:1fr}.pc-capability-grid{grid-template-columns:repeat(2,1fr)}.pc-crash-note{grid-template-columns:1fr}.pc-crash-header{align-items:flex-start;flex-direction:column}.pc-crash-visual{min-height:420px}}
@media(max-width:760px){.pc-capability-grid{grid-template-columns:1fr}.pc-capability-grid article{min-height:0}.pc-crash-copy{padding:24px 6px}.pc-crash-visual{min-height:340px}.pc-crash-header h2{font-size:var(--fs-14)}}


/* V19 — menu: acesso ao sistema (cadeado), acabamento e correcoes de QA */
:root{--ease:cubic-bezier(.2,.7,.3,1);--dur:200ms}

/* foco visivel na paleta: navy sobre fundo claro, dourado sobre fundo escuro */
:where(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--navy-2);outline-offset:3px}
:where(.dark,.footer,.home-hero,.page-hero,.final-cta-card,.fact-highlight,.cta-band) :where(a,button):focus-visible{outline-color:var(--gold)}

/* sombra do header ao rolar */
.site-header{transition:box-shadow .25s var(--ease)}
.site-header.scrolled{box-shadow:0 10px 28px rgba(12,23,69,.08)}

/* cadeado de acesso ao sistema */
.header-login{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border:1px solid #c2c9d4;border-radius:10px;background:#fff;color:var(--navy);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.header-login:hover{background:var(--navy);border-color:var(--navy);color:var(--gold);box-shadow:var(--shadow2)}
.mobile-login{display:flex;align-items:center;gap:12px;min-height:50px;margin:4px 0 14px;padding:0 16px;border-radius:10px;background:var(--navy);color:#fff;font-size:var(--fs-3);font-weight:700;letter-spacing:.03em}
.mobile-login svg{color:var(--gold)}

/* mega menu: entrada contida em vez de liga/desliga */
.mega-menu{display:block;visibility:hidden;opacity:0;transform:translateY(7px);pointer-events:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur)}
.has-mega.open .mega-menu,.has-mega:hover .mega-menu,.has-mega:focus-within .mega-menu{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s}
.nav-drop .chev{margin-left:7px;transition:transform var(--dur) var(--ease)}
.has-mega.open .nav-drop .chev,.has-mega:hover .nav-drop .chev,.has-mega:focus-within .nav-drop .chev{transform:rotate(180deg)}
.mega-col a{transition:color var(--dur) var(--ease),padding-inline-start var(--dur) var(--ease)}
.mega-col a:hover{padding-inline-start:6px}

/* menu mobile: o backdrop-filter do header vira bloco de contencao para
   position:fixed, entao bottom:0 nao alcanca o rodape da tela; a altura
   precisa ser explicita */
.mobile-nav{height:calc(100vh - 68px);height:calc(100dvh - 68px);bottom:auto}
.mobile-nav>a{display:flex;align-items:center;min-height:48px;padding-block:0}
.mobile-group summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding-block:0;list-style:none}
.mobile-group summary::-webkit-details-marker{display:none}
.mobile-group summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin-right:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform var(--dur) var(--ease)}
.mobile-group[open] summary::after{transform:rotate(225deg)}
.mobile-group a{display:flex;align-items:center;min-height:44px;padding-block:0}

/* no mobile o cadeado agrupa com o hamburguer, nao solto apos o logo */
@media(max-width:1100px){.header-login{margin-left:auto}.menu-btn{margin-left:0}}

/* numeros tabulares em dado numerico */
.stat b,.about11-stats strong,.proprietary-metrics strong,.fact-highlight strong{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .mega-menu,.nav-drop .chev,.mobile-group summary::after,.header-login,.site-header,.mega-col a{transition:none}
  html{scroll-behavior:auto}
}

/* V19b — formulario real de contato */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:10px 0 0;font-size:var(--fs-3);font-weight:700;line-height:1.5}
.form-status.ok{color:var(--navy-2)}
.form-status.err{color:#8c6700}
.contact-form button[disabled]{opacity:.6;cursor:wait}

/* V19c — video de fundo do hero, com a mascara (shade) por cima */
.home-hero .bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:760px){.home-hero .bg-video{height:52%;bottom:auto;object-position:center top}}
@media (prefers-reduced-motion:reduce){.home-hero .bg-video{display:none}}

/* V19d — viewer 3D do Sketchfab no lugar de foto em detail-media */
.sketchfab-media{background:#0c1745}
.sketchfab-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Secao "Como podemos ajudar?": composicao assimetrica pergunta/lista,
   numeracao de triagem na fonte da logo (assinatura da pagina) */
.help-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sp-7);align-items:start}
.help-grid .section-head{position:sticky;top:120px;margin-bottom:0}
.help-questions{list-style:none;margin:0;padding:0;counter-reset:situacao}
:where(.help-questions li){counter-increment:situacao;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:baseline;font-size:clamp(1.1rem,1rem + .8vw,1.45rem);font-weight:600;letter-spacing:-.01em;line-height:1.42;color:var(--navy-900);padding-block:var(--sp-4);border-top:1px solid var(--line-1)}
.help-questions li:last-child{border-bottom:1px solid var(--line-1)}
.help-questions li::before{content:counter(situacao,decimal-leading-zero);font-family:var(--font-display);font-weight:400;font-size:var(--fs-small);color:var(--gold-700);font-variant-numeric:tabular-nums;transform:translateY(-2px)}
.help-answer{position:relative;overflow:hidden;margin-top:var(--sp-7);padding:var(--sp-6);color:#fff;border-radius:var(--radius);background:linear-gradient(rgba(12,23,69,.9),rgba(12,23,69,.86)),url('../img/local.jpg') center/cover no-repeat var(--ink-950)}
.help-answer-main{max-width:760px}
.help-answer-side>*+*,.help-answer-main>*+*{margin-block-start:var(--sp-3)}
.help-answer p{color:#dee2e8}
.help-answer .help-affirm{color:#fff}
.help-answer .muted{color:#c2c9d4}
.help-affirm{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.5rem);line-height:1.1;margin:0}
.help-answer .help-close{font-weight:600;color:#fff}
.help-answer .actions{margin-top:var(--sp-4)}
@media(max-width:900px){.help-grid,.help-answer{grid-template-columns:1fr;gap:var(--sp-5)}.help-grid .section-head{position:static}.help-answer{padding:var(--sp-5) var(--sp-4)}}

/* Areas de atuacao: cabecalho com medida de leitura */
.services-intro{max-width:880px}
.services-intro p{color:var(--text-2)}

/* Quem Somos: texto oficial em escala de leitura (h2 de bloco institucional) */
h2.quiet-h2{font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem);line-height:1.32;letter-spacing:0}
.about11-team-copy p{font-size:var(--fs-5);line-height:1.75;color:var(--muted)}
.about11-team-copy p+p{margin-top:14px}

/* Blocos de servico com texto oficial (danos e regularizacao, pericias) */
.svc-flow>*+*{margin-block-start:16px}
.svc-flow h2{margin-bottom:4px}
.svc-flow h3{margin:34px 0 2px;font-size:var(--fs-7);letter-spacing:-.02em;color:var(--navy)}
.svc-tagline{font-weight:700;color:var(--navy-2);letter-spacing:.01em}
.svc-question{font-size:clamp(1.12rem,1.7vw,1.4rem);font-weight:700;color:var(--navy);letter-spacing:-.02em;line-height:1.45}
.key-line{font-weight:700;color:var(--navy);border-inline-start:3px solid var(--gold);padding-inline-start:14px;line-height:1.55}
.stamp{display:inline-block;border:2px solid var(--navy);border-radius:10px;padding:13px 22px;font-weight:700;letter-spacing:.14em;color:var(--navy);font-size:var(--fs-5)}
.social-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-block:10px}
.social-proof div{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--soft)}
.social-proof strong{display:block;font-size:clamp(1.25rem,2vw,1.7rem);color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}
.social-proof span{display:block;font-size:var(--fs-3);color:var(--muted);margin-top:6px}
.note-small{font-size:var(--fs-2);color:var(--muted);line-height:1.7}
.btn.wide{height:auto;min-height:50px;padding:14px 22px;text-align:center;line-height:1.45}
.warranty{border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:12px;padding:22px 24px;background:var(--soft);margin-top:34px}
.warranty h3{margin-top:0}
.warranty p{margin-bottom:8px}
@media(max-width:500px){.social-proof{grid-template-columns:1fr}}

/* Coluna de leitura das paginas de pericia */
.svc-narrow{max-width:900px}
.cta-band .btn.wide{max-width:420px}

/* Numeros de destaque na fonte da logo, algarismos tabulares */
.about11-stats strong,.social-proof strong,.stat b,.proprietary-metrics strong,.fact-highlight strong{font-family:var(--font-display);font-weight:400;font-variant-numeric:tabular-nums}
.area-card .n,

/* Botoes grandes do painel de resposta; WhatsApp em contorno com icone de linha */
.btn-lg{min-height:62px;padding:18px 30px;font-size:var(--fs-3);gap:10px}
.help-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}
.btn-whats{border-color:rgba(255,255,255,.6);color:#fff}
.btn-whats:hover{border-color:#fff}
@media(max-width:500px){.help-actions .btn-lg{width:100%}}

/* =========================================================
   V22, area de Pesquisa: mega menu proprio, Literatura tecnica
   e Validacao & estudos. So tokens do design system.
   ========================================================= */

/* pagina atual dentro de um dropdown: o proprio item do menu fica sublinhado */
.nav-drop.active:after{right:0}
.mega-col a[aria-current="page"]{color:var(--navy-600);font-weight:700}

/* mega menu da Pesquisa: dois destaques + coluna de conhecimento */
.research-mega .mega-grid{grid-template-columns:1.2fr 1.2fr 1fr;max-width:980px}
.research-mega .featured-link{padding:var(--sp-3);border:1px solid var(--line-1);border-radius:var(--radius);background:var(--soft-1)}
.research-mega .featured-link h4{border:0;padding:0;margin:0 0 var(--sp-1);color:var(--navy-900)}
.research-mega .featured-link p{font-size:var(--fs-caption);line-height:1.55;color:var(--text-3);margin:0 0 var(--sp-1)}
.research-mega .featured-link a{padding:0;font-weight:700;color:var(--navy-800)}

/* legenda sobre a foto do hero interno (mesmo idioma do .media .caption) */
.page-hero .hero-caption{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;padding:14px 16px;border-radius:var(--radius-sm);background:rgba(12,23,69,.88);color:#fff}
.page-hero .hero-caption b{display:block;font-size:var(--fs-3)}
.page-hero .hero-caption span{display:block;font-size:var(--fs-2);color:var(--line-1);margin-top:3px;line-height:1.5}

/* literatura: afirmacao fixa + principios */
.knowledge-intro{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--sp-7);align-items:start}
.knowledge-intro .statement{position:sticky;top:112px}
.knowledge-intro .copy p{color:var(--text-2)}
.knowledge-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-4)}
.knowledge-principle{padding:var(--sp-3);border:1px solid var(--line-1);border-radius:var(--radius);background:#fff}
.knowledge-principle strong{display:block;font-size:var(--fs-small);margin-bottom:6px;color:var(--navy-900)}
.knowledge-principle span{font-size:var(--fs-caption);line-height:1.5;color:var(--text-3)}

/* faixa escura do acervo fisico */
.collection-update{padding:var(--sp-5) 0;background:var(--ink-950);color:#fff}
.collection-update-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-6);align-items:center}
.collection-update h2{margin:7px 0 8px;color:#fff}
.collection-update p{color:var(--line-2);max-width:680px;margin:0;font-size:var(--fs-small);line-height:1.65}
.collection-update-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1)}
.collection-update-stats>div{padding:var(--sp-3);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);background:rgba(255,255,255,.05)}
.collection-update-stats strong{display:block;color:var(--gold-500);font-family:var(--font-display);font-weight:400;font-variant-numeric:tabular-nums;font-size:var(--fs-7)}
.collection-update-stats span{display:block;color:var(--line-2);font-size:var(--fs-1);line-height:1.4;margin-top:5px}

/* bibliografia: filtros, busca automatica e cartoes */
.lit-tools{display:flex;gap:var(--sp-2);align-items:center;justify-content:space-between;flex-wrap:wrap;margin:var(--sp-4) 0}
.lit-filters{display:flex;gap:8px;flex-wrap:wrap}
.lit-filter{min-height:44px;border:1px solid var(--line-2);background:#fff;color:var(--text-2);border-radius:999px;padding:0 14px;font-size:var(--fs-caption);font-weight:700;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.lit-filter:hover{border-color:var(--navy-800);color:var(--navy-800)}
.lit-filter.active{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.lit-search{min-width:300px;flex:1;max-width:360px;display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);background:#fff;border-radius:var(--radius-sm);padding:0 13px;color:var(--text-3)}
.lit-search:focus-within{border-color:var(--blue-600)}
.lit-search input{border:0;outline:0;background:transparent;height:46px;width:100%;font-size:var(--fs-small);color:var(--text-1)}
.lit-count{font-size:var(--fs-caption);color:var(--text-3);margin-bottom:var(--sp-2);font-variant-numeric:tabular-nums}
.literature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
.lit-card{border:1px solid var(--line-1);border-radius:var(--radius);background:#fff;padding:var(--sp-4);box-shadow:var(--shadow2);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.lit-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.lit-card[hidden]{display:none}
.lit-top{display:flex;justify-content:space-between;gap:var(--sp-2);align-items:start;margin-bottom:var(--sp-2)}
.lit-tag{display:inline-flex;padding:6px 9px;border-radius:999px;background:var(--soft-2);color:var(--navy-800);font-size:var(--fs-1);font-weight:700;letter-spacing:.05em}
.lit-year{font-size:var(--fs-caption);color:var(--text-3);font-weight:700;font-variant-numeric:tabular-nums}
.lit-card h3{font-size:var(--fs-5);margin-bottom:9px}
.lit-ref{font-size:var(--fs-small);line-height:1.65;color:var(--text-2);margin-bottom:var(--sp-2)}
.lit-use{border-top:1px solid var(--line-1);padding-top:var(--sp-2);font-size:var(--fs-caption);line-height:1.55;color:var(--text-3)}
.lit-use b{color:var(--navy-900)}
.lit-note{margin-top:var(--sp-4);padding:var(--sp-3);border-left:4px solid var(--gold-500);background:var(--gold-100);border-radius:0 var(--radius) var(--radius) 0;font-size:var(--fs-small);line-height:1.6;color:var(--text-2)}
.lit-empty{margin-top:var(--sp-2);padding:var(--sp-6) var(--sp-4);border:1px dashed var(--line-2);border-radius:var(--radius);background:#fff;text-align:center}
.lit-empty[hidden]{display:none}
.lit-empty strong{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);color:var(--navy-900);margin-bottom:8px}
.lit-empty span{font-size:var(--fs-small);color:var(--text-3)}

/* selecao SAE recente, secao escura chapada */
.sae-recent{background:var(--ink-950);color:#fff}
.sae-recent-head{display:grid;grid-template-columns:1fr 220px;gap:var(--sp-6);align-items:end;margin-bottom:var(--sp-4)}
.sae-recent-head h2{color:#fff;max-width:820px}
.sae-recent-head p{color:var(--line-2);max-width:800px;font-size:var(--fs-small);line-height:1.7}
.sae-recent-mark{border-left:2px solid var(--gold-500);padding-left:20px}
.sae-recent-mark strong{display:block;color:var(--gold-500);font-family:var(--font-display);font-weight:400;font-variant-numeric:tabular-nums;font-size:var(--fs-13);line-height:1}
.sae-recent-mark span{display:block;font-size:var(--fs-caption);color:#fff;margin-top:7px}
.sae-recent-mark small{display:block;font-size:var(--fs-1);color:var(--line-2);margin-top:5px}
.sae-topic-rail{display:flex;gap:7px;flex-wrap:wrap;padding:var(--sp-3) 0 var(--sp-5)}
.sae-topic-rail span{padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:var(--line-2);font-size:var(--fs-1);font-weight:700;background:rgba(255,255,255,.05)}
.sae-years{display:grid;gap:var(--sp-2)}
.sae-year{border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);background:rgba(255,255,255,.05);overflow:hidden}
.sae-year summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);min-height:56px}
.sae-year summary::-webkit-details-marker{display:none}
.sae-year summary span{display:flex;align-items:baseline;gap:15px}
.sae-year summary strong{font-family:var(--font-display);font-weight:400;font-size:var(--fs-7);color:#fff;font-variant-numeric:tabular-nums}
.sae-year summary em{font-style:normal;color:var(--line-2);font-size:var(--fs-caption)}
.sae-year summary i{font-style:normal;color:var(--gold-500);font-size:var(--fs-1);font-weight:700}
.sae-year[open] summary{border-bottom:1px solid rgba(255,255,255,.12)}
.sae-paper-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.08)}
.sae-paper{background:#fff;color:var(--text-1);padding:var(--sp-4);display:flex;flex-direction:column}
.sae-paper-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:var(--sp-2)}
.sae-paper-meta span{font-size:var(--fs-1);font-weight:700;letter-spacing:.035em;color:var(--navy-800);padding:5px 8px;border-radius:999px;background:var(--soft-2)}
.sae-paper-meta code{font-family:inherit;color:var(--text-3);font-size:var(--fs-1);font-weight:700;font-variant-numeric:tabular-nums}
.sae-paper h3{font-size:var(--fs-5);line-height:1.38;margin-bottom:7px}
.sae-authors{font-size:var(--fs-2);color:var(--text-3);margin-bottom:10px}
.sae-topic{font-size:var(--fs-caption);line-height:1.58;color:var(--text-2);margin-bottom:var(--sp-2)}
.sae-topic b{color:var(--navy-900)}
.sae-citation{font-size:var(--fs-caption);line-height:1.58;color:var(--text-2);padding-top:var(--sp-2);border-top:1px solid var(--line-1);margin-top:auto}
.sae-paper>a{margin-top:var(--sp-2);font-size:var(--fs-1);font-weight:700;letter-spacing:.04em;color:var(--navy-800)}
.sae-recent .lit-note{background:rgba(255,188,0,.09);color:var(--line-2);border-left-color:var(--gold-500);margin-top:var(--sp-4)}
.sae-recent .lit-note strong{color:#fff}

/* validacao & estudos */
.validation-plot{position:relative;min-height:390px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px;overflow:hidden}
.validation-plot:before{content:"";position:absolute;left:6%;right:6%;bottom:24%;height:2px;background:var(--gold-500);transform:rotate(-9deg)}
.validation-plot:after{content:"MEDIDO × SIMULADO";position:absolute;left:22px;bottom:18px;font-size:var(--fs-1);font-weight:700;letter-spacing:.15em;color:var(--line-2)}
.validation-metric{position:absolute;padding:12px 15px;background:rgba(12,23,69,.55);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm)}
.validation-metric b{display:block;color:var(--gold-500);font-family:var(--font-display);font-weight:400;font-size:var(--fs-5);letter-spacing:.02em}
.validation-metric span{display:block;font-size:var(--fs-1);color:var(--line-1);margin-top:3px}
.validation-metric.m1{top:36px;left:28px}
.validation-metric.m2{top:150px;right:28px}
.validation-metric.m3{bottom:92px;left:80px}
.validation-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.validation-principle{padding:var(--sp-4);border-radius:var(--radius);background:#fff;border:1px solid var(--line-1)}
.validation-principle i{font-style:normal;font-family:var(--font-display);font-weight:400;font-size:var(--fs-caption);color:var(--gold-700);font-variant-numeric:tabular-nums}
.validation-principle h3{margin-top:var(--sp-2);font-size:var(--fs-5)}
.validation-principle p{font-size:var(--fs-caption);color:var(--text-3);margin:0}
.validation-section-head{display:flex;justify-content:space-between;gap:var(--sp-5);align-items:end;margin-bottom:var(--sp-4)}
.validation-section-head>div{max-width:750px}
.validation-section-head .mini-note{max-width:330px;font-size:var(--fs-caption);color:var(--text-3);line-height:1.6;padding-left:18px;border-left:2px solid var(--gold-500)}
.study-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2)}
.study-card{padding:var(--sp-4);border:1px solid var(--line-1);border-radius:var(--radius);background:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow2)}
.study-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:var(--sp-2)}
.study-meta span{font-size:var(--fs-1);font-weight:700;padding:6px 8px;border-radius:999px;background:var(--soft-2);color:var(--navy-800)}
.study-meta time{margin-left:auto;font-size:var(--fs-caption);color:var(--text-3);font-weight:700;font-variant-numeric:tabular-nums}
.study-card h3{font-size:var(--fs-6);line-height:1.35}
.study-card .authors{font-size:var(--fs-caption);color:var(--text-3);margin-bottom:var(--sp-2)}
.study-card .study-summary{font-size:var(--fs-small);color:var(--text-2);line-height:1.66;flex:1}
.study-result{padding-top:var(--sp-2);margin-top:var(--sp-2);border-top:1px solid var(--line-1);font-size:var(--fs-caption);line-height:1.55;color:var(--text-2)}
.study-result b{color:var(--navy-900)}
.study-link{margin-top:var(--sp-2);font-size:var(--fs-1);font-weight:700;color:var(--navy-800)}
.own-validation{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--sp-6);align-items:start}
.own-validation-intro{position:sticky;top:112px}
.own-validation-intro p{color:var(--line-2)}
.own-validation-list{display:grid;gap:var(--sp-2)}
.own-validation-card{display:grid;grid-template-columns:72px 1fr auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);background:rgba(255,255,255,.05)}
.own-validation-card .tool-mark{width:58px;height:58px;border-radius:var(--radius-sm);background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--gold-500);font-family:var(--font-display);font-weight:400;font-size:var(--fs-2);letter-spacing:.04em}
.own-validation-card h3{font-size:var(--fs-4);margin-bottom:5px}
.own-validation-card p{font-size:var(--fs-caption);color:var(--line-2);margin:0;line-height:1.5}
.status-chip{white-space:nowrap;border:1px solid rgba(255,188,0,.45);color:var(--gold-500);border-radius:999px;padding:7px 9px;font-size:var(--fs-1);font-weight:700}
.validation-policy{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-1);margin-top:var(--sp-4)}
.policy-step{padding:var(--sp-3);border:1px solid var(--line-1);border-radius:var(--radius);background:#fff}
.policy-step b{display:block;color:var(--navy-900);font-size:var(--fs-small);margin-bottom:6px}
.policy-step span{font-size:var(--fs-caption);line-height:1.5;color:var(--text-3)}
.reference-list-compact .ref-line{font-size:var(--fs-small);line-height:1.6;padding:14px 0;border-bottom:1px solid var(--line-1);color:var(--text-2)}
.reference-list-compact .ref-line:last-child{border-bottom:0}

@media(max-width:1100px){
 .knowledge-intro,.own-validation{grid-template-columns:1fr;gap:var(--sp-5)}
 .knowledge-intro .statement,.own-validation-intro{position:static}
 .validation-policy{grid-template-columns:repeat(3,1fr)}
 .validation-principles{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .collection-update-inner,.sae-recent-head{grid-template-columns:1fr;gap:var(--sp-4)}
 .knowledge-principles,.literature-grid,.study-grid,.sae-paper-grid,.validation-principles{grid-template-columns:1fr}
 .lit-search{min-width:0;width:100%;max-width:none}
 .validation-section-head{display:block}
 .validation-section-head .mini-note{margin-top:var(--sp-3);max-width:none}
 .validation-policy{grid-template-columns:1fr 1fr}
 .own-validation-card{grid-template-columns:58px 1fr}
 .own-validation-card .status-chip{grid-column:2;justify-self:start}
 .sae-year summary span{display:block}
 .sae-year summary em{display:block;margin-top:4px}
 .validation-plot{min-height:320px}
}
@media(max-width:500px){
 .validation-policy{grid-template-columns:1fr}
 .collection-update-stats{grid-template-columns:1fr}
 .sae-recent-mark strong{font-size:var(--fs-11)}
}
@media(prefers-reduced-motion:reduce){
 .lit-card,.lit-filter{transition:none}
 .lit-card:hover{transform:none}
}

/* =========================================================
   V23, registro de campo: galerias de fotos reais nas
   paginas de servico. So tokens do design system.
   ========================================================= */
.svc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);margin-top:var(--sp-4)}
.svc-gallery.duas{grid-template-columns:repeat(2,1fr)}
.svc-gallery figure{margin:0;border:1px solid var(--line-1);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow2)}
.svc-gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.svc-gallery.duas img{aspect-ratio:3/2}
.svc-gallery figcaption{padding:12px 14px;font-size:var(--fs-caption);line-height:1.5;color:var(--text-2);border-top:1px solid var(--line-1)}
@media(max-width:760px){.svc-gallery,.svc-gallery.duas{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.svc-gallery,.svc-gallery.duas{grid-template-columns:1fr}}

/* V24 — carrossel de duas fotos na secao de mecanica pesada (Sprint 3).
   O elemento de grade continua sendo .detail-media, para nao perder as regras de
   ordem e de empilhamento que as media queries ja aplicam nele. O modificador
   devolve moldura, recorte e fundo para .carrossel-moldura, e deixa os
   indicadores respirarem abaixo dela. */
.detail-media-carrossel{min-height:0;overflow:visible;background:none;border-radius:0}
.carrossel{display:grid;gap:var(--sp-2)}
.carrossel-moldura{position:relative;min-height:360px;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.carrossel-slide{margin:0;position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 200ms ease}
.carrossel-slide.ativo{opacity:1;visibility:visible}
.carrossel-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carrossel-indicadores{display:flex;gap:var(--sp-1);justify-content:flex-start}
.carrossel-indicadores button{width:26px;height:12px;padding:5px 0;border:0;background:none;cursor:pointer;
  display:block;position:relative}
.carrossel-indicadores button:before{content:"";display:block;height:2px;border-radius:1px;background:var(--line-1);
  transition:background 160ms ease}
.carrossel-indicadores button[aria-current="true"]:before{background:var(--gold)}
.carrossel-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:1100px){.carrossel-moldura{min-height:340px}}
@media(max-width:760px){.carrossel-moldura{min-height:300px}}
@media(prefers-reduced-motion:reduce){
  .carrossel-slide{transition:none}
}

/* V25 — galeria "Ensaios e medicoes em casos reais" (Sprint 5).
   Modificador aplicado so a esta galeria, para nao mexer nas galerias de
   incendios e de reclassificacao, que estao fora do escopo do sprint.
   Pontos de quebra escolhidos para o pedido do sprint: uma coluna em 375,
   duas em 768, tres em 1280. */
.svc-gallery-ensaios{grid-template-columns:1fr;gap:var(--sp-3);margin-top:var(--sp-6)}
@media(min-width:640px){.svc-gallery-ensaios{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.svc-gallery-ensaios{grid-template-columns:repeat(3,1fr)}}
.svc-gallery-ensaios figcaption{font-size:var(--fs-4);padding:14px 16px;line-height:1.5}
.svc-gallery-ensaios picture{display:contents}

/* V26 — Quem Somos sem o bloco de abertura (Sprint 6).
   O titulo da secao "Desde 2020..." passou de h2 para h1 porque a pagina ficaria
   sem h1 nenhum depois da remocao. A regra abaixo devolve a ele exatamente a
   tipografia que .quiet-h2 ja lhe dava como h2, para a tela nao mudar em nada. */
.about11-definition h1.quiet-h2{font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem);line-height:1.32;letter-spacing:0;font-weight:400;margin:0;max-width:720px}

/* V27 — secao "Engenharia automotiva aplicada a investigacao" (Sprint 4).
   A foto do conjunto de instrumentos e quadrada e a moldura padrao e 1.78 por 1.
   Um cover puro decapitava o medidor a laser no topo e toda a fileira de baixo,
   entao a proporcao da moldura foi levada a 1 por 1 SO NESTA SECAO, dentro da
   faixa que o sprint autoriza (entre 4 por 3 e 1 por 1). Largura da coluna, raio
   de borda e alinhamento com o bloco de texto ao lado seguem os mesmos. */
.detail-grid .detail-media-quadrada{min-height:0;aspect-ratio:1/1}

/* V28 — carrossel no hero de Classificacao e reclassificacao.
   Reaproveita o componente do carrossel de mecanica pesada. O elemento da grade
   continua sendo .hero-media, para nao perder a ordem que a media query aplica
   nele em mobile; moldura, recorte e a borda de 1px do hero passam para
   .carrossel-moldura, e os indicadores ficam abaixo dela, sobre o fundo navy. */
.hero-media-carrossel{min-height:0;overflow:visible;border-radius:0}
.page-hero .hero-media-carrossel:after{display:none}
.hero-media-carrossel .carrossel{gap:var(--sp-2)}
.hero-media-carrossel .carrossel-moldura{min-height:390px;background:rgba(255,255,255,.06)}
.hero-media-carrossel .carrossel-moldura:after{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius)}
.hero-media-carrossel picture{display:contents}
.hero-media-carrossel .carrossel-indicadores button:before{background:rgba(255,255,255,.34)}
.hero-media-carrossel .carrossel-indicadores button[aria-current="true"]:before{background:var(--gold)}
@media(max-width:1100px){.hero-media-carrossel .carrossel-moldura{min-height:340px}}
@media(max-width:760px){.hero-media-carrossel .carrossel-moldura{min-height:300px}}

/* V29: destaque rotativo nos atalhos de ferramentas da pagina de tecnologia.
   Os quatro cartoes continuam sempre visiveis e clicaveis. O que alterna e o
   destaque, que percorre um cartao por vez, 5s em cada, ciclo de 20s.
   Feito so em CSS, sem JavaScript: como nada e escondido, o destaque e
   decorativo e nao deve chegar ao leitor de tela, entao o DOM nao muda.
   O traco dourado vive num ::before proprio, e nao no box-shadow do cartao,
   para o realce do hover que ja existia continuar funcionando por cima da
   rotacao (animacao vence declaracao normal na cascata). */
.tool-jump a{position:relative}
.tool-jump a::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;box-shadow:inset 3px 0 0 var(--gold-500);
  animation:porto-destaque-traco 20s linear infinite}
.tool-jump a img{animation:porto-destaque-logo 20s linear infinite}
/* atrasos negativos: os quatro ja entram em regime no primeiro quadro,
   sem primeiro ciclo diferente dos demais */
.tool-jump a:nth-child(2)::before,.tool-jump a:nth-child(2) img{animation-delay:-15s}
.tool-jump a:nth-child(3)::before,.tool-jump a:nth-child(3) img{animation-delay:-10s}
.tool-jump a:nth-child(4)::before,.tool-jump a:nth-child(4) img{animation-delay:-5s}
/* 22% de 20s = 4,4s parado em cada cartao, mais 600ms de troca em cada ponta */
@keyframes porto-destaque-traco{0%,22%{opacity:1}25%,97%{opacity:0}100%{opacity:1}}
@keyframes porto-destaque-logo{0%,22%{opacity:1}25%,97%{opacity:.62}100%{opacity:1}}
/* pausa com o foco do teclado dentro da faixa */
.tool-jump:focus-within a::before,.tool-jump:focus-within a img{animation-play-state:paused}
/* pausa com o mouse em cima, so onde existe mouse de verdade: em tela de toque
   o :hover gruda depois do toque e deixaria a rotacao parada para sempre */
@media (hover:hover){
  .tool-jump:hover a::before,.tool-jump:hover a img{animation-play-state:paused}
}
/* quem pede menos movimento ve os quatro logos parados e em cor plena,
   exatamente como a pagina era antes deste bloco */
@media(prefers-reduced-motion:reduce){
  .tool-jump a::before,.tool-jump a img{animation:none}
}

/* V30: formacao e registro profissional no bloco do fundador (quem-somos).
   Reaproveita a tipografia do .founder-copy; a lista perde os marcadores e
   ganha um filete dourado a esquerda, o mesmo recurso que o .eyebrow ja usa
   na pagina, para nao inventar um estilo novo. O selo do EDR Scan repete o
   formato de pilula dos .founder-skills, so que como link. */
.founder-credentials{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.founder-credentials ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.founder-credentials li{position:relative;padding-inline-start:14px;font-size:var(--fs-4);
  line-height:1.6;color:var(--text-1);font-weight:600}
.founder-credentials li:before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--gold-500)}
.founder-credential-badge{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:9px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;
  font-size:var(--fs-2);font-weight:750;color:var(--navy-800);text-decoration:none;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.founder-credential-badge:hover{border-color:var(--gold-500);transform:translateY(-2px)}
.founder-credential-badge span{color:var(--gold-600)}
@media(prefers-reduced-motion:reduce){
  .founder-credential-badge{transition:none}
  .founder-credential-badge:hover{transform:none}
}

/* V31: topico tecnico com foto e texto na pagina de tecnologia (EDR Scan e
   Plataforma Tecnica Integrada). Repete as medidas que a secao do PC-Crash ja
   usa (grade 1.05/0.95, folga de 34px, cantos de 12px, mesma sombra), em vez
   de criar uma linguagem nova; o que muda e so o nome da classe, para nao
   mexer nas regras existentes do PC-Crash. */
.tech-topic{scroll-margin-top:86px}
.tech-topic-head{margin-bottom:34px;max-width:860px}
.tech-topic-head h2{font-size:var(--fs-h2);margin-bottom:10px}
.tech-topic-head .lead{margin:0}
.tech-topic-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.tech-topic-grid.reverse .tech-topic-visual{order:2}
.tech-topic-visual{position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:var(--soft-2)}
.tech-topic-visual img{display:block;width:100%;height:auto}
.tech-topic-copy p{font-size:var(--fs-4);line-height:1.78;color:var(--text-2);margin:0 0 14px}
.tech-topic-copy p:last-child{margin-bottom:0}
/* a lista herda o ritmo do texto e marca cada item com o mesmo ponto dourado
   ja usado no curriculo do fundador */
.tech-topic-list{list-style:none;margin:0 0 16px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.tech-topic-list li{position:relative;padding-inline-start:15px;font-size:var(--fs-4);
  line-height:1.6;color:var(--text-1);font-weight:600}
.tech-topic-list li:before{content:"";position:absolute;inset-inline-start:0;top:.6em;
  width:5px;height:5px;border-radius:50%;background:var(--gold-500)}
@media(max-width:1100px){
  .tech-topic-grid{grid-template-columns:1fr}
  .tech-topic-grid.reverse .tech-topic-visual{order:initial}
}
@media(max-width:760px){
  .tech-topic-list{grid-template-columns:1fr}
}

/* V32: tela de abertura do PC-Crash dentro do topico existente. Reaproveita a
   moldura do .tech-topic-visual e so acrescenta a legenda; o texto e as tags
   do topico continuam intactos. */
.pc-crash-shot{margin:20px 0 0}
.pc-crash-shot figcaption{padding:10px 14px;font-size:var(--fs-2);font-weight:700;
  color:var(--text-3);background:#fff;border-top:1px solid var(--line)}

/* V33: hero da pagina de tecnologia com carrossel de ferramentas.
   Reaproveita o componente data-carrossel que ja existe no site (setas de
   linha fina, indicadores, teclado, deslize no toque, sem rotacao automatica),
   so trocando o que aquele componente supoe: la o slide e uma foto que cobre
   a moldura; aqui e uma logo que precisa caber inteira, com as tres etiquetas
   embaixo, exatamente como o cartao unico fazia antes. */
.hero-tools-carrossel{width:100%;gap:var(--sp-2)}
.hero-tools-carrossel .carrossel-moldura{min-height:262px;background:none;overflow:visible}
.hero-tools-carrossel .carrossel-slide{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px}
/* a folga para as setas fica so na logo, que e o que esta na altura delas; as
   etiquetas usam a largura inteira do cartao e voltam a caber em uma linha */
.hero-tools-carrossel .carrossel-slide img{position:static;width:min(64%,340px);height:auto;
  max-height:190px;object-fit:contain}
/* o .page-hero .hero-media:after e uma moldura decorativa que cobre o cartao
   inteiro e engolia o clique dos indicadores. Enfeite nao intercepta ponteiro.
   Mais importante agora que as setas sairam: as bolinhas sao a unica forma de
   clicar para trocar de item. */
.technology-hero .hero-media:after{pointer-events:none}
@media(max-width:1100px){.hero-tools-carrossel .carrossel-moldura{min-height:240px}}
@media(max-width:760px){
  .hero-tools-carrossel .carrossel-moldura{min-height:214px}
  .hero-tools-carrossel .carrossel-slide{gap:16px}
  .hero-tools-carrossel .carrossel-slide img{width:min(62%,240px);max-height:130px}
}

/* V34: botoes do topico da Plataforma Tecnica Integrada. O .actions do hero e
   feito para fundo escuro; aqui o topico e claro, entao so o espaco acima
   precisa de ajuste, o resto vem dos .btn que a pagina ja usa. */
.tech-topic-actions{margin-top:22px}

/* V35: destaque dos termos no hero de Classificacao e reclassificacao.
   Usa o dourado da propria paleta, o mesmo do filete do sobretitulo e dos
   botoes, sem gradiente e sem peso extra: o <em> perde o italico e so troca
   de cor, para destacar sem quebrar o ritmo da leitura. */
.page-hero .termo{font-style:normal;color:var(--gold-500)}
.page-hero p .termo{font-weight:700}
/* No celular o .hero-media sobe para antes do texto (order:-1). Nesta pagina os
   termos Media Monta, Grande Monta e reclassificacao da monta precisam aparecer
   na primeira tela, entao aqui o texto vem primeiro e o carrossel depois. */
@media(max-width:1100px){.monta-hero .hero-media{order:1}}

/* V36: etiquetas de termos nos blocos de servico de Classificacao e
   reclassificacao. Repete exatamente a pilula que o site ja usa em
   .pc-crash-tags e .tool-keywords; o .bullets da propria pagina nao serve
   aqui porque marca cada item com "✓" e viraria lista de conferencia. */
.svc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.svc-tags span{padding:7px 10px;border-radius:999px;background:#eff0f4;
  border:1px solid #dee2e8;color:#5e6574;font-size:var(--fs-1);font-weight:750}

/* V37: hierarquia entre Reclassificacao de Monta e Classificacao de Danos.
   O filete dourado do .key-line e o acento mais forte da pagina. Depois da
   inversao de ordem, o bloco secundario ficou com 7 desses filetes contra 3 do
   principal, e passava a gritar mais alto que ele. Aqui o filete fica neutro
   so no bloco de Classificacao de Danos: o texto, o peso e o espacamento
   continuam identicos, muda apenas a cor da marca lateral. Nenhuma informacao
   sai e nenhum outro bloco e tocado. */
#classificacao .key-line{border-inline-start-color:var(--line-2)}

/* V38: foto da analise de fluido de freio em pericias mecanicas.
   O arquivo e vertical (1024 por 1536, 2 por 3) e a moldura padrao de
   .detail-media e larga e baixa, entao o cover mostrava so uma faixa do meio:
   sumiam o topo do instrumento, o reservatorio e a mao que segura. A moldura
   desta secao passa a ter exatamente a proporcao do arquivo, o que faz o cover
   coincidir com a foto inteira, sem corte. Para a coluna vertical nao ficar
   alta demais, ela estreita e o texto ao lado ganha a largura devolvida: as
   duas colunas terminam com alturas parecidas. */
.detail-grid-retrato{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);align-items:center}
.detail-grid-retrato .detail-media-retrato{min-height:0;aspect-ratio:1024/1536}
@media(max-width:1100px){.detail-grid-retrato,.detail-grid-retrato.reverse{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}}
@media(max-width:760px){
  .detail-grid-retrato,.detail-grid-retrato.reverse{grid-template-columns:1fr}
  /* em uma coluna so, a largura cheia deixaria a foto com mais de 1000px de
     altura; o limite mantem a foto inteira e legivel sem dominar a pagina */
  .detail-grid-retrato .detail-media-retrato{width:100%;max-width:340px;margin-inline:auto}
}

/* V39: secao do PC-Crash sem a foto de simulacao.
   Saiu o painel .pc-crash-visual, que ocupava metade da largura com uma imagem
   de video e trazia a frase presa dentro de um overlay. A frase virou nota no
   proprio texto (componente .method-note, que ja existe) e a tela de abertura
   do software, que antes ficava espremida no fim da coluna, passou a ser a
   segunda coluna da grade. Duas colunas iguais mantem a linha de texto entre
   65 e 75 caracteres, que era o que a coluna larga anterior estourava. */
.pc-crash-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}
.pc-crash-copy{padding:0}
.pc-crash-copy p{font-size:var(--fs-5);line-height:1.78;max-width:68ch}
.pc-crash-copy .method-note{margin-top:22px}
.pc-crash-hero-grid .pc-crash-shot{margin:0;position:sticky;top:104px}
@media(max-width:1100px){
  .pc-crash-hero-grid{grid-template-columns:1fr;gap:26px}
  .pc-crash-hero-grid .pc-crash-shot{position:static;max-width:560px}
}

/* V40: acabamento da pagina de tecnologia, apontado pela auditoria de interface.
   1. Medida de linha. Em 1280 alguns paragrafos passavam de 80 caracteres por
      linha, acima da faixa de leitura confortavel (45 a 75). O limite em ch
      acompanha o tamanho da fonte, entao vale em qualquer largura.
   2. Alvo de toque no celular. Rodape, indicadores de carrossel, breadcrumb e
      o botao da fonte externa tinham area clicavel entre 12 e 38px de altura,
      abaixo dos 44px. Nada muda no desktop, onde o ponteiro e preciso. */
.tech-intro-head p,.tech-external-head p,.tool-copy>p:not(.lead),.pc-crash-note p{max-width:72ch}
.pc-source-link{display:inline-flex;align-items:center;min-height:44px}
.breadcrumbs a{display:inline-block;padding-block:15px;margin-block:-15px}
@media(max-width:760px){
  /* espacamento maior no rodape: 44px de altura nao cabem no ritmo de 30px sem
     as areas clicaveis se sobreporem, entao o ritmo e que cede */
  .footer a{margin:0;padding-block:15px}
  .carrossel-indicadores button{width:44px;height:44px;padding:21px 0}
}

/* V41: painel de marca das ferramentas deixa de ser so um logo.
   Os quatro blocos de ferramenta gastavam cerca de 35% da largura, quatro vezes
   seguidas, para exibir um logo em cima de um cartao branco de 310px de altura.
   Nao ha captura de tela real dos softwares para pôr ali, entao o que mudou foi
   a distribuicao do que ja existia: os quatro pontos tecnicos de cada ferramenta
   sairam do fim do texto e passaram para o painel, e as palavras-chave, que
   eram etiquetas soltas no painel, foram para o fim do texto. O painel passa a
   carregar informacao, o logo vira identificacao e para de ocupar 250px de
   altura, e as duas colunas ficam com alturas parecidas.
   O painel gruda enquanto o texto longo rola, entao a identidade da ferramenta
   continua visivel durante a leitura. */
.tool-feature-grid{align-items:start}
.tool-brand-panel{min-height:0;justify-content:flex-start;padding:56px 24px 24px;position:sticky;top:104px}
.tool-logo{max-height:112px;max-width:70%;margin-bottom:6px}
.tool-points-painel{display:grid;gap:10px;margin-top:22px;width:100%;position:relative;z-index:1}
.tool-points-painel>div{padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.tool-points-painel b,.tool-points-painel span{display:block}
.tool-points-painel b{font-size:var(--fs-3);color:var(--navy);margin-bottom:5px}
.tool-points-painel span{font-size:var(--fs-2);line-height:1.52;color:var(--muted)}
.tool-keywords-texto{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.tool-keywords-texto span{padding:7px 9px;border-radius:999px;background:#eff0f4;border:1px solid #dee2e8;
  color:#5e6574;font-size:var(--fs-1);font-weight:750}
@media(max-width:1100px){
  .tool-brand-panel{position:relative;top:auto;padding:48px 22px 22px}
  .tool-points-painel{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .tool-points-painel{grid-template-columns:1fr}
  .tool-logo{max-height:96px}
}

/* V42: altura dos cartoes de capacidade do PC-Crash sem numero chutado.
   Os cartoes tinham min-height de 300px e os titulos min-height de 2.6em, dois
   valores escolhidos a olho que davam certo so com os titulos de hoje: um
   titulo de tres linhas ja estourava o alinhamento. A grade ja iguala a altura
   dos itens de uma mesma linha; o que faltava era prender a lista de baixo ao
   rodape do cartao, e isso quem resolve e o proprio fluxo do flex. */
.pc-capability-grid article{min-height:0;display:flex;flex-direction:column}
.pc-capability-grid h3{min-height:0}
.pc-capability-grid article p{flex:1}
.pc-capability-grid article ul{margin-top:auto;padding-top:14px}

/* V43: titulo de coluna do mega menu deixa de ser <h4>.
   Os sete titulos do menu vinham antes do <h1> no documento, entao um leitor de
   tela listava sete cabecalhos de nivel 4 antes do titulo da pagina. Eles nao
   sao cabecalhos de conteudo: sao rotulos de grupo dentro do menu. Viraram
   paragrafo com exatamente a mesma aparencia, aplicada em 15 paginas. */
.mega-col .mega-col-titulo{margin:0 0 12px}

/* V44: nas secoes invertidas, a largura das colunas tambem inverte.
   O .reverse so trocava a ordem visual, entao o painel caia na coluna larga e
   o texto na estreita: as secoes pares tinham proporcao diferente das impares.
   Com os pontos tecnicos dentro do painel isso ficou obvio. */
@media(min-width:1101px){
  .tool-feature-grid.reverse{grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr)}
}

/* V45: video no hero de reconstrucao de acidentes.
   Mesmo filme do hero da home, em loop, mudo e sem controle: aqui ele e pano de
   fundo, nao midia para assistir (o video com controle continua sendo o da
   secao "Simulacao e visualizacao", mais abaixo na mesma pagina).
   A foto continua embaixo e aparece sozinha em tres casos: enquanto o arquivo
   carrega, se o autoplay for recusado, e quando o sistema pede menos movimento,
   caso em que o JS remove o video. A moldura tem cerca de 600px de largura,
   entao usa o arquivo de 720p (1,0 MB) e nao o de 1440p (4,7 MB). */
.hero-media-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 420ms ease}
.hero-media-video video.tocando{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-media-video video{display:none}}

/* =========================================================================
   V46: menu modernizado (26/08/2026)
   BLOCO AUTOCONTIDO. Apagar deste comentario ate o fim do arquivo devolve o
   menu anterior exatamente como estava: nao ha nenhuma alteracao de HTML.
   Copia do menu anterior e instrucao de volta em homolog/backup-menu-20260826.

   Direcao: o cabecalho deixa de ser uma barra com risco embaixo e passa a ser
   uma placa de vidro que flutua sobre o conteudo; o mega menu deixa de ser uma
   laje de ponta a ponta e vira um cartao que desce. Os itens perdem a caixa
   alta e o traco duro, e ganham pilula suave no hover, que e um alvo maior e
   um retorno mais gentil ao toque.
   ========================================================================= */

/* --- cabecalho: vidro, sem risco duro, sombra so depois que a pagina rola --- */
.site-header{background:color-mix(in srgb,#fff 82%,transparent);
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease)}
.site-header.scrolled{background:color-mix(in srgb,#fff 90%,transparent);
  border-bottom-color:color-mix(in srgb,var(--line-1) 70%,transparent);
  /* sombra em duas camadas: contato curto + difusao longa */
  box-shadow:0 1px 2px rgba(12,23,69,.05),0 10px 30px rgba(12,23,69,.06)}
@media(min-width:1101px){
  .header-inner{transition:height var(--dur) var(--ease)}
  .site-header.scrolled .header-inner{height:64px}
  .brand img{transition:width var(--dur) var(--ease)}
  .site-header.scrolled .brand img{width:150px}
}

/* --- itens: caixa baixa, pilula no hover, ponto dourado na pagina atual --- */
.desktop-nav{gap:2px}
.desktop-nav>a,.nav-drop{height:auto;padding:9px 13px;border-radius:999px;
  font-size:var(--fs-4);font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--text-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.desktop-nav>a:after,.nav-drop:after{display:none}
.desktop-nav>a:hover,.nav-drop:hover,.has-mega.open .nav-drop,.has-mega:hover .nav-drop{
  background:color-mix(in srgb,var(--navy-900) 6%,transparent);color:var(--navy-900)}
.desktop-nav>a.active{color:var(--navy-900);font-weight:700}
.desktop-nav>a.active:after{display:block;content:"";position:absolute;
  left:50%;right:auto;bottom:1px;translate:-50% 0;width:15px;height:2px;
  border-radius:2px;background:var(--gold-600)}
.nav-drop .chev{opacity:.55}
.has-mega.open .nav-drop .chev,.has-mega:hover .nav-drop .chev{opacity:1}

/* --- entrada do sistema e botao: cantos e retorno mais suaves --- */
.header-login{border-radius:999px;transition:background var(--dur) var(--ease),
  border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.header-login:hover{background:color-mix(in srgb,var(--navy-900) 6%,transparent)}
.header-cta{border-color:var(--line-1);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease)}
.header-cta:hover{border-color:var(--line-2);transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(12,23,69,.06),0 8px 20px rgba(12,23,69,.10)}

/* --- mega menu: cartao que desce, no lugar da laje de ponta a ponta --- */
/* a entrada (visibility + opacity + pointer-events) continua sendo a que o site
   ja tinha; aqui muda a geometria e o ponto de partida do deslocamento */
.mega-menu{position:absolute;top:calc(100% + 10px);left:0;right:0;margin-inline:auto;
  width:min(calc(100% - 48px),var(--wrap));
  border:1px solid color-mix(in srgb,var(--line-1) 70%,transparent);
  border-radius:var(--radius);padding:26px 0 22px;
  box-shadow:0 1px 2px rgba(12,23,69,.04),0 22px 48px rgba(12,23,69,.13);
  transform:translateY(-8px)}
/* ponte invisivel sobre os 10px de folga, para o ponteiro nao perder o menu
   ao descer do item para o cartao */
.mega-menu:before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mega-grid{width:auto;padding-inline:26px}

.mega-col .mega-col-titulo{border-bottom:0;padding-bottom:4px;margin-bottom:6px;
  letter-spacing:.1em;font-size:var(--fs-2)}
.mega-col a{padding:9px 11px;margin-inline:-11px;border-radius:var(--radius-sm);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.mega-col a:hover{background:var(--soft-1);color:var(--navy-3)}
.mega-col .all-services{margin-top:12px;margin-inline:0;padding:10px 12px;border-top:0;
  text-decoration:none;letter-spacing:.04em;font-size:var(--fs-2);
  background:var(--gold-100);color:var(--gold-700);display:inline-block}
.mega-col .all-services:hover{background:color-mix(in srgb,var(--gold-500) 26%,#fff);
  color:var(--gold-700)}
.research-mega .featured-link p{margin-bottom:10px}

/* --- celular: folha que desce, e o hamburguer virando X --- */
.mobile-nav.open{animation:porto-folha-entra 240ms var(--ease) both}
@keyframes porto-folha-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.menu-btn span{transition:transform 240ms var(--ease),opacity 140ms var(--ease)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mobile-nav>a,.mobile-group summary{border-radius:var(--radius-sm)}
.mobile-nav>a{transition:background var(--dur) var(--ease)}
.mobile-nav>a:hover,.mobile-nav>a:active{background:var(--soft-1)}

@media(prefers-reduced-motion:reduce){
  .site-header,.header-inner,.brand img,.desktop-nav>a,.nav-drop,.header-cta,
  .header-login,.mega-menu,.mega-col a,.mobile-nav,.menu-btn span{transition:none}
  .header-cta:hover{transform:none}
}

/* =========================================================================
   V47: controles do carrossel (26/08/2026)
   Tres coisas: as setas viram botao redondo de vidro, para o icone parar de
   sumir em foto clara; os indicadores viram trilho com preenchimento, que
   mostra quanto falta para a proxima foto; e a troca passa a ser automatica,
   com botao de pausa ao lado (exigencia da WCAG 2.2.2, "Pause, Stop, Hide",
   porque hover e foco nao atendem quem usa toque ou leitor de tela).
   ========================================================================= */
:root{--carrossel-tempo:5.5s}

/* --- indicadores: trilho com preenchimento que conta o tempo --- */
.carrossel-indicadores{align-items:center;gap:9px}
.carrossel-indicadores button[data-carrossel-ir]{width:var(--trilho-largura,22px);height:26px;padding:0;
  --trilho:color-mix(in srgb,var(--navy-900) 20%,transparent);
  --preenchimento:var(--gold-600);
  transition:width 280ms var(--ease)}
.carrossel-indicadores button[data-carrossel-ir][aria-current="true"]{--trilho-largura:46px}
.carrossel-indicadores button[data-carrossel-ir]:before{content:"";position:absolute;left:0;right:0;top:50%;
  translate:0 -50%;height:4px;border-radius:999px;background:var(--trilho);
  transition:background var(--dur) var(--ease)}
.carrossel-indicadores button[data-carrossel-ir]:after{content:"";position:absolute;left:0;right:0;top:50%;
  translate:0 -50%;height:4px;border-radius:999px;background:var(--preenchimento);
  transform:scaleX(0);transform-origin:left center}
.carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{transform:scaleX(1)}
.carrossel-indicadores button[data-carrossel-ir]:hover:before{background:color-mix(in srgb,var(--navy-900) 34%,transparent)}
/* enquanto passa sozinho, o preenchimento e a propria contagem do tempo */
.carrossel[data-auto] .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{
  animation:porto-carrossel-progresso var(--carrossel-tempo) linear forwards}
.carrossel[data-auto="pausado"] .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{
  animation-play-state:paused}
@keyframes porto-carrossel-progresso{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- botao de pausa, ao lado dos indicadores --- */
.carrossel-indicadores .carrossel-pausa{width:26px;height:26px;margin-left:3px;padding:0;border:0;cursor:pointer;
  display:grid;place-items:center;border-radius:999px;background:none;
  color:color-mix(in srgb,var(--navy-900) 55%,transparent);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.carrossel-indicadores .carrossel-pausa:hover{background:color-mix(in srgb,var(--navy-900) 8%,transparent);
  color:var(--navy-900)}
.carrossel-indicadores .carrossel-pausa svg{width:14px;height:14px}
/* o botao de pausa mora na mesma faixa dos indicadores e herdava o trilho deles */
.carrossel-indicadores .carrossel-pausa:before,.carrossel-indicadores .carrossel-pausa:after{content:none;display:none}
.carrossel-indicadores .carrossel-pausa .ic-play{display:none}
.carrossel-indicadores .carrossel-pausa[aria-pressed="true"] .ic-play{display:block}
.carrossel-indicadores .carrossel-pausa[aria-pressed="true"] .ic-pausa{display:none}

/* --- variante sobre o hero navy --- */
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir]{--trilho:rgba(255,255,255,.32);
  --preenchimento:var(--gold-500)}
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir]:before,
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:before{background:var(--trilho)}
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir]:hover:before{background:rgba(255,255,255,.5)}
.hero-media-carrossel .carrossel-indicadores .carrossel-pausa{color:rgba(255,255,255,.72)}
.hero-media-carrossel .carrossel-indicadores .carrossel-pausa:hover{background:rgba(255,255,255,.14);color:#fff}

@media(max-width:760px){
  /* alvo de toque de 44px, com o trilho desenhado menor dentro dele */
  .carrossel-indicadores button[data-carrossel-ir]{width:44px;height:44px}
  .carrossel-indicadores button[data-carrossel-ir]:before,.carrossel-indicadores button[data-carrossel-ir]:after{
    left:50%;right:auto;translate:-50% -50%;width:var(--trilho-largura,20px)}
  .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]{--trilho-largura:36px}
  .carrossel-indicadores .carrossel-pausa{width:44px;height:44px;margin-left:0}
}

@media(prefers-reduced-motion:reduce){
  .carrossel-indicadores button[data-carrossel-ir],.carrossel-indicadores button[data-carrossel-ir]:before,
  .carrossel-indicadores .carrossel-pausa{transition:none}
  .carrossel[data-auto] .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{animation:none;
    transform:scaleX(1)}
}

/* V48: video na secao do PC-Crash e video da pagina de reconstrucao.
   O video ocupa a coluna larga; a nota "Como utilizamos" explica exatamente o
   que se ve nele e fica na coluna estreita, ancorada no topo.

   V68 (27/08/2026): eram DUAS notas nessa coluna, com align-content
   space-between. A coluna tinha 496px para 254px de conteudo, entao as duas
   caixas iam para os extremos com 242px de vazio no meio: mesmo tamanho, mesma
   forma, mesma distancia, e por isso liam como conteudo repetido. Ficou uma so.
   A atribuicao de fonte, que qualifica a grade de capacidades e nao o video,
   desceu para debaixo da grade, como letra miuda. E a .method-note da coluna de
   texto saiu porque dizia pela terceira vez a mesma ideia: o paragrafo acima
   dela ja diz, e "Como utilizamos" diz de novo, melhor. */
.pc-crash-video{display:grid;grid-template-columns:minmax(0,1fr);
  gap:18px;margin-top:18px;align-items:start}
.pc-video-quadro{margin:0;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:#0c1745;box-shadow:var(--shadow2)}
.pc-video-quadro video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#0c1745}
.pc-video-quadro figcaption{padding:12px 16px;font-size:var(--fs-2);line-height:1.5;color:var(--text-3);
  background:#fff;border-top:1px solid var(--line)}
.pc-crash-note-lado{grid-template-columns:1fr;margin-top:0}

/* A nota virou faixa de largura inteira embaixo do video. Paragrafo esticado em
   1220px daria cerca de 150 caracteres por linha, o dobro do limite de leitura.
   Entao a faixa se divide: rotulo numa coluna estreita e texto numa coluna
   limitada em 62ch. A largura e usada pela composicao, nao pela linha de texto. */
.pc-crash-note-lado>div{display:grid;grid-template-columns:auto minmax(0,62ch);
  gap:8px 40px;align-items:center;justify-content:center;padding:26px}
/* a faixa e um fecho de secao, nao uma nota de rodape: o texto sobe da fs-2
   para a fs-5, que e o corpo padrao, e o par rotulo + texto fica centrado na
   faixa, entao a sobra vira margem dos dois lados em vez de vazio a direita */
.pc-crash-note-lado p{font-size:var(--fs-5);line-height:1.55}
.pc-crash-note-lado>div b{margin:0;align-self:center;font-size:var(--fs-2);color:var(--gold-500)}
@media(max-width:760px){
  /* no celular a faixa empilha, e o respiro lateral de 26px custava 52px de uma
     coluna de 347: com 18px a linha ganha caractere sem encolher a letra */
  .pc-crash-note-lado>div{grid-template-columns:1fr;gap:7px;padding:20px 18px}
  .pc-crash-note-lado>div b{align-self:start}
}

/* letra miuda de atribuicao: fica colada na grade que ela qualifica, com um fio
   por cima em vez de caixa, para nao virar mais um cartao na fileira */
.pc-fonte{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-1);
  max-width:62ch;font-size:var(--fs-2);line-height:1.55;color:var(--text-3)}

@media(max-width:1100px){
  .pc-crash-video{grid-template-columns:1fr}
}

/* o video da pagina de reconstrucao tem trechos em 4 por 3 dentro do quadro de
   16 por 9; com cover, esses trechos perdiam as laterais */
.video-box-conter video{object-fit:contain;background:#0c1745}

/* V49: fim da numeracao decorativa (26/08/2026).
   Os contadores 01, 02, 03 dos cartoes, dos acordeoes e das etiquetas nao
   diziam nada que a ordem na tela ja nao dissesse. Sairam do HTML; aqui ficam
   os ajustes de quem contava com eles para espacamento. */
.help-questions li{grid-template-columns:1fr}
.help-questions li::before{content:none}
.validation-principle h3{margin-top:0}


/* =========================================================================
   V50: secao "Reclassificacao de Monta" (26/08/2026)
   Era uma parede de 27 paragrafos e 5 subtitulos, todos com o mesmo peso, sem
   uma unica imagem: o leitor nao tinha onde parar. O texto e o mesmo, o que
   mudou foi a estrutura. Cada bloco abaixo existe por um motivo:
   comparativo (a distincao entre as duas montas era a informacao mais
   importante e estava diluida no meio da prosa), carimbo (artefato documental
   que estava solto entre paragrafos), etapas (a frase "analisamos, elaboramos,
   preparamos, acompanhamos" virou percurso visivel), prova (os numeros e os
   publicos estavam espalhados), alerta (o aviso de nao reparar antes e o mais
   caro de perder e estava no meio do fluxo) e fecho.
   Todo tamanho de letra sai da escala; nenhum valor solto.
   ========================================================================= */

/* --- comparativo Media x Grande Monta --- */
.monta-comparativo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2);margin:var(--sp-4) 0 var(--sp-3)}
.monta-caso{padding:var(--sp-4);border:1px solid var(--line-1);border-radius:var(--radius);
  background:#fff;box-shadow:0 1px 2px rgba(12,23,69,.04),0 10px 26px rgba(12,23,69,.05);
  border-top:3px solid var(--line-2)}
.monta-caso-media{border-top-color:var(--gold-500)}
.monta-caso-grande{border-top-color:var(--navy-800)}
.monta-caso-rotulo{display:inline-block;font-size:var(--fs-1);font-weight:800;color:var(--text-3);margin-bottom:var(--sp-2)}
.monta-caso-tese{font-size:var(--fs-6);line-height:1.34;font-weight:700;
  color:var(--navy-900);margin-bottom:var(--sp-3)}
.monta-caso-lista{margin:0 0 var(--sp-3);padding:0;list-style:none;display:grid;gap:10px}
.monta-caso-lista li{position:relative;padding-left:22px;font-size:var(--fs-3);
  line-height:1.6;color:var(--text-2)}
.monta-caso-lista li:before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--line-2)}
.monta-caso-saida{margin:0;padding-top:var(--sp-3);border-top:1px solid var(--line-1);
  font-size:var(--fs-3);line-height:1.62;color:var(--text-2)}
.monta-caso-saida b{color:var(--navy-900)}

/* --- carimbo do registro, tratado como artefato --- */
.monta-registro{display:grid;grid-template-columns:minmax(0,.47fr) minmax(0,.53fr);
  gap:var(--sp-4);align-items:center;margin:var(--sp-4) 0;padding:var(--sp-4);
  border-radius:var(--radius);background:var(--soft-1);border:1px solid var(--line-1)}
.monta-carimbo{display:flex;align-items:center;justify-content:center;
  gap:var(--sp-3);flex-wrap:wrap}
.monta-carimbo-marca{position:relative;display:inline-block;transform:rotate(-3deg)}
.monta-registro .stamp{margin:0;font-size:var(--fs-4);letter-spacing:.1em;padding:12px 18px}
/* X sobre o carimbo: viewBox esticado no retangulo do carimbo, traco em px reais */
.monta-x{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);
  overflow:visible;pointer-events:none}
/* traco fino e translucido: cancela o carimbo sem apagar a leitura do texto embaixo */
.monta-x path{fill:none;stroke:var(--alerta-600);stroke-width:2.6;stroke-linecap:round;
  opacity:.72;vector-effect:non-scaling-stroke}
/* seta de depreciacao, com o valor dentro do corpo da seta */
.monta-queda{flex:0 0 auto;width:clamp(70px,7vw,88px);height:auto;
  filter:drop-shadow(0 1px 1px rgba(12,23,69,.14)) drop-shadow(0 7px 12px rgba(12,23,69,.16))}
.monta-queda-corpo{fill:var(--alerta-600)}
.monta-queda-valor{fill:#fff;font-family:var(--font-body);font-weight:700;font-size:23px;
  letter-spacing:-.02em}
/* entre 761 e 1279 a coluna do carimbo encolhe: reduz o carimbo para
   carimbo e seta continuarem lado a lado, como o texto ao lado diz */
@media(min-width:761px) and (max-width:1279px){
  .monta-carimbo{gap:var(--sp-2)}
  .monta-registro .stamp{font-size:var(--fs-2);letter-spacing:.08em;padding:10px 12px}
}
.monta-registro-texto p{margin:0 0 var(--sp-2);font-size:var(--fs-3);line-height:1.66}
.monta-registro-texto p:last-child{margin-bottom:0}

/* --- etapas do recurso --- */
.monta-etapas{list-style:none;margin:var(--sp-4) 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
.monta-etapas li{position:relative;padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-top:2px solid var(--gold-500)}
.monta-etapas li+li{padding-left:var(--sp-3)}
.monta-etapas b,.monta-etapas span{display:block}
.monta-etapas b{font-size:var(--fs-4);color:var(--navy-900);margin:var(--sp-2) 0 6px}
.monta-etapas span{font-size:var(--fs-2);line-height:1.55;color:var(--text-3)}

/* --- prova --- */
.monta-prova{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,.44fr) minmax(0,.28fr);
  gap:var(--sp-2);margin:var(--sp-4) 0}
.monta-prova>div{padding:var(--sp-4);border-radius:var(--radius);border:1px solid var(--line-1);background:#fff}
.monta-prova .monta-prova-numero{background:var(--navy-900);border-color:var(--navy-900);
  color:#fff;display:grid;align-content:center}
.monta-prova .monta-prova-numero strong{display:block;font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-11);line-height:1;color:var(--gold-500);font-variant-numeric:tabular-nums}
.monta-prova .monta-prova-numero span{display:block;margin-top:8px;font-size:var(--fs-2);color:#dee2e8}
.monta-prova-nota b{display:block;font-size:var(--fs-6);line-height:1.3;color:var(--navy-900);
  margin-bottom:var(--sp-2)}
.monta-prova-nota p{margin:0;font-size:var(--fs-3);line-height:1.62;color:var(--text-2)}
.monta-prova-publicos b{display:block;font-size:var(--fs-1);color:var(--text-3);margin-bottom:var(--sp-2)}
.monta-prova-publicos ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.monta-prova-publicos li{font-size:var(--fs-3);line-height:1.45;color:var(--text-2)}

/* --- alerta com foto real --- */
.monta-alerta{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:0;margin:var(--sp-5) 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-1);background:#fff;
  box-shadow:0 1px 2px rgba(12,23,69,.04),0 14px 34px rgba(12,23,69,.07)}
.monta-alerta-foto{margin:0;position:relative;min-height:260px;background:var(--soft-2)}
.monta-alerta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.monta-alerta-texto{padding:var(--sp-5) var(--sp-4);border-left:3px solid var(--gold-500)}
.monta-alerta-texto p{font-size:var(--fs-3);line-height:1.66;color:var(--text-2)}
.monta-alerta-titulo{font-size:var(--fs-6);line-height:1.34;font-weight:700;color:var(--navy-900)}
.monta-envie{margin-bottom:10px;color:var(--navy-900);font-weight:700}
.monta-envio{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.monta-envio li{position:relative;padding-left:26px;font-size:var(--fs-3);line-height:1.55;color:var(--text-2)}
.monta-envio li:before{content:"";position:absolute;left:0;top:.28em;width:15px;height:15px;
  border-radius:4px;border:1.5px solid var(--gold-600)}

/* --- fecho --- */
.monta-fecho{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--sp-3);align-items:center;margin-top:var(--sp-5)}
.monta-fecho-linha{font-size:var(--fs-6);line-height:1.32;font-weight:700;color:var(--navy-900);margin-bottom:6px}
.monta-fecho-apoio{font-size:var(--fs-3);line-height:1.6;color:var(--text-2);margin-bottom:var(--sp-3)}
.monta-fecho .warranty{margin:0}
.monta-secao .actions{margin:0}

@media(max-width:1100px){
  .monta-prova{grid-template-columns:1fr 1fr}
  .monta-prova-nota{grid-column:span 2}
  .monta-etapas{grid-template-columns:1fr 1fr}
  .monta-etapas li+li{padding-left:0}
  .monta-etapas li:nth-child(2n){padding-left:var(--sp-3)}
}
@media(max-width:760px){
  .monta-comparativo,.monta-registro,.monta-alerta,.monta-fecho,.monta-prova,
  .monta-etapas{grid-template-columns:1fr}
  .monta-prova-nota{grid-column:auto}
  .monta-etapas li,.monta-etapas li:nth-child(2n){padding-left:0}
  .monta-registro{text-align:center}
  .monta-carimbo{gap:var(--sp-2);flex-wrap:nowrap}
  .monta-registro .stamp{font-size:var(--fs-2);letter-spacing:.08em;padding:10px 12px}
  .monta-alerta-foto{min-height:220px}
  .monta-alerta-texto{border-left:0;border-top:3px solid var(--gold-500)}
}

/* V51: leitura e toque na pagina de classificacao e reclassificacao.
   A coluna de texto desta pagina e larga: os paragrafos chegavam a 94
   caracteres por linha, bem acima da faixa de leitura (45 a 75). O limite em ch
   acompanha o tamanho da fonte. E os itens do indice lateral tinham 30px de
   altura clicavel no celular, abaixo dos 44px. */
.detail-main .svc-flow>p,.detail-main .svc-flow>ul,.detail-main .svc-flow>ol,.detail-main .servico-corpo>p,.detail-main .servico-corpo>ul,.detail-main .servico-corpo>ol{max-width:72ch}
@media(max-width:1100px){
  .toc a{padding-block:15px}
}

/* =========================================================================
   V52: "Areas de atuacao" (26/08/2026)
   Eram seis fichas iguais: moldura, sombra, foto recortada numa faixa fixa de
   210px e texto dentro de uma caixa. Ficha com moldura e o padrao mais generico
   que existe, e a moldura ainda competia com a foto.
   Nomes, fotos e descricoes sao os mesmos. O que muda:
   - a moldura e a sombra somem. A foto passa a ser o cartao, e o texto respira
     embaixo dela, no fundo da pagina. Menos linha, mais silencio.
   - a foto ganha proporcao declarada (16 por 10) no lugar da altura fixa, entao
     nenhum enquadramento e decapitado e nao ha salto de layout ao carregar.
   - a grade responde ao conteudo (auto-fit com minimo de 300px) em vez de
     depender de ponto de quebra: tres colunas no desktop, duas no tablet, uma
     no celular, sem media query para isso.
   - o movimento comunica destino: no hover a foto aproxima de leve e a seta
     anda para a direita, que e para onde o clique leva.
   ========================================================================= */
.area-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  column-gap:var(--sp-4);row-gap:var(--sp-6);margin-top:var(--sp-5)}
.area-card{border:0;background:none;border-radius:0;box-shadow:none;overflow:visible;
  transition:none;height:100%;display:flex;flex-direction:column}
.area-card:hover{transform:none;box-shadow:none}
.area-card figure{flex:0 0 auto;height:auto;aspect-ratio:16/10;border-radius:var(--radius);
  background:var(--soft-2);overflow:hidden;position:relative}
.area-card figure:after{content:"";position:absolute;inset:0;border-radius:var(--radius);
  box-shadow:inset 0 0 0 1px rgba(12,23,69,.07);pointer-events:none}
.area-card figure img{transition:scale 520ms var(--ease)}
.area-card .body{padding:var(--sp-3) 2px 0}
.area-card h3{font-size:var(--fs-6);line-height:1.3;color:var(--navy-900);margin-bottom:8px;
  transition:color var(--dur) var(--ease)}
.area-card p{font-size:var(--fs-3);line-height:1.62;color:var(--text-2);max-width:46ch;
  margin-bottom:var(--sp-3)}
.area-card .more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;
  font-size:var(--fs-1);font-weight:800;
  color:var(--gold-700);transition:gap var(--dur) var(--ease)}
.area-card:hover figure img,.area-card:focus-visible figure img{scale:1.045}
.area-card:hover h3,.area-card:focus-visible h3{color:var(--navy-600)}
.area-card:hover .more,.area-card:focus-visible .more{gap:12px}
.area-card:focus-visible{outline:2px solid var(--navy-800);outline-offset:6px;border-radius:var(--radius)}
@media(prefers-reduced-motion:reduce){
  .area-card figure img,.area-card h3,.area-card .more{transition:none}
  .area-card:hover figure img,.area-card:focus-visible figure img{scale:1}
  .area-card:hover .more,.area-card:focus-visible .more{gap:7px}
}

/* V53: separador no topo de "Áreas de atuacao".
   Mesmo recurso que separa a secao final do resto da pagina: a superficie muda,
   e a troca de fundo e o proprio separador. Aqui o tom e o --soft-1, um degrau
   mais claro que o #eff0f4 da secao final, para as duas faixas cinzas nao
   virarem um bloco so quando aparecem em sequencia: a pagina desce de branco
   para cinza claro, cinza medio e navy ate o rodape.
   O fio de 1px marca a emenda. Nao ha traco dourado extra: a etiqueta logo
   abaixo ja traz o proprio, e dois riscos iguais na mesma vertical nao
   acrescentam informacao. */
.areas-section{position:relative;background:var(--soft-1);border-top:1px solid var(--line-1)}
.areas-section .services-intro .eyebrow{margin-bottom:var(--sp-2)}

/* V54: pagina de servicos, limpeza e ligacao.
   Saíram os crachas DOC, REG, REC, MEC, FIRE e HVY: eram siglas inventadas que
   nao correspondem a nada no vocabulario da Porto, e ocupavam o topo do cartao
   com ruido. Com eles fora, o titulo sobe e vira a primeira coisa lida.
   Cada frente ganhou link para a pagina onde ela e tratada de verdade: um
   indice de servicos que nao leva a lugar nenhum nao e indice. */
.showcase-card{padding-top:24px}
.showcase-link{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-2);font-weight:800;
  color:var(--gold-700);transition:gap var(--dur) var(--ease)}
.showcase-link:hover{gap:12px}
.showcase-card ul{margin-bottom:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.showcase-link{transition:none}.showcase-link:hover{gap:7px}}

/* V55: medida de linha e alvo de toque na pagina de servicos.
   O .service-note ia a 133 caracteres por linha e o texto de abertura a 81,
   contra o limite de leitura de 75. E o link novo de cada frente tinha 32px de
   altura clicavel no celular, abaixo dos 44px. Esta correcao ja existia como
   bloco V53 e se perdeu na restauracao de hoje; volta com numero novo. */
.servicos-index .section-head p,.service-note{max-width:72ch}
@media(max-width:760px){.showcase-link{padding-block:15px;margin-top:auto}}

/* V56: quadro do video de reconstrucao com a proporcao do proprio filme.
   O VIDEOSITE e 2520 por 1080 (2,33 por 1), nao 16 por 9. Num quadro 16 por 9
   ele apareceria com tarja preta em cima e embaixo, que sobre o fundo navy
   parece defeito. O quadro passa a ter a proporcao do arquivo, entao a imagem
   preenche a moldura inteira e nada e cortado. */
.video-box-conter{aspect-ratio:21/9;min-height:0}
.video-box-conter video{position:static;height:100%;width:100%}

/* V57 removido em 27/08/2026: fazia da pagina de Tecnologia a unica com
   indicador em bolinha, com regras de especificidade maior que a do resto do
   site. O V67 leva a bolinha para todos os carrosseis, entao este bloco virou
   conflito: ele prendia a bolinha em 11px e o anel de progresso nao aparecia.
   Nada se perde, o desenho continua e melhorou. */

/* V58: sprint 3, video de aplicacao no lugar dos tres cartoes de numero.
   Em loop, mudo e sem controle: aqui ele ilustra, nao e midia para assistir,
   entao nao rouba o foco do teclado nem aparece para o leitor de tela.
   Quem pede menos movimento ve o poster parado, tratado pelo mesmo JS que
   cuida dos outros videos de fundo do site. */
.aplicacao-video{margin:0;border-radius:var(--radius);overflow:hidden;background:#0c1745;
  box-shadow:0 1px 2px rgba(12,23,69,.10),0 16px 40px rgba(12,23,69,.22)}
.aplicacao-video video{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;
  background:#0c1745}
@media(max-width:1100px){.aplicacao-video video{aspect-ratio:16/9}}

/* V59: sprint 7, os quatro servicos viram barras de acordeao.
   Reaproveita o desenho do .nature-accordion, que ja existe na pagina de
   reconstrucao: mesma barra, mesmo sinal de mais girando ao abrir, mesma
   transicao curta. Fechamento automatico do irmao pelo atributo name do
   <details>, que e grupo exclusivo nativo, sem JavaScript. Onde o navegador
   nao suportar o grupo, as barras continuam abrindo e fechando normalmente,
   so nao fecham a anterior sozinhas. */
.servico-acordeao{border-top:1px solid var(--line-1)}
.detail-section:last-of-type .servico-acordeao{border-bottom:1px solid var(--line-1)}
.servico-acordeao>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:22px;padding:26px 4px}
.servico-acordeao>summary::-webkit-details-marker{display:none}
.servico-acordeao>summary h2{margin:0;font-size:var(--fs-9);line-height:1.2}
.servico-acordeao>summary i{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;
  border-radius:50%;border:1px solid var(--line-2);font-style:normal;font-size:var(--fs-6);
  color:var(--text-2);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),
  border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.servico-acordeao[open]>summary i{transform:rotate(45deg);background:var(--gold-500);
  color:var(--navy-900);border-color:var(--gold-500)}
.servico-acordeao>summary:hover i{border-color:var(--navy-800);color:var(--navy-900)}
.servico-acordeao>summary:focus-visible{outline:2px solid var(--navy-800);outline-offset:4px;border-radius:var(--radius-sm)}
.servico-corpo{padding-bottom:var(--sp-6)}
.servico-corpo>:first-child{margin-top:0}
.detail-section .servico-acordeao{margin:0}
/* a etiqueta acima da barra repetia o nome do servico, que agora e a propria
   barra: a barra mostra so o nome, como o sprint pede */
.detail-section:has(.servico-acordeao)>.eyebrow{display:none}
.detail-main>section.detail-section{padding-bottom:0;margin-bottom:0;border-bottom:0}
@media(prefers-reduced-motion:reduce){.servico-acordeao>summary i{transition:none}}

/* V60: faixa de credenciamento no fim de Quem Somos.
   Sobria de proposito: sem sombra, sem moldura decorativa, sem fundo colorido.
   Os tres arquivos foram recortados na mancha de tinta, entao a altura vale
   como peso optico e os tres podem ter a mesma altura sem um parecer maior que
   o outro. Centralizada, porque e um fecho de pagina e nao uma lista de leitura:
   o olho chega nela depois do texto todo e nao precisa de eixo a esquerda.
   O fio fino em cima separa a faixa do conteudo sem pedir atencao. */
.credenciamento{padding-block:var(--sp-7);border-top:1px solid var(--line-1);text-align:center}
.credenciamento-rotulo{font-family:var(--font-dados);font-size:var(--fs-1);color:var(--text-3);margin:0 0 var(--sp-5)}
.credenciamento-faixa{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:var(--sp-5) var(--sp-8)}
.credenciamento-faixa li{flex:0 0 auto;display:flex;align-items:center}
.credenciamento-faixa img{display:block;width:auto;height:78px}
/* o NAPARS e quase quadrado: na mesma altura dos outros ele pesaria mais */
.credenciamento-faixa li:last-child img{height:69px}
@media(max-width:1100px){
  .credenciamento-faixa{gap:var(--sp-4) var(--sp-6)}
  .credenciamento-faixa img{height:52px}
  .credenciamento-faixa li:last-child img{height:46px}
}
@media(max-width:760px){
  .credenciamento{padding-block:var(--sp-6)}
  .credenciamento-faixa{gap:var(--sp-4) var(--sp-5)}
  .credenciamento-faixa img{height:40px}
  .credenciamento-faixa li:last-child img{height:35px}
}

/* V61: disposicao do bloco do Alexandre.
   Antes: foto de 620px de altura ao lado de uma coluna de 1117px, porque as
   duas listas de credenciais estavam espremidas na coluna estreita. Sobravam
   quase 500px de vazio embaixo da foto, e as listas quebravam linha cedo.
   Agora a foto e o texto dividem a primeira faixa, e as listas descem para uma
   faixa propria, lado a lado, usando a largura inteira. Cada lista fica mais
   curta porque tem o dobro de largura, e o vazio embaixo da foto desaparece. */
.alexandre-grid{grid-template-areas:"foto texto" "listas listas";row-gap:var(--sp-6)}
.alexandre-grid .founder-visual{grid-area:foto}
.alexandre-grid .founder-copy{grid-area:texto}
.founder-listas{grid-area:listas;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-4) var(--sp-6);
  align-items:start}
.founder-listas .founder-credentials{margin-top:0}
@media(max-width:1100px){
  .alexandre-grid{grid-template-columns:1fr;grid-template-areas:"foto" "texto" "listas"}
  .alexandre-grid .founder-visual{max-width:420px}
}

/* V62: os dois cartoes de equipe empilham no mesmo ponto.
   A grade base so virava uma coluna em 760px, entao entre 761 e 1100 o cartao
   do Arthur ficava com a foto espremida e o texto em 364px, com as etiquetas
   quebrando linha. O do Alexandre ja empilhava em 1100 depois da V61: agora os
   dois seguem a mesma regra e leem como um sistema so. */
@media(max-width:1100px){
  .about11-founder-grid{grid-template-columns:1fr}
  .about11-founder-grid .founder-visual{max-width:420px}
}

/* V63: hero da pagina Quem Somos.
   Era a unica pagina do site que comecava direto no texto, sem abertura.
   Composicao de capa: o titulo ocupa a esquerda e a linha de apoio a direita,
   com o filete dourado da etiqueta abrindo o bloco.

   V69 (27/08/2026): a foto aerea saiu. Ela fechava o hero por baixo, entao o
   padding inferior era zero de proposito; sem ela o texto ficaria encostado na
   borda da faixa navy. O hero passa a ser so tipografia, que era ja o que a
   nota acima dizia: o luxo aqui e espaco e silencio. O respiro de baixo agora
   e do proprio hero, e o filete dourado da etiqueta continua abrindo o bloco. */
.quem-hero{padding:42px 0 var(--sp-7);overflow:hidden}
.quem-hero-topo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-6) var(--sp-8);align-items:end;padding-block:var(--sp-6) 0}
.quem-hero h1{font-size:clamp(2.2rem,1.2rem + 3.4vw,3.8rem);line-height:1.02;
  letter-spacing:-.03em;margin:0;max-width:19ch}
.quem-hero-apoio p{color:#dee2e8;font-size:var(--fs-6);line-height:1.62;margin:0 0 var(--sp-4);
  max-width:44ch}
.quem-hero-apoio .actions{margin:0}
@media(max-width:1100px){
  .quem-hero-topo{grid-template-columns:1fr;align-items:start;padding-block:var(--sp-5) var(--sp-6)}
  .quem-hero h1{max-width:none}
}
@media(max-width:760px){
  .quem-hero{padding-top:26px;padding-bottom:var(--sp-6)}
}

/* V64: indice lateral no celular, achado na auditoria de mobile.
   Dois defeitos. O rotulo "Nesta pagina" era escondido, entao a fileira virava
   um punhado de links sem explicacao. E a fileira rola de lado com 770px de
   conteudo numa janela de 332px, ou seja, 440px escondidos, sem nenhum sinal de
   que ha mais coisa a direita: item sumindo em silencio.
   O rotulo volta. Para a rolagem, a primeira tentativa foi a sombra no fundo do
   contenedor (background-attachment local), que nao funciona aqui porque as
   pilulas tem fundo proprio e cobrem o gradiente. A solucao e mascara na
   propria fileira, ligada por classe conforme a posicao da rolagem: some so o
   lado onde ainda ha conteudo, e nada desbota quando chega ao fim. */
@media(max-width:1100px){
  .detail-shell .toc b{display:block;margin-bottom:10px;padding:0;border:0;
    font-family:var(--font-dados);font-size:var(--fs-1);color:var(--text-3)}
  .detail-shell .toc{display:block;padding:12px 0 0;background:none;border:0}
  .detail-shell .toc-fileira{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .detail-shell .toc-fileira a{flex:0 0 auto;scroll-snap-align:start}
  .toc-fileira.rola-direita{mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 42px),transparent)}
  .toc-fileira.rola-esquerda{mask-image:linear-gradient(to left,#000 calc(100% - 42px),transparent);
    -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 42px),transparent)}
  .toc-fileira.rola-esquerda.rola-direita{
    mask-image:linear-gradient(to right,transparent,#000 42px,#000 calc(100% - 42px),transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 42px,#000 calc(100% - 42px),transparent)}
}

/* V65: hero de ferramentas no celular, achado na auditoria.
   O logo saia pequeno demais dentro do cartao e as setas encostavam na fileira
   de etiquetas: 18px entre uma coisa e outra, o que dava a impressao de que
   estavam sobrepostas. O quadro ganha altura, o logo cresce e as setas sobem
   para a altura do logo, longe das etiquetas. */
@media(max-width:760px){
  .hero-tools-carrossel .carrossel-moldura{min-height:300px}
  .hero-tools-carrossel .carrossel-slide img{max-width:min(74%,260px)}
  .hero-tools-carrossel .tech-hero-badges{margin-top:var(--sp-3)}
}

/* V66: destaque do logo no carrossel de ferramentas, e fim das setas.
   As setas sairam do HTML: a fileira de indicadores logo abaixo ja troca de
   ferramenta, e o carrossel continua respondendo a seta do teclado, ao deslize
   no toque e a troca automatica. Sem elas, sobra largura para o logo crescer.
   O logo ganha palco proprio: placa clara com fio de 1px e sombra em duas
   camadas, proporcao fixa de 16 por 9 para que ferramenta nenhuma mude a altura
   do quadro na troca, que era o risco de quebrar o layout. */
.hero-tools-carrossel .carrossel-moldura{min-height:296px}
.hero-tools-carrossel .carrossel-slide{gap:18px}
.hero-tools-carrossel .carrossel-slide img{
  width:min(88%,352px);max-height:none;aspect-ratio:16/9;object-fit:contain;
  padding:20px 26px;border-radius:var(--radius);
  background:linear-gradient(180deg,#fff 0%,var(--soft-1) 100%);
  box-shadow:inset 0 0 0 1px rgba(12,23,69,.07),
             0 1px 2px rgba(12,23,69,.05),
             0 14px 30px rgba(12,23,69,.08)}
@media(max-width:1100px){
  .hero-tools-carrossel .carrossel-moldura{min-height:280px}
  .hero-tools-carrossel .carrossel-slide img{width:min(92%,320px);padding:16px 20px}
}
@media(max-width:760px){
  .hero-tools-carrossel .carrossel-moldura{min-height:268px}
  .hero-tools-carrossel .carrossel-slide img{width:100%;padding:14px 18px}
  .hero-tools-carrossel .carrossel-slide{gap:14px}
}

/* =========================================================================
   V67: indicadores do carrossel em bolinha (27/08/2026)

   Os indicadores eram trilhos: um retangulo de 4px que crescia de 22 para 46px
   no item ativo e se preenchia de dourado no ritmo da troca automatica. O
   preenchimento nao era enfeite, era a unica coisa que avisava que o carrossel
   anda sozinho (WCAG 2.2.2). Trocar por bolinha lisa jogaria essa informacao
   fora, entao ela muda de lugar: sai do trilho e vai para o ANEL da bolinha
   ativa, desenhado em conic-gradient com o angulo animado.

   As inativas nao sao bolinhas cinzas cheias, que e o desenho de qualquer
   carrossel: sao aneis vazados de 1,5px, o mesmo fio fino que o site ja usa no
   cartao e no indice lateral. A ativa e a unica marca preenchida da fileira.
   ========================================================================= */

@property --carrossel-angulo {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* fileira centrada em todo carrossel do site. So a da pagina de Tecnologia era
   centrada, por uma regra propria; as outras duas ficavam encostadas a
   esquerda. O botao de pausa entra na conta do centro junto com as bolinhas,
   porque ele e parte do mesmo controle: em 5 bolinhas isso desloca o grupo de
   bolinhas 18px para a esquerda do centro geometrico, imperceptivel na largura
   em que a fileira vive. */
.carrossel-indicadores{align-items:center;gap:10px;justify-content:center}

/* O botao de pausa fica no fim da fileira e puxa o conjunto: centrando o grupo
   inteiro, as bolinhas ficavam 20px a esquerda do centro no desktop e 23px no
   celular, onde ja se percebe. Um vao do tamanho exato do botao (26 mais 3 de
   margem no desktop, 44 no celular) entra antes das bolinhas e zera a conta,
   sem tirar o botao do fluxo nem arriscar sobreposicao quando a fileira cresce.
   So existe onde ha botao de pausa. */
.carrossel-indicadores:has(.carrossel-pausa):before{content:"";flex:0 0 auto;width:29px;height:1px}

.carrossel-indicadores button[data-carrossel-ir]{
  --ponto:9px;
  --anel:24px;
  --espessura:2px;
  /* 55%% e o degrau medido em que o anel vazado alcanca 3,5:1 sobre branco e
     3,5:1 sobre o soft-1, acima do minimo de 3:1 para elemento de interface.
     Em 28%% ficava em 1,79:1: bonito e invisivel para quem precisa enxergar. */
  --traco:color-mix(in srgb,var(--navy-900) 55%,transparent);
  --trilha:var(--line-2);
  /* nucleo e arco sao golds diferentes de proposito: sobre superficie clara o
     dourado claro tem 2,2:1 e nao se enxerga como traco de 2px, enquanto o
     gold-700 tem 5,2:1. O nucleo pode ser claro porque quem carrega a
     informacao ali e a forma (cheio contra vazado), nao a cor. */
  --nucleo:var(--gold-500);
  --arco:var(--gold-700);
  width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  position:relative;display:grid;place-items:center;border-radius:999px;
  transition:none}

/* nucleo: anel vazado quando inativo, disco cheio quando ativo */
.carrossel-indicadores button[data-carrossel-ir]:before{
  content:"";grid-area:1/1;width:var(--ponto);height:var(--ponto);border-radius:999px;
  background:transparent;box-shadow:inset 0 0 0 1.5px var(--traco);
  position:static;left:auto;right:auto;top:auto;translate:none;height:var(--ponto);
  transition:width var(--dur) var(--ease),height var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),scale var(--dur) var(--ease)}

.carrossel-indicadores button[data-carrossel-ir]:hover:before{
  scale:1.18;box-shadow:inset 0 0 0 1.5px var(--navy-900)}

.carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:before{
  width:8px;height:8px;scale:1;background:var(--nucleo);box-shadow:none}

/* anel: trilha e progresso no mesmo desenho. A parte ainda nao percorrida
   aparece na cor da trilha, entao o anel esta sempre visivel e a volta dourada
   e a propria contagem do tempo. */
.carrossel-indicadores button[data-carrossel-ir]:after{
  content:"";grid-area:1/1;width:var(--anel);height:var(--anel);border-radius:999px;
  position:static;left:auto;right:auto;top:auto;translate:none;transform:none;
  background:conic-gradient(var(--arco) var(--carrossel-angulo),var(--trilha) 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--espessura)),#000 calc(100% - var(--espessura)));
  mask:radial-gradient(farthest-side,#0000 calc(100% - var(--espessura)),#000 calc(100% - var(--espessura)));
  opacity:0;scale:.55;
  transition:opacity var(--dur) var(--ease),scale var(--dur) var(--ease)}

.carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{opacity:1;scale:1}

/* sem troca automatica o anel fica cheio: ele marca qual e o item atual, e nao
   ha tempo nenhum para contar */
.carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{--carrossel-angulo:360deg}

.carrossel[data-auto] .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{
  animation:porto-carrossel-volta var(--carrossel-tempo) linear forwards}
.carrossel[data-auto="pausado"] .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{
  animation-play-state:paused}

@keyframes porto-carrossel-volta{
  from{--carrossel-angulo:0deg}
  to{--carrossel-angulo:360deg}
}

.carrossel-indicadores button[data-carrossel-ir]:focus-visible{
  outline:2px solid var(--gold-600);outline-offset:3px;border-radius:999px}

/* --- sobre o hero navy: mesma logica, contraste invertido. So o carrossel de
   fotos, que fica direto sobre o navy. O carrossel de ferramentas da pagina de
   Tecnologia mora dentro de um cartao branco, entao usa a paleta clara. --- */
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir]{
  --traco:rgba(255,255,255,.45);
  --trilha:rgba(255,255,255,.34);
  --nucleo:var(--gold-500);
  --arco:var(--gold-500)}
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir]:before{
  background:transparent;box-shadow:inset 0 0 0 1.5px var(--traco)}
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir]:hover:before{
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:before{
  background:var(--nucleo);box-shadow:none}
.hero-media-carrossel .carrossel-indicadores button[data-carrossel-ir]:focus-visible{
  outline-color:var(--gold-500)}

@media(max-width:760px){
  /* alvo de toque de 44px com a bolinha desenhada no tamanho de sempre dentro */
  .carrossel-indicadores:has(.carrossel-pausa):before{width:44px}
  .carrossel-indicadores button[data-carrossel-ir]{width:44px;height:44px}
  .carrossel-indicadores button[data-carrossel-ir]:before,
  .carrossel-indicadores button[data-carrossel-ir]:after{left:auto;right:auto;translate:none}
  .carrossel-indicadores{gap:2px}
}

@media(prefers-reduced-motion:reduce){
  .carrossel-indicadores button[data-carrossel-ir]:before,
  .carrossel-indicadores button[data-carrossel-ir]:after{transition:none}
  .carrossel[data-auto] .carrossel-indicadores button[data-carrossel-ir][aria-current="true"]:after{
    animation:none;--carrossel-angulo:360deg}
}

/* --- Sprint 3: texto justificado com hifenizacao automatica.
   Vale para paragrafo de conteudo dentro do main, por lista explicita.
   Ficam de fora, por decisao aprovada: item de menu, botao, rotulo de formulario,
   legenda, celula de tabela, etiqueta curta, rodape legal, referencia ABNT,
   linha de destaque de uma linha so e o paragrafo de abertura (.lead).
   :where mantem a especificidade em zero, para o resto do site continuar
   facil de sobrescrever. --- */
:where(main) :where(p:not([class]), p.study-summary, p.svc-narrow, p.monta-caso-tese, p.monta-caso-saida){
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}

/* Coluna curta nao comporta justificacao: com menos de cerca de 45 caracteres
   por linha o espaco extra vira vao visivel entre as palavras. Medido no
   navegador em 375 e 1280, estes blocos ficam melhor alinhados a esquerda. */
:where(main) :where(.area-card, .article-card, .showcase-card, .monta-caso,
  .validation-principle, .own-validation-card, .pc-capability-grid,
  .warranty, .quem-hero-apoio) :where(p){
  text-align:left;
  hyphens:manual;
  -webkit-hyphens:manual;
}

/* No celular a coluna encolhe e o corpo maior destes quatro blocos deixa poucas
   palavras por linha. Medido em 375px, o vao mediano passa de tres vezes o espaco
   normal e a linha abre buraco. So neles a justificacao sai abaixo de 640px. */
@media (max-width:639px){
  :where(main) :where(.copy, .nature-intro, .about11-team-copy, .about11-definition-copy) :where(p){
    text-align:left;
    hyphens:manual;
    -webkit-hyphens:manual;
  }
}

/* V68: secao de numeros de Quem Somos (pacote front-modern, Sprint 1, 10/09/2026,
   redesenhado no mesmo dia a pedido do Andre: a primeira versao entrava em
   bloco unico e parecia generica). Composicao: icone de traco fino, numero em
   Days One, legenda curta.
   Coreografia (Sarah Drasner: movimento orquestrado e escalonado, curva
   propria, duracao curta): dentro de CADA coluna o icone revela primeiro, o
   numero entra logo depois enquanto conta, e a legenda fecha a sequencia. As
   quatro colunas tambem sao escalonadas entre si (--d por coluna), entao os
   dois escalonamentos se somam. A curva de entrada e uma exponencial de saida
   (cubic-bezier(.16,1,.3,1)), mais acentuada que a --ease de hover/menu do
   resto do site: entrada pede uma curva propria, hover usa a da casa.
   Sem JS ou com movimento reduzido, o HTML ja traz os valores finais e nada se
   mexe: as regras de entrada so valem quando o JS marca a grade com .js-anima. */
.about11-stats>div{display:grid;gap:var(--sp-2);align-content:start;padding:var(--sp-6) var(--sp-5);--d:0ms}
.about11-stats>div:nth-child(2){--d:110ms}
.about11-stats>div:nth-child(3){--d:220ms}
.about11-stats>div:nth-child(4){--d:330ms}
.about11-stats .stat-icone{width:24px;height:24px;display:block;color:var(--navy-3);margin-bottom:var(--sp-1)}
.about11-stats strong{font-size:var(--fs-12);line-height:1.05;letter-spacing:-.02em;color:var(--navy)}
/* as regras da secao fazem todo span virar bloco de legenda; os spans que o JS
   cria dentro do numero (digitos da contagem, sufixo, texto do leitor de tela)
   herdam o numero, e o sufixo (+) vira sobrescrito dourado */
.about11-stats strong>span{display:inline;font-size:inherit;line-height:inherit;margin:0;max-width:none;color:inherit}
.about11-stats strong .stat-sufixo{font-size:.6em;line-height:1;vertical-align:.3em;margin-left:.06em;color:var(--gold-700)}
.about11-stats span{margin-top:0;font-size:var(--fs-4);line-height:1.5;color:var(--text-2);max-width:26ch}
/* texto so para leitor de tela: durante a contagem ele recebe o valor final,
   nao os digitos intermediarios */
.about11-stats .so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* estado de partida: icone fechado por uma cortina (wipe), numero e legenda
   desfocados, deslocados e transparentes. So existe com JS (.js-anima). */
.about11-stats.js-anima .stat-icone{clip-path:inset(0 100% 0 0)}
.about11-stats.js-anima strong{opacity:0;filter:blur(6px);transform:translateY(10px)}
.about11-stats.js-anima>div>span{opacity:0;filter:blur(4px);transform:translateY(6px)}

/* entrada, um elemento depois do outro dentro da mesma coluna */
.about11-stats.js-anima.visto .stat-icone{
  clip-path:inset(0 0 0 0);
  transition:clip-path 480ms cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d)
}
.about11-stats.js-anima.visto strong{
  opacity:1;filter:blur(0);transform:none;
  transition:opacity 560ms cubic-bezier(.16,1,.3,1),filter 560ms cubic-bezier(.16,1,.3,1),transform 560ms cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--d) + 90ms)
}
.about11-stats.js-anima.visto>div>span{
  opacity:1;filter:blur(0);transform:none;
  transition:opacity 520ms cubic-bezier(.16,1,.3,1),filter 520ms cubic-bezier(.16,1,.3,1),transform 520ms cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--d) + 230ms)
}
/* pouso: quando a contagem chega no valor final, um leve assentamento de
   escala (Josh Comeau: micro interacao que responde ao toque, aqui a chegada
   do numero). So dispara uma vez, via classe que o site.js adiciona. */
@keyframes porto-stat-pousa{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:scale(1)}}
.about11-stats strong.pousou{animation:porto-stat-pousa 320ms cubic-bezier(.33,1.35,.6,1)}

@media (max-width:1100px){.about11-stats>div{padding:var(--sp-5) var(--sp-4)}}
@media (max-width:760px){.about11-stats>div{padding:var(--sp-4) 0}.about11-stats strong{font-size:var(--fs-11)}}
@media (prefers-reduced-motion:reduce){
  .about11-stats.js-anima .stat-icone,.about11-stats.js-anima strong,.about11-stats.js-anima>div>span{
    opacity:1;filter:none;transform:none;clip-path:inset(0);transition:none
  }
  .about11-stats strong.pousou{animation:none}
}

/* V69: revelacao ao rolar para o restante do site, e tres hovers que faltavam
   (pacote front-modern, Sprint 2 em diante, 10/09/2026). Reaproveita a
   linguagem e a curva criadas para a secao de numeros (V68): desfoque mais
   deslocamento mais opacidade para texto, leve assentamento de escala para
   foto e logo (foto nao pede desfoque). So existe com JS: o site.js só aplica
   o estado escondido em quem ainda nao apareceu na tela no momento em que o
   script roda, entao nada que ja estava visivel no carregamento pisca.
   Cabecalho de pagina (page-hero, home-hero) fica de fora de proposito, e nao
   por esquecimento: e a primeira coisa que a pessoa ve, entao "revelar" o que
   ja esta visivel so cria risco de piscar, sem ganho.
   Marcado por atributo (data-rev), nao por classe: a regra de justificacao do
   site (mais acima, "Sprint 3: texto justificado") seleciona paragrafo de
   conteudo por p:not([class]), e um utilitario de animacao virando classe
   nesses paragrafos os tiraria da selecao e desligaria a justificacao e a
   hifenizacao sem ninguem perceber. Atributo nao mexe no seletor de classe. */
[data-rev]{opacity:0;filter:blur(6px);transform:translateY(12px)}
[data-rev][data-visto]{opacity:1;filter:blur(0);transform:none;
  transition:opacity 620ms cubic-bezier(.16,1,.3,1),filter 620ms cubic-bezier(.16,1,.3,1),transform 620ms cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * var(--passo,80ms) + var(--base,0ms))}
[data-rev-midia]{filter:none;transform:translateY(8px) scale(.97)}
[data-rev-midia][data-visto]{filter:none;transform:none}
@media (prefers-reduced-motion:reduce){[data-rev],[data-rev][data-visto]{opacity:1;filter:none;transform:none;transition:none}}

/* hover mais vivo em tres lugares que nao tinham (o resto do site ja tinha:
   area-card, showcase-card, lit-card, tool-jump, carrossel). Sempre a mesma
   curva de interacao do site (--dur/--ease), nunca a curva nova de entrada. */
.study-card{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.study-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.detail-media img{transition:scale 520ms var(--ease)}
.detail-media:hover img{scale:1.035}
.svc-gallery figure img{transition:scale 520ms var(--ease)}
.svc-gallery figure:hover img{scale:1.04}
.credenciamento-faixa img{transition:scale var(--dur) var(--ease)}
.credenciamento-faixa li:hover img{scale:1.06}
.footer a{transition:color var(--dur) var(--ease)}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .study-card,.detail-media img,.svc-gallery figure img,.credenciamento-faixa img,.footer a{transition:none}
}