/* ============================================================
   Landing SantosBE · clave en blanco, formas redondeadas.
   Tipografía Inter en peso regular con tracking cerrado; todo el contraste sale de grises.
   Las piezas flotan a distinta velocidad al deslizar; un botón fijo lleva al formulario.
   Ajustes solo de celular → dentro de @media (max-width:699px).
   ============================================================ */
@font-face{font-family:'Inter';src:url('fonts/inter-latin.woff2') format('woff2');font-weight:300 600;font-style:normal;font-display:swap}

:root{
  --ink:#111213; --txt:#5d6066; --soft:#8b8e94; --ghost:#ececea;
  --line:rgba(17,18,19,.1); --line-2:rgba(17,18,19,.24);
  --panel:#f4f4f2; --paper:#fff; --err:#a8261d;
  --gut:max(24px,env(safe-area-inset-left,0px));
  --e:cubic-bezier(.19,.8,.22,1);
  --col:560px;
  --r-s:14px; --r-m:18px; --r-l:30px;
  --z:.9;   /* escala del formulario y la agenda: se ajusta acá y todo mantiene sus proporciones */
}
*{box-sizing:border-box;margin:0;padding:0}
/* Página fija: se desliza pero no se pellizca ni se agranda con doble toque */
html{-webkit-text-size-adjust:100%;overflow-x:clip;touch-action:pan-x pan-y;overscroll-behavior-x:none}
body{position:relative;min-height:100svh;overflow-x:clip;font-family:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;font-optical-sizing:auto;color:var(--ink);background:linear-gradient(#fff 0,#fff 44%,#f0f0ee 100%);-webkit-font-smoothing:antialiased;letter-spacing:-.018em;line-height:1.4}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}

/* Ejes de fondo (solo computadora) */
.ejes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ejes i{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(var(--line) 0,var(--line) 62%,transparent 94%)}
.ejes .e1{left:3.2%}.ejes .e2{left:25.1%}.ejes .e3{left:74.9%}.ejes .e4{left:96.8%}
.ejes b{position:absolute;top:30px;left:-11px;width:23px;height:23px;border:1px solid var(--line-2);border-radius:50%;background:#fff;display:grid;place-items:center;font-size:10px;font-weight:400;letter-spacing:0;color:var(--soft)}

.page{position:relative;display:flex;flex-direction:column;align-items:center;padding:30px var(--gut) 0}

/* Cabecera: logo + confianza */
.top{display:flex;flex-direction:column;align-items:center;gap:16px}
.logo{height:20px;aspect-ratio:254/39;width:auto;fill:var(--ink)}
.proof{display:inline-flex;align-items:center;gap:10px;background:var(--panel);border-radius:999px;padding:5px 16px 5px 5px;font-size:13px;letter-spacing:-.012em;font-variant-numeric:tabular-nums}
.avs{display:flex}
.avs img{width:30px;height:30px;border-radius:50%;border:2px solid var(--panel);margin-left:-5px}
.avs img:first-child{margin-left:0}

/* Oferta */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:40px;max-width:980px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--txt)}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)}
h1{font-size:clamp(32px,4.5vw,64px);line-height:1.1;letter-spacing:-.043em;font-weight:400;margin-top:16px;color:#83868c;text-wrap:balance}
/* Lo importante del título va en tinta y subrayado, con los extremos redondos */
h1 .mk{color:var(--ink);padding-bottom:.11em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(var(--ink),var(--ink)) 3px calc(100% - 2.25px)/calc(100% - 6px) 1.5px no-repeat,
             radial-gradient(circle,var(--ink) 2.5px,transparent 3px) 0 100%/6px 6px no-repeat,
             radial-gradient(circle,var(--ink) 2.5px,transparent 3px) 100% 100%/6px 6px no-repeat}
.w{display:inline-block}
.sub{font-size:clamp(16px,1.3vw,19px);line-height:1.4;letter-spacing:-.022em;color:var(--txt);max-width:32em;margin-top:24px;text-wrap:pretty}

/* /atlas: más aire entre el logo, las empresas y los textos */
.atlas .top{gap:22px}
.atlas .hero{margin-top:52px}
.atlas h1{margin-top:22px}
.atlas .sub{margin-top:30px}
.atlas .obra{margin-top:66px}

/* Elemento flotante: palabra de fondo, fotos y plano a distintas alturas */
.obra{position:relative;width:min(1360px,100vw);container-type:inline-size;margin-top:52px;aspect-ratio:100/46;overflow-x:clip}
.ghost{position:absolute;inset:0 0 auto;text-align:center;white-space:nowrap;font-size:22.4cqw;line-height:.86;letter-spacing:-.06em;background:linear-gradient(#e4e4e2 18%,#f6f6f5 92%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;will-change:transform}
.pz{position:absolute;will-change:transform}
.pz .in{height:100%;overflow:hidden;background:#e9e9e7;border-radius:26px;box-shadow:0 40px 60px -42px rgba(17,18,19,.34);animation:flota 8s ease-in-out infinite alternate}
.pz img{width:100%;height:100%;object-fit:cover}
.pz.casa{left:4%;top:40%;width:31%;aspect-ratio:3/2;z-index:1}
.pz.edificio{left:37.5%;top:16%;width:25%;aspect-ratio:4/5;z-index:2}
.pz.interior{left:73%;top:33%;width:20.5%;aspect-ratio:4/5;z-index:1}
.pz.planta{left:25.4%;top:66%;width:17.6%;aspect-ratio:400/352;z-index:3}
.pz.planta .in{background:#fff;padding:3.5%;border-radius:22px;box-shadow:0 0 0 1px var(--line),0 30px 46px -28px rgba(17,18,19,.3);animation-duration:6.5s;animation-delay:-2s}
.pz.planta img{object-fit:contain}
.pz.casa .in{animation-delay:-3.4s}.pz.interior .in{animation-duration:9.5s;animation-delay:-5s}
@keyframes flota{to{transform:translateY(-9px)}}
.cot{position:absolute;left:14px;right:14px;top:-16px;height:6px;transform-origin:0 50%;background:linear-gradient(var(--line-2),var(--line-2)) 0 50%/100% 1px no-repeat}
.cot::before,.cot::after{content:"";position:absolute;top:0;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.cot::before{left:0}.cot::after{right:0}

/* Formulario */
.card{zoom:var(--z);position:relative;width:min(var(--col),calc(100% * var(--z)));background:var(--panel);border-radius:var(--r-l);padding:32px 34px 36px;margin-top:64px;scroll-margin-top:16px;box-shadow:0 56px 90px -66px rgba(17,18,19,.2)}
.card-head{font-size:15px;line-height:1.36;letter-spacing:-.016em;padding-bottom:20px;border-bottom:1px solid var(--line);text-wrap:pretty}
.card-top{display:flex;align-items:flex-end;justify-content:space-between;margin-top:22px;min-height:46px}
.num{display:block;font-size:56px;line-height:.8;letter-spacing:-.06em;color:#d2d2cf;font-variant-numeric:tabular-nums;overflow:hidden;padding:2px 4px 2px 0}
.num span{display:block;animation:roll .55s var(--e)}
@keyframes roll{from{transform:translateY(105%)}to{transform:none}}
.card.fin .card-top{display:none}
.card-nav{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--txt);font-variant-numeric:tabular-nums}
.back{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--ink);visibility:hidden}
.back.show{visibility:visible}
/* Progreso: una pastilla por paso */
.cota{display:flex;gap:6px;height:4px;margin:18px 0 34px}
.cota i{flex:1;height:4px;border-radius:99px;background:linear-gradient(var(--ink),var(--ink)) 0 0/0 100% no-repeat,rgba(17,18,19,.1);transition:background-size .6s var(--e)}
.cota i.on{background-size:100% 100%,auto}
.q{animation:qin .55s var(--e)}
.q.out{animation:qout .17s ease-in forwards}
@keyframes qin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes qout{to{opacity:0;transform:translateY(-8px)}}
.q h2{font-size:26px;line-height:1.14;letter-spacing:-.036em;font-weight:400;text-wrap:balance}
.q .hint{font-size:14.5px;line-height:1.42;color:var(--txt);margin-top:12px;text-wrap:pretty}
.opts{display:grid;gap:10px;margin-top:28px}
.opt{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;padding:20px 22px;background:#fff;border-radius:var(--r-m);font-size:16px;letter-spacing:-.02em;transition:color .22s}
.opt::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateY(101%);transition:transform .42s var(--e)}
.arr{flex:0 0 16px;width:16px;height:16px;transition:transform .35s var(--e),color .2s}
.opt .arr{color:var(--soft)}
.opt.sel{color:#fff}.opt.sel::before{transform:none}.opt.sel .arr{color:#fff}
@media (hover:hover){.opt:hover{color:#fff}.opt:hover::before{transform:none}.opt:hover .arr{color:#fff;transform:translate(2px,-2px)}.btn:hover .arr{transform:translate(2px,-2px)}.btn:hover{background:#2b2c2f}}

.fields{display:grid;gap:22px;margin-top:28px}
.f label,.fields label{display:block;font-size:13px;color:var(--txt);margin-bottom:9px}
.field{--base:transparent;width:100%;padding:17px 18px;border:0;border-radius:var(--r-s);font:inherit;font-size:16px;letter-spacing:-.02em;color:var(--ink);outline:none;background:#fff;box-shadow:inset 0 0 0 1px var(--base);transition:box-shadow .25s}
.field:focus{--base:var(--ink)}
.field.err{--base:var(--err)}
.field::placeholder{color:#a7a9ad}
.tel{display:flex;gap:8px}
.tel select{flex:0 0 104px;padding-right:30px;appearance:none;-webkit-appearance:none;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6066' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 13px center}
.tel input{flex:1;min-width:0}
.nota{font-size:13px;line-height:1.36;color:var(--txt);margin-top:10px}
.msg{font-size:13px;color:var(--err);margin-top:8px;display:none}
.msg.show{display:block}
.btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:20px 22px;border-radius:var(--r-m);background:var(--ink);color:#fff;font-size:16px;letter-spacing:-.02em;text-decoration:none;margin-top:30px;transition:background .25s}
.btn:active{background:#000}
.btn[disabled]{background:#c9c9c6;color:#fff;pointer-events:none}
.btn.line{background:var(--panel);color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Botón flotante: lleva al formulario y se va cuando el formulario aparece */
.ir{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;box-shadow:0 16px 34px -12px rgba(17,18,19,.5);transform:translateX(-50%);transition:transform .55s var(--e),opacity .3s}
.ir svg{width:15px;height:15px}
.ir.fuera{transform:translate(-50%,calc(100% + 34px));opacity:0;pointer-events:none}
.anim .ir{animation:subir .8s var(--e) 1.2s backwards}
@keyframes subir{from{transform:translate(-50%,calc(100% + 34px));opacity:0}}

/* Gracias */
.eyebrow{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink)}
.done h2{font-size:34px;line-height:1.08;letter-spacing:-.044em;margin-top:12px}
.done>p{color:var(--txt);font-size:15.5px;line-height:1.4;margin-top:10px}
.resumen{list-style:none;margin-top:26px;background:#fff;border-radius:var(--r-m);padding:6px 20px}
.resumen li{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;animation:qin .55s var(--e) backwards}
.resumen li:last-child{border-bottom:0}
.resumen span{color:var(--txt);flex:0 0 auto}
.resumen b{font-weight:400;text-align:right;min-width:0;overflow-wrap:anywhere}
.agendar{margin-top:34px}
.agendar h3{font-size:21px;line-height:1.16;letter-spacing:-.032em;font-weight:400}
.agendar p{font-size:14.5px;line-height:1.4;color:var(--txt);margin-top:8px}
.agendar .btn{margin-top:22px}

/* Debajo del formulario */
.ticks{list-style:none;display:grid;gap:16px;width:min(var(--col),100%);margin-top:56px}
.ticks li{display:flex;gap:14px;font-size:16px;line-height:1.4;letter-spacing:-.02em}
.ticks li::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--ink);margin-top:.5em}
.regla{width:min(var(--col),100%);height:5px;margin-top:64px;background:radial-gradient(circle,var(--line-2) 1.2px,transparent 1.6px) 0 50%/12px 5px repeat-x}
.faq{width:min(var(--col),100%);margin-top:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;font-size:18px;line-height:1.2;letter-spacing:-.028em;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 15px;height:15px;margin-top:3px;background:linear-gradient(var(--ink),var(--ink)) 50% 50%/100% 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 50% 50%/1px 100% no-repeat;transition:transform .45s var(--e)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding:0 34px 28px 0;color:var(--txt);font-size:15.5px;line-height:1.5;letter-spacing:-.014em;text-wrap:pretty}
.legal{width:min(var(--col),100%);font-size:12px;line-height:1.5;color:var(--soft);margin-top:40px}
.foot{position:relative;height:9.6vw;margin-top:72px;padding-inline:var(--gut);overflow:hidden}
.foot svg{width:100%;height:auto}

/* Agenda */
.modal{position:fixed;inset:0;z-index:50;background:rgba(17,18,19,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px;overflow-y:auto;animation:fade .3s}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.sheet{zoom:var(--z);position:relative;width:min(540px,100%);background:#fff;border-radius:var(--r-l);padding:32px 30px 30px;animation:qin .6s var(--e)}
.x{position:absolute;top:20px;right:20px;width:38px;height:38px;display:grid;place-items:center;background:var(--panel);border-radius:50%}
.ag-head h2{font-size:27px;line-height:1.12;letter-spacing:-.038em;font-weight:400;padding-right:48px;text-wrap:balance}
.ag-sub{font-size:14.5px;line-height:1.4;color:var(--txt);margin-top:10px}
.demo{font-size:12.5px;color:var(--soft);margin-top:8px}
.ag-step{font-size:13px;color:var(--txt);margin:26px 0 11px}
.days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-30px;padding-inline:30px}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 60px;padding:12px 0 11px;background:var(--panel);border-radius:var(--r-s);display:grid;gap:3px;justify-items:center;transition:background .2s,color .2s}
.day small{font-size:11.5px;color:var(--txt);text-transform:capitalize}
.day b{font-size:21px;font-weight:400;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.day.sel{background:var(--ink);color:#fff}.day.sel small{color:rgba(255,255,255,.66)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:184px;overflow-y:auto;padding:1px}
.slot{padding:13px 0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:12px;font-size:14.5px;font-variant-numeric:tabular-nums;animation:qin .4s var(--e) backwards;transition:background .2s,color .2s}
.slot.sel{background:var(--ink);color:#fff;box-shadow:none}
@media (hover:hover){.day:not(.sel):hover,.slot:not(.sel):hover{background:#e8e8e5}}
.empty{font-size:15px;color:var(--txt);margin-top:18px}
.sheet .fields{margin-top:26px;gap:18px}
.sheet .field{background:var(--panel)}
.sheet .btn{margin-top:16px}
.elegido{font-size:14.5px;letter-spacing:-.02em;margin-top:4px;min-height:20px}
.elegido::first-letter{text-transform:uppercase}
.ag-ok{padding:6px 0 2px}
.ag-ok h2{font-size:30px;line-height:1.1;letter-spacing:-.042em;font-weight:400;margin-top:12px}
.ag-ok .cuando{font-size:17px;letter-spacing:-.024em;margin-top:12px}
.ag-ok p{font-size:14.5px;line-height:1.4;color:var(--txt);margin-top:8px}
.ag-ok b{font-weight:400;color:var(--ink)}

/* Animaciones de entrada. .anim la pone sbe.js: sin JS todo queda quieto y completo. */
.anim .top>*{opacity:0;transform:translateY(8px);transition:opacity .7s,transform .9s var(--e)}
.anim .top.in>*{opacity:1;transform:none}
.anim .top.in>.proof{transition-delay:.1s}
.anim .avs img{opacity:0;transform:scale(.55);transition:opacity .5s,transform .8s var(--e)}
.anim .top.in .avs img{opacity:1;transform:none}
.anim .top.in .avs img:nth-child(1){transition-delay:.25s}.anim .top.in .avs img:nth-child(2){transition-delay:.35s}.anim .top.in .avs img:nth-child(3){transition-delay:.45s}.anim .top.in .avs img:nth-child(4){transition-delay:.55s}
.anim .kicker,.anim .sub{opacity:0;transform:translateY(10px);transition:opacity .8s,transform 1s var(--e)}
.anim .kicker.in,.anim .sub.in{opacity:1;transform:none}
.anim .w{clip-path:inset(-14% -8% 114% -8%);transform:translateY(.26em);transition:clip-path .95s var(--e),transform .95s var(--e)}
.anim .w.in{clip-path:inset(-14% -8% -22% -8%);transform:none}
.anim h1 .mk{background-size:0 1.5px,0 0,0 0;transition:background-size 1s var(--e)}
.anim h1 .mk.in{background-size:calc(100% - 6px) 1.5px,6px 6px,6px 6px}
.anim .pz img{clip-path:inset(100% 0 0 0);transform:scale(1.16);transition:clip-path 1.25s var(--e),transform 1.7s var(--e)}
.anim .obra.in .pz img{clip-path:inset(0);transform:none}
.anim .pz.edificio img{transition-delay:.0s}.anim .pz.casa img{transition-delay:.14s}.anim .pz.interior img{transition-delay:.26s}.anim .pz.planta img{transition-delay:.5s}
.anim .ghost{opacity:0;transition:opacity 1.4s}
.anim .obra.in .ghost{opacity:1}
.anim .cot{transform:scaleX(0);transition:transform 1.1s var(--e) .7s}
.anim .obra.in .cot{transform:none}
.anim .pz.planta .in{opacity:0;transition:opacity .9s .5s}
.anim .obra.in .pz.planta .in{opacity:1}
.anim .rv>*{opacity:0;transform:translateY(14px);transition:opacity .7s,transform .9s var(--e)}
.anim .rv.in>*{opacity:1;transform:none}
.anim .rv.in>:nth-child(2){transition-delay:.09s}.anim .rv.in>:nth-child(3){transition-delay:.18s}
.ejes i{transform-origin:50% 0}
.anim .ejes i{transform:scaleY(0);transition:transform 2.2s var(--e)}
.anim .ejes.in i{transform:none}
.anim .ejes b{opacity:0;transition:opacity .6s .7s}
.anim .ejes.in b{opacity:1}

/* Celular: la mayoría del tráfico llega desde anuncios */
@media (max-width:699px){
  :root{--gut:max(20px,env(safe-area-inset-left,0px));--r-m:16px;--r-l:26px}
  .ejes{display:none}
  .page{padding-top:20px}
  .logo{height:18px}
  .top{gap:12px}
  .proof{font-size:12.5px;padding:4px 14px 4px 4px;gap:9px}
  .avs img{width:28px;height:28px;margin-left:-4px}
  .hero{margin-top:24px}
  .kicker{font-size:12.5px}
  h1{font-size:clamp(24px,6.9vw,38px);line-height:1.14;margin-top:10px}
  .sub{font-size:clamp(14px,3.72vw,15.5px);line-height:1.42;margin-top:14px}
  .obra{aspect-ratio:100/64;margin-top:24px}
  .pz .in{border-radius:18px;border:3px solid #fff;box-shadow:0 22px 32px -24px rgba(17,18,19,.36)}
  .pz.casa{left:-6%;top:30%;width:40%;aspect-ratio:1/1}
  .pz.edificio{left:29%;top:12%;width:42%;aspect-ratio:4/4.7}
  .pz.interior{left:66%;top:24%;width:39%;aspect-ratio:4/4.8}
  .pz.planta{left:7%;top:60%;width:29%}
  .pz.planta .in{border-radius:14px;border:0;padding:4%}
  .cot{top:-11px;left:12px;right:12px}
  .atlas .page{padding-top:26px}
  .atlas .top{gap:18px}
  .atlas .hero{margin-top:36px}
  .atlas h1{margin-top:15px}
  .atlas .sub{margin-top:20px}
  .atlas .obra{margin-top:34px}
  .card{margin-top:40px;padding:26px 22px 28px}
  .card-head{font-size:14.5px;padding-bottom:18px}
  .card-top{margin-top:18px;min-height:40px}
  .num{font-size:46px}
  .cota{margin:16px 0 28px}
  .q h2{font-size:23.5px}
  .q .hint{font-size:14px}
  .opts{margin-top:24px}
  .tel select{padding-left:14px;padding-right:24px}
  .opt{padding:19px 18px;font-size:15.5px}
  .btn{font-size:15.5px;padding:19px 18px;margin-top:26px}
  .fields{gap:20px;margin-top:24px}
  .field{padding:16px}
  /* Con menos de 16 px reales el iPhone acerca la pantalla al tocar el campo */
  .card .field,.sheet .field{font-size:calc(16px / var(--z))}
  .field::placeholder{font-size:calc(1em * var(--z))}
  .done h2{font-size:30px}
  .resumen{padding:4px 16px}
  .resumen li{font-size:13.5px;padding:13px 0}
  .ticks{margin-top:48px}
  .ticks li{font-size:15px}
  .regla{margin-top:52px}
  .faq summary{font-size:16.5px;padding:22px 0}
  .faq details p{padding-right:10px;font-size:14.5px}
  .foot{margin-top:56px;height:9.4vw}
  .modal{padding:0;place-items:end stretch}
  .sheet{width:100%;border-radius:26px 26px 0 0;padding:28px 22px calc(22px + env(safe-area-inset-bottom,0px));max-height:92svh;overflow-y:auto}
  .days{margin-inline:-22px;padding-inline:22px}
  .ag-step{margin:20px 0 9px}
  .sheet .fields{margin-top:20px;gap:14px}
  .sheet .field{padding:14px 16px}
  .ag-head h2{font-size:24px}
  .x{top:18px;right:16px}
}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}