/* Viviane Bastos · Metodo COCRIAR · secoes */

/* ═══════════ 01 IDENTIFICACAO ═══════════ */
.dor-grade{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,70px);align-items:center}
.conflito{display:grid;gap:0}
.lado{position:relative;padding:26px 30px;background:linear-gradient(160deg,#FFFFFF,#FDF6F4);border-radius:var(--raio);
  box-shadow:0 20px 44px -36px rgba(60,38,48,.7),inset 0 0 0 1px rgba(181,128,114,.26)}
.lado-rotulo{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 12px}
.lado-frase{font-family:var(--display);font-size:clamp(23px,2.6vw,30px);font-style:italic;font-weight:500;color:var(--rose-texto);margin:0;line-height:1.26}
.lado.padrao{background:linear-gradient(160deg,#F7EEEF,#F0E2E4);box-shadow:0 20px 44px -36px rgba(60,38,48,.7),inset 0 0 0 1px rgba(82,54,65,.14)}
.lado.padrao ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lado.padrao li{font-family:var(--display);font-size:clamp(19px,2vw,23px);font-style:italic;font-weight:500;color:var(--tinta);line-height:1.32}
.entre{display:flex;align-items:center;gap:14px;padding:16px 10px}
.entre span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(181,128,114,.7),transparent)}
.entre i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-texto);white-space:nowrap}
.virada{margin:clamp(52px,7vw,84px) auto 0;max-width:30ch;text-align:center;
  font-family:var(--display);font-weight:500;font-size:clamp(25px,3.5vw,42px);line-height:1.24;color:var(--tinta)}
.fx-pintar .pal{opacity:.22;transition:opacity .25s linear}
.convite{margin:22px auto 0;max-width:46ch;text-align:center;font-size:16px;color:var(--tinta-2)}

/* ═══════════ 02 MECANISMO ═══════════ */
.mec-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,72px);align-items:center}
.mec-texto .sub b{font-weight:700;color:var(--rose-gold-claro)}
.explica{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(21px,2.3vw,27px);color:var(--rose-gold-claro);margin:24px 0 0;line-height:1.3}
.exemplo{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:28px 0 0;padding:20px 22px;border-radius:var(--raio);
  background:rgba(238,221,226,.08);box-shadow:inset 0 0 0 1px rgba(224,188,176,.24)}
.exemplo b{display:block;width:100%;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-gold-claro);margin-bottom:4px}
.exemplo span{font-size:14.5px;line-height:1.5;color:var(--creme-2)}
.exemplo .seta{color:var(--rose-gold);flex-shrink:0}
.exemplo .novo{color:var(--creme-texto);font-weight:600}
.mec-passos{counter-reset:p;list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.mec-passos li{counter-increment:p;position:relative;padding-left:40px;font-size:15.5px;line-height:1.6}
.mec-passos li::before{content:counter(p);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--rose-gold-claro);
  background:rgba(238,221,226,.09);box-shadow:inset 0 0 0 1px rgba(224,188,176,.34)}

