/* =================================================================
   ENGENHEIRO PETROBRAS — template "Curso Beta" (1 dobra, claro)
   Claro/limpo · acento vermelho · headline forte · countdown · mockup
   ================================================================= */

:root{
  --bg:      #F6F4EE;
  --panel:   #FFFFFF;
  --ink:     #17191D;
  --muted:   #636B77;
  --line:    #E6E1D6;
  --accent:  #0A7A3D;
  --accent-deep:#054E27;
  --accent-soft:#E6F0E9;
  --green:   #0E9F6E;
  --shadow:  0 18px 45px -18px rgba(20,22,26,.28);
  --shadow-cta: 0 14px 30px -10px rgba(10,122,61,.5);
  --f-display:"Bricolage Grotesque", system-ui, sans-serif;
  --f-body:"Archivo", system-ui, -apple-system, sans-serif;
  --maxw:1160px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
.is-loading body{ opacity:0; }
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  opacity:1; transition:opacity .4s ease;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:#fff; }

/* ===== LP (1 dobra) ===== */
.lp{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(1.8rem,4vw,3rem) clamp(1.3rem,5vw,3rem);
}

/* formas de fundo (sutil, como a referência) */
.bg-shape{ position:fixed; z-index:-1; border-radius:50%; pointer-events:none; }
.bg-shape--1{ width:62vw; height:62vw; right:-22vw; top:-12vw;
  background:radial-gradient(circle at 30% 30%, #ECE7DA, transparent 70%); opacity:.8; }
.bg-shape--2{ width:40vw; height:40vw; left:-16vw; bottom:-18vw;
  background:radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%); opacity:.6; }

/* ===== Texto (coluna esquerda) ===== */
.eyebrow{ display:inline-flex; align-items:center; gap:.55em; font-weight:700; font-size:.92rem;
  color:var(--ink); margin-bottom:1.4rem; animation:up .6s .02s both; }
.eyebrow::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.live-badge{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-body); font-weight:800;
  font-size:.84rem; letter-spacing:.07em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,#12B45C,var(--accent)); padding:.62em 1.15em; border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(10,122,61,.6); margin-bottom:1.3rem; animation:up .6s .02s both; }
.live-badge .live-dot{ width:9px; height:9px; border-radius:50%; background:#ff3b30; flex:none;
  animation:liveBlink 1.5s ease-in-out infinite; }
@keyframes liveBlink{ 0%{ box-shadow:0 0 0 0 rgba(255,59,48,.7);} 70%{ box-shadow:0 0 0 7px rgba(255,59,48,0);} 100%{ box-shadow:0 0 0 0 rgba(255,59,48,0);} }
.kicker{ font-weight:800; letter-spacing:.04em; font-size:.86rem; color:var(--accent);
  text-transform:uppercase; margin-bottom:.9rem; animation:up .6s .08s both; }
.headline{ font-family:var(--f-display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.05rem,4.4vw,3.4rem); line-height:1.04; color:var(--ink);
  text-wrap:balance; margin-bottom:1.1rem; animation:up .7s .16s both; }
.headline .hl{ color:var(--accent); }
.headline u{ text-decoration-thickness:3px; text-underline-offset:4px; text-decoration-color:var(--accent); }
.sub{ font-size:clamp(1rem,1.4vw,1.15rem); color:var(--muted); max-width:46ch; margin-bottom:1.6rem; animation:up .7s .26s both; }

/* bloco data/hora */
.when{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.5rem; animation:up .7s .34s both;
  border-left:3px solid var(--accent); padding-left:.9rem; }
.when div{ font-size:.98rem; }
.when b{ color:var(--ink); }
.when span{ color:var(--muted); }

/* CTA */
.cta{ position:relative; overflow:hidden; display:inline-block; text-decoration:none; font-family:var(--f-body); font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; font-size:clamp(1rem,1.4vw,1.18rem); color:#fff;
  background:linear-gradient(180deg, #12B45C, var(--accent) 55%, var(--accent-deep));
  border:none; border-radius:999px; padding:1.1em 2.7em; cursor:pointer;
  box-shadow:var(--shadow-cta); transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .2s;
  animation:up .7s .42s both, ctaPulse 2.6s 1.4s ease-in-out infinite; }
.cta::after{ content:""; position:absolute; top:0; left:-45%; width:35%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:ctaShine 3.6s 1.8s ease-in-out infinite; pointer-events:none; }
.cta:hover{ transform:translateY(-3px) scale(1.025); filter:brightness(1.08) saturate(1.05);
  box-shadow:0 22px 48px -10px rgba(10,122,61,.78), 0 0 0 4px rgba(18,180,92,.14); }
.cta:active{ transform:translateY(-1px) scale(.99); }
@keyframes ctaPulse{ 0%,100%{ box-shadow:var(--shadow-cta);} 50%{ box-shadow:0 16px 44px -8px rgba(10,122,61,.85), 0 0 0 6px rgba(18,180,92,.12);} }
@keyframes ctaShine{ 0%{ left:-45%;} 55%,100%{ left:135%;} }

/* countdown */
.countdown{ display:flex; gap:clamp(1rem,3vw,2.2rem); margin-top:0; animation:up .7s .5s both; }
.cd-title{ font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:1.7rem 0 .7rem; }
.cd-item{ text-align:center; }
.cd-num{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,3.4vw,2.6rem);
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.cd-lbl{ display:block; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:.45rem; }
.cd-item + .cd-item{ position:relative; }
.cd-item + .cd-item::before{ content:":"; position:absolute; left:calc(-1 * clamp(.5rem,1.5vw,1.1rem)); top:.1em;
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.5rem,3vw,2.2rem); color:var(--line); }

/* prova */
.proof{ margin-top:1.6rem; font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:.5em;
  flex-wrap:wrap; animation:up .7s .58s both; }
.proof::before{ content:""; width:.55em; height:.55em; border-radius:50%; background:var(--accent); flex:none; }

/* ===== Arte (coluna direita) — mockup de celular ===== */
.art{ position:relative; display:flex; justify-content:center; align-items:center; animation:up .8s .3s both; }
.art .glow{ position:absolute; width:78%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(10,122,61,.12), transparent 65%); }
.phone{ position:relative; width:clamp(240px,28vw,330px); aspect-ratio:9/16;
  background:#0a0d0c; border-radius:30px; box-shadow:var(--shadow);
  border:1px solid var(--line); }
.phone__screen{ position:absolute; inset:8px; border-radius:24px; overflow:hidden;
  background:#0a0d0c; }
.phone__screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.phone__ph{ z-index:1; }
.phone__ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  color:rgba(255,255,255,.7); font-size:.78rem; padding:1.5rem; font-family:var(--f-body);
  background:linear-gradient(160deg,#22323e,#0e171f); }
.badge-float{ position:absolute; z-index:3; background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--shadow); border-radius:14px; padding:.7em 1em; font-size:.8rem; font-weight:700; }
.badge-float .n{ color:var(--accent); font-family:var(--f-display); font-size:1.15rem; }
.badge-float--tl{ top:8%; left:-6%; }
.badge-float--br{ bottom:9%; right:-7%; }
.badge-float small{ display:block; font-weight:500; color:var(--muted); font-size:.66rem; }

/* ===== Rodapé compliance ===== */
.foot{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.3rem,5vw,3rem) 1.6rem;
  font-size:.72rem; color:var(--muted); text-align:center; }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(16,18,22,.66); animation:fade .25s; }
