/* Golden Wolf 3.0 — mobile art-direction final pass
   Approved mockup alignment with real navigation and readable phone layouts.
   Loaded last. Preview only; no production changes.
*/
:root{--gw-gold:#cda66a;--gw-gold-light:#efcf9e}
.nav-mobile summary svg{width:22px;height:22px}
.brand-text small{letter-spacing:.20em}
.hero .eyebrow{color:#edc787}
.hero h1 em{color:#eec998}
.journey h3{max-width:260px}
.journey .btn{isolation:isolate}
.service{
  display:flex;
  flex-direction:column;
  color:inherit;
  cursor:pointer;
}
.service-icon{display:inline-flex;width:27px;height:27px;color:var(--gw-gold-light);margin-top:10px}
.service-icon svg{width:100%;height:100%}
.service-content{display:block}
.service:focus-visible{outline:3px solid var(--gw-gold-light);outline-offset:3px}
.service::after{pointer-events:none}
.process{gap:18px}
.process-item{border-top:1px solid var(--gw-border);display:flex;gap:12px;align-items:flex-start}
.process-item::before{display:none}
.process-item b{
  flex:0 0 42px;
  display:grid;
  place-items:center;
  height:42px;
  width:42px;
  border:1px solid #7aa3d7;
  border-radius:50%;
  color:#dce6f8;
  font-weight:500;
  font-size:13px;
  letter-spacing:0;
  line-height:1;
  background:rgba(2,18,41,.7);
}
.process-description{min-width:0}
.process-item h3{margin:1px 0 6px}
.process-item p{margin:0}
@media (min-width:901px){
  .service{min-height:201px}
  .service h3{margin:14px 0 8px}
  .journey .btn{max-width:initial}
}
@media (min-width:601px) and (max-width:900px){
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service h3{margin-top:12px}
}
@media(max-width:900px){
  .nav-mobile{z-index:60}
  .nav-mobile summary{
    width:46px;
    height:46px;
    min-height:46px;
    padding:0;
    justify-content:center;
    border:0;
    background:transparent;
    color:#f0d5a9;
    font-size:0;
    line-height:0;
  }
  .nav-mobile summary span{display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1}
  .nav-mobile summary:focus-visible{outline:2px solid var(--gw-gold-light);outline-offset:3px}
  .nav-mobile[open] summary{color:#fff}
  .nav-mobile [data-mobile-links]{
    top:calc(100% + 13px);
    right:0;
    z-index:70;
    background:#07172c;
    border:1px solid rgba(122,179,226,.35);
    box-shadow:0 24px 56px rgba(0,0,0,.62);
    border-radius:14px;
    width:min(325px,calc(100vw - 32px));
    max-height:min(70vh,520px);
    overflow-y:auto;
  }
  .nav-mobile [data-mobile-links] a{min-height:44px;display:flex;align-items:center}
  .nav-mobile [data-mobile-links] a:focus-visible{outline:2px solid var(--gw-gold-light);outline-offset:-3px}
}
@media(max-width:600px){
  /* Header — same gold signature and minimal menu as approved phone design. */
  .wrap{width:min(var(--gw-max),calc(100% - 36px))}
  .masthead{background:rgba(2,10,22,.94);border-bottom:1px solid rgba(67,118,174,.18)}
  .nav{height:72px;gap:10px}
  .brand{gap:7px;min-width:0}
  .brand-icon{width:37px;height:39px;flex:0 0 37px}
  .brand-icon img{width:37px;height:39px}
  .brand-text{gap:4px}
  .brand-text b{font-size:clamp(13px,3.6vw,17px);letter-spacing:.085em;white-space:nowrap}
  .brand-text small{font-size:clamp(5px,1.38vw,7px);letter-spacing:.19em;white-space:nowrap}
  /* Hero — image is right of the text, not a giant opaque background. */
  .hero{
    display:block;
    position:relative;
    isolation:isolate;
    padding:37px 0 30px;
    min-height:0;
  }
  .hero::before{
    content:"";
    z-index:-1;
    position:absolute;
    inset:0 -18px -4px;
    background:linear-gradient(90deg,#020a16 3%,rgba(2,10,22,.92) 31%,rgba(2,10,22,.56) 66%,rgba(2,10,22,.13) 100%);
    pointer-events:none;
  }
  .hero>div:first-child{position:relative;z-index:3;max-width:100%}
  .hero .eyebrow{font-size:9px;letter-spacing:.20em;white-space:nowrap}
  .hero .eyebrow::before{width:15px}
  .hero h1{
    margin:15px 0 12px;
    font-size:clamp(34px,9.2vw,43px);
    line-height:1.065;
    letter-spacing:-.045em;
    font-weight:500;
    max-width:min(355px,100%);
    text-wrap:balance;
  }
  .hero-copy{
    max-width:300px;
    font-size:clamp(12px,3.15vw,13px);
    line-height:1.48;
    color:#bac6d6;
    margin:0 0 21px;
    text-shadow:0 2px 15px #020a16;
  }
  .hero-visual{
    position:absolute;
    z-index:-2;
    top:0;
    right:-23%;
    left:auto;
    display:block;
    opacity:.94;
    width:112%;
    height:350px;
    min-height:350px;
    pointer-events:none;
    overflow:hidden;
  }
  .hero-art-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.65) 22%,#000 53%,#000 89%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.65) 22%,#000 53%,#000 89%,transparent 100%);
  }
  .hero-art{
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:65% 32%;
    max-width:initial;
    filter:none;
    mask-image:none;
    -webkit-mask-image:none;
  }
  .hero .actions{width:100%;max-width:307px;gap:9px;display:flex;flex-direction:column}
  .hero .actions .btn{
    display:flex;
    width:100%;
    min-width:0;
    min-height:45px;
    padding:11px 17px;
    font-size:12px;
    justify-content:center;
    border-radius:8px;
    font-weight:700;
  }
  .hero .actions .btn span{margin-left:5px}
  .quiet-meta{display:none}
  /* Talents & companies: portrait cards and genuinely clickable 44px buttons. */
  #jornadas{padding-top:3px;padding-bottom:42px}
  #jornadas .section-top{display:none}
  .journeys{display:grid;grid-template-columns:1fr;gap:12px}
  .journey,.journey-enterprise{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    position:relative;
    isolation:isolate;
    width:100%;
    height:auto;
    min-height:230px;
    padding:19px 18px 68px;
    border:1px solid rgba(85,156,220,.47);
    border-radius:14px;
    overflow:hidden;
    background:#06162b;
  }
  .journey-media{position:absolute;inset:0;overflow:hidden}
  .journey-media img,.journey-enterprise .journey-media img{
    position:absolute;
    top:0;
    right:0;
    left:auto;
    width:76%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:52% 24%;
    transform:none;
  }
  .journey:first-child .journey-media img{
    transform:scaleX(-1);
    object-position:46% 27%;
  }
  .journey-media::after{
    background:linear-gradient(90deg,#04101f 0%,rgba(4,16,31,.97) 27%,rgba(4,16,31,.74) 49%,rgba(4,16,31,.21) 85%,rgba(4,16,31,.06) 100%);
  }
  .journey h3{
    position:relative;
    order:0;
    font-size:clamp(23px,6.3vw,29px);
    line-height:1.02;
    max-width:190px;
    margin:4px 0 8px;
    text-wrap:balance;
    color:#f5f7fb;
  }
  .journey .journey-label{
    position:relative;
    order:1;
    color:#eac58b;
    font-size:9px;
    line-height:1.2;
    letter-spacing:.19em;
    margin:0 0 10px;
  }
  .journey p{
    position:relative;
    order:2;
    width:61%;
    max-width:225px;
    font-size:clamp(11.5px,3vw,12.5px);
    line-height:1.48;
    color:#d1dce9;
    margin:0;
  }
  .journey .chips{display:none}
  .journey>.btn{
    position:absolute;
    order:3;
    inset:auto 15px 15px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    min-height:45px;
    min-width:45px;
    max-width:none;
    padding:0;
    margin:0;
    border-radius:50%;
    background:rgba(7,25,48,.72);
    border:1px solid rgba(148,191,233,.8);
    color:#f1f6ff;
    font-size:17px;
    box-shadow:0 4px 18px rgba(0,0,0,.18);
  }
  .journey>.btn:hover,.journey>.btn:focus-visible{
    color:#061122;
    background:#edc995;
    border-color:#edc995;
    transform:none;
  }
  .journey>.btn .journey-action-label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .journey>.btn span[aria-hidden="true"]{font-size:20px;line-height:1}
  /* Four horizontal solutions, as in the right-side mobile concept. */
  #solucoes{padding-top:42px;padding-bottom:42px}
  #solucoes .section-top{margin-bottom:19px}
  #solucoes .section-top .eyebrow{font-size:9px}
  #solucoes h2{font-size:clamp(28px,7.7vw,35px);margin:11px 0 9px;line-height:1.09}
  #solucoes .lead{font-size:12px;line-height:1.5}
  .service-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
  .service{
    display:grid;
    grid-template-columns:27px minmax(0,1fr) 36px;
    align-items:center;
    gap:13px;
    position:relative;
    border:1px solid rgba(95,152,204,.34);
    min-height:62px;
    padding:10px 12px;
    border-radius:9px;
    background:linear-gradient(108deg,rgba(8,27,50,.98),rgba(7,18,35,.97));
    text-align:left;
  }
  .service-icon{
    width:23px;
    height:23px;
    margin:0;
    display:flex;
    color:#e2b776;
  }
  .service-index{display:none}
  .service h3{font-size:13px;line-height:1.2;margin:0 0 3px;color:#f0f5fc;letter-spacing:0}
  .service p{font-size:10px;line-height:1.4;color:#afbfd3;margin:0;max-width:none}
  .service::after{
    content:"→";
    position:relative;
    bottom:auto;
    left:auto;
    top:auto;
    right:auto;
    transform:none;
    justify-self:end;
    width:32px;
    height:32px;
    border:1px solid rgba(116,171,225,.65);
    color:#b8d9ff;
    font-size:16px;
    border-radius:50%;
    display:grid;
    place-items:center;
  }
  .service:hover,.service:focus-visible{border-color:#e2b776;transform:none}
  /* Compact four-step timeline; readable down to a 320px viewport. */
  #como-funciona{padding-top:41px;padding-bottom:45px}
  #como-funciona .section-top{margin-bottom:17px}
  #como-funciona h2{font-size:clamp(27px,7.3vw,34px);line-height:1.1}
  .process{display:grid;grid-template-columns:1fr;gap:9px}
  .process-item{
    display:grid;
    grid-template-columns:43px minmax(0,1fr);
    align-items:center;
    gap:12px;
    position:relative;
    padding:10px 12px;
    min-height:74px;
    border:1px solid rgba(89,139,191,.27);
    border-radius:10px;
    background:rgba(7,23,43,.65);
  }
  .process-item::before{display:none}
  .process-item b{
    width:40px;
    height:40px;
    border-radius:50%;
    font-size:13px;
    border-color:rgba(119,171,226,.75);
    color:#d7ebff;
  }
  .process-item h3{font-size:13px;line-height:1.25;margin:0 0 4px}
  .process-item p{font-size:10.5px;line-height:1.42}
  /* Summit CTA becomes a photo header followed by real buttons, never fake metrics. */
  #contato{padding-top:17px;padding-bottom:25px}
  .last-cta{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:146px 21px 23px;
    min-height:0;
    gap:15px;
    border-radius:13px;
    background:
      linear-gradient(180deg,rgba(3,12,24,.01) 0%,rgba(3,12,24,.18) 21%,rgba(3,12,24,.93) 47%,#031020 73%),
      url('./assets/gw-summit-landscape.webp') top center / 100% 185px no-repeat,
      #031020;
  }
  .last-cta::before{display:none}
  .last-cta>div:first-child{margin:0;max-width:100%}
  .last-cta .eyebrow{font-size:8px;line-height:1.5;letter-spacing:.15em}
  .last-cta .eyebrow::before{width:13px}
  .last-cta h2{font-size:clamp(26px,7vw,34px);line-height:1.1;margin:11px 0}
  .last-cta .lead{font-size:12px;line-height:1.5}
  .last-cta .actions{display:flex;flex-direction:column;gap:9px;width:100%;margin:4px 0 0}
  .last-cta .actions .btn{width:100%;min-height:45px;padding:10px 13px}
  footer{margin-top:19px}
  .footer-inner{gap:15px}
  .footer-links{gap:12px 16px}
}
@media(max-width:360px){
  .wrap{width:calc(100% - 28px)}
  .hero h1{font-size:clamp(31px,9.1vw,36px)}
  .hero-copy{max-width:266px}
  .hero-visual{right:-31%;width:124%;height:328px;min-height:328px}
  .journey{min-height:250px}
  .journey p{width:66%}
  .journey h3{font-size:23px}
  .service{grid-template-columns:23px minmax(0,1fr) 32px;gap:9px;padding:9px}
  .service h3{font-size:12px}
  .last-cta{padding-inline:17px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .journey>.btn:hover,.service:hover{transform:none}
}