.ciclo{position:relative;width:min(520px,100%);aspect-ratio:1;margin:0 auto}
.ciclo-anel{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ciclo-anel circle{fill:none;stroke:rgba(238,221,226,.4);stroke-width:.3;stroke-dasharray:1 1.6}
.ciclo-anel circle.interno{stroke:rgba(181,128,114,.46);stroke-dasharray:none}
.ciclo-giro{position:absolute;inset:12%;border-radius:50%;animation:giro 20s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.ciclo-luz{position:absolute;left:50%;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#FFFFFF,#F6E2DA 46%,#D8A897);
  box-shadow:0 0 20px 7px rgba(224,188,176,.6)}
.ciclo-nos{list-style:none;margin:0;padding:0}
.ciclo-nos li{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2;
  display:flex;align-items:center;gap:9px;padding:7px 15px 7px 7px;border-radius:100px;white-space:nowrap;
  background:linear-gradient(150deg,#FFFFFF,#F8EEEF);
  box-shadow:0 14px 28px -18px rgba(20,10,16,.95),0 0 0 1px rgba(181,128,114,.4);
  font-size:12.5px;font-weight:500;color:var(--tinta);line-height:1.2}
.ciclo-nos li b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,#E3B6A8,#C78E7E);font-size:10.5px;font-weight:700;color:#3C2630}
.ciclo-centro{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);text-align:center;margin:0;
  font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(18px,2vw,23px);line-height:1.3;color:var(--creme-2)}

/* ═══════════ 03 AS 7 ETAPAS ═══════════ */
.etapas{list-style:none;margin:clamp(44px,6vw,70px) 0 0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.etapa{position:relative;overflow:hidden;padding:32px 30px 28px;border-radius:var(--raio-g);
  background:linear-gradient(160deg,#FFFFFF,#FCF5F2);
  box-shadow:0 26px 54px -44px rgba(60,38,48,.8),inset 0 0 0 1px rgba(181,128,114,.22);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.etapa:hover{transform:translateY(-6px);
  box-shadow:0 34px 62px -42px rgba(60,38,48,.66),inset 0 0 0 1px rgba(181,128,114,.52),0 0 32px -18px rgba(181,128,114,.8)}
.etapa .inicial{position:absolute;right:16px;top:-16px;font-family:var(--display);font-weight:600;font-size:128px;line-height:1;
  color:rgba(181,128,114,.13);pointer-events:none}
.etapa .icone{width:30px;height:30px;color:var(--rose-texto);margin-bottom:16px}
.etapa h3{margin:0 0 6px}
.etapa-linha{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;color:var(--rose-texto);margin:0 0 13px}
.etapa p{font-size:15.5px;line-height:1.64;margin:0}
.etapa.larga{grid-column:span 3;display:grid;grid-template-columns:auto 1fr auto;gap:8px 32px;align-items:center;
  background:linear-gradient(120deg,#FBF2EF,#F6EAEC)}
.etapa.larga .icone{grid-row:span 3;margin:0;width:38px;height:38px}
.etapa.larga h3{grid-column:2}
.etapa.larga .etapa-linha{grid-column:2;grid-row:2;margin:0}
.etapa.larga p{grid-column:2;grid-row:3}
.etapa.larga .ferramenta{grid-column:3;grid-row:1/4;margin:0;align-self:center}
.ferramenta{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:8px 16px;border-radius:100px;
  font-size:13px;color:var(--tinta);background:rgba(238,221,226,.6);box-shadow:inset 0 0 0 1px rgba(181,128,114,.34)}
.ferramenta i{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rose-texto)}

/* ═══════════ 04 A JORNADA ═══════════ */
.banda{position:relative;margin:clamp(40px,6vw,62px) 0 clamp(38px,5vw,54px);border-radius:var(--raio-g);overflow:hidden;
  box-shadow:0 38px 70px -50px rgba(60,38,48,.9)}
.banda img{width:100%;height:clamp(220px,32vw,390px);object-fit:cover;object-position:50% 32%}
.banda::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(46,28,37,.78),rgba(46,28,37,.22) 54%,transparent)}
.banda-frase{position:absolute;left:clamp(22px,5vw,54px);bottom:clamp(22px,4vw,44px);right:clamp(22px,5vw,54px);z-index:2;margin:0;
  max-width:20ch;font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(22px,3.3vw,38px);
  line-height:1.22;color:#FFF9F6;text-shadow:0 2px 20px rgba(46,28,37,.6)}

.modulos{display:grid;gap:10px}
.modulo{border-radius:var(--raio);overflow:hidden;background:linear-gradient(160deg,#FFFFFF,#FCF5F3);
  box-shadow:0 18px 40px -38px rgba(60,38,48,.9),inset 0 0 0 1px rgba(181,128,114,.2);
  transition:box-shadow .4s var(--ease-out)}
.modulo[open]{box-shadow:0 26px 48px -36px rgba(60,38,48,.8),inset 0 0 0 1px rgba(181,128,114,.46)}
.modulo summary{display:flex;align-items:center;gap:16px;padding:19px clamp(18px,3vw,28px);cursor:pointer;list-style:none;
  transition:background-color .3s}
.modulo summary::-webkit-details-marker{display:none}
.modulo summary:hover{background:rgba(238,221,226,.42)}
.modulo .n{font-family:var(--display);font-weight:600;font-size:26px;line-height:1;color:var(--rose-texto);flex-shrink:0;min-width:32px}
.modulo .t{display:flex;flex-direction:column;gap:3px;flex:1;font-size:16.5px;font-weight:500;color:var(--tinta)}
.modulo .t small{font-size:13px;font-weight:400;color:var(--tinta-3)}
.modulo summary::after{content:"";width:9px;height:9px;flex-shrink:0;border-right:1.5px solid var(--rose-texto);border-bottom:1.5px solid var(--rose-texto);
  transform:rotate(45deg) translateY(-2px);transition:transform .4s var(--ease-out)}
.modulo[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.modulo .resp{padding:0 clamp(18px,3vw,28px) 22px;display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between}
.modulo .resp>p:first-child{margin:0 0 4px;width:100%;font-size:15px;color:var(--tinta-2)}
.aulas{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1;min-width:min(100%,250px)}
.aulas li{display:flex;gap:12px;align-items:baseline;font-size:15.5px;color:var(--tinta-2)}
.aulas b{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--rose-texto);flex-shrink:0}
.modulo .ferramenta{margin:0}

/* ═══════════ 05 21 DIAS ═══════════ */
.ritual{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:clamp(40px,5vw,56px) 0 0}
.ritual div{padding:22px 24px;border-radius:var(--raio);background:rgba(238,221,226,.09);box-shadow:inset 0 0 0 1px rgba(224,188,176,.2)}
.ritual b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-gold-claro);margin-bottom:8px}
.ritual p{margin:0;font-size:15px;color:var(--creme-2)}
.dias{list-style:none;margin:clamp(34px,4vw,46px) 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.dias li{position:relative;padding:26px 24px;border-radius:var(--raio);
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:inset 0 0 0 1px rgba(224,188,176,.2);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.dias li:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(224,188,176,.52),0 0 36px -18px rgba(224,188,176,.9)}
.dias li:nth-child(7){grid-column:span 4;display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;
  background:linear-gradient(120deg,rgba(224,188,176,.2),rgba(238,221,226,.1))}
.dias li:nth-child(7) p{margin:0}
.faixa{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--rose-gold-claro);margin-bottom:10px}
.dias h3{font-size:21px;margin:0 0 6px}
.dias p{font-size:14.5px;margin:0;color:var(--creme-2);opacity:.86}

/* ═══════════ 06 AREA DE MEMBROS (mockup) ═══════════ */
.area-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.area-palco{position:relative;padding-bottom:36px}
/* a area de membros usa a mesma identidade da pagina: marfim, blush, ameixa e rose gold.
   So o banner e as capas de modulo usam o ameixa, como as secoes escuras. */
.tela{position:relative;border-radius:14px;overflow:hidden;background:#FFFCFA;
  box-shadow:0 40px 80px -46px rgba(60,38,48,.72),inset 0 0 0 1px rgba(181,128,114,.3)}
.tela-barra{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--rosa-cha);border-bottom:1px solid rgba(181,128,114,.28)}
.tela-barra i{width:8px;height:8px;border-radius:50%;background:rgba(138,83,70,.34)}
.tela-barra span{margin-left:10px;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-texto)}
.tela-corpo{display:grid;grid-template-columns:112px 1fr;min-height:250px}
.tela-menu{padding:16px 13px;background:var(--blush);border-right:1px solid rgba(181,128,114,.24);display:grid;gap:9px;align-content:start}
.tela-menu b{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta);margin-bottom:6px}
.tela-menu span{font-size:9.5px;color:var(--tinta-3);line-height:1.3}
.tela-menu span.on{color:var(--rose-texto);font-weight:700}
.tela-main{padding:14px 15px 16px;display:grid;gap:11px;align-content:start}

.tela-banner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;border-radius:10px;overflow:hidden;
  background:linear-gradient(110deg,#5A3B46,#3C2630 62%)}
.tela-banner img{width:60px;height:60px;border-radius:9px;object-fit:cover;object-position:50% 12%;flex-shrink:0}
.tela-banner small{display:block;font-size:7px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-gold-claro)}
.tela-banner b{display:block;margin:5px 0 8px;font-family:var(--display);font-weight:500;font-size:17px;line-height:1.1;color:#FFF9F6}
.tela-btn{display:inline-block;padding:5px 12px;border-radius:100px;font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#2E1C25;background:linear-gradient(135deg,#F0D6CC,#D5A08D)}
.tela-tit{margin:2px 0 0;font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-texto)}

/* capas de modulo: foto em cima, faixa clara embaixo, como as capas dos materiais */
/* o espaco a direita e reservado para o celular, que flutua por cima */
.tela-modulos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-right:88px}
.tela-modulos i{position:relative;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;font-style:normal;
  background:linear-gradient(170deg,#FFFFFF,#F7EAEA);box-shadow:0 8px 16px -12px rgba(60,38,48,.7),inset 0 0 0 1px rgba(181,128,114,.26)}
/* o atributo height="250" do HTML vence o aspect-ratio: precisa de height:auto */
.tela-modulos img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:50% 14%}
.tela-modulos u{display:block;padding:6px 7px 0;text-decoration:none;
  font-size:6px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-texto)}
.tela-modulos em{display:block;padding:2px 7px 0;font-style:normal;
  font-family:var(--display);font-size:9.5px;font-weight:600;line-height:1.1;color:var(--tinta)}
.tela-modulos s{display:block;padding:4px 7px 6px;text-decoration:none;
  font-size:5.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(138,83,70,.68)}

.tela-prog{display:flex;align-items:center;gap:10px;margin-top:2px}
.tela-prog span{font-size:8px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
.barra-prog{flex:1;height:5px;border-radius:100px;background:rgba(181,128,114,.24);overflow:hidden}
.barra-prog i{display:block;height:100%;width:14%;border-radius:100px;background:linear-gradient(90deg,#D5A08D,#B58072)}

.fone{position:absolute;right:-8px;bottom:0;width:116px;border-radius:18px;overflow:hidden;background:#FFFCFA;
  box-shadow:0 26px 48px -22px rgba(60,38,48,.6),inset 0 0 0 1.5px rgba(181,128,114,.46),0 0 0 4px rgba(250,247,242,.96);
  animation:flutuar 7s ease-in-out infinite}
@keyframes flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fone-topo{height:15px;background:var(--rosa-cha);position:relative}
.fone-topo::after{content:"";position:absolute;left:50%;top:5px;width:30px;height:4px;margin-left:-15px;border-radius:100px;background:rgba(138,83,70,.34)}
.fone-corpo{padding:9px;display:grid;gap:6px}
.fone-corpo b{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tinta)}
.fone-corpo i{position:relative;display:block;height:36px;border-radius:7px;overflow:hidden;font-style:normal;box-shadow:inset 0 0 0 1px rgba(181,128,114,.28)}
.fone-corpo i img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.fone-corpo u{display:block;height:5px;border-radius:100px;text-decoration:none;background:rgba(181,128,114,.24);overflow:hidden;position:relative}
.fone-corpo u::after{content:"";position:absolute;inset:0 76% 0 0;border-radius:100px;background:linear-gradient(90deg,#D5A08D,#B58072)}
.area-lista{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:11px}
.area-lista li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.55}
.area-lista li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:8px;
  border-left:1.6px solid var(--rose-texto);border-bottom:1.6px solid var(--rose-texto);transform:rotate(-45deg)}

/* ═══════════ 07 MATERIAIS (capas em CSS) ═══════════ */
.capas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:clamp(42px,5vw,62px) 0 0;perspective:1400px}
/* a capa e um caderno: lombada a esquerda, moldura interna, ornamento e pe com o nome */
.capa{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:12px;aspect-ratio:3/4;
  padding:22px 20px 22px 30px;border-radius:5px 14px 14px 5px;overflow:hidden;text-align:left;
  box-shadow:0 2px 0 rgba(255,255,255,.7) inset,
             0 26px 48px -30px rgba(60,38,48,.7),
             0 1px 2px rgba(60,38,48,.18),
             0 0 0 1px rgba(181,128,114,.26);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.capa:hover{transform:translateY(-9px) rotateX(3deg) rotateY(-2deg);
  box-shadow:0 2px 0 rgba(255,255,255,.8) inset,0 40px 62px -30px rgba(60,38,48,.62),
             0 2px 4px rgba(60,38,48,.2),0 0 0 1px rgba(181,128,114,.6)}
/* moldura interna, respeitando a lombada */
.capa::before{content:"";position:absolute;left:21px;right:11px;top:11px;bottom:11px;border-radius:7px;
  border:1px solid rgba(255,255,255,.52);pointer-events:none}
/* grao de papel */
.capa::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(94deg,rgba(255,255,255,.26) 0 1px,transparent 1px 4px)}
.lombada{position:absolute;left:0;top:0;bottom:0;width:13px;
  background:linear-gradient(90deg,rgba(60,38,48,.2),rgba(60,38,48,.06) 42%,rgba(255,255,255,.5) 82%,rgba(60,38,48,.07))}

.capa.c1{background:linear-gradient(155deg,#FBEDEF,#EBCFD6)}
.capa.c2{background:linear-gradient(155deg,#FAF0E6,#E7CDBA)}
.capa.c3{background:linear-gradient(155deg,#F7EFF4,#E0CBD8)}
.capa.c4{background:linear-gradient(155deg,#53363F,#2E1C25)}

.capa-topo{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.capa-marca{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ameixa-escura)}
.capa-etiqueta{font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-texto);
  padding:3px 8px;border-radius:100px;box-shadow:inset 0 0 0 1px rgba(138,83,70,.4)}
.capa-arte{position:relative;z-index:1;width:72%;max-height:100%;align-self:center;justify-self:center;color:var(--rose-texto)}
.capa-arte.larga{width:62%}
.capa-pe{position:relative;z-index:1}
.capa h3{font-size:clamp(18px,1.7vw,22px);line-height:1.16;margin:0 0 7px}
.capa p{margin:0;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-texto);line-height:1.5}
/* a capa escura inverte a tinta */
.capa.c4 .capa-marca{color:var(--rose-gold-claro)}
.capa.c4 .capa-etiqueta{color:var(--rose-gold-claro);box-shadow:inset 0 0 0 1px rgba(224,188,176,.42)}
.capa.c4 .capa-arte{color:var(--rose-gold-claro)}
.capa.c4 h3{color:#FFF9F6}
.capa.c4 p{color:var(--rose-gold-claro)}
.capa.c4::before{border-color:rgba(224,188,176,.3)}
.capa.c4::after{opacity:.25;background:repeating-linear-gradient(94deg,rgba(255,255,255,.14) 0 1px,transparent 1px 4px)}
.capa.c4 .lombada{background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.14) 42%,rgba(224,188,176,.3) 82%,rgba(0,0,0,.16))}

/* ═══════════ 08 A DIFERENCA ═══════════ */
.dif-grade{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(42px,5vw,64px)}
.dif{position:relative;padding:30px 26px;border-radius:var(--raio-g);background:linear-gradient(165deg,#FFFFFF,#FBF3F0);
  box-shadow:0 24px 50px -44px rgba(60,38,48,.8),inset 0 0 0 1px rgba(181,128,114,.26);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.dif:hover{transform:translateY(-6px);box-shadow:0 32px 58px -42px rgba(60,38,48,.7),inset 0 0 0 1px rgba(181,128,114,.56)}
.dif-n{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.14em;color:var(--rose-texto);display:block;margin-bottom:12px}
.dif h3{font-size:21px;margin:0 0 10px}
.dif p{font-size:15px;margin:0;line-height:1.6}

/* ═══════════ 09 PARA QUEM E ═══════════ */
.quem-grade-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,34px);margin-top:clamp(40px,5vw,58px)}
.coluna{padding:clamp(26px,3vw,36px);border-radius:var(--raio-g)}
.coluna.sim{background:linear-gradient(160deg,#FFFFFF,#FBF3F0);box-shadow:0 24px 50px -44px rgba(60,38,48,.8),inset 0 0 0 1px rgba(181,128,114,.3)}
.coluna.nao{background:linear-gradient(160deg,#F7EFF0,#F1E3E6);box-shadow:inset 0 0 0 1px rgba(82,54,65,.14)}
.coluna h3{font-size:clamp(21px,2.2vw,27px);margin:0 0 18px}
.coluna ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.coluna li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.55}
.coluna.sim li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:8px;
  border-left:1.6px solid var(--rose-texto);border-bottom:1.6px solid var(--rose-texto);transform:rotate(-45deg)}
.coluna.nao li::before{content:"";position:absolute;left:1px;top:12px;width:14px;height:1.6px;background:var(--tinta-3)}

/* ═══════════ 10 QUEM CONDUZ ═══════════ */
.quem-grade{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(34px,5vw,74px);align-items:center}
.quem-palco{position:relative;padding:22px}
.quem-foto{margin:0;position:relative;z-index:2;border-radius:999px 999px 22px 22px;overflow:hidden;
  box-shadow:0 44px 82px -48px rgba(60,38,48,.62),0 0 0 1px rgba(255,255,255,.8)}
.quem-foto img{width:100%;height:auto;display:block}
.quem-aro{position:absolute;left:0;right:44px;top:44px;bottom:0;border-radius:999px 999px 22px 22px;
  border:1px solid rgba(181,128,114,.6);pointer-events:none}
.quem-linha{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(20px,2.2vw,25px);color:var(--rose-texto);margin:6px 0 20px}
.citacao{margin:28px 0 24px;padding:0 0 0 22px;border-left:1px solid var(--rose-gold);
  font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(22px,2.6vw,30px);line-height:1.26;color:var(--tinta)}
.link-insta{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:14.5px;font-weight:500;color:var(--rose-texto);
  transition:gap .35s var(--ease-out),color .3s}
.link-insta svg{width:19px;height:19px}
.link-insta:hover{gap:14px;color:var(--ameixa)}

/* ═══════════ 11 TURMA ═══════════ */
.oferta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,52px);align-items:center;
  text-align:left;margin:clamp(38px,5vw,56px) auto 0;max-width:960px;padding:clamp(28px,4vw,44px);border-radius:var(--raio-g);
  background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  box-shadow:inset 0 0 0 1px rgba(224,188,176,.28),0 40px 80px -58px rgba(0,0,0,.9)}
.inclui{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.inclui li{position:relative;padding-left:32px;font-size:15.5px;line-height:1.55;color:var(--creme-2)}
.inclui li::before{content:"";position:absolute;left:0;top:7px;width:17px;height:9px;
  border-left:1.5px solid var(--rose-gold-claro);border-bottom:1.5px solid var(--rose-gold-claro);transform:rotate(-45deg)}
.oferta-acao{text-align:center;padding-left:clamp(0px,2vw,20px);border-left:1px solid rgba(224,188,176,.2)}
.oferta-preco{font-family:var(--display);font-weight:600;font-size:clamp(34px,4vw,46px);line-height:1;color:#FFF9F6;margin:0 0 6px}
.oferta-linha{font-family:var(--display);font-style:italic;font-weight:500;font-size:19px;color:var(--rose-gold-claro);margin:0 0 20px;line-height:1.36}
.oferta-acao .micro{max-width:30ch;margin-inline:auto}

/* ═══════════ 12 DUVIDAS ═══════════ */
.faq-grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,70px);align-items:start}
.faq-lado p{margin:10px 0 16px}
.faq details{border-bottom:1px solid rgba(181,128,114,.34)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;
  padding:21px 0;font-size:16.5px;font-weight:500;color:var(--tinta);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rose-texto)}
.faq summary::after{content:"";width:12px;height:12px;flex-shrink:0;position:relative;
  background:linear-gradient(var(--rose-texto),var(--rose-texto)) center/12px 1.5px no-repeat,
             linear-gradient(var(--rose-texto),var(--rose-texto)) center/1.5px 12px no-repeat;
  transition:transform .4s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(135deg);
  background:linear-gradient(var(--rose-texto),var(--rose-texto)) center/12px 1.5px no-repeat}
.faq .resp{padding:0 0 21px}
.faq .resp p{margin:0;font-size:15.5px;max-width:62ch}

/* ═══════════ 13 FINAL ═══════════ */
.final{text-align:center}
.final .andamento{margin-bottom:22px}
.final h2{max-width:18ch;margin-inline:auto}
.final .btn{margin-top:32px}

/* ═══════════ RODAPE ═══════════ */
.rodape{padding:68px 0 40px;background:linear-gradient(180deg,#3C2630,#2A1820)}
.rodape-grade{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:38px}
.rodape .marca{color:var(--creme-texto)}
.rodape .marca small{color:var(--rose-gold-claro);opacity:.85}
.rodape p{font-size:14.5px;color:var(--creme-2);opacity:.82;max-width:34ch}
.rodape h4{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-gold-claro);margin:0 0 16px}
.rodape ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* alvo de toque: o link do rodape tinha 19px de altura */
.rodape ul a{display:inline-block;padding-block:7px;font-size:14.5px;color:var(--creme-2);text-decoration:none;opacity:.88;transition:opacity .3s,color .3s}
.rodape ul a:hover{opacity:1;color:var(--creme-texto)}
.icones{display:flex;gap:12px}
.icones a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--rose-gold-claro);
  box-shadow:inset 0 0 0 1px rgba(224,188,176,.3);transition:background-color .35s,transform .35s var(--ease-out)}
.icones a:hover{background:rgba(224,188,176,.14);transform:translateY(-3px)}
.icones svg{width:20px;height:20px}
.rodape .aviso{grid-column:1/-1;margin:32px 0 0;padding-top:24px;border-top:1px solid rgba(224,188,176,.18);
  font-size:12.5px;line-height:1.7;max-width:none;opacity:.66}

/* ═══════════ BARRA FIXA ═══════════ */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:38;display:none;align-items:center;justify-content:space-between;gap:14px;
  padding:12px clamp(14px,4vw,26px) calc(12px + env(safe-area-inset-bottom));
  background:rgba(250,247,242,.97);border-top:1px solid rgba(60,38,48,.1);
  transform:translateY(110%);transition:transform .5s var(--ease-out)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .barra{background:rgba(250,247,242,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
.barra.on{transform:none}
.barra-txt{margin:0;display:flex;flex-direction:column;gap:1px;line-height:1.2;min-width:0}
.barra-txt b{font-size:13.5px;font-weight:600;color:var(--tinta)}
.barra-txt small{font-size:12px;color:var(--tinta-3)}
.barra .btn{min-height:46px;padding:0 18px;font-size:10px;flex-shrink:0}

/* ═══════════ CELULAR E TABLET ═══════════ */
@media (max-width:1040px){
  .etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapa.larga{grid-column:span 2}
  .dias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dias li:nth-child(7){grid-column:span 2}
  .dif-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .dor-grade,.mec-grade,.quem-grade,.faq-grade,.oferta,.area-grade,.quem-grade-2{grid-template-columns:1fr}
  .oferta{text-align:left}
  .oferta-acao{padding-left:0;border-left:0;padding-top:24px;border-top:1px solid rgba(224,188,176,.2);text-align:center}
  .ciclo{width:min(420px,100%)}
  .quem-palco{max-width:420px;margin-inline:auto}
  .area-palco{max-width:520px;margin-inline:auto;order:-1}
  .rodape-grade{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .etapas{grid-template-columns:1fr}
  .etapa.larga{grid-column:span 1;grid-template-columns:1fr;gap:0}
  .etapa.larga .icone{grid-row:auto;margin-bottom:16px}
  .etapa.larga h3,.etapa.larga .etapa-linha,.etapa.larga p,.etapa.larga .ferramenta{grid-column:1;grid-row:auto}
  .etapa.larga .ferramenta{margin-top:18px}
  .dias{grid-template-columns:1fr}
  .dias li:nth-child(7){grid-column:span 1}
  .dif-grade{grid-template-columns:1fr}
  .ritual{grid-template-columns:1fr}
  .modulo .resp{gap:14px}
  .rodape-grade{grid-template-columns:1fr}
  .fone{width:96px;right:-2px}
}
@media (max-width:560px){
  /* o menu lateral do mockup nao cabe em coluna estreita: some e a tela fica inteira */
  .tela-corpo{grid-template-columns:1fr}
  .tela-menu{display:none}
  /* os nos das pontas encostavam na borda: o ciclo sangra ate quase o limite do wrap */
  .ciclo{width:calc(100% + 24px);margin-inline:-12px}
  .ciclo-nos li{font-size:10px;padding:4px 10px 4px 4px;gap:6px}
  .ciclo-nos li b{width:17px;height:17px;font-size:9px}
  .banda-frase{max-width:none}
  .capas{grid-template-columns:1fr;max-width:300px;margin-inline:auto}
}
@media (max-width:400px){
  /* a 320px as pilulas das pontas saiam da tela: encolhem e os nos extremos
     vem um pouco para dentro (os --x moram no style do elemento, dai o !important) */
  .ciclo-nos li{font-size:9px;padding:3px 8px 3px 3px;gap:5px}
  .ciclo-nos li b{width:15px;height:15px;font-size:8.5px}
  .ciclo-nos li:nth-child(2){--x:76%!important}
  .ciclo-nos li:nth-child(3){--x:82%!important}
  .ciclo-nos li:nth-child(6){--x:18%!important}
  .ciclo-nos li:nth-child(7){--x:24%!important}
}
@media (max-width:380px){
  .fone{display:none}
  .tela-modulos{padding-right:0}
  .area-palco{padding-bottom:0}
}