/* MyMoradia · Andrea Lopez: páginas de conversão de coluna estreita, uma ação por ecrã. Neutros (papel, pedra, tinta) com azul de azulejo como único acento. Tema claro fixo por opção. Do mockup do Tomás (andrea-lopez/mockup.html). */
:root{
  color-scheme: light;
  --paper:#F7F6F3;
  --surface:#FFFFFF;
  --stone:#E6E3DD;
  --ink:#16181D;
  --muted:#5D6068;
  --azul:#1E4A94;
  --azul-deep:#123166;
  --azul-soft:#E8EEF8;
  --ok:#2F6B4F;
  --note:#B4561F;
  --display:"Manrope", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --body:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --r:6px;
  --tile: radial-gradient(circle at 50% 50%, transparent 38%, var(--azul) 39% 42%, transparent 43%) 0 0/28px 28px, linear-gradient(45deg, transparent 46%, var(--azul) 47% 53%, transparent 54%) 0 0/28px 28px;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;margin:0}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--azul)}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}


.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
.brand{display:flex;align-items:center;justify-content:space-between;padding-block:20px}
.logo{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em}
.logo span{color:var(--azul)}
.lang{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);font-weight:600}
.lead{font-size:18px;color:var(--muted);max-width:56ch}

/* Hero opt-in: headline, subheadline, capa e formulário acima da dobra */
.hero{display:grid;grid-template-columns:1fr 420px;grid-template-areas:"head form" "sub form" "cover form";grid-template-rows:auto auto 1fr;column-gap:56px;row-gap:16px;align-items:start;padding-block:8px 48px}
.hero > *{min-width:0}
.h-head{grid-area:head}.h-sub{grid-area:sub}.h-cover{grid-area:cover;padding-top:12px}.h-form{grid-area:form}
.hero h1{font-size:clamp(28px,3.8vw,44px);margin-top:10px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--azul)}
.cover{width:170px;aspect-ratio:3/4;max-width:100%;background:var(--azul-deep);color:#fff;border-radius:3px;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 30px -18px rgba(18,49,102,.6);position:relative;overflow:hidden;transform:rotate(-3deg)}
.cover::after{content:"";position:absolute;inset:auto -20px -20px auto;width:110px;height:110px;background:var(--tile);opacity:.35}
.cover small{font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.cover strong{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.2}
.inside{padding-block:8px 56px}
.inside-list{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.inside-list li{display:grid;gap:6px;border-top:2px solid var(--ink);padding-top:14px;min-width:0}
.inside-list b{font-family:var(--display);font-size:30px;font-weight:800;color:var(--azul);line-height:1}
.inside-list span{color:var(--muted);font-size:15px}

/* Formulário */
.card{background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);padding:28px;box-shadow:0 24px 48px -32px rgba(22,24,29,.35)}
.card h2{font-size:26px;margin-bottom:6px}
.card .sub{color:var(--muted);font-size:15px;margin-bottom:20px}
form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600}
.field input,.field select{width:100%;padding:13px 14px;border:1px solid var(--stone);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--azul);background:#fff;outline:none;box-shadow:0 0 0 3px var(--azul-soft)}
.phone{display:grid;grid-template-columns:110px 1fr;gap:8px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:var(--azul);color:#fff;border:0;border-radius:var(--r);padding:16px 22px;font-weight:600;font-size:16px;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--azul-deep)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--stone)}
.fine{font-size:12px;color:var(--muted);text-align:center}

/* Secções */
.band{background:var(--surface);border-block:1px solid var(--stone)}
.section{padding-block:64px}
.section h2{font-size:clamp(28px,3.6vw,40px);margin-block:10px 14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.grid3 > *{min-width:0}
.tile{border-top:2px solid var(--ink);padding-top:16px}
.tile h3{font-size:22px;margin-bottom:8px}
.tile p{color:var(--muted);font-size:15px}
.num{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--azul);text-transform:uppercase;margin-bottom:8px}

.about{display:grid;grid-template-columns:320px 1fr;gap:48px;align-items:center}
.about > *{min-width:0}
.photo{aspect-ratio:4/5;max-width:100%;border-radius:var(--r);background:var(--stone);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:14px}
.photo::before{content:"";position:absolute;inset:0;background:var(--tile);opacity:.18}
.photo span{position:relative;background:rgba(255,255,255,.9);font-size:12px;padding:6px 10px;border-radius:4px;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:28px;margin-top:24px}
.facts div{display:grid}
.facts b{font-family:var(--display);font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.facts span{font-size:13px;color:var(--muted)}

.cta-final{text-align:center;display:grid;justify-items:center;gap:16px}

footer{padding-block:28px;font-size:12px;color:var(--muted);border-top:1px solid var(--stone)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* Obrigado */
.narrow{max-width:760px;margin:0 auto;padding-inline:16px}
.steps{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-block:8px 28px;flex-wrap:wrap}
.steps .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;border:1px solid var(--stone);background:var(--surface)}
.steps .done .dot{background:var(--ok);color:#fff;border-color:var(--ok)}
.steps .now .dot{background:var(--azul);color:#fff;border-color:var(--azul)}
.steps > span{display:flex;gap:8px;align-items:center}
.steps i{width:24px;height:1px;background:var(--stone)}
.ty-head{padding-block:32px 8px}
.ty-head h1{font-size:clamp(32px,4.6vw,48px);margin-block:12px}

/* Calendário */
.cal{background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);overflow:hidden}
.cal-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--stone);flex-wrap:wrap}
.cal-top strong{font-family:var(--display);font-size:18px;font-weight:700}
.cal-top small{color:var(--muted);font-size:13px}
.days{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--stone)}
.day{background:none;border:0;border-right:1px solid var(--stone);padding:12px 4px;cursor:pointer;display:grid;gap:2px;color:var(--ink)}
.day:last-child{border-right:0}
.day span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.day b{font-family:var(--display);font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.day[aria-pressed="true"]{background:var(--azul-soft);box-shadow:inset 0 -2px 0 var(--azul)}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;padding:18px 20px}
.slot{border:1px solid var(--stone);background:var(--paper);border-radius:var(--r);padding:10px 0;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--ink)}
.slot:hover{border-color:var(--azul)}
.slot[aria-pressed="true"]{background:var(--azul);color:#fff;border-color:var(--azul)}
.tz{padding:0 20px 16px;font-size:12px;color:var(--muted)}

/* VSL */
.vsl-hero{padding-block:20px 56px;text-align:center}
.vsl-hero h1{font-size:clamp(30px,4.4vw,52px);max-width:22ch;margin:12px auto 16px}
.vsl-hero .lead{margin:0 auto 28px}
.video{position:relative;aspect-ratio:16/9;max-width:860px;width:100%;margin:0 auto;background:#0E1424;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;color:#fff}
.video::before{content:"";position:absolute;inset:0;background:var(--tile);opacity:.12}
.play{position:relative;width:76px;height:76px;border-radius:50%;background:#fff;display:grid;place-items:center}
.play::after{content:"";border-left:20px solid var(--azul-deep);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:6px}
.video .cap{position:absolute;left:16px;bottom:14px;font-size:13px;opacity:.8}
.video .dur{position:absolute;right:16px;bottom:14px;font-size:12px;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:3px;font-variant-numeric:tabular-nums}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.fit > div{background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);padding:24px;min-width:0}
.fit h3{font-size:20px;margin-bottom:12px}
.fit ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--muted)}

