/* El boceto de tu negocio soñado (publicar/boceto.html)
   La base es el CSS del mockup aprobado (referencia-diseno.html, v24), con las
   imágenes originales del sitio. Se quitó lo que era solo del mockup: las
   anotaciones "Folio NN", el nav y el footer de referencia (la página usa los
   reales), los anexos de PDF y los botones "Solo en el mockup". Al final van
   los estilos propios de la página: nav y footer reales, pantallas y errores. */
:root{
  --papel:#F2ECE1;--crema:#F7F3EA;--marfil:#F5EDE0;--rosa:#F8E0E0;--tierra:#3A2A20;--noche:#1E1412;
  --borgona:#4A1E1C;--bclaro:#8A2C42;--bronce:#8A5A2E;--oro:#C6A15A;--oroclaro:#E7CD98;--rtit:#F5A3C7;
  --tinta:#2C2C2C;--sobrerosa:#2A0E1C;--bg:#FFFFFF;
  --disp:'Playfair Display',Georgia,serif;--serif:Georgia,serif;--ease:cubic-bezier(.22,1,.36,1);
  --ceil:url(/nervewax-sbrewbdulzw-unsplash-mts71u8d-e2r3.jpg);--ven:url(/assets/hero-ventana-luz.jpg);--ros:url(/assets/cielo-rosa.jpg);--aye:url(/assets/aye-atardecer.jpg);--atd:url(/assets/cielo-atardecer.jpg);
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;font-family:var(--serif);color:var(--tinta);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--borgona);outline-offset:2px}
.sep{height:12px;background:#fff}
.sec{margin:0 12px;position:relative;overflow:hidden}
.folio{position:absolute;top:16px;left:20px;z-index:9;font-size:10px;letter-spacing:.255em;color:rgba(107,34,51,.5);pointer-events:none}
.wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto}
.eb{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--borgona);margin:0}
.eb.lt{color:var(--rtit)}
.h2u{font:400 clamp(26px,3.4vw,44px)/1.02 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:var(--borgona);margin:0}
.h2u em{font-style:italic;text-transform:none;color:var(--bclaro);letter-spacing:-.01em}
.sub{font-style:italic;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--tinta);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;font:italic clamp(15px,1.48vw,19px) var(--disp);padding:14px 36px;border-radius:999px;border:1.5px solid var(--borgona);background:var(--borgona);color:var(--marfil);text-decoration:none;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s var(--ease);cursor:pointer}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 26px rgba(30,20,18,.24)}
.btn.rosa{background:var(--rtit);border-color:var(--rtit);color:var(--sobrerosa)}
.btn.ghost{background:transparent;border-color:var(--rtit);color:var(--marfil)}
.btn.ghost:hover{background:rgba(245,163,199,.14)}
.lnk{font:italic 16px var(--serif);color:var(--tinta);border-bottom:1px solid var(--oro);text-decoration:none;padding-bottom:2px;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0}
.chip{display:inline-flex;align-items:center;min-height:44px;border:1.5px solid rgba(138,90,46,.5);border-radius:999px;padding:8px 20px;font:italic 15.5px var(--disp);color:var(--borgona);background:transparent;cursor:pointer}
.chip.on{background:var(--borgona);border-color:var(--borgona);color:var(--marfil)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.fld{display:flex;flex-direction:column;gap:2px;text-align:left}
.lbl{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--bclaro);margin:0;display:block}
.txt,.sel{width:100%;border:0;border-bottom:1px solid rgba(138,90,46,.65);background:transparent;border-radius:0;padding:8px 0 10px;min-height:44px;font:italic 18px var(--serif);color:var(--tinta)}
.txt::placeholder{color:rgba(44,44,44,.45)}
.txt.big{font:400 clamp(24px,2.5vw,32px)/1.15 var(--disp);font-style:normal;color:var(--borgona)}
.unit{display:flex;align-items:flex-end;gap:12px}
.unit b{font:400 12px var(--serif);font-style:normal;letter-spacing:.14em;color:var(--bronce);padding-bottom:14px}
/* HERO (Legado) */
.hero{background:var(--borgona);padding:112px 24px 96px;text-align:center}
.hero .l,.stg .l,.cierre .l{position:absolute;inset:0;pointer-events:none;z-index:0}
.l-ceil{background:var(--ceil) center/cover no-repeat;opacity:.22;mix-blend-mode:overlay;filter:sepia(.3) saturate(.9) contrast(.94) brightness(1.02) hue-rotate(-6deg)}
.hero h1{font:400 clamp(40px,7.2vw,96px)/1 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:var(--rtit);text-shadow:0 2px 26px rgba(30,20,18,.5);margin:18px 0 0}
.hero .sub{color:var(--marfil);text-shadow:0 1px 14px rgba(30,20,18,.7);max-width:58ch;margin:26px auto 0}
.vid{position:relative;width:min(560px,100%);aspect-ratio:16/9;margin:34px auto 34px;border:1px solid rgba(245,237,224,.45);background:linear-gradient(rgba(30,20,18,.5),rgba(30,20,18,.5)),var(--ven) center/cover no-repeat;display:grid;place-items:center}
.play{width:68px;height:68px;border-radius:999px;border:1.5px solid var(--rtit);color:var(--rtit);display:grid;place-items:center;font-size:20px;padding-left:4px}
.vid small{position:absolute;bottom:12px;left:0;right:0;font:italic 13px var(--serif);color:var(--marfil)}
/* RUTA */
.qty{background:var(--papel);padding:96px 64px}
.qty .wrap{max-width:720px;display:flex;flex-direction:column;gap:48px}
.qty .hd{text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
/* Lo que te llevás: una muestra de tu boceto con el contenido difuminado, en tres partes */
.qty .wrap{max-width:1040px}
/* Lo que te llevás: un solo bundle con las tres partes del boceto (Kim, 20/10 y 21/10): Tu visión con las nubes,
   la web con el diseño Jardín en la notebook y el celular, y la hoja de Tus números. Se dibuja en un lienzo de
   1000 × 560 que boceto.js escala al ancho (--k3-s). */
.k3 .vis-foto{position:relative;width:70%;aspect-ratio:735/898;background:url(/assets/cielo-rosa.jpg) center 60%/cover;box-shadow:0 14px 30px rgba(40,24,18,.22);outline:1px solid #C6A15A;outline-offset:4px}
.k3 .vis-nota{position:absolute;left:50%;top:50%;width:50%;aspect-ratio:510/620;transform:translate(-50%,-50%) rotate(-1.5deg);background:#FBF6EC;box-shadow:0 4px 12px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10%;text-align:center}
.k3 .vis-nota .mono{width:16px;height:19px;background:#8A2C42;-webkit-mask:url(/assets/logo-monogram-cream-tight.png) center/contain no-repeat;mask:url(/assets/logo-monogram-cream-tight.png) center/contain no-repeat}
.k3 .vis-nota p{font:italic 7.5px/1.35 var(--disp);color:#4A1E1C}
.k3 .lap-s{aspect-ratio:16/10.5;background:#15110f;border-radius:7px 7px 0 0;padding:5px 5px 0;box-shadow:0 12px 26px rgba(40,24,18,.25)}
.k3 .lap-b{height:6px;margin:0 -14px;background:linear-gradient(#DAD5CF,#B9B4AD);border-radius:0 0 8px 8px}
.k3 .hoja .e{text-align:center;font-size:4px;letter-spacing:.24em;color:#8A2C42}
.k3 .hoja .t{text-align:center;font:italic 10px var(--disp);color:#4A1E1C;margin:2px 0 7px}
.k3 .hoja .card{background:#F8E0E0;text-align:center;padding:7px 4px;display:flex;flex-direction:column;gap:1px}
.k3 .hoja .card p{font:400 5px var(--disp);color:#4A1E1C}
.k3 .hoja .card em{font:italic 4.5px var(--disp);color:#8A2C42}
.k3 .hoja .card b{font:400 10px var(--disp);color:#8A2C42;font-weight:400}
.k3 .hoja .chart{position:relative;flex:1;display:flex;align-items:flex-end;gap:6px;margin-top:12px;border-bottom:1px solid rgba(74,30,28,.35);padding:0 3px}
.k3 .hoja .chart b{flex:1;background:linear-gradient(#4A1E1C 60%,#F5A3C7 60%)}
.k3 .hoja .chart .lin{position:absolute;left:0;right:0;top:0;border-top:1px dashed #8A5A2E}
.k3 .hoja .ax{display:flex;justify-content:space-around;font:italic 4px var(--disp);color:#8A5A2E;margin-top:3px}
.k3 .hoja .card{gap:0;padding:5px 4px 4px}
.k3 .hoja .card .sm{font:italic 4px var(--disp);color:#4A1E1C;margin-top:1px}
.k3 .hoja .pmx{display:flex;justify-content:center;align-items:center;gap:6px;margin:3px 0 2px}
.k3 .hoja .pmx div{display:flex;flex-direction:column;align-items:center}
.k3 .hoja .pmx span{border:.6px solid #8A5A2E;padding:0 6px;font:400 8px var(--disp);color:#4A1E1C;background:rgba(251,246,238,.8)}
.k3 .hoja .pmx i{font:italic 3px var(--serif);color:#2C2C2C;margin-top:1px}
.k3 .hoja .pmx u{text-decoration:none;font-size:5px;color:#8A5A2E}
.k3 .hoja .cu{font:italic 3px var(--serif);color:#8A5A2E}
.k3 .hoja .ct{text-align:center;font:italic 4.6px var(--disp);color:#4A1E1C;margin:6px 0 2px}
.k3 .hoja .lg{display:flex;gap:8px;justify-content:center;font:italic 3px var(--serif)}
.k3 .hoja .lg span::before{content:"";display:inline-block;width:4px;height:4px;margin-right:2px;vertical-align:-.5px}
.k3 .hoja .lg .a::before{background:#4A1E1C}
.k3 .hoja .lg .b::before{background:#F5A3C7}
.k3 .hoja .chart{flex:none;height:62px;margin-top:9px;gap:5px}
.k3 .hoja .chart b{position:relative}
.k3 .hoja .chart q{position:absolute;top:-5px;left:50%;transform:translateX(-50%);font:400 2.8px var(--disp);color:#4A1E1C;quotes:none}
.k3 .hoja .chart .lin s{position:absolute;left:0;top:-4px;font:italic 2.8px var(--serif);color:#8A5A2E;text-decoration:none}
.k3 .hoja .ax span{display:flex;flex-direction:column;align-items:center;font:italic 3.4px var(--disp)}
.k3 .hoja .ax em{font-size:2.6px;color:#8A5A2E}
.k3 .hoja table{width:100%;border-collapse:collapse;margin-top:6px;font:3.2px var(--serif);color:#2C2C2C}
.k3 .hoja th{font:italic 3.2px var(--disp);color:#8A2C42;text-align:left;border-bottom:.5px solid rgba(138,90,46,.5);padding:1px 0}
.k3 .hoja td{border-bottom:.4px solid rgba(138,90,46,.2);padding:1px 0}
.k3 .hoja .k3-ptos{display:flex;align-items:center;gap:3px;margin-top:6px}
.k3 .hoja .k3-ptos span{flex:none;width:9px;height:9px;border-radius:50%;border:.6px solid #8A2C42;display:grid;place-items:center;font:italic 5px var(--disp);color:#8A2C42}
.k3 .hoja .k3-ptos p{font:italic 3px var(--serif);color:#2C2C2C;max-width:40px}
.k3 .hoja .k3-ptos em{flex:1;border-top:.6px dotted #8A2C42}
.k3{width:100%;max-width:1040px;margin:0 auto}
.k3-card{background:var(--k3-lam,#FBF8F2);border:1px solid rgba(198,161,90,.6);outline:1px solid rgba(198,161,90,.35);outline-offset:-10px;padding:30px 24px 30px;box-shadow:0 18px 44px rgba(74,30,28,.08)}
.k3-st{position:relative;width:100%;aspect-ratio:1000/560;overflow:hidden}
.k3-in{position:absolute;left:0;top:0;width:1000px;height:560px;transform-origin:0 0;transform:scale(var(--k3-s,.94))}
.k3 .k3p{position:absolute;transform-origin:0 0}
.k3 .k3p-lap{left:215px;top:22px;width:230px;transform:scale(2.5)}
.k3 .k3p-lap .lap{position:static;width:100%}
.k3 .k3p-vis{left:26px;top:128px;width:224px;transform:rotate(-4deg) scale(1.5)}
.k3 .vis-foto{width:100%}
.k3 .k3p-num{left:622px;top:26px;width:250px;transform:rotate(3deg) scale(1.45)}
.k3 .k3p-num .hoja{width:100%;aspect-ratio:210/297;background:#F7F3EA;box-shadow:0 16px 34px rgba(40,24,18,.24);border:1px solid rgba(198,161,90,.45);padding:6%;display:flex;flex-direction:column}
.k3 .k3p-tel{left:548px;top:188px;width:86px;transform:scale(1.9)}
.k3 .k3p-tel .tel{position:static;width:100%;aspect-ratio:9/19;background:#15110f;border-radius:12px;padding:3px;box-shadow:0 14px 28px rgba(40,24,18,.36)}
.k3-cap{margin:22px auto 0;text-align:center;font:italic 400 clamp(17px,1.6vw,21px)/1.4 var(--disp);color:var(--borgona);max-width:62ch}
.k3-cap span{display:block;font:400 12px var(--serif);letter-spacing:.24em;text-transform:uppercase;color:var(--bclaro);font-style:normal;margin-bottom:8px}
@media (max-width:767px){.k3-card{padding:22px 12px 22px;outline-offset:-7px}}
.k3-cap b{font-weight:400}
.k3-cap{display:flex;flex-direction:column;gap:2px}
@media (max-width:767px){.k3-cap{font-size:16px !important}}
.k3 .k3-pant{position:relative;overflow:hidden;width:100%;height:100%;background:#FCEFF3}
.k3 .k3-pant iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;pointer-events:none}
.k3 .lap-s .k3-pant iframe{transform:scale(calc(220/1280))}
.k3 .tel .k3-pant{border-radius:9px}
.k3 .tel .k3-pant iframe{transform:scale(calc(80/390))}
/* FORM EMPEZAR (marco doble = compromiso) */
.join{position:relative;background:var(--crema);border:1px solid rgba(198,161,90,.5);padding:40px clamp(22px,5vw,56px) 40px;max-width:560px;width:100%;margin:12px auto 0;display:flex;flex-direction:column;gap:20px;text-align:center}
.join::before{content:"";position:absolute;inset:8px;border:1px solid rgba(74,30,28,.26);pointer-events:none}
.join>*{position:relative}
.join h3{font:italic 400 clamp(28px,3.4vw,38px)/1.1 var(--disp);color:var(--borgona);margin:0}
.consent{display:flex;gap:10px;align-items:flex-start;font:italic 12.5px/1.5 var(--serif);color:var(--bronce);text-align:left}
.consent a{color:var(--bclaro)}
.consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--borgona);flex:none}
/* STAGE SCREENS */
.stg{padding:84px 64px 80px}
.stg.alq{background:var(--ros) center/cover no-repeat}
.stg.alq::before{content:"";position:absolute;inset:0;background:rgba(251,246,238,.45)}
.stg.va{background:var(--papel)}
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
.paper{background:var(--crema);border:1px solid rgba(198,161,90,.5);padding:34px clamp(22px,3vw,38px)}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.offer{display:flex;flex-direction:column;gap:20px}
.paper.two{display:block;background:none;border:0;padding:0;width:100%}
.paper.two .offers{gap:clamp(18px,3vw,32px);align-items:stretch}
.paper.two .offer{background:var(--crema);border:1px solid rgba(198,161,90,.5);border-top:4px solid var(--borgona);padding:30px clamp(20px,3vw,34px) 34px;box-shadow:0 10px 26px rgba(74,30,28,.08)}
.paper.two .offer.o2{border-top-color:var(--rtit)}
.nav2{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.sw.on::after{content:"";position:absolute;inset:-6px;border:1.5px solid var(--borgona)}
/* PHONE */
.phone{--pd:#2F3D2B;--pa:#C9A66B;--pp:#F1EBDD;--ps:#DDE3CF;--pi:#2B2A24;
  position:relative;width:min(318px,100%);height:660px;margin:0 auto;background:#15110f;border-radius:40px;padding:10px;box-shadow:0 14px 32px rgba(20,12,8,.34)}
.isl{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:24px;background:#000;border-radius:999px;z-index:6}
.pscr{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:var(--pp)}
.sb{position:absolute;top:0;left:0;right:0;height:46px;z-index:5;background:var(--pp);display:flex;align-items:center;justify-content:space-between;padding:6px 26px 0;font:600 13px system-ui,sans-serif;color:var(--pi)}
.sb svg{height:11px;width:auto;fill:var(--pi)}
.hi{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:104px;height:4px;border-radius:99px;background:rgba(0,0,0,.55);z-index:6}
.psc{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none;padding-top:46px;padding-bottom:22px;color:var(--pi)}
.psc::-webkit-scrollbar{display:none}
/* LEGADO sheet */
.sheet{position:relative;width:100%;max-width:820px;margin:0 auto;background:var(--crema);transform:rotate(-.5deg);box-shadow:0 26px 62px rgba(20,12,8,.5);padding:78px clamp(24px,6vw,64px) 60px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.sheet::before{content:"";position:absolute;inset:14px;border:1px solid rgba(107,34,51,.28);pointer-events:none}
.sheet>*{position:relative;z-index:2}
.seal{position:absolute!important;top:-46px;left:50%;margin-left:-46px;width:92px;filter:drop-shadow(0 8px 18px rgba(20,12,8,.5));z-index:4!important}
.sheet h3{font:italic 400 clamp(26px,2.8vw,36px)/1.15 var(--disp);color:var(--borgona);margin:0}
.sheet .btn{margin-top:8px}
details.calc{width:100%;max-width:520px;text-align:left;border-top:1px solid rgba(138,90,46,.32);border-bottom:1px solid rgba(138,90,46,.32)}
details.calc summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;font:italic 17px var(--serif);color:var(--borgona)}
details.calc summary::-webkit-details-marker{display:none}
details.calc summary::after{content:"";width:14px;height:8px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%238A5A2E' stroke-width='1.5'/></svg>") center no-repeat;transition:transform .3s var(--ease)}
details.calc[open] summary::after{transform:rotate(180deg)}
.rub{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px;padding:6px 0 20px}
.rub .txt{font-size:16px;min-height:40px;padding:4px 0 6px}
.ab{display:grid;grid-template-columns:1fr 64px 1fr;gap:0;align-items:stretch;width:100%;max-width:700px;text-align:left}
.ab section{display:flex;flex-direction:column;gap:18px;padding:26px clamp(18px,2.6vw,28px) 28px;border:1px solid rgba(138,90,46,.4);background:rgba(251,246,238,.6)}
.ab section#ptoB{background:var(--rosa);border-color:var(--bronce)}
.ab .phd{display:flex;align-items:center;gap:16px}
.ab .phd .ltr{font:italic 400 64px/.9 var(--disp);color:var(--bclaro);min-width:.7em}
/* A -> B + chart */
.ptos{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch;width:100%;max-width:700px;text-align:left}
.pto{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid rgba(138,90,46,.4);background:rgba(251,246,238,.6)}
.pto.b{background:var(--rosa);border-color:var(--bronce)}
.pto .ltr{font:italic 400 56px/.9 var(--disp);color:var(--bclaro);min-width:.7em}
.pto small{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--bclaro);margin-bottom:8px}
.pto p{margin:0;font:italic 15px/1.45 var(--serif);color:var(--tinta)}
.pto ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.pto li{font:italic 15px/1.4 var(--serif);color:var(--tinta);padding-left:20px;position:relative}
.pto li::before{content:"✦";position:absolute;left:0;color:var(--bclaro);font-style:normal;font-size:12px;top:2px}
.pway{display:flex;align-items:center;justify-content:center}
.pway i{display:block;position:relative;width:100%;height:0;border-top:1.5px dashed var(--bronce)}
.pway i::after{content:"";position:absolute;right:-1px;top:-5.5px;border-left:10px solid var(--bronce);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ctitle{margin:0 0 18px;text-align:center;font:italic 400 clamp(20px,1.9vw,24px)/1.25 var(--disp);color:var(--borgona);text-wrap:balance}
.when{display:block;font:italic 12.5px/1.3 var(--serif);color:var(--bronce);margin-bottom:3px}
.chartw{width:100%;max-width:700px;text-align:left}
.legend{display:flex;gap:22px;flex-wrap:wrap;font:italic 13.5px var(--serif);color:var(--tinta);margin:0 0 6px}
.legend span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;background:var(--borgona)}
.legend span.c2::before{background:var(--rtit)}
.plot{position:relative;margin-top:44px;height:300px;border-bottom:1px solid rgba(74,30,28,.5)}
.plot .cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,2vw,24px);align-items:end}
.col{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.amt{font:400 clamp(11px,1.3vw,14px) var(--disp);color:var(--borgona);padding-bottom:6px;white-space:nowrap}
.bar{width:min(70px,86%);display:flex;flex-direction:column}
.bar .sv{flex:1;background:var(--borgona)}
.bar .cl{flex:1;background:var(--rtit)}
.ref{position:absolute;left:0;right:0;border-top:1.5px dashed;z-index:3;pointer-events:none}
.ref span{position:absolute;left:0;bottom:6px;font:italic 13px var(--serif);background:var(--crema);padding:0 8px 0 0}
.ref.cost{bottom:75%;border-color:var(--bronce)}
.ref.cost span{color:var(--bronce)}
.axis{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,2vw,24px);padding-top:12px;text-align:center}
.axis b{display:block;font:italic 400 clamp(14px,1.6vw,18px) var(--disp);color:var(--borgona)}
.axis small.when{margin-bottom:2px}
.axis span{display:block;font-size:clamp(11px,1.2vw,13px);line-height:1.4;color:var(--tinta);margin-top:4px}
.callout{width:100%;max-width:700px;border-top:1px solid rgba(138,90,46,.32);border-bottom:1px solid rgba(138,90,46,.32);padding:16px 0;font:italic 18px/1.5 var(--disp);color:var(--borgona);text-align:left;margin:0}
.note{font-size:13px;font-style:italic;color:var(--bronce);line-height:1.5;margin:0;max-width:60ch}
/* CIERRE */
.cierre{background:#4A1E1C;padding:96px 64px 88px}
.q{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;text-align:left}
.q p{font:italic 19px/1.35 var(--disp);color:var(--borgona);margin:0}
.puente{position:relative;z-index:2;max-width:720px;margin:72px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.puente p{font-size:17px;line-height:1.7;color:var(--marfil);margin:0;max-width:52ch}
.puente .pr{font-size:14px;letter-spacing:.04em;color:var(--oroclaro);font-style:italic}
.puente .e{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oroclaro);margin:0}
@media (max-width:1023px){
  .two,.webcard{grid-template-columns:1fr}
}
@media (max-width:767px){
  .hero{padding:72px 22px 64px}
  .qty{padding:56px 22px}
  .stg,.cierre{padding:64px 18px 56px}
  .paper{padding:26px 20px}
  .rub{grid-template-columns:1fr}
  .ab{grid-template-columns:1fr}.ab .pway i{width:0;height:100%;border-top:0;border-left:1.5px dashed var(--bronce)}.ab .pway i::after{right:auto;left:-5.5px;top:auto;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid var(--bronce);border-bottom:0}
  .ptos{grid-template-columns:1fr}.pway{height:48px}.pway i{width:0;height:100%;border-top:0;border-left:1.5px dashed var(--bronce)}.pway i::after{right:auto;left:-5.5px;top:auto;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid var(--bronce);border-bottom:0}
  .plot{height:240px}.bar{width:min(46px,86%)}
  .ref span{font-size:12px}
}

/* multi-select */
.ms{position:relative}
.ms-b{width:100%;text-align:left;border:0;border-bottom:1px solid rgba(138,90,46,.65);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%238A5A2E' stroke-width='1.5'/></svg>") right 2px center no-repeat;padding:8px 28px 10px 0;min-height:44px;font:italic 17px/1.4 var(--serif);color:var(--tinta);cursor:pointer;border-radius:0}
.ms-b .ph{color:rgba(44,44,44,.5)}
.ms.open .ms-b{border-bottom-color:var(--borgona)}
.ms-l{display:flex;flex-direction:column;border:1px solid rgba(138,90,46,.4);background:var(--crema);margin-top:6px}
.ms-l[hidden]{display:none}
.ms-o{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 14px;cursor:pointer;font:italic 16px/1.4 var(--serif);color:var(--tinta);border-bottom:1px solid rgba(138,90,46,.18)}
.ms-o input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--bronce);background:transparent;border-radius:0;display:grid;place-content:center;cursor:pointer}
.ms-o input:checked{background:var(--borgona);border-color:var(--borgona)}
.ms-o input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--marfil);border-bottom:2px solid var(--marfil);transform:rotate(-45deg) translate(1px,-1px)}
.ms-o input:focus-visible,.ms-b:focus-visible{outline:2px solid var(--bclaro);outline-offset:3px}
.ms-o:has(input:checked){background:rgba(245,163,199,.22)}
.ms-ot{margin-top:10px}
.ms-ot[hidden]{display:none}
/* hover / foco / toque: la cuenta de cada barra */
.col,.hr{position:relative;cursor:pointer}
.col:focus-visible,.hr:focus-visible{outline:2px solid var(--bclaro);outline-offset:4px}
.tip{position:absolute;z-index:8;width:max-content;max-width:min(272px,88vw);background:var(--crema);border:1px solid var(--bronce);box-shadow:0 14px 30px rgba(60,20,20,.22);padding:12px 16px 12px;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transform:translate(var(--tx,-50%),5px);transition:opacity .16s,transform .16s,visibility .16s}
.tip b{display:block;font:italic 400 16px/1.3 var(--disp);color:var(--borgona);margin-bottom:6px}
.tip p{margin:0;font:15px/1.5 var(--serif);color:var(--tinta)}
.tip .tot{border-top:1px solid rgba(138,90,46,.38);margin-top:6px;padding-top:6px;font:400 17px/1.4 var(--disp);color:var(--borgona)}
.tip .meta{margin-top:6px;font:italic 12.5px/1.4 var(--serif);color:var(--bronce)}
.col .tip{left:50%;bottom:min(calc(var(--h,0%) + 36px),calc(100% - 168px))}
.col.t-l .tip{left:0;--tx:0}
.col.t-r .tip{left:auto;right:0;--tx:0}
.col.open .tip,.col:focus-visible .tip,.hr.open .tip,.hr:focus-visible .tip{opacity:1;visibility:visible;transform:translate(var(--tx,-50%),0)}
@media (hover:hover){.col:hover .tip,.hr:hover .tip{opacity:1;visibility:visible;transform:translate(var(--tx,-50%),0)}}
.col:hover .bar,.col.open .bar{filter:brightness(1.1)}
.hr .tip{left:0;--tx:0;top:calc(100% - 2px);max-width:100%}
.hint{margin:14px 0 0;font:italic 13.5px/1.5 var(--serif);color:var(--bronce)}
@media (prefers-reduced-motion:reduce){.tip{transition:none}}
.axis,.cols{grid-template-columns:repeat(var(--n,6),1fr)!important}
.hwrap{display:none}
.hleg{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 14px;font:italic 13px var(--serif);color:var(--tinta)}
.hleg span::before{content:"";display:inline-block;width:16px;margin-right:8px;vertical-align:3px;border-top:1.5px dashed}
.hleg .k1::before{border-color:var(--bronce)}
.hrows{position:relative;display:flex;flex-direction:column;gap:16px}
.vref{position:absolute;top:0;bottom:0;border-left:1.5px dashed;z-index:3;pointer-events:none}
.vref.c{border-color:var(--bronce)}
.hh{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:6px}
.hh .when{margin-bottom:1px}
.hh b{display:block;font:italic 400 17px var(--disp);color:var(--borgona)}
.hh span{display:block;font-size:12.5px;line-height:1.4;color:var(--tinta)}
.hh em{padding-right:8px;font:400 16px var(--disp);font-style:normal;color:var(--borgona);white-space:nowrap}
.tr{height:18px;background:rgba(74,30,28,.07)}
.fl{display:flex;height:100%}
.fl .sv{flex:1;background:var(--borgona)}.fl .cl{flex:1;background:var(--rtit)}

/* estados */
.est{background:var(--crema);border:1px solid rgba(198,161,90,.5);padding:30px 28px;display:flex;flex-direction:column;gap:14px}
.est .k{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronce);margin:0}
.est p{margin:0;font:italic 16px/1.55 var(--serif);color:var(--tinta)}
.er-msg{font:italic 14.5px/1.4 var(--serif);color:var(--bclaro);margin-top:4px}
.fld.bad .txt{border-bottom-color:var(--bclaro);border-bottom-width:2px}
.pbar{height:4px;background:rgba(74,30,28,.14);overflow:hidden}
.pbar i{display:block;height:100%;width:62%;background:var(--borgona)}
.est.ok{background:var(--rosa)}
/* recap */
.rec{background:var(--papel)}
.rec .wrap{max-width:1040px}
/* celebration */
.party{position:relative;overflow:hidden;width:100%;max-width:700px;background:var(--rosa);color:var(--borgona);text-align:center;padding:38px clamp(20px,5vw,48px);display:flex;flex-direction:column;align-items:center;gap:12px}
.party>*{position:relative;z-index:2}
.party .pm{margin:0;font:400 clamp(30px,3.4vw,44px)/1.1 var(--disp);color:var(--bclaro)}
.party .pm small{font:italic 17px var(--serif);color:var(--tierra)}
.eq{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,24px);flex-wrap:wrap;margin:4px 0}
.eq div{display:flex;align-items:baseline;gap:10px;border:1.5px solid var(--bronce);background:rgba(247,243,234,.7);padding:10px 18px}
.eq b{font:400 clamp(34px,5vw,52px)/1 var(--disp);color:var(--borgona)}
.eq span{font:italic 15.5px var(--serif);color:var(--tierra)}
.eq i{font:400 26px var(--disp);font-style:normal;color:var(--bronce)}
.ss{position:absolute;z-index:1;width:92px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(198,161,90,0),rgba(198,161,90,.85));opacity:0;transform:rotate(26deg);animation:ss 9s ease-in infinite;pointer-events:none}
.ss::after{content:"";position:absolute;right:-1px;top:-1.25px;width:4px;height:4px;border-radius:50%;background:#e2c47e;box-shadow:0 0 7px 1px rgba(226,196,126,.75)}
.ss.s1{top:9%;left:3%;animation-delay:1s}
.ss.s2{top:10%;left:76%;width:72px;animation-delay:4.6s}
.ss.s3{top:66%;left:68%;width:80px;animation-delay:7s}
@keyframes ss{0%{opacity:0;transform:rotate(26deg) translateX(0)}5%{opacity:.8}17%{opacity:0;transform:rotate(26deg) translateX(190px)}100%{opacity:0;transform:rotate(26deg) translateX(190px)}}
@media (prefers-reduced-motion:reduce){.party .sp{animation:none}.ss{display:none}}
@media (max-width:767px){
  .plot,.axis,.chartw .legend{display:none}
  .hwrap{display:block}
}

/* v5: flujo de un solo foco */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.solo{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.solo.wide{max-width:940px}
.hd2{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.hd2 .h2u{text-wrap:balance}
.stack2{display:flex;flex-direction:column;gap:28px}
.nav2.c{justify-content:center;gap:28px;margin-top:6px}
.ask{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(28px,4.4vw,52px);text-align:center;padding-top:clamp(12px,3vw,32px)}
.q1{font:400 clamp(26px,3.4vw,44px)/1.08 var(--disp);letter-spacing:-.02em;text-transform:uppercase;color:var(--borgona);margin:0;max-width:min(34ch,100%);text-wrap:balance;overflow-wrap:break-word}
.q1 em{font-style:italic;text-transform:none;color:var(--bclaro);letter-spacing:-.01em}
.ans{display:block;width:min(760px,100%)}
.ask .nav2{width:100%}
.ans textarea{display:block;width:100%;resize:vertical;overflow:auto;border:1.5px solid rgba(138,90,46,.6);background:rgba(251,246,238,.85);border-radius:14px;padding:22px 24px;min-height:168px;text-align:left;font:italic 400 clamp(18px,1.7vw,22px)/1.55 var(--serif);color:var(--tinta);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 30px -18px rgba(74,30,28,.35)}
.ans textarea:focus{outline:2px solid var(--oro);outline-offset:2px;border-color:var(--bronce)}
.ans .hlp{display:block;margin-top:10px;text-align:center;font:italic 13.5px/1.4 var(--serif);color:var(--bronce)}
.ans textarea::placeholder{color:rgba(44,44,44,.45)}
.rec .hd{display:flex;flex-direction:column;align-items:center;gap:16px}
.rphone{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.rphone .k{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--bclaro);margin:0}
.rphone [data-phone]{width:100%;margin-top:10px}
@media (max-width:1023px){
  .rv{order:1}.rphone{order:2}
  .offers{grid-template-columns:1fr}
}
@media (min-width:768px) and (max-width:1023px){.offers{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:767px){
  .sheet{transform:none;padding:70px 30px 44px}
  .sheet::before{inset:10px}
  .nav2.c{flex-direction:column-reverse;align-items:stretch;gap:14px;text-align:center}
  .nav2.c .btn{width:100%;white-space:normal}
  .nav2.c .lnk{justify-content:center}
  .ask{min-height:0;padding-top:8px}
}
@media (max-width:380px){
  .sheet{padding:70px 26px 40px}
  .stg,.cierre{padding-left:14px;padding-right:14px}
  .paper{padding:22px 16px}
  .chip{padding:8px 16px}
}

/* v5: legibilidad y toque */
.lbl,.pill,.pto small,.rc .k,.rphone .k,.est .k,.puente .e,.party .pe,.eb,.rc p.v b,.pdfp .ph{font-size:max(12px,var(--fs,12px))}
.amt{font-size:max(12px,clamp(11px,1.3vw,14px))}
.lnk{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:6px}
.axis span{font-size:max(12px,clamp(11px,1.2vw,13px))}
.hh em{position:relative;z-index:4;background:var(--crema);padding-left:8px}
.ref[hidden]{display:none}
.party .cuenta{margin:0;font:italic 14.5px/1.5 var(--serif);color:var(--bronce);max-width:60ch;text-wrap:balance}
.eq.mxs{width:100%}
.eq.mxs div{flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:none;text-align:center;min-width:min(100%,196px)}
.eq.mxs span{font-size:15px;line-height:1.35;max-width:22ch}
.eq.mxs b{min-width:1ch}
.party.p2 .al{margin:0;font:italic 400 clamp(24px,2.4vw,30px)/1.2 var(--disp);color:var(--borgona);max-width:none}
.party.p2 .pm small{font:italic 400 clamp(22px,2.1vw,26px)/1.2 var(--disp);color:var(--borgona)}
.mxr{display:flex;align-items:stretch;justify-content:center;margin:0;border:1px solid var(--bronce);background:rgba(251,246,238,.8)}
.mxr b{display:flex;align-items:center;justify-content:center;min-width:3ch;padding:4px 10px;border-left:1px solid rgba(138,90,46,.35);border-right:1px solid rgba(138,90,46,.35)}
.mx{width:48px;min-height:48px;border:0;border-radius:0;background:transparent;color:var(--borgona);font:400 28px/1 var(--disp);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .15s}
.mx:focus-visible{outline:2px solid var(--bclaro);outline-offset:-3px}
.mx:disabled{opacity:.28;cursor:not-allowed}
@media (hover:hover){.mx:hover:not(:disabled){background:var(--rtit)}}
@media (max-width:767px){.party.p2 .eq.mxs{flex-direction:column;gap:6px}.party.p2 .eq.mxs div{width:100%;max-width:300px;align-items:center}}
.mx:focus-visible{outline:2px solid var(--bclaro);outline-offset:3px}
.mx:disabled{opacity:.32;cursor:not-allowed}
.party .pm small{white-space:nowrap}
@media (max-width:767px){
  .party{padding:40px 20px}
}

/* v6: hero compartido + ejercicio */
.stg.flat{background:var(--crema);padding-top:64px}
.stg.flat2{background:var(--papel);padding-top:56px}
.form1{max-width:560px;width:100%;margin:0 auto}
.flat details.calc{max-width:none}
.flat .ab{max-width:none}
.flat .q{max-width:none}
.flat .ms-l{background:#fff}
.fin{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.pdf12{width:100%;max-width:560px;margin:0 auto}
.pdf12 [hidden]{display:none}
.pbar.go i{width:0;animation:pb12 12s linear forwards}
@keyframes pb12{to{width:100%}}
@media (prefers-reduced-motion:reduce){.pbar.go i{animation:none;width:62%}}
.hlp12{font:italic 14px/1.4 var(--serif);color:var(--bronce)}
.q p.er-msg{margin:0;font:italic 14.5px/1.4 var(--serif);color:var(--bclaro)}
.q.bad .txt,.q.bad .ms-b{border-bottom-color:var(--bclaro);border-bottom-width:2px}
.cierre{padding-top:72px;padding-bottom:72px}
.cierre .puente{margin-top:0}
@media (max-width:767px){
  .cierre{padding:56px 18px 52px}
}

/* ===== hero con camino de progreso (propuesta) ===== */
.trk .grp li.on{color:var(--rtit);border-top-color:var(--rtit)}

/* ===== opción D: fondo taupe de "El método" + letras rosa crema ===== */
.tpe .ttl{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;text-shadow:none;text-wrap:balance}
.tpe .ttl .pre{font:italic 400 clamp(24px,2.8vw,36px)/1.1 var(--disp);letter-spacing:0;text-transform:none;color:#F5A3C7}
.tpe .ttl .main{font:400 clamp(28px,4.2vw,52px)/1.04 var(--disp);letter-spacing:-.02em;text-transform:uppercase;color:#F8E0E0}
.tpe .trk .grp li.on{color:#E7A1C2;border-top-color:#E7A1C2}

/* portada: mismo fondo y título, escala de landing */
.hero.tpe:not(.mini) .ttl .main{font-size:clamp(34px,6.6vw,88px);line-height:1}
.hero.tpe:not(.mini) .ttl .pre{font-size:clamp(26px,4vw,54px)}
.hero.tpe:not(.mini) .ttl{margin:18px auto 0}
.hero.tpe:not(.mini) .wrap{position:relative;z-index:1}
/* Portada: subtítulo en dos líneas en el celular y en una en pantallas grandes, con el mismo aire hasta el botón */
.vid:not([hidden])+#irEmpezar{margin-top:0}
@media (min-width:768px){.hero.tpe:not(.mini) .sub{max-width:none}.hero .sub .m-br{display:none}}
@media (max-width:359px){.hero.tpe:not(.mini) .sub{font-size:15px}}

/* folio 11: vista previa de lo que llega por mail */
.r2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,5vw,64px);margin:56px auto 64px;align-items:center;max-width:1040px}
.vcard{position:relative;overflow:hidden;background:var(--ros) center/cover no-repeat;border:1px solid rgba(198,161,90,.5);padding:64px clamp(24px,5vw,56px);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:420px}
.vcard::before{content:"";position:absolute;inset:0;background:rgba(251,246,238,.45)}
.vcard>*{position:relative;margin:0}
.vcard .k{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--borgona)}
.vcard h3{font:italic 400 clamp(26px,2.8vw,36px)/1.15 var(--disp);color:var(--borgona)}
.vcard .mp{font:italic 400 clamp(22px,2.2vw,28px)/1.4 var(--disp);color:var(--borgona);max-width:24ch;text-wrap:balance;margin-top:6px}
@media (max-width:767px){.r2{grid-template-columns:1fr;margin:44px auto 52px;gap:44px}.vcard{min-height:0;padding:52px 22px}}

/* Una pantalla visible a la vez. */
.bc [hidden]{display:none!important}
body.bc{font-size:16px;padding-top:72px}
[tabindex="-1"]:focus{outline:none}

/* Nav real del sitio (copiado de contacto.html), siempre con fondo papel:
   la página arranca con un hero oscuro. */
.c-nav{position:fixed;top:0;left:0;right:0;z-index:50;height:72px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:var(--papel);border-bottom:1px solid rgba(138,90,46,0.22)}
.c-nav .t-button{color:var(--tinta-noche);text-transform:none;letter-spacing:0;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:16px;line-height:1.45;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
a.t-button:hover{color:#8A2C42!important}
.c-drawer a:not(.btn-pop):hover,.c-drawer a:not(.btn-pop):hover>span:first-child{color:#8A2C42!important}
.c-logo-mark{transition:background-color .3s ease}
.c-logo-link:hover .c-logo-mark{background-color:#8A2C42!important}
.nav-serv:hover .nav-serv-menu,.nav-serv:focus-within .nav-serv-menu{display:flex!important}
.nav-serv-it+.nav-serv-it{border-top:1px solid rgba(138,90,46,0.14)}
.nav-serv-it:hover{background:rgba(138,90,46,0.05)}
.nav-serv-it[aria-disabled="true"]:hover{background:transparent}
.btn-pop{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}
.btn-pop:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 26px rgba(30,36,32,0.22)}
@media (min-width:768px){.c-burger{display:none}.cta-corto{display:none}}
@media (max-width:767px){
  body.bc{padding-top:60px}
  .c-nav{height:60px;padding:0 16px}
  .c-nav-links{display:flex!important;flex:0 0 auto!important;gap:14px!important}
  .c-nav-links .t-button{display:none!important}
  .c-nav-logo{height:34px!important}
  .c-nav-cta{display:none!important}
  .c-burger{display:inline-flex!important}
  .cta-largo{display:none!important}
}
/* Footer real del sitio: dos columnas en escritorio, una en celular. */
@media (max-width:767px){
  .m-footer{padding:var(--s-6) 22px var(--s-5)!important}
  .m-footer-row{flex-direction:column!important;gap:var(--s-6)!important}
  .m-footer-cols{display:grid!important;width:100%!important;grid-template-columns:auto 1fr!important;column-gap:24px!important;row-gap:20px!important}
  .m-footer-cols>div:nth-child(3){grid-column:1/-1!important}
  .m-footer-logo{width:100%!important;max-width:190px!important;height:auto!important;margin:0!important}
}

/* El recorrido (diseño E, aprobado por Kim en el canvas): el camino baja del mundo
   de las ideas al de la materia. Soñá sobre el cielo rosa de Alquimia de Sueños,
   Diseñá en un lienzo en blanco para jugar (con elementos de arte) y Materializá en
   la hoja de Legado, que termina en "Tu boceto" con el (S). Los pasos alternan de
   lado, unidos por una curva; cada uno se abre al completar el anterior, y los hechos
   muestran su resumen y se pueden reabrir. Una línea punteada rosa vuelve a subir:
   el método no es lineal. */
.acc{position:relative;background:#F7F3EA}
.acc::after{content:"";position:absolute;z-index:1;right:9px;top:110px;bottom:170px;border-right:1.5px dashed #F5A3C7;pointer-events:none}
.acc::before{content:"";position:absolute;z-index:1;right:5px;top:106px;width:8px;height:8px;border-top:1.5px solid var(--bclaro);border-left:1.5px solid var(--bclaro);transform:rotate(45deg);pointer-events:none}
.mundo{position:relative;overflow:hidden;padding:44px 0 6px}
.mundo-t{position:relative;z-index:2;max-width:900px;margin:0 auto;padding:0 30px 14px;box-sizing:border-box}
.mundo-t .eb{margin:0;color:var(--bclaro)}
.mundo-t .mt{margin:6px 0 0;font:italic 400 clamp(22px,2.4vw,30px)/1.2 var(--disp);color:var(--borgona)}
.mundo.sona{background:linear-gradient(rgba(251,246,238,.45),rgba(251,246,238,.45)),var(--ros) center/cover no-repeat}
.mundo.sona::after{content:"";position:absolute;left:0;right:0;bottom:0;height:240px;background:linear-gradient(rgba(255,253,248,0),#FFFDF8);pointer-events:none}
/* Transición suave desde el lienzo de Diseñá: el crema se funde en el borgoña y el tallado aparece de a poco.
   Sin filete de marco, para que la transición entre mundos no se corte (Kim, 19/10) */
.mundo.materia{background:linear-gradient(#FFFDF8 0,#F3E3DF 50px,#C9A0A0 120px,#7A3F3E 190px,var(--borgona) 250px);padding:270px 0 64px}
.mundo.materia::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ceil) center/cover no-repeat;opacity:.22;mix-blend-mode:overlay;pointer-events:none;-webkit-mask-image:linear-gradient(transparent 90px,#000 300px);mask-image:linear-gradient(transparent 90px,#000 300px)}
.mundo.materia .mundo-t .eb{color:var(--rosa)}
.mundo.materia .mundo-t .mt{color:#F5EDE0;font-style:normal;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(30px,4.6vw,52px);line-height:.95;margin-top:10px}
.mundo.materia .ac[data-st="abierto"] .ac-tt,.mundo.materia .ac-k{color:var(--rtit)}
.mundo.materia .ac-aviso{color:var(--rosa)}
.mundo.materia .ac-n::before{background:rgba(245,237,224,.1);border-color:var(--oroclaro)}
.mundo.materia .ac-n b{color:var(--oroclaro)}
.mundo.materia .ac-n svg{stroke:var(--oroclaro)}
.mundo.materia .ac-p::before{border-color:rgba(138,44,66,.3)}
@media (hover:hover){.mundo.materia .ac[data-st="hecho"] .ac-b:hover .ac-tt,.mundo.materia .ac[data-st="disponible"] .ac-b:hover .ac-tt{color:var(--rtit)}}
/* En los tres mundos, cada paso abierto es una hoja crema con su consigna, para que el fondo
   y la consigna no se mezclen (Kim, 19/10). Sobre el cielo y el lienzo, la sombra es más suave. */
.mundo .ac-p{background:#F7F3EA;margin:0 16px;box-shadow:0 16px 40px rgba(74,30,28,.14);outline:1px solid rgba(198,161,90,.55);outline-offset:-8px}
.mundo .ac-p>.sec{margin:0}
.mundo .ac-p>.sec:last-child{padding-bottom:56px}
@media (max-width:767px){.mundo .ac-p{margin:0 8px;outline-offset:-5px}}
/* Tu boceto es una hoja crema propia: sus textos vuelven a los colores de la hoja */
.mundo.materia .ac[data-paso="7"] .ac-tt{color:var(--borgona)}
.mundo.materia .ac[data-paso="7"][data-st="abierto"] .ac-tt{color:var(--bclaro)}
.mundo.materia .ac[data-paso="7"] .ac-k{color:var(--bclaro)}
.mundo.materia .ac[data-paso="7"] .ac-r{color:var(--bronce)}
@media (hover:hover){.mundo.materia .ac[data-paso="7"] .ac-b:hover .ac-tt{color:var(--bclaro)}}

/* Cada paso: el nodo en el camino, el título y, si está hecho, su resumen */
.ac{position:relative;z-index:1;max-width:900px;margin:0 auto}
.ac-b{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;min-height:72px;padding:6px 30px 6px calc(12% - 28px);border:0;background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ac-b:focus-visible{outline:2px solid var(--bclaro);outline-offset:-2px}
.ac-n{position:relative;flex:none;display:grid;place-items:center;width:56px;height:56px}
.ac-n::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid var(--bclaro);background:rgba(255,255,255,.6)}
.ac-n>*{position:relative;grid-area:1/1}
.ac-n b{font:400 17px var(--disp);color:var(--bclaro)}
.ac-n svg{display:none;width:18px;height:18px;fill:none;stroke:var(--bclaro);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ac-t{min-width:0;display:flex;flex-direction:column;gap:3px}
.ac-tt{font:italic 400 clamp(19px,2vw,23px)/1.2 var(--disp);color:var(--borgona)}
.ac-r{font:italic 14px/1.4 var(--serif);color:var(--bronce);max-width:36ch;overflow-wrap:anywhere}
.ac-r:empty{display:none}
.ac[data-st="hecho"] .ac-n b{display:none}
.ac[data-st="hecho"] .i-ok{display:block}
.ac[data-st="bloqueado"] .ac-b{cursor:default}
/* El candado dorado (sticker de Kim) marca los pasos que todavía no se abrieron */
.mundo.materia .ac[data-st="bloqueado"] .ac-n::before{background:rgba(245,237,224,.06);border-color:var(--oro)}
.ac[data-st="abierto"] .ac-b{cursor:default}
.ac[data-st="abierto"] .ac-n b{font-size:22px;color:#4A1E1C}
.ac[data-st="abierto"] .ac-tt{color:var(--bclaro)}
@media (hover:hover){.ac[data-st="hecho"] .ac-b:hover .ac-tt,.ac[data-st="disponible"] .ac-b:hover .ac-tt{color:var(--bclaro)}}
/* El camino siempre punteado (Kim, 19/10); en los pasos hechos, en borgoña claro y un poco más marcado */
.ac-p{position:relative}
.ac-p::before{content:"";position:absolute;top:0;bottom:0;left:12%;border-left:1.5px dotted rgba(138,44,66,.45);pointer-events:none}
.ac[data-paso="2"] .ac-p::before,.ac[data-paso="4"] .ac-p::before,.ac[data-paso="6"] .ac-p::before{left:auto;right:12%;border-left:0;border-right:1.5px dotted rgba(138,44,66,.45)}
/* Adentro de los mundos, las secciones de cada paso dejan ver el fondo de su mundo */
.mundo .ac-p>.sec{background:none}
.mundo .ac-p>.sec::before{display:none}

/* Tu boceto: la hoja final de Legado, con el (S) arriba */
.ac[data-paso="7"]{max-width:none}
.ac[data-paso="7"] .ac-h{padding:50px 22px 0}
.ac[data-paso="7"] .ac-b{position:relative;flex-direction:column;align-items:center;text-align:center;gap:6px;max-width:420px;margin:0 auto;padding:50px 24px 28px;background:#FBF7F0;box-shadow:0 18px 40px rgba(20,12,8,.18)}
.ac[data-paso="7"] .ac-n{position:absolute;top:-34px;left:50%;margin-left:-34px;width:68px;height:68px}
.ac[data-paso="7"] .ac-n::before{inset:0;background:#FBF7F0;border:1px solid rgba(107,34,51,.28);box-shadow:none}
.ac[data-paso="7"] .ac-n b{display:block;width:40px;height:40px;background:var(--bclaro);-webkit-mask:url(/assets/logo-monogram-cream-tight.png) center/contain no-repeat;mask:url(/assets/logo-monogram-cream-tight.png) center/contain no-repeat}
.ac[data-paso="7"][data-st="bloqueado"] .ac-n b{opacity:.45}
.ac[data-paso="7"] .ac-t{align-items:center}
.ac[data-paso="7"] .ac-r{max-width:none}
.ac-k{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--bclaro)}

/* Diseñá, paso 3 */
.mundo.disena .h2u em{text-decoration:underline wavy #F5A3C7 2px;text-underline-offset:9px}
.mundo.disena .paper.two .offer.o2{transform:rotate(1.5deg);background:#FFFDF8;outline:2px solid var(--bclaro);outline-offset:-2px;box-shadow:10px 10px 0 var(--oro)}

/* El título del hero: "el boceto" alineado bajo "soñado", en trazo de lápiz */
.tpe .ttl{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;align-items:center}
.lapiz{filter:url(#lapiz)}
@media (max-width:767px){
  .ac-b{min-height:64px;gap:10px}
  .mundo-t{padding:0 22px 12px}
  }
.ac-p>.sec{padding-top:44px}
.ac-p>.sec.ask1{padding-top:36px}
.ac-p>.sec.va{padding-top:56px}
@media (max-width:767px){.ac-p>.sec{padding-top:34px}.ac-p>.sec.ask1{padding-top:28px}}
/* Tu boceto: el título arriba, tu visión y tu web, la hoja de números (con lugar para el sello) y el pedido del mail */
.ac-p>.sec.rec:first-child{padding-bottom:36px}
.ac-p>.sec.ofertas{padding-top:0}
.ac-p>.sec.ofertas .r2{margin-top:0;margin-bottom:0}
.ac-p>.sec.numeros{padding-top:72px}
.est.pedir{align-items:center;text-align:center;padding:34px 28px}
.est.pedir>div{align-items:center}
.party .xdia{display:block;margin-top:-4px;font:italic 14px/1.35 var(--serif);color:var(--bronce)}
/* La pantalla del envío por mail empieza debajo del hero */
.scr[data-scr="enviar"]>.sec:first-child{padding-top:44px}
@media (max-width:767px){.scr[data-scr="enviar"]>.sec:first-child{padding-top:34px}.ac-p>.sec.numeros{padding-top:64px}}
/* En la hoja, la tarjeta de tus costos va primero y la de tu ingreso soñado después de A → B */
.sheet .ptos+.party{margin-top:40px}

/* Botones y chips como <button>. */
button.btn,button.lnk,button.chip{font-family:inherit;-webkit-appearance:none;appearance:none}
button.btn{font:italic clamp(15px,1.48vw,19px) var(--disp)}
button.chip{font:italic 15.5px var(--disp)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none;box-shadow:none}
.btn.rosa[aria-disabled="true"]{cursor:default}

/* Errores de los pasos (mismo lenguaje que el anexo de estados). */
.ans.bad textarea{border-color:var(--bclaro);border-width:2px}
.fld.bad .ms-b{border-bottom-color:var(--bclaro);border-bottom-width:2px}
.consent.bad{color:var(--bclaro)}
.offers+.er-msg,.ab+.er-msg{text-align:center}
.join .er-msg{text-align:left;margin:0}
.ask .er-msg{margin:10px 0 0;text-align:center}

/* Campo trampa para bots (honeypot), fuera de la vista. */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
/* Como en el mockup: cifras alineadas en todo el recorrido, y el título del gráfico con su tamaño propio dentro de la hoja */
#boceto,#boceto *{font-feature-settings:"lnum"}
.sheet .ctitle{margin:0 0 18px;font:italic 400 clamp(20px,1.9vw,24px)/1.25 var(--disp)}
.est>div{display:flex;flex-direction:column;gap:14px}

/* Rubro del negocio (paso 1) */
.rubro{max-width:440px;margin:0 auto;text-align:left;gap:10px}
.rubro select.txt{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:28px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%238A5A2E' stroke-width='1.5'/></svg>") right 4px center no-repeat}
.rubro .er-msg{margin:0}
.fld.rubro.bad .txt{border-bottom-color:var(--bclaro);border-bottom-width:2px}

/* "Ver un ejemplo": chiquito a la vista, con 44px de área para tocar */
.ej{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.ask .ej{align-items:center;text-align:center;margin-top:6px}
.ej-b,.ej-u{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;cursor:pointer;font:italic 14.5px var(--serif);color:var(--bclaro);text-decoration:underline;text-underline-offset:3px}
.ej-u{min-height:0;padding:12px 0;margin-left:6px}
.ej-t{margin:0;font:italic 15px/1.5 var(--serif);color:var(--tinta)}

/* Paletas: cada una es un botón con sus cuatro colores */
.paletas{display:flex;flex-wrap:wrap;gap:14px}
/* Trazos de pintura junto a "Tu paleta" (imagen libre de derechos) */
.pal-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.trazos{width:clamp(96px,22vw,150px);height:auto;transform:rotate(-4deg);margin:-8px -6px -14px 0;pointer-events:none}
.pal{display:flex;gap:6px;padding:6px;border:1.5px solid transparent;background:none;cursor:pointer;min-height:44px}
.pal span{width:30px;height:30px;border:1px solid rgba(138,90,46,.4)}
.pal[aria-checked="true"]{border-color:var(--borgona)}
.pal:focus-visible{outline:2px solid var(--bclaro);outline-offset:2px}

/* "Prefiero no hacer números ahora" */
.sinnum{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.sinnum .hlp{margin:0;font:italic 14.5px/1.5 var(--serif);color:var(--bronce)}

/* ===== El camino en movimiento: candados, tilde, brillitos y confeti (boceto-magia.js) ===== */
.magia{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
.ac-n::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #E7CD98;opacity:0;pointer-events:none}
.ac.aro .ac-n::after{animation:aro .75s ease-out}
@keyframes aro{0%{opacity:.95;transform:scale(.75)}100%{opacity:0;transform:scale(1.9)}}
.ac.abriendo .ac-n{animation:pulso .55s ease-in-out}
@keyframes pulso{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}}
.i-ok path{stroke-dasharray:16;stroke-dashoffset:0}
@keyframes tilde{from{stroke-dashoffset:16}to{stroke-dashoffset:0}}
.ac-n.sacude{animation:sacude .42s ease-in-out}
@keyframes sacude{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.ac-aviso{position:relative;z-index:1;margin:-6px 0 10px;padding:0 30px 0 calc(12% + 42px);font:italic 16px/1.4 var(--serif);color:var(--bclaro)}
.ac[data-paso="7"] .ac-aviso{text-align:center;padding:14px 22px 0;margin:0}
.ac-p.fundido{animation:fundido .15s ease-out}
@keyframes fundido{from{opacity:0}}
.scr.entra-corta{animation:fundido .3s ease-out}
@media (prefers-reduced-motion:reduce){
  .ac.abriendo .i-cand,.ac.aro .ac-n::after,.ac.abriendo .ac-n,.ac.tilde .i-ok path,.ac-n.sacude,.scr.entra,.scr.entra-corta{animation:none}
  .i-lock path{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.15s;animation-name:fundido}
}
/* Botón de sonido, abajo a la derecha en todas las pantallas */
.son{position:fixed;right:14px;bottom:14px;z-index:45;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(138,90,46,.4);background:rgba(251,247,240,.94);color:var(--bclaro);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(20,12,8,.14)}
.son svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.son .on{display:none}
.son[aria-pressed="true"] .on{display:inline}
.son[aria-pressed="true"] .off{display:none}
.son:focus-visible{outline:2px solid var(--bclaro);outline-offset:2px}

/* "Abrir práctica": la llave chica sale del costado del botón y gira un poco al pasar o al tocar */
.btn.llave{position:relative;padding-left:62px;margin-top:8px}
.btn.llave img{position:absolute;left:-14px;top:50%;width:54px;height:auto;margin-top:-56px;transform:rotate(-34deg);transition:transform .45s var(--ease);pointer-events:none}
@media (hover:hover){.btn.llave:hover img{transform:rotate(-8deg)}}
.btn.llave:active img{transform:rotate(-8deg)}
@media (prefers-reduced-motion:reduce){.btn.llave img{transition:none}}
/* El saludo que queda cuando se abre la práctica */
.hola{max-width:560px;width:100%;box-sizing:border-box;margin:12px auto 0;display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 20px;border:1px solid rgba(198,161,90,.5);background:var(--crema);font:italic 400 clamp(19px,2vw,22px)/1.3 var(--disp);color:var(--borgona);text-align:center}
.hola svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--bclaro);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Paso 1: el rubro, en una casilla con fondo para que no se pierda sobre el cielo (Kim, 19/10) */
.rubro select.txt{background-color:var(--crema);border:1px solid rgba(138,90,46,.55);border-radius:6px;padding:10px 40px 10px 14px;background-position:right 14px center;box-shadow:0 2px 8px rgba(74,30,28,.06)}
.rubro select.txt:focus-visible{outline:2px solid var(--borgona);outline-offset:2px}
.fld.rubro.bad select.txt{border-color:var(--bclaro);border-width:2px}
.rubro #iRubroOtro{background:var(--crema);border:1px solid rgba(138,90,46,.55);border-radius:6px;padding:10px 14px}

/* Paso 2: la varita mágica, que aparece con magia (la imagen la pasó Kim) */
.ac[data-paso="2"] .solo{position:relative}
.varita{width:96px;height:auto;margin:0 auto -10px;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(74,30,28,.18))}
@media (min-width:1200px){
  .ac[data-paso="2"] .sec{overflow:visible}
  .varita{position:absolute;top:-30px;right:-200px;width:150px;margin:0}
}
.varita.aparece{animation:varitaAparece 1.1s var(--ease) both, varitaFlota 4s ease-in-out 1.1s infinite}
@keyframes varitaAparece{
  0%{opacity:0;transform:translateY(18px) rotate(-28deg) scale(.6);filter:drop-shadow(0 0 0 rgba(231,205,152,0)) brightness(1.6)}
  60%{opacity:1;transform:translateY(-4px) rotate(6deg) scale(1.04);filter:drop-shadow(0 0 22px rgba(231,205,152,.9)) brightness(1.15)}
  100%{opacity:1;transform:none;filter:drop-shadow(0 6px 10px rgba(74,30,28,.18))}
}
@keyframes varitaFlota{0%,100%{transform:none}50%{transform:translateY(-6px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.varita.aparece{animation:none}}

/* Paso 4: la web en un iPhone, al costado en escritorio y debajo en el celular y la tablet */
.marca2{display:flex;flex-direction:column;gap:30px}
.mphone .note{margin:0 auto;max-width:none;text-align:center}
@media (min-width:1024px){
  .marca2{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:44px;align-items:start}
}
#erOfertas{margin-top:22px}
.ms-fin{display:flex;justify-content:flex-end;padding:8px 10px;border-top:1px solid rgba(138,90,46,.18)}
.ms-listo{min-height:44px;padding:8px 26px;border:0;border-radius:999px;background:var(--borgona);color:var(--marfil);font:italic 16px var(--disp);cursor:pointer}
.ms-listo:focus-visible{outline:2px solid var(--bclaro);outline-offset:2px}
/* Adentro de la hoja, el camino punteado no cruza la consigna */
.mundo .ac-p::before{display:none}
.paper.two .sinnum{margin-top:22px}
/* Paso 3: lo que dice cada mujer, en formato cita, arriba de su tarjeta */
.ofc{display:flex;flex-direction:column;gap:30px;min-width:0}
.cita{position:relative;margin:0;padding:4px 8px 4px 20px;border-left:2px solid var(--rtit)}
.cita p{margin:0;font:italic 400 clamp(18px,1.7vw,21px)/1.4 var(--disp);color:var(--borgona)}
/* El cuadriculado de Diseñá se desvanece antes de Materializá */
.mundo.disena::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:0;background:linear-gradient(rgba(255,253,248,0),#FFFDF8);pointer-events:none}

/* Soñá a Diseñá: el cielo se funde en el lienzo y el cuadriculado aparece de a poco */
.mundo.disena::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;z-index:0;background:linear-gradient(#FFFDF8,rgba(255,253,248,0));pointer-events:none}

/* Paso 3: la oferta soñada en blanco y borgoña, la accesible en rosa claro y rosa fuerte;
   los botones de pago sin fondo, solo con borde (Kim, 19/10) */
.mundo.disena .paper.two .offer.o1{background:#FFFFFF;outline:2px solid var(--bclaro);outline-offset:-2px;box-shadow:-12px 12px 0 var(--bclaro)}
.mundo.disena .paper.two .offer.o2{background:#FFFFFF;outline:2px solid var(--rtit);outline-offset:-2px;box-shadow:10px 10px 0 var(--rtit)}
.offer .chip,.offer .chip.on{background:transparent;color:var(--borgona)}
.offer.o1 .chip.on{border:2px solid var(--bclaro)}
.offer.o2 .chip.on{border:2px solid var(--rtit)}
.offer .chip.on{font-weight:600}
/* "Lográs tu ingreso soñado": la tarjeta más aspiracional, en borgoña con letras blancas (Kim, 19/10) */
#party{background:var(--borgona);color:#FFFFFF}
#party .al,#party .pm small,#party h4,#party .eq span{color:#FFFFFF}
#party .pm{color:var(--oroclaro)}
#party .cuenta,#party .xdia{color:rgba(255,255,255,.78)}
#party .eq i{color:var(--oroclaro)}
#party .mxr{background:transparent;border-color:var(--oroclaro)}
#party .mxr b{color:#FFFFFF;border-color:rgba(231,205,152,.55)}
#party .mx{color:#FFFFFF}
@media (hover:hover){#party .mx:hover:not(:disabled){background:rgba(245,163,199,.25)}}
#party .mx:focus-visible{outline-color:var(--rtit)}

/* ===== Sistema tipográfico de la página (auditoría, Kim 19/10) =====
   Una sola regla de mayúsculas, minúsculas y jerarquía en toda la página:
   1. Título del mundo (Soñá, Diseñá, Materializá): mayúsculas, 30 a 52 px, centrado, con su eyebrow arriba.
   2. Título del paso o de la sección (.h2u): mayúsculas, 26 a 44 px, centrado; el acento en itálica minúscula.
      Si la pregunta lleva el nombre de la clienta, el nombre va antes, en una línea de entrada (.lead)
      en minúscula, 20 a 28 px. El susurro va en itálica y más chico.
   3. Título de tarjeta (.t4): itálica, 26 a 32 px.
   4. Título de subtarjeta (.t5): itálica, 20 a 24 px.
   5. Bajada (.sub): Georgia itálica, 17 a 19 px. Eyebrows (.eb, .k): Georgia, 12 px, mayúsculas espaciadas.
      Etiquetas de campos (.lbl): Georgia, 12 px, mayúsculas espaciadas. Ayudas y notas: Georgia itálica, 13 a 15 px. */
.mundo-t,.mundo.disena .mundo-t,.mundo.materia .mundo-t{text-align:center}
.mundo-t .mt{font:400 clamp(30px,4.6vw,52px)/.95 var(--disp);font-style:normal;text-transform:uppercase;letter-spacing:-.02em;margin-top:10px}
.mundo-t .eb{color:var(--bclaro)}
.h2u .lead,.q1 .lead{display:block;margin:0 auto 12px;max-width:30ch;text-transform:none;font:400 clamp(20px,2.2vw,28px)/1.3 var(--disp);letter-spacing:0;color:var(--borgona);text-wrap:balance}
.h2u .lead .susurro,.q1 .lead .susurro{font-style:italic;font-size:.82em;color:var(--borgona);opacity:.78;letter-spacing:0}
.q1{max-width:none;text-align:center}
.q1 .q1-t{display:block;font-size:inherit;line-height:1.02;letter-spacing:-.03em}
.t4{margin:0;font:italic 400 clamp(26px,2.6vw,32px)/1.15 var(--disp);color:var(--borgona)}
.t5{margin:0;font:italic 400 clamp(20px,1.9vw,24px)/1.2 var(--disp);color:var(--borgona)}
.vcard h3,.join h3{font:italic 400 clamp(26px,2.6vw,32px)/1.15 var(--disp)}
.eb,.k,.rphone .k,.est .k,.vcard .k,.ac-k{font-family:var(--serif);font-size:12px;font-style:normal;letter-spacing:.24em;text-transform:uppercase}
.sub{font-size:clamp(17px,1.5vw,19px)}
#estado{text-align:center;align-items:center}
/* En escritorio, la línea de entrada con el nombre entra en una sola línea */
@media (min-width:1024px){.h2u .lead,.q1 .lead{max-width:none}}

/* ===== Alternativa con ?demo=2 (clase .est2 en <html>): fondos de arquitectura (Kim, 19/10) =====
   El recorrido de una obra: Soñá, la rotonda frente al mar, encuadrada en los capiteles (la visión); Diseñá, el grabado del capitel del
   Erecteion, encuadrado en la voluta (el diseño); Materializá, el capitel tallado en piedra (la obra). Sin filtro de color: un velo
   crema, más fuerte arriba, y un halo crema detrás de los textos sobre la foto. Diseñá sin stickers.
   Desde el 20/10 es la estética que se publica (Kim); la anterior queda guardada y se ve con ?estetica=1.
   Las fotos de arquitectura (assets/boceto/fondos/) se borraron el 22/10: ver docs/historial/boceto-esteticas.md. */
.est2 .mundo.sona::after{height:260px}
.est2 .mundo.disena::before{height:100%;background:linear-gradient(#FFFDF8 0,rgba(255,253,248,.6) 260px,rgba(255,253,248,.6) calc(100% - 260px),#FFFDF8 100%),none}
.est2 .mundo.disena::after{display:none}
.est2 .mundo.materia::before{opacity:1;mix-blend-mode:normal;background:linear-gradient(rgba(255,253,248,.62) 0,rgba(255,253,248,.4) 320px,rgba(255,253,248,.4) 100%),none;-webkit-mask-image:linear-gradient(transparent 0,#000 260px);mask-image:linear-gradient(transparent 0,#000 260px)}
.est2 .mundo .ac[data-st="bloqueado"] .ac-tt{opacity:.8}
/* Materializá vuelve a los colores de los otros mundos (sobre fondo claro) */
.est2 .mundo.materia .mundo-t .eb,.est2 .mundo.materia .ac-aviso{color:var(--bclaro)}
.est2 .mundo.materia .mundo-t .mt,.est2 .mundo.materia .ac-tt{color:var(--borgona)}
.est2 .mundo.materia .ac[data-st="abierto"] .ac-tt,.est2 .mundo.materia .ac-k{color:var(--bclaro)}
.est2 .mundo.materia .ac-r{color:var(--bronce)}
.est2 .mundo.materia .ac-n::before{background:rgba(255,255,255,.85);border-color:var(--bclaro)}
.est2 .mundo.materia .ac[data-paso="7"] .ac-n::before{background:#FBF7F0;border:1px solid rgba(107,34,51,.28)}
.est2 .mundo.materia .ac-n b,.est2 .mundo.materia .ac-n svg{color:var(--bclaro);stroke:var(--bclaro)}
@media (hover:hover){.est2 .mundo.materia .ac[data-st="hecho"] .ac-b:hover .ac-tt,.est2 .mundo.materia .ac[data-st="disponible"] .ac-b:hover .ac-tt{color:var(--bclaro)}}

/* Paso 3: los botones "Leer mensaje", el mensaje que se va escribiendo y la tarjeta que aparece */
.btn-msg{align-self:flex-start;min-height:48px;padding:10px 26px;border:1.5px solid var(--bclaro);border-radius:999px;background:#FFFDF8;color:var(--borgona);font:italic 400 18px var(--disp);cursor:pointer;box-shadow:0 6px 16px rgba(74,30,28,.08);transition:background-color .2s,transform .2s}
.ofc:nth-child(2) .btn-msg{border-color:var(--rtit)}
@media (hover:hover){.btn-msg:hover{background:var(--rosa);transform:translateY(-1px)}}
.btn-msg:focus-visible{outline:2px solid var(--borgona);outline-offset:3px}
.ofc-c{display:flex;flex-direction:column;gap:30px;flex:1}
.ofc-c[hidden]{display:none}
.ofc-c>.offer{flex:1}
.cita p.tipeando::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--bclaro);animation:cursor .8s steps(1) infinite}
@keyframes cursor{50%{opacity:0}}
.offer.aparece{animation:ofertaAparece .6s var(--ease) both}
.mundo.disena .paper.two .offer.o1.aparece{animation-name:ofertaApareceIzq}
.mundo.disena .paper.two .offer.o2.aparece{animation-name:ofertaApareceDer}
@keyframes ofertaAparece{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes ofertaApareceIzq{from{opacity:0;transform:translateY(16px) rotate(-4deg) scale(.96)}to{transform:rotate(-1.5deg)}}
@keyframes ofertaApareceDer{from{opacity:0;transform:translateY(16px) rotate(4deg) scale(.96)}to{transform:rotate(1.5deg)}}
@media (prefers-reduced-motion:reduce){.offer.aparece{animation:none}.cita p.tipeando::after{animation:none}}
.offer[hidden]{display:none}
.cita p:focus{outline:none}
/* El botón del próximo mensaje por leer: halo rosa que late y un brillo que lo cruza */
.btn-msg{position:relative;overflow:hidden}
.btn-msg.llama{animation:llamar 2.2s ease-in-out infinite;border-width:2px}
.btn-msg.llama::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:skewX(-18deg);animation:brilloBtn 2.2s ease-in-out infinite;pointer-events:none}
@keyframes llamar{0%,100%{box-shadow:0 6px 16px rgba(74,30,28,.1),0 0 0 0 rgba(245,163,199,.9);background-color:#FFFDF8}50%{box-shadow:0 6px 16px rgba(74,30,28,.1),0 0 0 14px rgba(245,163,199,0);background-color:#FBE3EC}}
@keyframes brilloBtn{0%,55%{left:-60%}85%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.btn-msg.llama{animation:none;box-shadow:0 0 0 4px rgba(245,163,199,.45)}.btn-msg.llama::after{display:none}}
/* la línea sigue también entre un mundo y otro, por detrás del título del mundo */
.est2 .mundo-t::before{content:"";position:absolute;left:50%;top:-44px;height:36px;border-left:2px dotted rgba(138,44,66,.45)}
@media (max-width:767px){.est2 .mundo-t::before{top:-36px;height:28px}}

/* Paso 3: tarjetas de producto más finas y elegantes (Kim, 19/10). Sin inclinación, sin cintas ni sombras
   de color: papel claro, filete dorado con una línea interior, y un detalle de color arriba
   (borgoña claro en la soñada, rosa en la accesible) */
.mundo.disena .paper.two .offer,.mundo.disena .paper.two .offer.o1,.mundo.disena .paper.two .offer.o2{transform:none;outline:0;border:1px solid rgba(198,161,90,.6);background:#FFFDF8;box-shadow:0 14px 34px rgba(74,30,28,.08);position:relative}
.mundo.disena .paper.two .offer::after{content:"";position:absolute;left:50%;top:-1px;right:auto;bottom:auto;width:64px;height:3px;margin-left:-32px;background:var(--bclaro);transform:none}
.mundo.disena .paper.two .offer.o2::after{background:var(--rtit)}
.mundo.disena .paper.two .offer>*{position:relative}
.mundo.disena .paper.two .offer.aparece,.mundo.disena .paper.two .offer.o1.aparece,.mundo.disena .paper.two .offer.o2.aparece{animation-name:ofertaAparece}
.offer .chip.on,.offer.o1 .chip.on,.offer.o2 .chip.on{border:1px solid var(--borgona);background:var(--borgona);color:#FFFDF8;font-weight:400}
.mundo.disena .paper.two .offer.o1::after,.mundo.disena .paper.two .offer.o2::after{content:"";position:absolute;left:50%;top:-1px;right:auto;bottom:auto;width:64px;height:3px;margin-left:-32px;background:var(--bclaro);transform:none;pointer-events:none}
.mundo.disena .paper.two .offer.o2::after{background:var(--rtit)}
/* "Lo que te llevás": el título en Playfair itálica, en minúscula (Kim, 19/10) */
.h2u.h2-it{font-style:italic;text-transform:none;letter-spacing:-.01em}
/* Paso 5: los dos puntos de equilibrio, en paralelo, con "Ver más" para lo largo */
.equi{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto;padding:26px clamp(20px,3vw,32px);border:1px solid rgba(198,161,90,.55);background:#FFFDF8;text-align:left}
.equi p{margin:0;font:italic 16px/1.6 var(--serif);color:var(--tinta)}
.equi .k{color:var(--bclaro);font-style:normal}
.equi-dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.equi-dos>div{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-top:2px solid var(--bclaro);background:rgba(248,224,224,.35)}
.equi-dos>div+div{border-top-color:var(--oro);background:rgba(231,205,152,.18)}
@media (max-width:600px){.equi-dos{grid-template-columns:1fr}}
.equi-mas{display:flex;flex-direction:column;gap:12px}
.equi-mas summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;font:italic 15px var(--serif);color:var(--bclaro);text-decoration:underline;text-underline-offset:4px}
.equi-mas summary::-webkit-details-marker{display:none}
.equi-mas summary .vn,.equi-mas[open] summary .vm{display:none}
.equi-mas[open] summary .vn{display:inline}
.equi-mas[open]>*:not(summary){margin-top:12px}
.equi-f{padding:12px 16px;border-left:2px solid var(--oro);background:rgba(231,205,152,.18)}
.equi-f b{font-weight:600;font-style:normal;color:var(--borgona)}
/* Tus números: "Tu punto de equilibrio para {mes}" y el link a la explicación */
.party .pe-t{margin:0;font:400 clamp(22px,2.6vw,30px)/1.15 var(--disp);letter-spacing:-.01em;text-transform:uppercase;color:var(--borgona);text-wrap:balance}
.party .pe-t span{display:block;margin-top:4px;font-style:italic;text-transform:none;font-size:.85em;color:var(--bclaro)}
.que-es{min-height:44px;padding:4px 6px;border:0;background:none;cursor:pointer;font:italic 15px var(--serif);color:var(--bclaro);text-decoration:underline;text-underline-offset:4px}
.que-es:focus-visible{outline:2px solid var(--bclaro);outline-offset:2px}
.equi.resalta{animation:resalta 1.8s ease-out}
@keyframes resalta{0%,30%{box-shadow:0 0 0 6px rgba(245,163,199,.6)}100%{box-shadow:0 0 0 0 rgba(245,163,199,0)}}
@media (prefers-reduced-motion:reduce){.equi.resalta{animation:none;box-shadow:0 0 0 4px rgba(245,163,199,.5)}}
/* Paso 5: "No sé cuánto es: armalo por rubro" sin las líneas de arriba y abajo (Kim, 19/10) */
details.calc{border-top:0;border-bottom:0}

/* Fase 2 (Kim, 19/10): Tu boceto no se muestra completo en la página. Sobre las barras del gráfico va el cartel
   "Te enviamos el boceto completo por mail" en un rosa translúcido que deja entrever lo de atrás; lo que sigue
   (punto A y B, ingreso soñado, nota) se ve tan borroso que no se lee ni se toca. */
.borroso-w{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.borroso{width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;filter:blur(7px);-webkit-user-select:none;user-select:none;pointer-events:none}
.graf{position:relative}
/* El cartel, sobre las barras: centrado en la zona de las barras (en el celular, sobre las filas) */
.graf .aviso-mail{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:min(92%,520px);z-index:6;
  background:rgba(248,224,224,.7);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border:1px solid rgba(198,161,90,.6);box-shadow:0 18px 44px rgba(20,12,8,.14)}
.graf .aviso-mail .t4{max-width:18ch}
@media (max-width:767px){.graf .aviso-mail{top:50%}}
/* Confirmar el mail antes de enviar */
.form1 .fin[hidden],.conf-mail[hidden]{display:none}
.conf-mail{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:26px 22px;background:var(--crema);border:1px solid rgba(198,161,90,.5)}
.conf-dir{margin:0;font:italic 400 clamp(21px,2.4vw,26px)/1.3 var(--disp);color:var(--borgona);overflow-wrap:anywhere}
.conf-sug{margin:0;font:italic 16px/1.5 var(--serif);color:var(--tinta)}
.conf-sb{min-height:44px;padding:0 2px;background:none;border:0;border-bottom:1px solid var(--oro);font:inherit;color:var(--bclaro);cursor:pointer}
/* − y + de las tarjetas de números: los recuadros alineados arriba aunque una columna tenga una línea más
   ("1 venta cada 5 días"); el + entre los dos, a la altura de los recuadros (Kim, 20/10) */
@media (min-width:768px){
  .party.p2 .eq.mxs{align-items:flex-start}
  .party.p2 .eq.mxs>i{align-self:flex-start;margin-top:clamp(14px,1.6vw,20px)}
}
.party .pe-cuenta{margin:-4px 0 4px;font:italic 14px/1.5 var(--serif);color:var(--bronce);max-width:46ch;text-wrap:balance}
.pe-nota{margin:10px auto 0;text-align:center;max-width:60ch}

/* El camino con el filtro del hero (Kim, 20/10): las tres fotos con el mismo velo oscuro cálido y los textos
   que van sobre la foto en claro. Las hojas con las consignas siguen crema. Los mundos se funden entre sí
   sobre el mismo tono oscuro. */
.est2 .mundo.sona::after{background:linear-gradient(rgba(48,35,28,0),#30231C)}
.est2 .mundo.disena::before{background:linear-gradient(#30231C 0,rgba(40,28,22,.55) 240px,rgba(40,28,22,.55) calc(100% - 240px),#30231C 100%),none}
.est2 .mundo.materia::before{background:linear-gradient(rgba(40,28,22,.6) 0,rgba(40,28,22,.5) 320px,rgba(40,28,22,.55) 100%),none}
.est2 .mundo-t .eb{color:var(--rosa) !important}
.est2 .mundo .ac[data-st="abierto"] .ac-tt,.est2 .mundo .ac-k{color:var(--rtit) !important}
.est2 .mundo .ac-aviso{color:var(--rosa) !important}
.est2 .mundo .ac:not([data-paso="7"]) .ac-n::before{background:rgba(245,237,224,.12) !important;border-color:var(--oroclaro) !important}
.est2 .mundo .ac:not([data-paso="7"]) .ac-n b,.est2 .mundo .ac .ac-n svg{color:var(--oroclaro) !important;stroke:var(--oroclaro) !important}
.est2 .mundo.materia .ac[data-paso="7"] .ac-tt{color:var(--borgona) !important;text-shadow:none !important}
.est2 .mundo.materia .ac[data-paso="7"] .ac-r{color:var(--bronce) !important;text-shadow:none !important}
.est2 .mundo.materia .ac[data-paso="7"] .ac-k{color:var(--bclaro) !important}
/* Las fotos del camino, difuminadas para que no compitan con el camino ni con los títulos (Kim, 20/10).
   La foto de Soñá pasa a un ::before para poder difuminarla sin tocar el contenido. Los bordes del
   difuminado se funden con el fondo oscuro de cada mundo. */
.est2 .mundo.sona::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(40,28,22,.58) 0,rgba(48,34,26,.46) 45%,rgba(40,28,22,.62) 100%),none;pointer-events:none}
.est2 .mundo.sona::after{z-index:0}
.est2 .mundo.sona::before,.est2 .mundo.disena::before,.est2 .mundo.materia::before{filter:blur(5px)}
@media (max-width:767px){.est2 .mundo.sona::before,.est2 .mundo.disena::before,.est2 .mundo.materia::before{filter:blur(3px)}}

/* La web del teléfono: el diseño elegido en un iframe de 390 px, escalado al ancho de la pantalla (Kim, 21/10).
   El iframe no recibe el puntero, así el scroll lo hace la pantalla del teléfono. */
.psc .pw{position:relative;overflow:hidden;min-height:100%}
.psc .pwf{position:absolute;left:0;top:0;display:block;width:390px;height:100%;border:0;transform-origin:0 0;pointer-events:none;background:var(--pp)}
/* El selector de diseño: la muestra de colores (sin el nombre, Kim 21/10) */
.pal .pal-m{display:flex;gap:6px}
/* Qué te frena: pastillas de una sola opción, agrupadas por cómo empieza la frase (Kim, 21/10) */
.pills{display:flex;flex-direction:column;gap:16px}
.pl-g{display:flex;flex-direction:column;gap:8px}
.pl-t{margin:0;font:italic 400 18px/1.2 var(--disp);color:var(--borgona)}
.pl-os{display:flex;flex-wrap:wrap;gap:8px}
.pl-o{position:relative;display:inline-flex;cursor:pointer}
.pl-o input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pl-o span{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border:1px solid rgba(138,90,46,.45);border-radius:999px;background:#FFFDF8;font:italic 400 16px/1.2 var(--disp);color:var(--borgona);transition:background .2s,color .2s,border-color .2s}
.pl-o:hover span{border-color:var(--borgona)}
.pl-o input:checked+span{background:var(--borgona);border-color:var(--borgona);color:#FBF6EE}
.pl-o input:focus-visible+span{outline:2px solid var(--bclaro);outline-offset:2px}
.pills .ms-ot{margin-top:4px}
/* Ingreso soñado: debajo del monto que te ingresa, lo que facturás (Kim, 21/10) */
#party .fact{margin:-4px 0 10px;font:italic 400 17px/1.3 var(--disp);color:#FFFFFF;opacity:.9}
/* Paso 2: el tip debajo del ingreso soñado (Kim, 21/10) */
.tip2{margin:2px 0 0;font-style:italic;color:var(--bronce)}
.tip2 b{font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-style:normal;font-size:.85em}

/* ===== Estética de nubes (Kim, 22/10): se ve con ?estetica=3 (clase .est3, sobre .est2) =====
   La misma estructura que la versión de arquitectura (camino lineal centrado), con el diseño de la landing
   del challenge: el hero con el cielo rosa de nubes, fondos claros y limpios, tarjetas con bordes
   redondeados, campos con borde rosa y botones rosa. Se usa html.est3 para ganarle a los !important de .est2. */
html.est3{--r-card:22px;--r-campo:14px;--rborde:#F5A3C7;--rhair:rgba(245,163,199,.55);--hoja:#FFFAF3;--campo:#FFFDF9;--claro:#F7F3EA}
/* Hero: el cielo de nubes con un velo rosa suave, textos oscuros */
html.est3 .tpe{background:var(--claro)}
html.est3 .tpe .l-ceil{inset:0;background:url(/assets/boceto/hero-nubes.jpg) 62% center/cover no-repeat;filter:none;opacity:1;mix-blend-mode:normal}
html.est3 .tpe .l-veil{background:linear-gradient(rgba(250,226,230,.46),rgba(250,226,230,.34));mix-blend-mode:normal}
html.est3 .tpe .ttl .main{color:var(--borgona)}
html.est3 .tpe .ttl .pre{color:var(--bclaro)}
html.est3 .tpe .eb,html.est3 .tpe .eb.lt{color:var(--bclaro)}
html.est3 .tpe .sub{color:var(--tinta)}
html.est3 .tpe .folio{color:rgba(74,30,28,.4)}
html.est3 .tpe .vid{border-radius:var(--r-campo);overflow:hidden;box-shadow:0 18px 40px -22px rgba(74,30,28,.45)}
/* Botones: rosa con texto borgoña, como la landing; el secundario, con borde */
html.est3 .btn{background:var(--rborde);border:2px solid var(--rborde);color:var(--borgona);box-shadow:0 3px 0 rgba(74,30,28,.18)}
html.est3 .btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(74,30,28,.18)}
html.est3 .btn.ghost{background:rgba(255,253,249,.7);border:1.5px solid var(--borgona);color:var(--borgona);box-shadow:none}
html.est3 .btn.ghost:hover{background:var(--campo)}
html.est3 .btn:disabled{opacity:.55}
/* Fondos claros y limpios */
html.est3 .qty{background:var(--claro)}
html.est3 .acc,html.est3 .mundo.sona,html.est3 .mundo.disena,html.est3 .mundo.materia{background:var(--claro) !important}
html.est3 .mundo.sona::before,html.est3 .mundo.disena::before,html.est3 .mundo.materia::before,html.est3 .mundo.sona::after{display:none !important}
html.est3 .acc::before,html.est3 .acc::after{display:none}
html.est3 .mundo-t .eb{color:var(--bclaro) !important}
html.est3 .mundo-t .mt{color:var(--borgona) !important}
html.est3 .mundo .ac-tt{color:var(--borgona) !important}
html.est3 .mundo .ac[data-st="abierto"] .ac-tt,html.est3 .mundo .ac-k{color:var(--bclaro) !important}
html.est3 .mundo .ac-r{color:var(--bronce) !important}
html.est3 .mundo .ac-aviso{color:var(--bclaro) !important}
html.est3 .mundo .ac:not([data-paso="7"]) .ac-n::before{background:var(--campo) !important;border-color:var(--rborde) !important}
html.est3 .mundo .ac:not([data-paso="7"]) .ac-n b,html.est3 .mundo .ac .ac-n svg{color:var(--bclaro) !important;stroke:var(--bclaro) !important}
html.est3 .mundo .ac[data-st="abierto"]:not([data-paso="7"]) .ac-n::before{background:#E8A6C8 !important;border:2px solid #FBEFF3 !important}
html.est3 .mundo .ac[data-st="abierto"] .ac-n b{color:var(--borgona) !important}
html.est3 .mundo-t::before{border-left-color:rgba(138,44,66,.3) !important}
html.est3 .mundo.materia .mundo-t::before{top:-60px;height:52px}
html.est3 .varita{filter:drop-shadow(0 6px 14px rgba(74,30,28,.22))}
/* Tarjetas redondeadas: la hoja de cada paso, Lo que te llevás, Abrí tu práctica y las de adentro */
html.est3 .mundo .ac-p{background:var(--hoja);border:1.5px solid var(--rhair);border-radius:var(--r-card);outline:0;box-shadow:0 18px 40px -24px rgba(74,30,28,.35) !important}
html.est3 .k3-card{border-radius:var(--r-card);outline:0;border:1.5px solid rgba(198,161,90,.45);background:var(--hoja);box-shadow:0 18px 40px -24px rgba(74,30,28,.3)}
html.est3 .join{border-radius:var(--r-card);border:1.5px solid var(--rhair);background:var(--hoja);box-shadow:0 18px 40px -24px rgba(74,30,28,.3)}
html.est3 .join::before{display:none}
html.est3 .hola{border-radius:999px;border-color:var(--rhair);background:var(--hoja)}
html.est3 .paper{border-radius:18px;background:var(--campo)}
html.est3 .mundo.disena .paper.two .offer,html.est3 .mundo.disena .paper.two .offer.o1,html.est3 .mundo.disena .paper.two .offer.o2{border-radius:18px;border:1.5px solid rgba(198,161,90,.45);background:var(--campo);box-shadow:none}
html.est3 .mundo.disena .paper.two .offer::before,html.est3 .mundo.disena .paper.two .offer.o1::before,html.est3 .mundo.disena .paper.two .offer.o2::before,
html.est3 .mundo.disena .paper.two .offer::after,html.est3 .mundo.disena .paper.two .offer.o1::after,html.est3 .mundo.disena .paper.two .offer.o2::after{display:none}
html.est3 .party{border-radius:var(--r-card)}
html.est3 .equi,html.est3 .conf-mail{border-radius:18px;border:1.5px solid rgba(198,161,90,.45)}
html.est3 .equi-dos>div{border-radius:12px}
html.est3 .equi-f{border-radius:0 12px 12px 0}
html.est3 .graf .aviso-mail{border-radius:18px}
html.est3 .cita{border-left-color:var(--rborde)}
/* Campos: caja redondeada con borde rosa, como la landing */
html.est3 .txt,html.est3 .sel,html.est3 .ms-b{border:2px solid var(--rborde);border-radius:var(--r-campo);background-color:var(--campo);padding:10px 16px;min-height:48px}
html.est3 .sel,html.est3 .ms-b{padding-right:40px;background-position:right 16px center}
html.est3 .txt:focus,html.est3 .sel:focus,html.est3 .ms-b:focus{outline:2px solid var(--bclaro);outline-offset:2px}
html.est3 .ms.open .ms-b{border-color:var(--bclaro)}
html.est3 .ans textarea{border:2px solid var(--rborde);background:var(--campo)}
html.est3 .fld.bad .txt,html.est3 .q.bad .txt,html.est3 .q.bad .ms-b,html.est3 .fld.bad .ms-b{border-color:var(--bclaro);border-width:2px}
html.est3 .ans.bad textarea{border-color:var(--bclaro)}
html.est3 .fld{gap:6px}
/* Pastillas y opciones: borde rosa; la elegida, rosa claro con borde borgoña */
html.est3 .chip,html.est3 .pl-o span{border:1.5px solid var(--rborde);background:var(--campo);color:var(--borgona)}
html.est3 .chip.on,html.est3 .pl-o input:checked+span{background:var(--rosa);border:2px solid var(--bclaro);color:var(--borgona)}
html.est3 .offer .chip,html.est3 .offer.o1 .chip,html.est3 .offer.o2 .chip{border:1.5px solid var(--rborde);font-weight:400}
html.est3 .offer .chip.on,html.est3 .offer.o1 .chip.on,html.est3 .offer.o2 .chip.on{background:var(--rosa);border:2px solid var(--bclaro);color:var(--borgona)}
html.est3 .btn-msg{border-color:var(--rborde)}
html.est3 .pal{border-radius:12px}
html.est3 .paper.two{background:none;border:0;border-radius:0}
html.est3 .ac[data-paso="7"] .ac-b{border-radius:var(--r-card);background:var(--hoja);border:1.5px solid var(--rhair);box-shadow:0 18px 40px -24px rgba(74,30,28,.35)}
/* Tu boceto: la visión y la hoja de Tus números, también redondeadas y sin el marco interior */
html.est3 .vcard{border-radius:var(--r-card);overflow:hidden}
html.est3 .sheet{border-radius:var(--r-card);transform:none;background:var(--hoja);border:1.5px solid var(--rhair);box-shadow:0 22px 50px -26px rgba(74,30,28,.4)}
html.est3 .sheet::before{display:none}
html.est3 .pto{border-radius:16px}

/* ===== Formato acordeón (Kim, 22/10): se ve con ?estetica=4 (clases .est3 y .est4, sobre .est2) =====
   Como las páginas del challenge: cada mundo con su título centrado y debajo una lista vertical, con los
   pasos alineados a la izquierda sobre una línea que une los círculos. El paso hecho queda en una tarjeta
   rosa con la tilde; el abierto despliega su hoja a la derecha de la línea; los de candado esperan su turno. */
html.est4{--rail-x:36px}
html.est4 .mundo-t::before{display:none !important}
html.est4 .mundo-t{margin-bottom:22px}
/* la línea: del centro de un círculo al centro del siguiente, dentro de cada mundo */
html.est4 .ac:not([data-paso="7"])::before{content:"";position:absolute;z-index:0;left:calc(20px + var(--rail-x));top:40px;bottom:-40px;border-left:1.5px solid rgba(138,44,66,.28)}
html.est4 .ac[data-st="hecho"]:not([data-paso="7"])::before{border-left-color:var(--rborde)}
html.est4 .ac:not([data-paso="7"]) .ac-h{position:relative;z-index:1}
/* la cabecera: círculo a la izquierda, título y resumen a su lado */
html.est4 .ac:not([data-paso="7"]) .ac-b{flex-direction:row !important;align-items:flex-start;text-align:left;gap:16px;min-height:80px;padding:12px 18px 12px 8px;border-radius:18px;transition:background-color .3s}
html.est4 .ac:not([data-paso="7"]) .ac-t{align-items:flex-start !important;padding-top:10px}
html.est4 .ac .ac-aviso{text-align:left;padding:0 0 0 calc(var(--rail-x) + 36px)}
/* círculos: con fondo para tapar la línea; el de candado también */
html.est4 .mundo .ac[data-st="bloqueado"]:not([data-paso="7"]) .ac-n::before{opacity:1 !important;background:var(--claro) !important;border:1px solid var(--rhair) !important}
/* el paso hecho: tarjeta rosa con el círculo rosa y la tilde */
html.est4 .mundo .ac[data-st="hecho"]:not([data-paso="7"]) .ac-b{background:var(--rosa)}
html.est4 .mundo .ac[data-st="hecho"]:not([data-paso="7"]) .ac-n::before{background:var(--rborde) !important;border-color:var(--rborde) !important}
html.est4 .mundo .ac[data-st="hecho"] .ac-n svg{stroke:var(--borgona) !important}
@media (hover:hover){html.est4 .mundo .ac[data-st="hecho"]:not([data-paso="7"]) .ac-b:hover{background:#F6D3DD}}
/* la hoja del paso abierto, a la derecha de la línea */
html.est4 .mundo .ac:not([data-paso="7"]) .ac-p{margin:4px 0 26px calc(var(--rail-x) + 36px);z-index:1}
@media (max-width:767px){
  html.est4 .ac:not([data-paso="7"])::before{left:calc(12px + var(--rail-x))}
  html.est4 .ac .ac-aviso{padding-left:12px}
}
/* Formato acordeón, segunda vuelta (Kim, 22/10), como dia-01-sueno-con.html: solo los 6 pasos numerados, sin los
   títulos de los mundos, unidos por una línea punteada; cada uno se abre y se cierra con la flechita de la
   derecha; al pasar el mouse, un rosa muy sutil. Tu boceto aparece recién cuando se desbloquea. */
html.est4 .mundo-t{display:none}
html.est4 .mundo{overflow:visible;padding:0}
html.est4 .mundo.sona{padding-top:clamp(40px,6vw,72px)}
html.est4 .mundo.materia{padding-bottom:64px}
html.est4 .ac[data-paso="7"][data-st="bloqueado"]{display:none}
/* la línea punteada, de un paso al siguiente sin cortarse entre mundos (hasta el 6) */
html.est4 .mundo>.ac:last-of-type::before{display:block}
html.est4 .ac[data-st="hecho"]:not([data-paso="7"])::before{border-left-color:var(--rborde)}
html.est4 .ac[data-paso="6"]::before,html.est4 .ac[data-paso="7"]::before{display:none}
/* los círculos, numerados del 1 al 6 (sin candado): borde borgoña claro; el abierto, rosa suave; el hecho, rosa con tilde */
html.est4 .mundo .ac:not([data-paso="7"]) .ac-n::before{inset:0 !important;background:var(--claro) !important;border:2px solid var(--bclaro) !important;opacity:1 !important;box-shadow:none !important}
html.est4 .mundo .ac:not([data-paso="7"]) .ac-n b{font-size:18px;letter-spacing:.08em;color:var(--bclaro) !important}
html.est4 .mundo .ac[data-st="bloqueado"]:not([data-paso="7"]) .ac-n::before{border-color:rgba(138,44,66,.35) !important}
html.est4 .mundo .ac[data-st="bloqueado"]:not([data-paso="7"]) .ac-n b{color:rgba(138,44,66,.5) !important}
html.est4 .mundo .ac[data-st="abierto"]:not([data-paso="7"]) .ac-n::before{background:var(--rosa) !important}
html.est4 .mundo .ac[data-st="hecho"]:not([data-paso="7"]) .ac-n::before{background:var(--rborde) !important;border-color:var(--rborde) !important}
html.est4 .mundo .ac[data-st="hecho"] .ac-n svg{width:22px;height:22px;stroke-width:2.2}
html.est4 .mundo .ac[data-st="abierto"]:not([data-paso="7"]) .ac-tt{color:var(--borgona) !important}
/* la flechita: abajo si está cerrado, arriba si está abierto */
html.est4 .ac:not([data-paso="7"]) .ac-b::after{content:"";flex:none;width:12px;height:12px;margin:22px 6px 0 auto;border-right:2px solid var(--bclaro);border-bottom:2px solid var(--bclaro);transform:rotate(45deg);transition:transform .35s var(--ease),margin .35s var(--ease)}
html.est4 .ac.ac-ab:not([data-paso="7"]) .ac-b::after{transform:rotate(-135deg);margin-top:28px}
html.est4 .ac[data-st="bloqueado"]:not([data-paso="7"]) .ac-b::after{opacity:.4}
/* cada cabecera se puede tocar (también la del paso abierto, para cerrarlo); hover rosa sutil; el hecho queda rosa */
html.est4 .ac:not([data-paso="7"]) .ac-b{cursor:pointer !important}
html.est4 .mundo .ac:not([data-paso="7"]) .ac-b:hover{background:rgba(248,224,224,.35)}
html.est4 .mundo .ac[data-st="hecho"]:not([data-paso="7"]) .ac-b,html.est4 .mundo .ac[data-st="hecho"]:not([data-paso="7"]) .ac-b:hover{background:var(--rosa)}
html.est4 .ac:not([data-paso="7"]) .ac-b:focus-visible{outline:2px solid var(--bclaro);outline-offset:4px}
@media (prefers-reduced-motion:reduce){html.est4 .ac .ac-b::after{transition:none}}
/* El texto del hero sobre las nubes, sin la sombra oscura que tenía sobre la foto */
html.est3 .tpe .sub,html.est3 .tpe .ttl,html.est3 .tpe .eb{text-shadow:none}

/* El índice, alineado con el de "Luces y sombras de tu negocio" (Kim, 22/10): círculos de 56 px (44 en el
   celular) con el número en dos cifras, "Paso N" arriba del título, título y resumen en Playfair itálica,
   la línea fina y continua entre círculos, y el contenido alineado con el título. */
html.est4{--c:56px;--g:26px}
@media (max-width:767px){html.est4{--c:44px;--g:12px}}
html.est4 .ac:not([data-paso="7"]){max-width:760px;padding:0 18px}
html.est4 .ac:not([data-paso="7"]) .ac-b{gap:var(--g);padding:10px 14px 14px 0;min-height:0}
html.est4 .ac:not([data-paso="7"]) .ac-n{width:var(--c);height:var(--c)}
@media (max-width:767px){html.est4 .mundo .ac:not([data-paso="7"]) .ac-n b{font-size:15px}}
html.est4 .ac:not([data-paso="7"]) .ac-t{padding-top:4px}
html.est4 .ac-kk{font:400 12px/1.4 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--bronce)}
html.est4 .mundo .ac:not([data-paso="7"]) .ac-tt{margin:.2em 0 .15em;font-size:clamp(26px,3.4vw,40px) !important;line-height:1.1;text-wrap:balance}
html.est4 .mundo .ac:not([data-paso="7"]) .ac-r{font:italic 400 clamp(16px,1.6vw,19px)/1.35 var(--disp);max-width:none}
html.est4 .ac:not([data-paso="7"]) .ac-b::after{margin:22px 0 0 auto}
html.est4 .ac.ac-ab:not([data-paso="7"]) .ac-b::after{margin-top:28px}
@media (max-width:767px){html.est4 .ac:not([data-paso="7"]) .ac-b::after{margin-top:18px}html.est4 .ac.ac-ab:not([data-paso="7"]) .ac-b::after{margin-top:24px}}
/* la línea: 2 px continua, del centro de un círculo al siguiente */
html.est4 .ac:not([data-paso="7"])::before{left:calc(18px + var(--c) / 2 - 1px);top:calc(10px + var(--c));bottom:0;border-left:2px solid rgba(138,44,66,.35)}
html.est4 .ac[data-st="hecho"]:not([data-paso="7"])::before{border-left-color:var(--rborde)}
html.est4 .ac:not([data-paso="7"]){padding-bottom:clamp(14px,2vw,22px)}
/* la hoja del paso abierto y el aviso, alineados con el título */
html.est4 .mundo .ac:not([data-paso="7"]) .ac-p{margin:8px 0 10px calc(var(--c) + var(--g))}
html.est4 .ac .ac-aviso{padding:0 0 0 calc(var(--c) + var(--g))}
@media (max-width:767px){html.est4 .mundo .ac:not([data-paso="7"]) .ac-p{margin:8px 0 10px}html.est4 .ac.ac-ab:not([data-paso="7"])::before{display:none}}
/* los pasos con candado se leen igual que los demás (como el índice); solo el círculo y la flechita quedan más claros */
html.est4 .mundo .ac[data-st="bloqueado"]:not([data-paso="7"]) .ac-tt{opacity:1}
/* Escala tipográfica del sitio (la de programa.html, Kim 22/10): los títulos de la lista de pasos como subtítulo
   de bloque (23 / 28 px), el resumen del paso hecho 15 / 17 y el título del hero 72 px como máximo en la compu */
html.est4 .mundo .ac:not([data-paso="7"]) .ac-tt{font-size:23px !important}
html.est4 .mundo .ac:not([data-paso="7"]) .ac-r{font-size:15px}
@media (min-width:768px){
  html.est4 .mundo .ac:not([data-paso="7"]) .ac-tt{font-size:28px !important}
  html.est4 .mundo .ac:not([data-paso="7"]) .ac-r{font-size:17px}
}
html.est3 .hero.tpe:not(.mini) .ttl .main{font-size:clamp(34px,5.4vw,72px)}
/* "Empezar →" del hero: borde rosa, sin fondo (Kim, 22/10) */
html.est3 .tpe .btn.ghost{background:transparent;border:2px solid var(--rborde);color:var(--borgona)}
html.est3 .tpe .btn.ghost:hover{background:rgba(245,163,199,.16)}
/* Paso con candado: un candadito en lugar de la flechita (Kim, 23/10). Mismo color y trazo que la flechita */
html.est4 .mundo .ac[data-st="bloqueado"]:not([data-paso="7"]) .ac-b::after{width:16px;height:19px;margin:18px 4px 0 auto;border:0;transform:none;opacity:.55;background:var(--bclaro);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 19' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><rect x='1.5' y='8' width='13' height='9.5' rx='2'/><path d='M4.5 8V5.5a3.5 3.5 0 0 1 7 0V8'/><path d='M8 11.8v2.2'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 19' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><rect x='1.5' y='8' width='13' height='9.5' rx='2'/><path d='M4.5 8V5.5a3.5 3.5 0 0 1 7 0V8'/><path d='M8 11.8v2.2'/></svg>") center/contain no-repeat}
@media (max-width:767px){html.est4 .mundo .ac[data-st="bloqueado"]:not([data-paso="7"]) .ac-b::after{margin-top:14px}}
/* Paso 2: el texto largo de Kim arriba de la pregunta (24/10), con un ancho cómodo para leer */
.hd2 .sueno-txt{max-width:58ch;text-wrap:pretty}
/* Tu boceto: el teléfono a la izquierda y, al lado, la tarjeta de tu negocio soñado (Kim, 24/10) */
.r2{grid-template-columns:340px minmax(0,1fr)}
@media (max-width:767px){.r2{grid-template-columns:1fr}}
.meta{display:flex;flex-direction:column;align-items:center;gap:4px;padding:clamp(32px,4vw,52px) clamp(22px,4vw,48px);text-align:center;background:linear-gradient(rgba(250,226,230,.5),rgba(250,226,230,.38)),url(/assets/boceto/hero-nubes.jpg) 62% center/cover no-repeat;border:1.5px solid rgba(245,163,199,.55);border-radius:22px;box-shadow:0 18px 40px -24px rgba(74,30,28,.35)}
.meta[hidden]{display:none}
.meta>p{margin:0}
.meta-f{font:400 12px/1.4 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--bclaro);margin-bottom:10px !important}
.meta-c{font:italic 400 clamp(18px,1.8vw,21px)/1.35 var(--disp);color:var(--borgona)}
.meta-n{font:400 clamp(34px,4vw,48px)/1.1 var(--disp);color:var(--bclaro);letter-spacing:-.01em;margin:2px 0 !important}
.meta-c+.meta-l{margin-top:2px !important}
.meta-l{font:400 clamp(16px,1.5vw,18px)/1.45 var(--serif);color:var(--tinta);max-width:34ch}
.meta-l b{font:400 1.25em var(--disp);color:var(--bclaro)}
.meta-l+.meta-c{margin-top:12px !important}
.meta p.meta-c:nth-of-type(4){margin-top:14px !important}
.meta-cierre{margin-top:18px !important;font:italic 400 clamp(20px,2vw,24px)/1.3 var(--disp);color:var(--bclaro)}
.meta-l .nw{white-space:nowrap}
@media (max-width:1023px){.r2 .rphone{order:1}.r2 .meta{order:2}}
.meta-c b{font-weight:400;font-style:normal;color:var(--bclaro)}
.meta p.meta-c:nth-of-type(4){margin-top:0 !important}
.meta-n+.meta-c+.meta-c{margin-top:14px !important}
/* El "$" va adelante del número (Kim, 24/10) */
.unit b[data-cur]{order:-1;font:400 clamp(20px,2vw,24px) var(--disp);letter-spacing:0;color:var(--bclaro);padding-bottom:12px}
/* Paso 3: el mensaje de la clienta como un globo de WhatsApp (Kim, 24/10): aparece entero, con un salto suave
   desde la esquina de abajo a la izquierda */
html.est3 .cita{align-self:flex-start;max-width:min(calc(100% - 8px),30em);margin:0 0 0 8px;padding:12px 16px 14px;border:0;border-radius:18px 18px 18px 4px;background:#FFFFFF;box-shadow:0 1px 1px rgba(74,30,28,.08),0 8px 22px -14px rgba(74,30,28,.35)}
html.est3 .cita::before{content:"";position:absolute;left:-7px;bottom:0;width:14px;height:14px;background:#FFFFFF;clip-path:polygon(100% 0,100% 100%,0 100%);border-bottom-left-radius:3px}
html.est3 .cita p{font:400 clamp(16px,1.5vw,18px)/1.5 var(--serif);color:var(--tinta)}
.cita.llega{animation:globo .42s cubic-bezier(.34,1.56,.64,1) both;transform-origin:0 100%}
@keyframes globo{from{opacity:0;transform:translateY(10px) scale(.55)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cita.llega{animation:none}}
html.est3 .ab section{border-radius:18px;border:1.5px solid rgba(198,161,90,.45)}html.est3 .ab section#ptoB{border-color:var(--rhair)}
/* Qué te frena: se pueden elegir varias (Kim, 03/11). El aviso, chico, debajo de la pregunta */
.q p.pl-varias{margin:-4px 0 2px;font:italic 400 15px/1.4 var(--serif);color:var(--bronce)}