/* ==========================================================================
   WYN GROUP | landing.css
   CSS compartilhado por todas as landing pages de servico e suas
   respectivas paginas de obrigado.
   Depende das variaveis definidas em style.css (:root).
   Editar aqui vale para as 20 paginas de uma vez.
   ========================================================================== */

/* ==========================================================================
   1. HERO DA LANDING
   ========================================================================== */
.lp-hero{
  background:radial-gradient(120% 90% at 85% 10%, #4E1F92 0%, #2D025E 42%, #16053B 78%, #0C0C0A 100%);
  padding:var(--space-24) 0 var(--space-24);
  position:relative;
  overflow:hidden;
}
.lp-hero .container{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(var(--space-8),5vw,var(--space-16));
  align-items:center;
  position:relative;
  z-index:1;
}
.lp-photo{position:relative;justify-self:center;}
.lp-photo img{
  width:100%;
  max-width:330px;
  height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
.lp-copy .eyebrow{color:#D8C7F2;}
.lp-copy .eyebrow::before{background:#D8C7F2;}
.lp-copy h1{
  color:#fff;
  font-size:clamp(2.2rem,4.4vw,3.4rem);
  margin-bottom:.5rem;
}
.lp-copy h1 .lp-h1-name{
  color:#C9A8F5;
  font-size:.55em;
  display:block;
  margin-top:.2rem;
}
.lp-copy .lp-role{
  color:#C9A8F5;
  font-weight:700;
  font-size:1.05rem;
  margin-bottom:var(--space-6);
}
.lp-services-title{
  color:#fff;
  font-family:var(--font-body);
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:var(--space-4);
}
.lp-services{display:flex;flex-direction:column;gap:.85rem;}
.lp-services li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  color:rgba(255,255,255,.85);
  font-size:.95rem;
  line-height:1.5;
}
.lp-services svg{width:19px;height:19px;color:#C9A8F5;flex-shrink:0;margin-top:.15rem;}
.lp-services strong{color:#fff;}

/* CTA do hero: leva direto ao formulario, para quem entra pelo celular */
.lp-hero-cta{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin-top:var(--space-8);
  background:#25D366;
  color:var(--wyn-black);
  font-weight:700;
  font-size:.9rem;
  padding:.95rem 1.9rem;
  border-radius:30px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.lp-hero-cta:hover{background:#1ebe59;transform:translateY(-2px);}
.lp-hero-cta svg{width:18px;height:18px;}

/* ==========================================================================
   2. SECAO DO FORMULARIO
   ========================================================================== */
.lp-form-section{background:var(--wyn-cream);padding-block:var(--space-16);}
.lp-form-wrap{max-width:560px;margin:0 auto;text-align:center;}
.lp-form-eyebrow{
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--wyn-purple);
  margin-bottom:var(--space-4);
}
.lp-form-wrap h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:.75rem;}
.lp-form-wrap>p{color:var(--wyn-gray);margin-bottom:var(--space-8);}

.lp-card{
  background:linear-gradient(160deg, var(--wyn-purple-light) 0%, var(--wyn-purple) 55%, var(--wyn-black) 130%);
  border-radius:10px;
  box-shadow:0 20px 50px rgba(45,2,94,.28);
  border:1px solid var(--wyn-purple);
  overflow:hidden;
  text-align:left;
}
.lp-progress{height:4px;background:rgba(255,255,255,.18);position:relative;}
.lp-progress-bar{height:100%;background:#fff;width:25%;transition:width .35s var(--ease);}
.lp-card-body{padding:var(--space-8) var(--space-8) var(--space-6);}
.lp-step-label{font-size:.8rem;font-weight:700;color:rgba(255,255,255,.65);margin-bottom:var(--space-3);}
.lp-question{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:500;
  color:#fff;
  margin-bottom:var(--space-6);
}

.lp-options{display:flex;flex-direction:column;gap:.75rem;margin-bottom:var(--space-6);}
.lp-option{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1rem 1.2rem;
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:8px;
  cursor:pointer;
  transition:border-color .2s,background .2s;
  font-size:.95rem;
  font-weight:600;
  color:#fff;
  background:rgba(255,255,255,.05);
}
.lp-option:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1);}
.lp-option input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.lp-option .dot{
  width:18px;height:18px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.45);
  flex-shrink:0;
  position:relative;
  transition:border-color .2s;
}
.lp-option input:checked ~ .dot{border-color:#fff;}
.lp-option input:checked ~ .dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#fff;}
.lp-option.selected{border-color:#fff;background:rgba(255,255,255,.14);}
/* Foco visivel para navegacao por teclado */
.lp-option input:focus-visible ~ .dot{
  outline:2px solid #fff;
  outline-offset:3px;
}

.lp-field{margin-bottom:var(--space-6);}
.lp-field label{display:block;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:.5rem;}
.lp-field input{
  width:100%;
  padding:.9rem 1rem;
  border:1.5px solid rgba(255,255,255,.25);
  border-radius:8px;
  font-family:inherit;
  font-size:.95rem;
  transition:border-color .2s;
  background:rgba(255,255,255,.08);
  color:#fff;
}
.lp-field input::placeholder{color:rgba(255,255,255,.45);}
.lp-field input:focus{outline:none;border-color:#fff;}

.lp-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.lp-back{
  font-size:.85rem;
  font-weight:700;
  color:rgba(255,255,255,.6);
  display:flex;
  align-items:center;
  gap:.3rem;
  visibility:hidden;
  background:none;
  border:none;
  padding:.4rem .2rem;
  cursor:pointer;
  font-family:inherit;
}
.lp-back.visible{visibility:visible;}
.lp-back:hover{color:#fff;}
.lp-back:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px;}
.lp-back svg{width:16px;height:16px;}

.lp-continue{
  background:#fff;
  color:var(--wyn-purple);
  padding:.9rem 2rem;
  border-radius:30px;
  font-weight:700;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:background .2s,transform .2s,color .2s;
}
.lp-continue:hover:not(:disabled){background:var(--wyn-black);color:#fff;transform:translateY(-2px);}
.lp-continue:disabled{opacity:.4;cursor:not-allowed;}
.lp-continue:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.lp-submit{background:#25D366;color:#0C0C0A;}
.lp-submit:hover:not(:disabled){background:#1ebe59;color:#0C0C0A;}

.lp-trust{font-size:.78rem;color:var(--wyn-gray);text-align:center;margin-top:var(--space-4);line-height:1.6;}
.lp-trust a{color:var(--wyn-purple);font-weight:700;text-decoration:underline;}

.lp-step{display:none;}
.lp-step.active{display:block;animation:lpFadeUp .4s var(--ease);}
@keyframes lpFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ==========================================================================
   3. FAQ
   ========================================================================== */
.lp-faq-section{background:var(--wyn-white);}
.lp-faq-head{max-width:640px;margin:0 auto var(--space-8);text-align:center;}
.lp-faq-title{font-size:clamp(1.7rem,3.2vw,2.3rem);}
.lp-faq-head .eyebrow{justify-content:center;}
.lp-faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:.9rem;}
.lp-faq-item{
  background:var(--wyn-cream);
  border:1px solid var(--wyn-gray-light);
  border-radius:8px;
  padding:0;
  overflow:hidden;
}
.lp-faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:1.15rem 1.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:700;
  font-size:.98rem;
  color:var(--wyn-black);
  gap:1rem;
}
.lp-faq-item summary::-webkit-details-marker{display:none;}
.lp-faq-item summary:focus-visible{outline:2px solid var(--wyn-purple);outline-offset:-2px;}
.lp-faq-icon{
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--wyn-purple);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:400;
  transition:transform .25s var(--ease);
}
.lp-faq-item[open] .lp-faq-icon{transform:rotate(45deg);}
.lp-faq-item p{padding:0 1.4rem 1.3rem;color:var(--wyn-gray);font-size:.92rem;line-height:1.65;}

/* ==========================================================================
   5. PAGINA DE OBRIGADO
   ========================================================================== */
body.ty-page{
  background:radial-gradient(120% 90% at 85% 10%, #4E1F92 0%, #2D025E 42%, #16053B 78%, #0C0C0A 100%);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.ty-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(96px + var(--space-8)) 20px var(--space-8);
}
.ty-card{
  max-width:480px;
  width:100%;
  text-align:center;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:clamp(1.75rem,6vw,var(--space-10)) clamp(1.25rem,5vw,var(--space-8));
}
.ty-card svg.ty-check{width:56px;height:56px;color:#fff;margin-bottom:var(--space-4);}
.ty-card h1{
  font-family:var(--font-display);
  color:#fff;
  font-size:clamp(1.4rem,5vw,1.8rem);
  margin-bottom:.6rem;
}
.ty-card>p{
  color:rgba(255,255,255,.7);
  margin-bottom:var(--space-6);
  line-height:1.6;
  font-size:.95rem;
}
.ty-summary{
  text-align:left;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:.4rem clamp(.9rem,4vw,var(--space-5));
  margin:0 clamp(0px,1.5vw,6px) var(--space-6);
  display:none;
}
.ty-summary.active{display:block;}
.ty-row{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  padding:.9rem .1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ty-row:last-child{border-bottom:none;}
.ty-row-icon{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.ty-row-icon svg{width:16px;height:16px;color:rgba(255,255,255,.75);}
.ty-row-text{flex:1;min-width:0;}
.ty-row-label{
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin-bottom:.2rem;
}
.ty-row-value{
  display:block;
  font-size:.95rem;
  font-weight:600;
  color:#fff;
  word-break:break-word;
}
.ty-whats-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  background:#25D366;
  color:#0C0C0A;
  font-weight:700;
  padding:1rem 1.5rem;
  border-radius:999px;
  text-decoration:none;
  transition:background .2s,transform .2s;
  font-size:clamp(.88rem,3.6vw,1rem);
  width:100%;
  max-width:320px;
  text-align:center;
  white-space:normal;
}
.ty-whats-cta:hover{background:#1ebe59;transform:translateY(-2px);}
.ty-whats-cta:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.ty-whats-cta svg{width:22px;height:22px;flex:0 0 auto;}
.ty-back{display:block;margin-top:var(--space-5);font-size:.85rem;color:rgba(255,255,255,.5);text-decoration:none;}
.ty-back:hover{color:#fff;}

/* ==========================================================================
   6. RESPONSIVO
   ========================================================================== */
@media (max-width:900px){
  .lp-hero{padding:var(--space-16) 0 var(--space-16);}
  .lp-hero .container{grid-template-columns:1fr;}
  .lp-photo{order:-1;max-width:230px;margin:0 auto;}
}
@media (max-width:640px){
  .lp-card-body{padding:var(--space-6) var(--space-5) var(--space-5);}
}