.case{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.case > *{min-width:0}
.case table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.case td{padding:12px 0;border-bottom:1px solid var(--stone)}
.case td:last-child{text-align:right;font-weight:600}
.case tr.total td{border-bottom:2px solid var(--ink);font-family:var(--display);font-size:20px;font-weight:700}

/* Formulário por etapas */
.msf{max-width:620px;margin:0 auto}
.msf-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:22px}
.msf-bar i{height:4px;border-radius:2px;background:var(--stone)}
.msf-bar i.on{background:var(--azul)}
.msf-step{display:none}
.msf-step.on{display:grid;gap:14px}
.msf-step h3{font-size:24px}
.opts{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:center;border:1px solid var(--stone);border-radius:var(--r);padding:12px 14px;background:var(--paper);cursor:pointer}
.opt:has(input:checked){border-color:var(--azul);background:var(--azul-soft)}
.opt input{accent-color:var(--azul)}
.q{display:grid;gap:8px}
.q > span{font-weight:600;font-size:15px}
.row{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.err{color:#A3322A;font-size:13px;min-height:1em}

/* Obrigado marcação */
.booked{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--stone);border-left:3px solid var(--ok);border-radius:var(--r);padding:16px 20px;margin-block:20px 28px;flex-wrap:wrap}
.booked b{font-family:var(--display);font-size:18px;font-weight:700}
.check{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.check li{display:grid;grid-template-columns:28px 1fr;gap:10px;background:var(--surface);border:1px solid var(--stone);border-radius:var(--r);padding:14px 16px}
.check li b{display:block}
.check li span{color:var(--muted);font-size:15px}
.box{width:20px;height:20px;border:1.5px solid var(--azul);border-radius:4px;margin-top:2px}
.timeline{display:grid;gap:0;margin-top:20px;border-left:1px solid var(--stone);padding-left:20px}
.timeline div{position:relative;padding-bottom:18px}
.timeline div::before{content:"";position:absolute;left:-25px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--azul)}
.timeline b{display:block}
.timeline span{color:var(--muted);font-size:15px}

@media (max-width:860px){
  .hero{grid-template-columns:92px 1fr;grid-template-areas:"head head" "cover sub" "form form";grid-template-rows:auto;column-gap:16px;row-gap:14px;padding-top:0}
  .h-cover{padding-top:4px}
  .cover{width:88px;padding:8px 7px;transform:none}
  .cover small{font-size:6px}.cover strong{font-size:10px}
  .h-sub{font-size:15px}
  .inside-list{grid-template-columns:1fr 1fr}
  .about,.case{grid-template-columns:1fr;gap:32px}
  .grid3{grid-template-columns:1fr}
  .fit{grid-template-columns:1fr}
  .about .photo{max-width:320px}
}
@media (max-width:480px){
  .brand{padding-block:12px}
  .hero h1{font-size:26px}
  .card{padding:18px}
  .card h2{font-size:20px}
  .card .sub{margin-bottom:12px}
  form{gap:10px}
  .field input,.field select{padding:11px 12px}
  .btn{padding:14px 18px}
  .inside-list{grid-template-columns:1fr}
  .days .day b{font-size:18px}
  .phone{grid-template-columns:104px 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* O que o mockup não tinha: estados reais dos formulários e do calendário */
.btn[disabled]{opacity:.55;cursor:default}
.btn[aria-busy="true"]{opacity:.75;cursor:progress}
.cal-nav{display:flex;gap:6px}
.cal-nav button{width:32px;height:32px;border-radius:var(--r);border:1px solid var(--stone);background:var(--paper);color:var(--ink);cursor:pointer;font-size:18px;line-height:1}
.cal-nav button[disabled]{opacity:.35;cursor:default}
.days{grid-template-columns:repeat(var(--n,5),1fr)}
.cal-vazio{padding:22px 20px;color:var(--muted);font-size:15px}
.cal-carrega{padding:22px 20px;color:var(--muted);font-size:15px}
.aviso{background:var(--azul-soft);border-radius:var(--r);padding:12px 14px;font-size:15px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* os vídeos só aparecem com o link em config.js (até lá, nada de espaço vazio) */
.video[data-video]{display:none}
.video[data-video].tem{display:grid}
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foto-real{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}