/* Abertura: duas portas (fazenda e corretora) e a marca que se apresenta. Desenho aprovado no canvas. */
body{background:#0B2415;color:#FFFFFF;font-size:19px;line-height:1.5}
.pagina{position:relative;display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
.pe a{color:#D1FAE5}.pe a:hover{color:#FFFFFF}
.porta .video-fundo{transform:scale(1.06)}

/* Duas portas: fazenda (verde) e corretora (ouro), lado a lado, com a emenda em diagonal. */
.portas{position:relative;display:flex;flex:1 1 auto;min-height:0}
.porta{position:relative;display:flex;flex:1 1 0;min-width:0;overflow:hidden;color:#FFFFFF;text-decoration:none;transition:flex-grow .6s cubic-bezier(.2,.8,.2,1)}
.porta:hover,.porta:focus-visible{flex-grow:1.45}
.porta:focus-visible{outline:4px solid #FFFFFF;outline-offset:-6px}
.pc{margin-left:-7vw;clip-path:polygon(7vw 0,100% 0,100% 100%,0 100%)}
.fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.porta:hover .fundo{transform:scale(1.14)}
.veu{position:absolute;inset:0}
.pf .veu{background:linear-gradient(180deg,rgba(8,36,20,.9) 0%,rgba(8,36,20,.42) 40%,rgba(8,36,20,.9) 100%)}
.pc .veu{background:linear-gradient(180deg,rgba(40,26,4,.88) 0%,rgba(74,48,6,.4) 40%,rgba(40,26,4,.92) 100%)}
.corpo{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;width:100%;box-sizing:border-box;padding:clamp(24px,4vw,56px)}
.pc .corpo{padding-left:calc(7vw + clamp(24px,4vw,56px))}
.rot{font-weight:700;font-size:20px;letter-spacing:.01em}
.pf .rot{color:#86EFAC}
.pc .rot{color:#FDE68A}
.porta h2{margin:6px 0 0;font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:clamp(34px,3.7vw,56px);line-height:1;letter-spacing:-0.035em;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.porta p{margin:14px 0 0;max-width:30ch;font-size:clamp(19px,1.5vw,22px);line-height:1.36;color:#F0FDF4;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.pc p{color:#FFFBEB}
.cta{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;min-height:60px;margin-top:24px;padding:0 28px;border-radius:999px;font-weight:700;font-size:21px;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .25s ease}
.pf .cta{background:#FFFFFF;color:#14532D}
.pc .cta{background:#E9B949;color:#2B1D03}
.seta{transition:transform .25s ease}
.porta:hover .cta{transform:translateY(-3px)}
.porta:hover .seta{transform:translateX(6px)}

/* Objeto de cada porta: o celular com a tela real (fazenda) e as fotos dos graos (corretora). */
.cel{position:absolute;z-index:1;right:6%;top:13%;width:clamp(150px,13.5vw,210px);padding:8px;border-radius:34px;background:linear-gradient(150deg,#3a403c,#121513 45%,#1d211f);box-shadow:inset 0 0 0 2px #59615c,0 40px 80px rgba(0,0,0,.55);transform:perspective(1400px) rotateY(-18deg) rotateX(7deg) rotateZ(4deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.porta:hover .cel{transform:perspective(1400px) rotateY(-8deg) rotateX(3deg) rotateZ(1.5deg) translateY(-12px)}
.cel-tela{overflow:hidden;aspect-ratio:780/1500;border-radius:27px;background:#F3F4F6}
.cel-tela img{display:block;width:100%;height:auto}
.graos{position:absolute;z-index:1;right:6%;top:11%;width:clamp(190px,17vw,270px);aspect-ratio:1/1.05}
.grao{position:absolute;overflow:hidden;width:68%;aspect-ratio:4/5;border-radius:18px;border:4px solid #FFFFFF;box-shadow:0 30px 60px rgba(0,0,0,.5);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.grao img{display:block;width:100%;height:100%;object-fit:cover}
.grao span{position:absolute;left:10px;bottom:10px;padding:5px 12px;border-radius:999px;background:#FFFFFF;color:#2B1D03;font-weight:700;font-size:16px}
.g1{left:0;top:0;transform:rotate(-7deg)}
.g2{right:0;bottom:0;transform:rotate(6deg)}
.porta:hover .g1{transform:rotate(-11deg) translate(-8px,-8px)}
.porta:hover .g2{transform:rotate(10deg) translate(8px,6px)}

/* Faixa central: a marca e a frase que une os dois lados. */
.centro{position:absolute;z-index:3;left:0;right:0;top:clamp(20px,3.4vh,40px);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,22px);padding:0 16px;text-align:center;pointer-events:none}
.marca{position:absolute;top:0;left:clamp(16px,4vw,48px);white-space:nowrap;display:inline-flex;align-items:center;gap:10px;font-family:Archivo,Arial,sans-serif;font-weight:800;font-size:26px;letter-spacing:-0.01em;color:#FFFFFF}
.selo-m{display:inline-flex;border-radius:50%}
.m-anel{stroke-dasharray:114;stroke-dashoffset:0}
.m-check{stroke-dasharray:30;stroke-dashoffset:0}
.m-nome{position:relative;display:inline-flex;overflow:hidden;padding:2px 0}
.m-a,.m-b{display:inline-block}
.m-b{color:#86EFAC}
.m-nome::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-16deg)}
.pe{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 28px;padding:10px clamp(16px,4vw,48px);background:#0B2415;font-size:17px;color:#D1FAE5}
.pe a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* Entrada: as portas abrem dos lados, a frase sobe, os objetos pousam. */
@media (prefers-reduced-motion:no-preference){
  /* Marca: nasce grande no centro (anel se desenha, check risca, nome sobe, brilho passa),
     depois recolhe para o topo e as portas abrem. */
  .marca{animation:m-palco 2.5s cubic-bezier(.7,0,.2,1) backwards}
  .m-anel{animation:m-anel .9s .15s cubic-bezier(.6,0,.2,1) backwards}
  .m-check{animation:m-check .45s .85s cubic-bezier(.3,.9,.3,1) backwards}
  .selo-m{animation:m-pulso 1s 1.15s ease-out backwards,m-halo 3.6s 3s ease-in-out infinite}
  .m-a{animation:m-letra .7s .55s cubic-bezier(.2,.8,.2,1) backwards}
  .m-b{animation:m-letra .7s .72s cubic-bezier(.2,.8,.2,1) backwards}
  .m-nome::after{animation:m-brilho 5s 1.3s ease-in-out infinite}
  .pf{animation:abre-e 1s 1.75s cubic-bezier(.2,.8,.2,1) backwards}
  .pc{animation:abre-d 1s 1.75s cubic-bezier(.2,.8,.2,1) backwards}
  .corpo{animation:sobe .8s 2.5s cubic-bezier(.2,.8,.2,1) backwards}
  .cel,.graos{animation:pousa 1.1s 2.6s cubic-bezier(.2,.8,.2,1) backwards}
  .fundo{animation:respira 16s ease-in-out infinite alternate}
}
@keyframes m-palco{0%{opacity:0;left:50%;transform:translate(-50%,38vh) scale(2.6)}10%{opacity:1}62%{opacity:1;left:50%;transform:translate(-50%,38vh) scale(2.6)}100%{left:clamp(16px,4vw,48px);transform:none}}
@keyframes m-anel{from{stroke-dashoffset:114}}
@keyframes m-check{from{stroke-dashoffset:30}}
@keyframes m-pulso{0%{box-shadow:0 0 0 0 rgba(134,239,172,.8)}100%{box-shadow:0 0 0 26px rgba(134,239,172,0)}}
@keyframes m-halo{0%,100%{box-shadow:0 0 0 0 rgba(134,239,172,0)}50%{box-shadow:0 0 22px 2px rgba(134,239,172,.55)}}
@keyframes m-letra{from{transform:translateY(115%)}}
@keyframes m-brilho{0%{left:-60%}30%,100%{left:130%}}
@keyframes abre-e{from{transform:translateX(-100%)}}
@keyframes abre-d{from{transform:translateX(100%)}}
@keyframes sobe{from{opacity:0;transform:translateY(26px)}}
@keyframes pousa{from{opacity:0;translate:0 70px;scale:.86}}
@keyframes respira{from{object-position:40% 50%}to{object-position:60% 50%}}

@media (max-width:820px){
  .portas{flex-direction:column}
  .porta{flex:1 1 auto;min-height:62vh}
  .porta:hover,.porta:focus-visible{flex-grow:1}
  .pc{margin-left:0;clip-path:none}
  .pc .corpo{padding-left:clamp(24px,4vw,56px)}
  .pf .corpo{padding-top:230px}
  .cel{right:6%;top:auto;bottom:34%;width:120px}
  .graos{right:5%;top:4%;width:128px}
  .porta p{max-width:24ch}
  }
.marca{margin:0}
.pe{align-items:center}
.pe-links{display:flex;flex-wrap:wrap;gap:4px 24px}