.lp-modal-open .text .cta, .lp-modal-open .text .cta::after, .lp-modal-open .live-dot{ animation-play-state:paused; }
.modal__panel{ position:relative; width:min(440px,100%); max-height:92svh; overflow-y:auto; background:var(--panel); border-radius:20px;
  padding:clamp(1.6rem,4vw,2.4rem); box-shadow:0 30px 80px -20px rgba(0,0,0,.4); animation:pop .35s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:none; } }
.modal__x{ position:absolute; top:.6rem; right:.9rem; background:none; border:none; color:var(--muted); font-size:1.7rem; cursor:pointer; line-height:1; }
.modal__x:hover{ color:var(--ink); }
.modal__panel .kicker{ animation:none; }
.modal__panel h3{ font-family:var(--f-display); font-weight:800; font-size:1.5rem; line-height:1.1; margin-bottom:.4rem; }
.modal__sub{ color:var(--muted); font-size:.92rem; margin-bottom:1.4rem; }
.field{ display:block; margin-bottom:1rem; }
.field span{ display:block; font-size:.78rem; font-weight:600; color:var(--ink); margin-bottom:.4rem; }
.field input{ width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:10px; padding:.85em 1em; transition:border-color .2s, box-shadow .2s; }
.field input::placeholder{ color:#aeb4bd; }
.field input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field input:user-invalid{ border-color:var(--accent); }
.field select{ width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:10px; padding:.85em 1em; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23636B77' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em;
  transition:border-color .2s, box-shadow .2s; }
.field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field select:invalid{ color:#9aa0a8; }
.form-err{ color:var(--accent-deep); font-size:.85rem; margin:-.3rem 0 .8rem; }
.modal .cta{ width:100%; text-align:center; white-space:nowrap; font-size:clamp(.82rem,3.4vw,1.05rem); letter-spacing:.01em; padding-left:.8rem; padding-right:.8rem; animation:ctaPulse 2.6s 1.4s ease-in-out infinite; margin-top:.3rem; }
.modal__safe{ font-size:.76rem; color:var(--muted); text-align:center; margin-top:.9rem; }

/* ===== animações ===== */
@keyframes up{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0;} to{ opacity:1;} }

/* ===== responsivo ===== */
@media (max-width:880px){
  .lp{ grid-template-columns:1fr; text-align:center; padding-top:2.4rem; padding-bottom:2.8rem; gap:2.4rem; min-height:auto; }
  .eyebrow,.proof{ justify-content:center; }
  .headline{ font-size:clamp(1.9rem,7vw,2.6rem); }
  .sub{ margin-left:auto; margin-right:auto; }
  .when{ justify-content:center; }
  .countdown{ justify-content:center; }
  .art{ display:none; }   /* mobile: esconde o mockup pra o CTA subir na 1a dobra */                    /* mockup primeiro no mobile */
  .phone{ width:min(230px,62vw); }
  .badge-float--tl{ left:0; } .badge-float--br{ right:0; }
}
@media (max-width:420px){
  .cta{ width:100%; }
  .cta[data-el="cta"]{ padding-left:.7rem; padding-right:.7rem; font-size:clamp(.74rem,3.5vw,.95rem); letter-spacing:.01em; white-space:nowrap; }
  .badge-float{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}